Filter Effects Level 1 CR Test Suite

Filter Functions (54 tests)

Test Refs Flags Info
+ 6 Filter Functions
svg-multiple-filter-functions = Filter Effects: filter with multiple filter functions on SVG element
svg-mutation-function-to-url = Filter Effects: switching from hue-rotate() to url() on an SVG element
svg-mutation-url-to-function = Filter Effects: switching from url() to hue-rotate() on an SVG element
+ 6.1 Supported Filter Functions
backdrop-filters-grayscale-001 = CSS Backdrop Filters: Grayscale(50%)
  • Check that backdrop-filter works with grayscale(50%).
backdrop-filters-grayscale-002 = CSS Backdrop Filters: Grayscale(100%) with transparent background color
  • Check that backdrop-filter works with grayscale(100%) and a transparent background color.
backdrop-filters-grayscale-003 = CSS Backdrop Filters: Grayscale(100%) with no background
  • Check that backdrop-filter works with grayscale(100%) and no background.
filter-cb-abspos-inline-001 = CSS Filter: Establishing containing block for absolutely-positioned elements, on an inline element
  • A value other than none for the filter property results in the creation of a containing block for absolute and fixed positioned descendants unless the element it applies to is a document root element in the current browsing context.
  • A value of 100% leaves the input unchanged.
filter-cb-abspos-inline-002 = DOM/JS CSS Filter: Establishing containing block for absolutely-positioned elements, on an inline element
  • A value other than none for the filter property results in the creation of a containing block for absolute and fixed positioned descendants unless the element it applies to is a document root element in the current browsing context.
  • A value of 100% leaves the input unchanged.
filter-cb-abspos-inline-003 = DOM/JS CSS Filter: Establishing containing block for absolutely-positioned elements, on an inline element
  • A value other than none for the filter property results in the creation of a containing block for absolute and fixed positioned descendants unless the element it applies to is a document root element in the current browsing context.
  • A value of 100% leaves the input unchanged.
filter-grayscale-001 = apply a filter to a div with background-color
  • The background color of an div element change when a grayscale filter apply
filter-grayscale-002 = apply a filter to a div with background-color
  • grayscale syntax (zero percent)
filter-grayscale-003 = apply a filter to a div with background-color
  • grayscale syntax (zero)
filter-grayscale-004 = apply a filter to a div with background-color
  • grayscale syntax (1)
filter-grayscale-005 = apply a filter to a div with background-color
  • grayscale syntax (300%, clamp to 1)
clip-under-filter-001 = CSS Filters: Clips on descendants of filter elements are applied
  • Check that there is a blurred square, left half blue and right half green.
clip-under-filter-002 = CSS Filters: Clips on descendants of filter elements are applied
  • Check that there is a blurred square, left half blue and right half green
css-filters-animation-blur = CSS Filters Animation: Blur
  • The blue square should be 10px blurred
css-filters-animation-combined-001 = CSS Filters Animation: Combined filters 001
  • The black square should be a gray square 10px blurred
css-filters-animation-brightness = CSS Filters Animation: Brightness
  • The blue square should be dark blue
css-filters-animation-combined-001 = CSS Filters Animation: Combined filters 001
  • The black square should be a gray square 10px blurred
filters-test-brightness-001 = drop-shadow offset test
  • This test verifies that the brightness shorthand works. Green rectangle must shown, when brightness set to 100%.
filters-test-brightness-002 = drop-shadow offset test
  • This test verifies that the brightness shorthand works. Black rectangle must shown, when brightness set 0%.
filters-test-brightness-003 = CSS Filter Effects: brightness(...) without argument
  • This test verifies that the brightness shorthand works. Green rectangle must shown, when brightness is not set.
css-filters-animation-contrast = CSS Filters Animation: Contrast
  • The black square should be gray
filter-contrast-001 = CSS Filter contrast: CSS contrast filter shotrhand
  • CSS contrast filter will apply a component transfer to the div element to adjust the contrast of the colors. Since contrast is 100%, it will leave unchanged.
filter-contrast-002 = CSS Filter contrast: CSS contrast filter shotrhand
  • CSS contrast filter will apply a component transfer to the div element to adjust the contrast of the colors. Since contrast is 0%, it must be the completely gray.
filter-contrast-003 = CSS Filter contrast: Test for CSS contrast filter shorthand
  • CSS contrast filter will apply a component transfer to the div element to adjust the contrast of the colors. Since contrast is 200%, it will be less contrast.
css-filters-animation-drop-shadow = CSS Filters Animation: Drop Shadow
  • The blue square should be on top of a gray one
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.
svg-mutation-drop-shadow-color = Filter Effects: changing color of drop-shadow() function on an SVG element
svg-mutation-drop-shadow-offset = Filter Effects: changing offset of drop-shadow() function on an SVG element
svg-mutation-group-position-changed = Filter Effects: changing the position of an SVG group with filter
svg-mutation-group-size-changed = Filter Effects: changing the size of an SVG group with filter
svg-mutation-group-transform-changed = Filter Effects: changing the transform of an SVG group with filter
svg-mutation-object-position-changed = Filter Effects: changing the position of an SVG element with filter
svg-mutation-object-size-changed = Filter Effects: changing the size of an SVG element with filter
svg-mutation-object-transform-changed = Filter Effects: changing the transform of an SVG element with filter
svg-mutation-single-to-multiple-001 = Filter Effects: extending the filter chain with an additional function on SVG element
svg-mutation-single-to-multiple-002 = Filter Effects: extending the filter chain with an additional function on SVG element
svg-shorthand-drop-shadow-001 = Filter Effects: drop-shadow() function on SVG element
css-filters-animation-combined-001 = CSS Filters Animation: Combined filters 001
  • The black square should be a gray square 10px blurred
css-filters-animation-grayscale = CSS Filters Animation: Grayscale
  • The blue square should be half-grayscaled
filters-grayscale-001-test = Test grayscale shorthand with value 1
  • If the test runs, you should see a black olive colored rectangle.
css-filters-animation-combined-001 = CSS Filters Animation: Combined filters 001
  • The black square should be a gray square 10px blurred
css-filters-animation-hue-rotate = CSS Filters Animation: Hue-rotate
  • The blue square should be violet
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.
svg-mutation-single-to-multiple-001 = Filter Effects: extending the filter chain with an additional function on SVG element
svg-shorthand-hue-rotate-001 = Filter Effects: hue-rotate() function on SVG element
css-filters-animation-combined-001 = CSS Filters Animation: Combined filters 001
  • The black square should be a gray square 10px blurred
css-filters-animation-invert = CSS Filters Animation: Invert
  • The black square should be gray
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.
css-filters-animation-combined-001 = CSS Filters Animation: Combined filters 001
  • The black square should be a gray square 10px blurred
css-filters-animation-opacity = CSS Filters Animation: Opacity
  • The black square should be gray
filters-opacity-001-test = Test opacity shorthand with value 1
  • CSS opacity filter will apply a transparency to the div element. Since opacity is 1, it has no affect on the div.
filters-opacity-002-test = Test opacity shorthand with value 0
  • CSS opacity filter will apply a transparency to the div element. Since opacity is 0, it has affect on the div to be transparent.
css-filters-animation-combined-001 = CSS Filters Animation: Combined filters 001
  • The black square should be a gray square 10px blurred
css-filters-animation-saturate = CSS Filters Animation: Saturate
  • The blue square should be light-blue
filter-saturate-001-test = Test for Saturate short hand
  • the test passes if you see gray box.
css-filters-animation-combined-001 = CSS Filters Animation: Combined filters 001
  • The black square should be a gray square 10px blurred
css-filters-animation-sepia = CSS Filters Animation: Sepia
  • The blue square should be half-sepia
filters-sepia-001-test = Test sepia shorthand with value 1
  • If the test runs, you should see a field drab colored rectangle.
+ 6.2 Computed Values of Filter Functions
+ 6.3 Serialization of Filter Functions
+ 6.4 Interpolation of Filter Functions