|
+
5 Clipping Paths |
|---|
|
clip-absolute-positioned-001 |
= |
|
CSS Masking: Test clip property and rect function on div with position: absolute
- The clip property should clip elements whose layout are governed by the CSS box model and that are abolutely positioned with 'position: absolute;'. On pass you should see a green square and no red.
|
|
clip-absolute-positioned-002 |
= |
|
CSS Masking: Test clip property and rect function on div with position: fixed
- The clip property should clip elements whose layout are governed by the CSS box model and that are abolutely positioned with 'position: fixed;'. On pass you should see a green square and no red.
|
|
clip-negative-values-001 |
= |
|
CSS Masking: Test clip property does not clip on with negative values - 1
- Negative values are permitted on rect function for clip. Test that whole element is clipped if bottom edge is before top edge. On pass you should see a green square and no red.
|
|
clip-negative-values-002 |
= |
|
CSS Masking: Test clip property does not clip on with negative values - 2
- Negative values are permitted on rect function for clip. Test that whole element is clipped if right edge is before left edge. On pass you should see a green square and no red.
|
|
clip-negative-values-003 |
= |
|
CSS Masking: Test clip property does not clip on with negative values - 3
- Negative values are permited on rect function for clip. Test that left edge can be negative. On pass you should see a vertical blue stripe.
|
|
clip-negative-values-004 |
= |
|
CSS Masking: Test clip property does not clip on with negative values - 4
- Negative values are permited on rect function for clip. Test that top edge can be negative. On pass you should see a horizontal blue stripe.
|
|
clip-no-clipping-001 |
= |
|
CSS Masking: Test clip property does not clip on 'auto'
- The clip property should on 'auto'. On pass you should see a green box with a blue border.
|
|
clip-no-clipping-002 |
= |
|
CSS Masking: Test clip property does not clip overflowing content on 'auto'.
- The clip property should not clip overflowing content of elements whose layout are governed by the CSS box model, the position is absolute and the clip value is 'auto'. On pass you should see a a green square with a blue border.
|
|
clip-not-absolute-positioned-001 |
= |
|
CSS Masking: Test clip property and rect function on not absolutely positioned div - 1
- The clip property should be ignored on elements whose layout are governed by the CSS box model and are not abolutely positioned. On pass you should see a green square with a blue border.
|
|
clip-not-absolute-positioned-002 |
= |
|
CSS Masking: Test clip property and rect function on not absolutely positioned div - 2
- The clip property should be ignored on elements whose layout are governed by the CSS box model and are not abolutely positioned. Creating a stacking context with z-index does not influence clipping behavior. On pass you should see a green box square with a blue border.
|
|
clip-not-absolute-positioned-003 |
= |
|
CSS Masking: Test clip property and rect function on not absolutely positioned div - 3
- The clip property should be ignored on elements whose layout are governed by the CSS box model and are not abolutely positioned. Creating a 3d rednering context does not influence clipping behavior. On pass you should see a green square with a blue border.
|
|
clip-not-absolute-positioned-004 |
= |
|
CSS Masking: Test clip property and rect function on not absolutely positioned div - 4
- The clip property should be ignored on elements whose layout are governed by the CSS box model and are not abolutely positioned. position: relative does not influence clipping behavior. On pass you should see a green square with a blue border.
|
|
clip-path-circle-001 |
= |
|
CSS Masking: Test clip-path property and circle function with absolute values
- The clip-path property takes the basic shape 'circle' for clipping. Test absolute values for arguments. On pass you should see a green circle and no red.
|
|
clip-path-circle-002 |
= |
|
CSS Masking: Test clip-path property and circle function with percentage values
- The clip-path property takes the basic shape 'circle' for clipping. Test percentage values for arguments. If no reference box was specified, percentage is relative to border-box. On pass there should be a green circle.
|
|
clip-path-circle-003 |
= |
|
CSS Masking: Test clip-path property and circle function with percentage radius
- The clip-path property takes the basic shape 'circle' for clipping. Test percentage value as argument for radius and no position arguments. The circle should be in the center of the element. On pass there should be a green circle.
|
|
clip-path-circle-004 |
= |
|
CSS Masking: Test clip-path property and circle function with percentage position
- The clip-path property takes the basic shape 'circle' for clipping. Test percentage value as argument for position and no radius argument. The circle must behave like it has a radius of 'closest-side'. On pass there should be a green circle.
|
|
clip-path-circle-005 |
= |
|
CSS Masking: Test clip-path property and circle function with closest-side
- The clip-path property takes the basic shape 'circle' for clipping. The circle has a radius of 'closest-side'. This test has a squred div-box. Therefore, 'closest-side', 50% and 'farthest-side' show the same behavior. On pass there should be a green circle.
|
|
clip-path-circle-006 |
= |
|
CSS Masking: Test clip-path property and circle function with farthest-side
- The clip-path property takes the basic shape 'circle' for clipping. The circle has a radius of 'farthest-side'. This test has a squred div-box. Therefore, 'closest-side', 50% and 'farthest-side' show the same behavior. On pass there should be a green circle.
|
|
clip-path-circle-007 |
= |
|
CSS Masking: Test clip-path property and circle with closest-side on rectangular div 1
- The clip-path property takes the basic shape 'circle' for clipping. The clipped div box is twice as wide as it is height. With 'closest-side', there should be a full green circle.
|
|
clip-path-circle-008 |
= |
|
CSS Masking: Test clip-path property and circle with closest-side on rectangular div 2
- The clip-path property takes the basic shape 'circle' for clipping. The clipped div box is twice as high as it is wide. With 'closest-side', there should be a full green circle.
|
|
clip-path-element-userspaceonuse-001 |
= |
|
CSS Masking: Test clip-path property and external clipPath reference with userSpaceOnUse - 1
- The clip-path property takes an external reference to a clipPath element for clipping. On pass you should see a green box.
|
|
clip-path-element-userspaceonuse-002 |
= |
|
CSS Masking: Test clip-path property and external clipPath reference with userSpaceOnUse - 2
- The clip-path property takes an reference to a clipPath element for clipping. On pass you should see a green with a blue border.
|
|
clip-path-element-userspaceonuse-003 |
= |
|
CSS Masking: Test clip-path property and external clipPath reference with userSpaceOnUse with percentage - 1
- The clip-path property takes a reference to a clipPath element for clipping. Percentage values are relative to the viewport for userSpaceOnUse on clipPathUnits. On pass the left half of the site is white and the right half of the site is green.
|
|
clip-path-element-userspaceonuse-004 |
= |
|
CSS Masking: Test clip-path property and external clipPath reference with userSpaceOnUse with percentage - 2
- The clip-path property takes a reference to a clipPath element for clipping. Percentage values are relative to the viewport for userSpaceOnUse on clipPathUnits. On pass the top half of the site is white and the bottom half of the site is green.
|
|
clip-path-ellipse-001 |
= |
|
CSS Masking: Test clip-path property and ellipse function with absolute values
- The clip-path property takes the basic shape 'ellipse' for clipping. Test absolute values for radii and position arguments. On pass you should see a green ellipse.
|
|
clip-path-ellipse-002 |
= |
|
CSS Masking: Test clip-path property and ellipse function with percentage values
- The clip-path property takes the basic shape 'ellipse' for clipping. Test percentage values for radii and position arguments. Percentage values are relative to a reference box. If no reference box was specified, percentage values are relative to border-box. On pass you should see a green ellipse.
|
|
clip-path-ellipse-003 |
= |
|
CSS Masking: Test clip-path property and ellipse function with percentage values on square
- The clip-path property takes the basic shape 'ellipse' for clipping. Test percentage values for radii and position arguments. Percentage values are relative to a reference box. If no reference box was specified, percentage values are relative to border-box. On pass there should be a full green circle.
|
|
clip-path-ellipse-004 |
= |
|
CSS Masking: Test clip-path property and ellipse function with different absolute values on square
- The clip-path property takes the basic shape 'ellipse' for clipping. Test absolute values for arguments. On pass you should see a green ellipse.
|
|
clip-path-ellipse-005 |
= |
|
CSS Masking: Test clip-path property and ellipse function with different percentage values on square
- The clip-path property takes the basic shape 'ellipse' for clipping. Test percentage values for radii and position arguments. Percentage values are relative to a reference box. If no reference box was specified, percentage values are relative to border-box. Different values for getting an ellipse from a square. On pass you should see a green ellipse.
|
|
clip-path-ellipse-006 |
= |
|
CSS Masking: Test clip-path property and ellipse function with absolute values
- The clip-path property takes the basic shape 'ellipse' for clipping. Test absolute values for radii and position arguments. On pass you should see a green circle.
|
|
clip-path-ellipse-007 |
= |
|
CSS Masking: Test clip-path property and ellipse function with no arguments
- The clip-path property takes the basic shape 'ellipse' for clipping. If no further arguments were specified, the radii are 'closest-side' each. The position is initialised to the center of the element. On pass there is a full green ellipse.
|
|
clip-path-ellipse-008 |
= |
|
CSS Masking: Test clip-path property and ellipse function with 50% 50%
- The clip-path property takes the basic shape 'ellipse' for clipping. Test percentage values for radii and position arguments. Percentage values are relative to a reference box. If no reference box was specified, percentage values are relative to border-box. Both radii are specified with percentage values. The position is initialised to the center of the element. On pass there is a full green ellipse.
|
|
clip-path-filter-radius-clips |
= |
|
- For crbug.com/1099234, ensure correct clip hierarchy with clip-path, filter and border radius clips
|
|
clip-path-polygon-001 |
= |
|
CSS Masking: Test clip-path property and polygon function with absolute values
- The clip-path property takes the basic shape 'polygon' for clipping. Test absolute value arguments. On pass you should see a green square and no red.
|
|
clip-path-polygon-002 |
= |
|
CSS Masking: Test clip-path property and polygon function with percentage values
- The clip-path property takes the basic shape 'polygon' for clipping. Test percentage values for arguments. Percentage values are relative to specified reference box. If no reference box was specified, percentage values are relative to border-box. A number of percentage values are specified as coordinates. On pass you should see a green square and no red.
|
|
clip-path-polygon-003 |
= |
|
CSS Masking: Test clip-path property and polygon function with absolute and percentage values
- The clip-path property takes the basic shape 'polygon' for clipping. Test absolute and percentage value arguments. On pass you should see a green square and no red.
|
|
clip-path-polygon-004 |
= |
|
CSS Masking: Test clip-path property and polygon function with fill rule evenodd
- The clip-path property takes the basic shape 'polygon' for clipping. The point list for the polygon creates a 'hole' with the dimension of the background. With the fill rule 'evenodd', this whole is clipped out. The clipping makes the green background of the parent div box visible. On pass you should see a green box with a blue border.
|
|
clip-path-polygon-005 |
= |
|
CSS Masking: Test clip-path property and polygon function with fill rule nonzero
- The clip-path property takes the basic shape 'polygon' for clipping. The point list for the polygon creates a 'hole' with the dimension of the background of the clipped element. With the fill rule 'nonzero', this hole is clipped out. The clipping makes the green background of the parent div box visible. On pass you should see a green square with a blue border.
|
|
clip-path-polygon-006 |
= |
|
CSS Masking: Test clip-path and polygon with padding-box
- The clip-path property allows specifying basic shapes and reference boxes. This test checks the usage of the correct reference box 'padding-box' for the polygon() function by mixing percentage and absolute values as coordinates. On sucess you should see a green square and no red.
|
|
clip-path-polygon-007 |
= |
|
CSS Masking: Test clip-path and polygon with border-box
- The clip-path property allows specifying basic shapes and reference boxes. This test checks the usage of the correct reference box 'border-box' for the polygon() function by mixing percentage and absolute values as coordinates. On sucess you should see a green vertical stripe next to a lime green vertical stripe. Both should be of equal size.
|
|
clip-path-polygon-008 |
= |
|
CSS Masking: Test clip-path and polygon with margin-box
- The clip-path property allows specifying basic shapes and reference boxes. This test checks the usage of the correct reference box 'margin-box' for the polygon() function by mixing percentage and absolute values as coordinates. On sucess you should see a green vertical stripe next to a lime green vertical stripe. Both should be of equal size.
|
|
clip-path-polygon-009 |
= |
|
CSS Masking: Test clip-path and polygon with content-box
- The clip-path property allows specifying basic shapes and reference boxes. This test checks the usage of the correct reference box 'content-box' for the polygon() function by mixing percentage and absolute values as coordinates. On sucess you should see a green square and no red.
|
|
clip-path-polygon-010 |
= |
|
CSS Masking: Test clip-path and polygon with fill-box
- The clip-path property allows specifying basic shapes and reference boxes. This test checks the usage of the correct reference box. 'fill-box' was specified but is not supported for HTML elements. The used value should be 'border-box' for the polygon() function instead. By mixing percentage and absolute values as coordinates we check the correct used reference box. On sucess you should see a green vertical stripe next to a lime green vertical stripe. Both should be of equal size.
|
|
clip-path-polygon-011 |
= |
|
CSS Masking: Test clip-path and polygon with stroke-box
- The clip-path property allows specifying basic shapes and reference boxes. This test checks the usage of the correct reference box. 'stroke-box' was specified but is not supported for HTML elements. The used value should be 'border-box' for the polygon() function instead. By mixing percentage and absolute values as coordinates we check the correct used reference box. On sucess you should see a green vertical stripe next to a lime green vertical stripe. Both should be of equal size.
|
|
clip-path-polygon-012 |
= |
|
CSS Masking: Test clip-path and polygon with view-box
- The clip-path property allows specifying basic shapes and reference boxes. This test checks the usage of the correct reference box. 'view-box' was specified but is not supported for HTML elements. The used value should be 'border-box' for the polygon() function instead. By mixing percentage and absolute values as coordinates we check the correct used reference box. On sucess you should see a green vertical stripe next to a lime green vertical stripe. Both should be of equal size.
|
|
clip-path-polygon-013 |
= |
|
CSS Masking: Test clip-path and polygon different units
- Test the support of different units for polygon coordinates. The test passes if you see a multiple green and blue stripe pairs. For each pair, the blue and green stripe must be of same length.
|
|
clip-path-svg-invalidate |
= |
|
Clip Path: invalidate composited clip-path via SVG
|
|
clip-path-url-reference-change |
= |
|
Switch from one clip-path url() to another with the same bounds
|
|
clip-path-url-reference-change-from-empty |
= |
|
Switch from an empty to a non-empty clip-path url()
|
|
clip-rect-auto-001 |
= |
|
CSS Masking: Test clip property with rect function and auto values clip to border box - 1
- A value of 'auto' in the rect function is equal to the certain edge of the border box. The content should be clipped to the border box. On pass you see a blue square and a smaller green square in the bottom right corner of the blue square.
|
|
clip-rect-auto-002 |
= |
|
CSS Masking: Test clip property with rect function and auto values clip to border box - 2
- A value of 'auto' in the rect function is equal to the certain edge of the border box. The box shadow should be clipped, since it is painted outside the border box. On pass you should see a green square with a blue border.
|
|
clip-rect-auto-003 |
= |
|
CSS Masking: Test clip property with rect function and auto value for top value
- A value of 'auto' for 'top' in the rect function is equal to the top edge of the border box. The box shadow should be clipped, since it is painted outside the border box. On pass you should see a horizontal green stripe under a horizontal blue stripe.
|
|
clip-rect-auto-004 |
= |
|
CSS Masking: Test clip property with rect function and auto value for right value
- A value of 'auto' for 'right' in the rect function is equal to the top edge of the border box. The box shadow should be clipped, since it is painted outside the border box. On pass you should see a vertical blue stripe on the right side of a vertical green stripe.
|
|
clip-rect-auto-005 |
= |
|
CSS Masking: Test clip property with rect function and auto value for bottom value
- A value of 'auto' for 'bottom' in the rect function is equal to the top edge of the border box. The box shadow should be clipped, since it is painted outside the border box. On pass you should see a horizontal blue stripe under a horizontal green stripe.
|
|
clip-rect-auto-006 |
= |
|
CSS Masking: Test clip property with rect function and auto value for left value
- A value of 'auto' for 'left' in the rect function is equal to the top edge of the border box. The box shadow should be clipped, since it is painted outside the border box. On pass you should see a vertical green stripe on the right side of a vertical blue stripe.
|
|
clip-rule-001 |
= |
|
CSS Masking: Test clip-rule property on polygon clip rule evenodd
- The clipPath element takes the basic shape 'polygon' for clipping. The point list for the polygon creates a 'whole' with the dimension of the background. With the clip rule 'evenodd', this whole is clipped out. The clipping makes the green background of the parent div box visible. On pass you should see a green box with a blue border.
|
|
clip-rule-002 |
= |
|
CSS Masking: Test clip-rule property on polygon clip rule nonzero
- The clipPath element takes the basic shape 'polygon' for clipping. The point list for the polygon creates a 'whole' with the dimension of the background. With the clip rule 'nonzero', this whole is clipped out. The clipping makes the green background of the parent div box visible. On pass you should see a green box with a blue border.
|
|
+
5.1 Clipping Shape: the clip-path property |
|---|
|
clip-path-blending-offset |
= |
|
CSS Masking: Test clip-path with mix-blend-mode with offset
|
|
clip-path-borderbox-1a |
= |
|
CSS Masking: clip-path: clip path border-box
- Test checks whether clip-path border-box works correctly or not. This test is for clip-path applied to an HTML element.
|
|
clip-path-borderbox-1b |
= |
|
CSS Masking: clip-path: clip path border-box
- Test checks whether clip-path border-box works correctly or not. This test is for clip-path applied to an SVG element.
|
|
clip-path-borderbox-1c |
= |
|
CSS Masking: clip-path: clip path border-box
- Test checks whether clip-path border-box works correctly or not. This test is for clip-path applied to an SVG SVG element.
|
|
clip-path-circle-001 |
= |
|
CSS Masking: Test clip-path property and circle function with absolute values
- The clip-path property takes the basic shape 'circle' for clipping. Test absolute values for arguments. On pass you should see a green circle and no red.
|
|
clip-path-circle-002 |
= |
|
CSS Masking: Test clip-path property and circle function with percentage values
- The clip-path property takes the basic shape 'circle' for clipping. Test percentage values for arguments. If no reference box was specified, percentage is relative to border-box. On pass there should be a green circle.
|
|
clip-path-circle-003 |
= |
|
CSS Masking: Test clip-path property and circle function with percentage radius
- The clip-path property takes the basic shape 'circle' for clipping. Test percentage value as argument for radius and no position arguments. The circle should be in the center of the element. On pass there should be a green circle.
|
|
clip-path-circle-004 |
= |
|
CSS Masking: Test clip-path property and circle function with percentage position
- The clip-path property takes the basic shape 'circle' for clipping. Test percentage value as argument for position and no radius argument. The circle must behave like it has a radius of 'closest-side'. On pass there should be a green circle.
|
|
clip-path-circle-005 |
= |
|
CSS Masking: Test clip-path property and circle function with closest-side
- The clip-path property takes the basic shape 'circle' for clipping. The circle has a radius of 'closest-side'. This test has a squred div-box. Therefore, 'closest-side', 50% and 'farthest-side' show the same behavior. On pass there should be a green circle.
|
|
clip-path-circle-006 |
= |
|
CSS Masking: Test clip-path property and circle function with farthest-side
- The clip-path property takes the basic shape 'circle' for clipping. The circle has a radius of 'farthest-side'. This test has a squred div-box. Therefore, 'closest-side', 50% and 'farthest-side' show the same behavior. On pass there should be a green circle.
|
|
clip-path-circle-007 |
= |
|
CSS Masking: Test clip-path property and circle with closest-side on rectangular div 1
- The clip-path property takes the basic shape 'circle' for clipping. The clipped div box is twice as wide as it is height. With 'closest-side', there should be a full green circle.
|
|
clip-path-circle-008 |
= |
|
CSS Masking: Test clip-path property and circle with closest-side on rectangular div 2
- The clip-path property takes the basic shape 'circle' for clipping. The clipped div box is twice as high as it is wide. With 'closest-side', there should be a full green circle.
|
|
clip-path-composition |
|
Script |
clip-path composition
- clip-path supports animation
|
|
clip-path-contentbox-1a |
= |
|
CSS Masking: clip-path: clip path content-box
- Test checks whether clip-path content-box works correctly or not. This test is for clip-path applied to an HTML element.
|
|
clip-path-contentbox-1b |
= |
|
CSS Masking: clip-path: clip path content-box
- Test checks whether clip-path content-box works correctly or not. This test is for clip-path applied to an SVG element.
|
|
clip-path-contentbox-1c |
= |
|
CSS Masking: clip-path: clip path content-box
- Test checks whether clip-path content-box works correctly or not.
|
|
clip-path-document-element |
= |
|
- Clip-path on the document element applies to the root background. The test passes if there is a green 'L' shape without red.
|
|
clip-path-document-element-will-change |
= |
|
- Clip-path on the document element applies to the root background. The test passes if there is a green 'L' shape without red.
|
|
clip-path-fillbox-1a |
= |
|
CSS Masking: clip-path: clip path fill-box
- Test checks whether clip-path fill-box works correctly or not. This test is for clip-path applied to an SVG SVG element.
|
|
clip-path-geometrybox-2 |
= |
|
CSS Masking: clip-path: clip path margin-box
- Test checks whether clip-path margin-box works correctly or not.
|
|
clip-path-inline-001 |
= |
Ahem |
clip-path on inline, horizontal-tb writing-mode
|
|
clip-path-inline-002 |
= |
Ahem |
clip-path on inline, vertical-rl writing-mode
|
|
clip-path-inline-003 |
= |
Ahem |
clip-path on inline, vertical-lr writing-mode
|
|
clip-path-interpolation-001 |
|
Script |
clip-path interpolation
- clip-path supports animation
|
|
clip-path-interpolation-002 |
|
Script |
clip-path-interpolation
- clip-path supports animation
|
|
clip-path-invalid |
|
Script |
CSS Masking Module Level 1: parsing clip-path with invalid values
- clip-path supports only the grammar '<clip-source> | [ <basic-shape> || <geometry-box> ] | none'.
|
|
clip-path-localref-1 |
= |
|
Testcase for clip-path linked to local-ref URL
- Test checks after changing base URL, whether fragment URLs works correctly or not.
|
|
clip-path-marginbox-1a |
= |
|
CSS Masking: clip-path: clip path margin-box
- Test checks whether clip-path margin-box works correctly or not. This test is for clip-path applied to an SVG element.
|
|
clip-path-mix-blend-mode-1 |
= |
|
CSS Masking: clip-path with mix-blend-mode
- Test checks whether clip-path works with mix-blend-mode correctly or not.
|
|
clip-path-paddingbox-1a |
= |
|
CSS Masking: clip-path: clip path padding-box
- Test checks whether clip-path padding-box works correctly or not. This test is for clip-path applied to an HTML element.
|
|
clip-path-paddingbox-1b |
= |
|
CSS Masking: clip-path: clip path padding-box
- Test checks whether clip-path padding-box works correctly or not. This test is for clip-path applied to an SVG element.
|
|
clip-path-paddingbox-1c |
= |
|
CSS Masking: clip-path: clip path padding-box
- Test checks whether clip-path padding-box works correctly or not. This test is for clip-path applied to an SVG SVG element.
|
|
clip-path-rotated-will-change-transform |
= |
|
Clip Path: should be correctly rotated by transform with will-change:transform
|
|
clip-path-strokebox-1a |
= |
|
CSS Masking: clip-path: clip path stroke-box
- Test checks whether clip-path stroke-box works correctly or not. This test is for clip-path applied to an SVG SVG element.
|
|
clip-path-strokebox-1b |
= |
|
CSS Masking: clip-path: clip path stroke-box
- Test checks whether clip-path stroke-box works correctly or not.
|
|
clip-path-svg-invalidate |
= |
|
Clip Path: invalidate composited clip-path via SVG
|
|
clip-path-svg-text-backdrop-filter |
= |
Ahem |
|
|
clip-path-url-reference-change |
= |
|
Switch from one clip-path url() to another with the same bounds
|
|
clip-path-url-reference-change-from-empty |
= |
|
Switch from an empty to a non-empty clip-path url()
|
|
clip-path-valid |
|
Script |
CSS Masking Module Level 1: parsing clip-path with valid values
- clip-path supports the full grammar '<clip-source> | [ <basic-shape> || <geometry-box> ] | none'.
|
|
clip-path-viewbox-1a |
= |
|
CSS Masking: clip-path: clip path view-box
- Test checks whether clip-path view-box works correctly or not.
|
|
clip-path-viewbox-1b |
= |
|
CSS Masking: clip-path: clip path view-box with viewbox
- Test checks whether clip-path view-box with viewbox works correctly or not.
|
|
clip-path-viewbox-1c |
= |
|
CSS Masking: clip-path: clip path view-box
- Test checks whether clip-path view-box works correctly or not. This test is for clip-path applied to an SVG SVG element.
|
|
interpolation |
|
Script |
Tests for the output of the interpolation of clip-path
- This test checks if the inerpolation on clip-path is correct
|
|
reference-mutated |
= |
|
CSS Masking: SVG clipPath dynamically updated.
- Test ensures that SVG clipPath updates properly when dynamically changed.
|
|
reference-nonexisting-existing-local |
= |
|
CSS Masking: fragment of non valid URL as clip.
- Test ensures that only local URLs with a valid fragment result in a valid clip.
|
|
clip-path-element-userspaceonuse-001 |
= |
|
CSS Masking: Test clip-path property and external clipPath reference with userSpaceOnUse - 1
- The clip-path property takes an external reference to a clipPath element for clipping. On pass you should see a green box.
|
|
clip-path-element-userspaceonuse-002 |
= |
|
CSS Masking: Test clip-path property and external clipPath reference with userSpaceOnUse - 2
- The clip-path property takes an reference to a clipPath element for clipping. On pass you should see a green with a blue border.
|
|
clip-path-element-userspaceonuse-003 |
= |
|
CSS Masking: Test clip-path property and external clipPath reference with userSpaceOnUse with percentage - 1
- The clip-path property takes a reference to a clipPath element for clipping. Percentage values are relative to the viewport for userSpaceOnUse on clipPathUnits. On pass the left half of the site is white and the right half of the site is green.
|
|
clip-path-element-userspaceonuse-004 |
= |
|
CSS Masking: Test clip-path property and external clipPath reference with userSpaceOnUse with percentage - 2
- The clip-path property takes a reference to a clipPath element for clipping. Percentage values are relative to the viewport for userSpaceOnUse on clipPathUnits. On pass the top half of the site is white and the bottom half of the site is green.
|
|
clip-path-ellipse-001 |
= |
|
CSS Masking: Test clip-path property and ellipse function with absolute values
- The clip-path property takes the basic shape 'ellipse' for clipping. Test absolute values for radii and position arguments. On pass you should see a green ellipse.
|
|
clip-path-ellipse-002 |
= |
|
CSS Masking: Test clip-path property and ellipse function with percentage values
- The clip-path property takes the basic shape 'ellipse' for clipping. Test percentage values for radii and position arguments. Percentage values are relative to a reference box. If no reference box was specified, percentage values are relative to border-box. On pass you should see a green ellipse.
|
|
clip-path-ellipse-003 |
= |
|
CSS Masking: Test clip-path property and ellipse function with percentage values on square
- The clip-path property takes the basic shape 'ellipse' for clipping. Test percentage values for radii and position arguments. Percentage values are relative to a reference box. If no reference box was specified, percentage values are relative to border-box. On pass there should be a full green circle.
|
|
clip-path-ellipse-004 |
= |
|
CSS Masking: Test clip-path property and ellipse function with different absolute values on square
- The clip-path property takes the basic shape 'ellipse' for clipping. Test absolute values for arguments. On pass you should see a green ellipse.
|
|
clip-path-ellipse-005 |
= |
|
CSS Masking: Test clip-path property and ellipse function with different percentage values on square
- The clip-path property takes the basic shape 'ellipse' for clipping. Test percentage values for radii and position arguments. Percentage values are relative to a reference box. If no reference box was specified, percentage values are relative to border-box. Different values for getting an ellipse from a square. On pass you should see a green ellipse.
|
|
clip-path-ellipse-006 |
= |
|
CSS Masking: Test clip-path property and ellipse function with absolute values
- The clip-path property takes the basic shape 'ellipse' for clipping. Test absolute values for radii and position arguments. On pass you should see a green circle.
|
|
clip-path-ellipse-007 |
= |
|
CSS Masking: Test clip-path property and ellipse function with no arguments
- The clip-path property takes the basic shape 'ellipse' for clipping. If no further arguments were specified, the radii are 'closest-side' each. The position is initialised to the center of the element. On pass there is a full green ellipse.
|
|
clip-path-ellipse-008 |
= |
|
CSS Masking: Test clip-path property and ellipse function with 50% 50%
- The clip-path property takes the basic shape 'ellipse' for clipping. Test percentage values for radii and position arguments. Percentage values are relative to a reference box. If no reference box was specified, percentage values are relative to border-box. Both radii are specified with percentage values. The position is initialised to the center of the element. On pass there is a full green ellipse.
|
|
clip-path-polygon-001 |
= |
|
CSS Masking: Test clip-path property and polygon function with absolute values
- The clip-path property takes the basic shape 'polygon' for clipping. Test absolute value arguments. On pass you should see a green square and no red.
|
|
clip-path-polygon-002 |
= |
|
CSS Masking: Test clip-path property and polygon function with percentage values
- The clip-path property takes the basic shape 'polygon' for clipping. Test percentage values for arguments. Percentage values are relative to specified reference box. If no reference box was specified, percentage values are relative to border-box. A number of percentage values are specified as coordinates. On pass you should see a green square and no red.
|
|
clip-path-polygon-003 |
= |
|
CSS Masking: Test clip-path property and polygon function with absolute and percentage values
- The clip-path property takes the basic shape 'polygon' for clipping. Test absolute and percentage value arguments. On pass you should see a green square and no red.
|
|
clip-path-polygon-004 |
= |
|
CSS Masking: Test clip-path property and polygon function with fill rule evenodd
- The clip-path property takes the basic shape 'polygon' for clipping. The point list for the polygon creates a 'hole' with the dimension of the background. With the fill rule 'evenodd', this whole is clipped out. The clipping makes the green background of the parent div box visible. On pass you should see a green box with a blue border.
|
|
clip-path-polygon-005 |
= |
|
CSS Masking: Test clip-path property and polygon function with fill rule nonzero
- The clip-path property takes the basic shape 'polygon' for clipping. The point list for the polygon creates a 'hole' with the dimension of the background of the clipped element. With the fill rule 'nonzero', this hole is clipped out. The clipping makes the green background of the parent div box visible. On pass you should see a green square with a blue border.
|
|
clip-path-polygon-006 |
= |
|
CSS Masking: Test clip-path and polygon with padding-box
- The clip-path property allows specifying basic shapes and reference boxes. This test checks the usage of the correct reference box 'padding-box' for the polygon() function by mixing percentage and absolute values as coordinates. On sucess you should see a green square and no red.
|
|
clip-path-polygon-007 |
= |
|
CSS Masking: Test clip-path and polygon with border-box
- The clip-path property allows specifying basic shapes and reference boxes. This test checks the usage of the correct reference box 'border-box' for the polygon() function by mixing percentage and absolute values as coordinates. On sucess you should see a green vertical stripe next to a lime green vertical stripe. Both should be of equal size.
|
|
clip-path-polygon-008 |
= |
|
CSS Masking: Test clip-path and polygon with margin-box
- The clip-path property allows specifying basic shapes and reference boxes. This test checks the usage of the correct reference box 'margin-box' for the polygon() function by mixing percentage and absolute values as coordinates. On sucess you should see a green vertical stripe next to a lime green vertical stripe. Both should be of equal size.
|
|
clip-path-polygon-009 |
= |
|
CSS Masking: Test clip-path and polygon with content-box
- The clip-path property allows specifying basic shapes and reference boxes. This test checks the usage of the correct reference box 'content-box' for the polygon() function by mixing percentage and absolute values as coordinates. On sucess you should see a green square and no red.
|
|
clip-path-polygon-010 |
= |
|
CSS Masking: Test clip-path and polygon with fill-box
- The clip-path property allows specifying basic shapes and reference boxes. This test checks the usage of the correct reference box. 'fill-box' was specified but is not supported for HTML elements. The used value should be 'border-box' for the polygon() function instead. By mixing percentage and absolute values as coordinates we check the correct used reference box. On sucess you should see a green vertical stripe next to a lime green vertical stripe. Both should be of equal size.
|
|
clip-path-polygon-011 |
= |
|
CSS Masking: Test clip-path and polygon with stroke-box
- The clip-path property allows specifying basic shapes and reference boxes. This test checks the usage of the correct reference box. 'stroke-box' was specified but is not supported for HTML elements. The used value should be 'border-box' for the polygon() function instead. By mixing percentage and absolute values as coordinates we check the correct used reference box. On sucess you should see a green vertical stripe next to a lime green vertical stripe. Both should be of equal size.
|
|
clip-path-polygon-012 |
= |
|
CSS Masking: Test clip-path and polygon with view-box
- The clip-path property allows specifying basic shapes and reference boxes. This test checks the usage of the correct reference box. 'view-box' was specified but is not supported for HTML elements. The used value should be 'border-box' for the polygon() function instead. By mixing percentage and absolute values as coordinates we check the correct used reference box. On sucess you should see a green vertical stripe next to a lime green vertical stripe. Both should be of equal size.
|
|
clip-path-polygon-013 |
= |
|
CSS Masking: Test clip-path and polygon different units
- Test the support of different units for polygon coordinates. The test passes if you see a multiple green and blue stripe pairs. For each pair, the blue and green stripe must be of same length.
|
|
clip-rule-001 |
= |
|
CSS Masking: Test clip-rule property on polygon clip rule evenodd
- The clipPath element takes the basic shape 'polygon' for clipping. The point list for the polygon creates a 'whole' with the dimension of the background. With the clip rule 'evenodd', this whole is clipped out. The clipping makes the green background of the parent div box visible. On pass you should see a green box with a blue border.
|
|
clip-rule-002 |
= |
|
CSS Masking: Test clip-rule property on polygon clip rule nonzero
- The clipPath element takes the basic shape 'polygon' for clipping. The point list for the polygon creates a 'whole' with the dimension of the background. With the clip rule 'nonzero', this whole is clipped out. The clipping makes the green background of the parent div box visible. On pass you should see a green box with a blue border.
|