|
+
5 Graphic filters: the filter property |
|---|
|
background-image-blur-repaint |
= |
|
CSS Filters: Repaint of element with background-image and blur filter
- An element with background-image and a filter should be rendered correctly after other elements on the page change size. You should see a 50x50 green box over a blurred background.
|
|
css-filters-animation-blur |
= |
|
CSS Filters Animation: Blur
- The blue square should be 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
|
|
css-filters-animation-contrast |
= |
|
CSS Filters Animation: Contrast
- The black square should be gray
|
|
css-filters-animation-drop-shadow |
= |
|
CSS Filters Animation: Drop Shadow
- The blue square should be on top of a gray one
|
|
css-filters-animation-grayscale |
= |
|
CSS Filters Animation: Grayscale
- The blue square should be half-grayscaled
|
|
css-filters-animation-hue-rotate |
= |
|
CSS Filters Animation: Hue-rotate
- The blue square should be violet
|
|
css-filters-animation-invert |
= |
|
CSS Filters Animation: Invert
- The black square should be gray
|
|
css-filters-animation-opacity |
= |
|
CSS Filters Animation: Opacity
- The black square should be gray
|
|
css-filters-animation-saturate |
= |
|
CSS Filters Animation: Saturate
- The blue square should be light-blue
|
|
css-filters-animation-sepia |
= |
|
CSS Filters Animation: Sepia
- The blue square should be half-sepia
|
|
dynamic-filter-changes-001 |
= |
|
CSS Filters: dynamic filter changes on images with will-change: transform
- A filtered image should be visible after adding a filter to an image with will-change: transform.
|
|
effect-reference-delete |
= |
|
CSS Filters: reference to deleted SVG filter
- Check that a CSS filter no longer affects its target element after having deleted the SVG element referenced from the CSS filter.
|
|
effect-reference-feimage-001 |
= |
|
CSS Filters: feImage and CSS reference filters.
- This test ensures that CSS reference filters supports feImage.
|
|
effect-reference-feimage-002 |
= |
|
CSS Filters: feImage and CSS reference filters.
- This test ensures that CSS reference filters with 'will-change: transform' supports feImage.
|
|
effect-reference-feimage-003 |
= |
|
CSS Filters: feImage and CSS reference filters.
- This test ensures that CSS reference filters support a dynamically attached feImage.
|
|
effect-reference-on-span |
= |
|
CSS Filters: filters on <span> elements
- Check that a CSS filter to a <span> element works as expected.
|
|
effect-reference-on-transparent-element |
= |
|
CSS Filters: SVG filter on transparent element
- Check that applying a SVG filter to a transparent element works as expected. You should see a green lime colored square.
|
|
effect-reference-rename-001 |
= |
|
CSS Filters: reference to renamed SVG filter
- Check that a SVG filter, initially named differently than what an element expects, gets applied to such element once renamed with the expected value.
|
|
feflood-with-filter-reference |
= |
|
Filter primitive (feFlood) with filter reference
|
|
feimage-circular-reference-foreign-object-crash |
|
|
CSS Filters: filter reference a SVG foreign object.
- Test ensures that updating a filter which references a SVG foreign object through feImage with a circular reference does not crash.
|
|
feimage-reference-foreign-object-crash |
|
|
CSS Filters: filter reference a SVG foreign object.
- Test ensures that updating a filter which references a SVG foreign object through feImage does not crash.
|
|
feimage-target-child-reference-crash |
|
|
feImage referencing a child of the filter's target element
|
|
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-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.
|
|
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.
|
|
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.
|
|
filter-saturate-001-test |
= |
|
Test for Saturate short hand
- the test passes if you see gray box.
|
|
filter-url-to-non-existent-filter-001 |
= |
|
CSS Filters: url() with non-existent filter reference
- Tests that a non-existent filter reference is gracefully ignored.
|
|
filter-with-abspos |
|
|
Filtered block becomes containing block of absolutely positioned child
- A filtered block will be a containing block for absolutely positioned descendants. If all this takes place inside a multicol container, this means that the absolutely positioned box also has the multicol container in its containing block, which means that it should be fragmented.
|
|
filtered-block-is-container |
= |
|
CSS Filter: Filtered block establishes a containing block.
|
|
filtered-html-is-not-container |
= |
|
CSS Filter: Filtered html element does not establish a containing block.
|
|
filtered-inline-applies-to-float |
= |
|
- A filter on an inline element applies to floats.
|
|
filtered-inline-is-container |
= |
|
CSS Filter: Filtered inline establishes a containing block reference.
|
|
filters-drop-shadow-002 |
= |
|
CSS Filters: drop-shadow filter on element with clipped children
- Check that clipping gets correctly applied on children of a container with a drop-shadow filter in effect.
|
|
filters-grayscale-001-test |
= |
|
Test grayscale shorthand with value 1
- If the test runs, you should see a black olive colored rectangle.
|
|
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.
|
|
filters-sepia-001-test |
= |
|
Test sepia shorthand with value 1
- If the test runs, you should see a field drab colored rectangle.
|
|
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.
|
|
svg-filter-vs-clip-path |
= |
|
Filter Effects: 'filter' and 'clip-path' on SVG element
|
|
svg-filter-vs-mask |
= |
|
Filter Effects: 'filter' and 'mask' on SVG element
|
|
svg-multiple-filter-functions |
= |
|
Filter Effects: filter with multiple filter functions on SVG element
|
|
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-function-to-url |
= |
|
Filter Effects: switching from hue-rotate() to url() 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-mutation-url-to-function |
= |
|
Filter Effects: switching from url() to hue-rotate() on an SVG element
|
|
svg-relative-urls-001 |
= |
|
CSS Filter Effects: SVG-based filters and relative URLs
- This test checks that relative SVG filter references in inline styles are correct after an element moves documents.
|
|
svg-shorthand-drop-shadow-001 |
= |
|
Filter Effects: drop-shadow() function on SVG element
|
|
svg-shorthand-hue-rotate-001 |
= |
|
Filter Effects: hue-rotate() function on SVG element
|