Filter Effects Level 1 CR Test Suite

Shorthands defined in terms of the filter element (8 tests)

Test Refs Flags Info
+ 13 Shorthands defined in terms of the filter element
+ 13.1 Filter primitive representation
+ 13.1.1 grayscale
+ 13.1.2 sepia
+ 13.1.3 saturate
filter-saturate-001-test = Test for Saturate short hand
  • the test passes if you see gray box.
+ 13.1.4 hue-rotate
filter-external-001-test = SVG load external SVG Filter (ID attribute)
  • the test passes if you see green box.
filter-external-002-test = SVG load external SVG Filter (svg file)
  • the test passes if you see green box.
filter-hue_rotate-001-test = CSS filter hue rotate: CSS hue rotate filter shorthand
  • CSS hue rotate filter will apply a matrix to rotate the hue. Since angle is 0, it has no affect on the rectangle.
+ 13.1.5 invert
filter-invert-001-test = CSS filter grayscale: CSS grayscale filter shorthand
  • CSS invert filter will apply a color matrix to the div element to invert the colors. Since invert is 0, it has no affect on the div.
filter-invert-002-test = CSS filter invert: CSS invert filter shorthand
  • CSS invert filter will apply a color matrix to the rectangle to invert the colors. Since invert is 100%, the yellow rectangle should become blue.
+ 13.1.6 opacity
+ 13.1.7 brightness
+ 13.1.8 contrast
+ 13.1.9 blur
+ 13.1.10 drop-shadow
drop-shadow-clipped-001 = CSS Filters: drop-shadow clipping
  • This test ensures that the overflowing parts of drop-shadowed elements cast shadows.
filters-drop-shadow-001 = drop-shadow offset test
  • This test verifies that the drop-shadow shorthand works. Green box with green shadow. The shadows appear 10px down and 20px right under the Green box. The red box must not appear under the Green box.
+ 13.2 Filter region for shorthands