CSS Masking Level 1 CR Test Suite

Positioned Masks (73 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-1d = CSS Masking: mask-image: mask layer image
  • Test checks whether treat unresolvable mask as no-mask for a SVG element embedded in HTML document.
mask-image-2 = CSS Masking: mask-image: mask layer image
  • Test checks whether gradient CSS image as mask layer works correctly or not.
mask-image-3a = CSS Masking: mask-image: multiple SVG masks
  • Test checks whether SVG mask as mask layer works correctly or not.
mask-image-3b = CSS Masking: mask-image: interleave SVG mask with image mask
  • Test checks whether SVG mask and image as mask layer works correctly or not.
mask-image-3c = CSS Masking: mask-image: interleave SVG mask with image mask
  • Test checks whether SVG mask and image as mask layer works correctly or not.
mask-image-3d = CSS Masking: mask-image: interleave SVG mask with image mask
  • Test checks whether SVG mask and image as mask layer works correctly or not.
mask-image-3e = CSS Masking: mask-image: interleave SVG mask with image mask
  • Test checks whether SVG mask and image as mask layer works correctly or not.
mask-image-3f = CSS Masking: mask-image: SVG masks apply on border area
  • Test checks whether SVG mask layer can be positioned on box-shadow area correctly or not.
mask-image-3g = CSS Masking: mask-image: SVG masks apply on border area
  • Test checks whether apply transfrom to a SVG mask layer works correctly or not.
mask-image-3h = CSS Masking: clip-path in SVG mask
  • Test checks whether clip-path in SVG mask works correctly or not.
mask-image-3i = CSS Masking: mask-image: interleave SVG mask with image mask
  • Test checks whether SVG mask and image as mask layer works correctly or not.
mask-image-4a = CSS Masking: mask-image: unresovlable mask url
  • Test checks non-existent url should be counted as an image layer of transparent black.
mask-image-4b = CSS Masking: mask-image: unresovlable mask url
  • Test checks a mask reference to a none-mask SVG element should be counted as an image layer of transparent black.
mask-image-5 = CSS Masking: mask-image: data url mask
  • Test checks handling data url mask correctly.
mask-image-6 = CSS Masking: mask on inline element
  • Test checks whether mask on inline elemnt works correctly or not.
mask-opacity-1a = CSS Masking: mask-image: mask with filter and opacity
  • Test checks whether apply opacity to masked element correctly or not.
mask-opacity-1b = CSS Masking: mask-image: mask with opacity
  • Test checks whether apply opacity to masked element correctly or not.
mask-opacity-1c = CSS Masking: mask-image: filter with opacity
  • Test checks whether apply opacity to masked element correctly or not.
mask-opacity-1d = CSS Masking: mask-image: mask with opacity
  • Test checks whether apply opacity to masked element correctly or not.
mask-opacity-1e = CSS Masking: mask-image: mask with opacity
  • Test checks whether apply opacity to masked element 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.
mask-mode-to-mask-type = CSS Masking: mask-mode with vector image
  • Test checks the fallback logic between mask-mode and mask-type.
+ 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, content-box and no-clip values of mask-clip should clip to the appropriate boxes.
mask-clip-2 = CSS Masking: mask-clip: clip mask image
  • fill-box, stroke-box and view-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.
mask-origin-3 = CSS Masking: mask-origin: mask positioning area
  • Test checks whether setting mask position area 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-1c = CSS Masking: mask-composite: compose svg mask
  • Test checks that vector-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.
mask-composite-2c = CSS Masking: mask-composite: compose SVG mask
  • Test checks that svg-mask 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