CSS Masking Level 1 CR Test Suite

Positioned Masks (49 tests)

Test Refs Flags Info
+ 7 Positioned Masks
+ 7.1 Mask Image Source: the mask-image property
mask-image-1a = CSS Masking: mask-image: mask layer image
  • Test checks whether image as mask layer works correctly or not.
mask-image-1b = CSS Masking: mask-image: mask layer image
  • Test checks whether SVG image as mask layer works correctly or not.
mask-image-1c = CSS Masking: mask-image: mask layer image
  • Test checks whether SVG mask element as mask layer works correctly or not.
mask-image-2 = CSS Masking: mask-image: mask layer image
  • Test checks whether gradient CSS image as mask layer works correctly or not.
+ 7.2 Mask Image Interpretation: the mask-mode property
mask-mode-a = CSS Masking: mask-mode with vector image
  • Test checks that mask an SVG image referenced by mask-image is correct with different mask mode.
mask-mode-b = CSS Masking: mask-mode with raster image
  • Test checks that mask a PNG image referenced by mask-image is correct with different mask mode.
+ 7.3 Tiling Mask Images: The mask-repeat property
mask-repeat-1 = CSS Masking: mask-repeat: repeated mask layer image
  • Test checks whether repeated mask layer works correctly or not.
mask-repeat-2 = CSS Masking: mask-repeat: repeated mask layer image
  • Test checks whether repeated mask layer works correctly or not.
mask-repeat-3 = CSS Masking: mask-repeat: repeated mask layer image
  • Test checks whether repeated mask layer works correctly or not.
test-mask = CSS Masking: mask-repeat:round repeat;
  • Test checks that the mask-repeart value
+ 7.4 Positioning Mask Images: the mask-position property
mask-position-1a = CSS Masking: mask-position: mask positioning
  • Test checks whether positioning mask layer works correctly or not.
mask-position-1b = CSS Masking: mask-position: mask positioning
  • Test checks whether positioning mask layer works correctly or not.
mask-position-1c = CSS Masking: mask-position: mask positioning
  • Test checks whether positioning mask layer works correctly or not.
mask-position-2a = CSS Masking: mask-position: mask positioning
  • Test checks whether positioning mask layer works correctly or not.
mask-position-2b = CSS Masking: mask-position: mask positioning
  • Test checks whether positioning mask layer works correctly or not.
mask-position-3a = CSS Masking: mask-position: mask positioning
  • Test checks whether positioning mask layer works correctly or not.
mask-position-3b = CSS Masking: mask-position: mask positioning
  • Test checks whether positioning mask layer works correctly or not.
mask-position-4a = CSS Masking: mask-position: mask positioning
  • Test checks whether positioning mask layer works correctly or not.
mask-position-4b = CSS Masking: mask-position: mask positioning
  • Test checks whether positioning mask layer works correctly or not.
mask-position-4c = CSS Masking: mask-position: mask positioning
  • Test checks whether positioning mask layer works correctly or not.
mask-position-4d = CSS Masking: mask-position: mask positioning
  • Test checks whether positioning mask layer works correctly or not.
mask-position-5 = CSS Masking: mask-position: mask positioning
  • Test checks whether positioning mask layer works correctly or not.
mask-position-6 = CSS Masking: mask-position: mask positioning
  • Test checks whether positioning mask layer works correctly or not.
mask-position-7 = CSS Masking: mask-position: mask positioning
  • Test checks whether positioning mask layer works correctly or not.
+ 7.5 Masking Area: the mask-clip property
mask-clip-1 = CSS Masking: mask-clip: clip mask image
  • border-box, padding-box, and content-box values of mask-clip should clip to the appropriate boxes.
+ 7.6 Positioning Area: the mask-origin property
mask-origin-1 = CSS Masking: mask-origin: mask positioning area
  • Test checks whether setting mask position area works correctly or not.
mask-origin-2 = CSS Masking: mask-origin: mask positioning area
  • Test checks whether setting mask origin to margin-box works correctly or not.
+ 7.7 Sizing Mask Images: the mask-size property
mask-size-auto = CSS Masking: mask-size: mask layer size
  • Test checks whether sizing mask layer works correctly or not.
mask-size-auto-auto = CSS Masking: mask-size: mask layer size
  • Test checks whether sizing mask layer works correctly or not.
mask-size-auto-length = CSS Masking: mask-size: mask layer size
  • Test checks whether sizing mask layer works correctly or not.
mask-size-auto-percent = CSS Masking: mask-size: mask layer size
  • Test checks whether sizing mask layer works correctly or not.
mask-size-contain = CSS Masking: mask-size: mask layer size
  • Test checks whether sizing mask layer works correctly or not.
mask-size-contain-clip-border = CSS Masking: mask-size: mask layer size
  • Test checks whether sizing mask layer works correctly or not.
mask-size-contain-clip-padding = CSS Masking: mask-size: mask layer size
  • Test checks whether sizing mask layer works correctly or not.
mask-size-contain-position-fifty-fifty = CSS Masking: mask-size: mask layer size
  • Test checks whether sizing mask layer works correctly or not.
mask-size-cover = CSS Masking: mask-size: mask layer size
  • Test checks whether sizing mask layer works correctly or not.
mask-size-length = CSS Masking: mask-size: mask layer size
  • Test checks whether sizing mask layer works correctly or not.
mask-size-length-auto = CSS Masking: mask-size: mask layer size
  • Test checks whether sizing mask layer works correctly or not.
mask-size-length-length = CSS Masking: mask-size: mask layer size
  • Test checks whether sizing mask layer works correctly or not.
mask-size-length-percent = CSS Masking: mask-size: mask layer size
  • Test checks whether sizing mask layer works correctly or not.
mask-size-percent = CSS Masking: mask-size: mask layer size
  • Test checks whether sizing mask layer works correctly or not.
mask-size-percent-auto = CSS Masking: mask-size: mask layer size
  • Test checks whether sizing mask layer works correctly or not.
mask-size-percent-length = CSS Masking: mask-size: mask layer size
  • Test checks whether sizing mask layer works correctly or not.
mask-size-percent-percent = CSS Masking: mask-size: mask layer size
  • Test checks whether sizing mask layer works correctly or not.
mask-size-percent-percent-stretch = CSS Masking: mask-size: mask layer size
  • Test checks whether sizing mask layer works correctly or not.
+ 7.8 Compositing mask layers: the mask-composite property
mask-composite-1a = CSS Masking: mask-composite: compose vector image
  • Test checks that vector-mask-image can be composed correctly by different mask-composite value.
mask-composite-1b = CSS Masking: mask-composite: compose raster image
  • Test checks that raster-mask-image can be composed correctly by different mask-composite value.
mask-composite-2a = CSS Masking: mask-composite: compose vector image
  • Test checks that vector-mask-image can be composed correctly by different mask-composite value.
mask-composite-2b = CSS Masking: mask-composite: compose raster image
  • Test checks that raster-mask-image can be composed correctly by different mask-composite value.
+ 7.9 Mask Shorthand: the mask property
+ 7.10 The Mask Image Rendering Model
+ 7.10.1 Mask processing
+ 7.10.2 Layering Multiple Mask Images