|
+
4 The transform Property |
|---|
|
2d-rotate-001 |
= ≠ |
SVG |
CSS Transform using 2d rotate()
- asserting that you can rotate an element with CSS
|
|
backface-visibility-001 |
= |
|
- backface-visibility should have no effect when no transforms are present
|
|
backface-visibility-001.ref |
|
|
- backface-visibility should have no effect when no transforms are present
|
|
backface-visibility-hidden-001 |
= |
|
transform property with backface visibility = hidden
- When the value of backface visibility property is 'hidden', the back side of a transformed element is invisible when facing the viewer.
|
|
backface-visibility-hidden-002.tentative |
= |
|
backface visibility: hidden self-transform
|
|
backface-visibility-hidden-003.tentative |
= |
|
backface visibility: hidden applies to pseudo-stacking contexts
|
|
backface-visibility-hidden-004.tentative |
= |
|
backface visibility: hidden does not apply to child pseudo-stacking context descendants
|
|
backface-visibility-hidden-005.tentative |
= |
|
backface visibility: hidden inside preserve-3d does not apply to pseudo-stacking context descendants
|
|
backface-visibility-hidden-006 |
= |
|
backface visibility: hidden scrolling contents if backface-invisible
|
|
backface-visibility-hidden-animated-002 |
= |
|
backface visibility: hidden does not apply to child pseudo-stacking context descendants, even when animation is present
|
|
css-scale-nested-001 |
= |
|
scale 0 on a parent with a child
- Child square element is transformed (scaled to zero) along with the parent element
|
|
css-transform-inherit-rotate |
|
|
CSS transforms rotate inheritance on div element
- Rotation on parent element will not be inherited by child element, unless declared. The test is passed if there is a green square and no red. And it is rotated 45 degree.
|
|
css-transform-inherit-scale |
= |
|
CSS transforms scale 2 inheritance on div elements
- While child div inherits property from its parent, scaling 2 on parent div will course the child to scale 4 and totally cover the red div. The test passes if there is a green square and no red.
|
|
css-transform-scale-001-manual |
= |
|
transform property with scale function on hover state
- When the element is hovered over, the transform scales the element to twice its size in both the X and Y directions and moves its origin to the top left corner.
|
|
css-transform-scale-002 |
= |
|
transform property with scale function and move its origin
- The transform scales the element to twice its size in both the X and Y directions and moves its origin to the top left corner.
|
|
css-transform-style-evaluation-validation |
|
DOM/JSScript |
property
|
|
css3-transform-rotatey |
= |
|
transform property with rotateY function
- box width should be equal to projection width if transform rotateY applied
|
|
css3-transform-scale |
= |
|
transform property with scale function
- box width and height will be twice larger if transform scale(2) applied
|
|
css3-transform-scale-002 |
= |
|
transform property with scale function
- box width and height will be twice larger if transform scale(2) applied
|
|
perspective-origin-x |
= |
|
perspective property
- Asserts that origin 'x1' visually moves the objects '-x1*d/(d-1)'
|
|
perspective-origin-xy |
= |
|
perspective property
- Asserts that origin '<x,y>' visually moves the objects '<-x,-y>*d/(d-1)'
|
|
perspective-transforms-equivalence |
= |
|
Perspective with transforms equivalencies.
|
|
perspective-translatez-0 |
= |
|
perspective property
- Asserts that points on the z=0 plane are unchanged
|
|
perspective-translatez-negative |
= |
|
perspective property
- Asserts that the scaling is proportional to d/(d - Z) for a negative Z
|
|
perspective-translatez-positive |
= |
|
perspective property
- Asserts that the scaling is proportional to d/(d - Z) for a positive Z
|
|
rotate-180-degrees-001 |
|
|
transform - rotate 180 deg
|
|
rotate-270-degrees-001 |
|
|
transform - rotate 270 deg
|
|
rotate-90-degrees-001 |
|
|
transform - rotate 90 deg
|
|
ruby-no-transform |
= |
|
Ruby should not support transform
|
|
scale-optional-second-001 |
= |
|
transform property with scale function and one parameter
- If the second parameter of scale function is not provided, it takes a value equal to the first. This transform causes the element to appear twice as long in both the X and Y axes.
|
|
scale-zero-001 |
= |
|
transform property with scale function and zero values
- If zero value is passed to scale function, it causes the element to disappear.
|
|
transform-2d-getcomputedstyle-001 |
|
DOM/JSScript |
transform translate
- CSS 2D transforms correctly report their matrix via getComputedStyle()
|
|
transform-applies-to-001 |
= |
|
transform applied to elements with 'display' set to 'block'
- The 'transform' property applies to elements with 'display' set to 'block'.
|
|
transform-applies-to-002 |
= |
Ahem |
Transform does not apply to non-replaced inline elements
- The 'transform' property does not apply to non-replaced inline elements.
|
|
transform-background-001 |
= |
SVG |
Transform of Background Image (rotate right)
- Background images fall within the element's border box, so they need to be transformed along with it.
|
|
transform-background-002 |
= |
SVG |
Transform of Background Image (rotate left)
- Background images fall within the element's border box, so they need to be transformed along with it.
|
|
transform-background-003 |
= |
SVG |
Transform of Background Image (flip)
- Background images fall within the element's border box, so they need to be transformed along with it.
|
|
transform-background-004 |
= |
SVG |
Transform of Background Image (nested flip)
- Background images fall within the element's border box, so they need to be transformed along with it. This file tests that a transform on the parent works correctly, not just on the element itself.
|
|
transform-background-005 |
= |
SVG |
Transform of Background Image (non-propagated body)
- Background images fall within the element's border box, so they need to be transformed along with it. In this case the scale is applied to the root element, and the background is on the body. The white background on the root element prevents the body's background from propagating to the canvas, so it's just a regular background.
|
|
transform-background-006 |
= ≠ |
SVG |
Transform of Background Image (propagated body)
- Background images fall within the element's border box, so they need to be transformed along with it. In this case the transform is applied to the body element, but the root element's background is transparent, so the background is actually on the root element instead of the body. Therefore, the transform must not affect the background.
|
|
transform-containing-block-dynamic-1a |
= |
|
CSS transforms: Creating containing block for fixed positioned elements
- For elements whose layout is governed by the CSS box model, any value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants.
- The object acts as a containing block for fixed positioned descendants.
|
|
transform-containing-block-dynamic-1b |
= |
|
CSS transforms: Creating containing block for fixed positioned elements
- For elements whose layout is governed by the CSS box model, any value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants.
- The object acts as a containing block for fixed positioned descendants.
|
|
transform-inherit-001 |
= |
|
'inherit' and em
- The 'transform' property's computed value (which is what's inherited if 'inherit' is specified) is defined as "As specified, but with relative lengths converted into absolute lengths." In this test, a parent element has a transform of 1em with a font-size of 25px, and the child has "transform: inherit". Since the relative length of 1em is converted to an absolute length of 25px before inheritance, the child should be translated by a further 25px, for a total of 50px, even though its font-size is 100px. An implementation that incorrectly inherited 1em without converting it to an absolute length first would translate by 125px.
|
|
transform-inherit-002 |
= |
|
'inherit' and percentages
- The 'transform' property's computed value (which is what's inherited if 'inherit' is specified) is defined as "As specified, but with relative lengths converted into absolute lengths." In this test, a parent element has a transform of 10% with a height/width of 400px, and the child has "transform: inherit" and a height/width of 100px. Since percentages are not relative lengths and are inherited as specified, the parent should be translated by 40px and then the child by only 10px, for a total of 50px. An implementation that incorrectly converted the parent's 10% transform into 40px before inheritance would translate the child by a further 40px, for a total of 80px.
|
|
transform-inline-001 |
= ≠ |
|
Transformed Inline
- The definition of "transformable element" includes atomic inline-level elements, such as images, but not regular inline-level elements, such as spans. The 'transform' property only applies to transformable elements, so it should have no effect on a span.
|
|
transform-input-001 |
= |
|
Input (type=text)
- The input element is an atomic inline element, so it falls under the definition of transformable and should be affected by transformations as usual. This is one in a series of tests that verify that a few simple transforms have the expected effect on various types of inputs. (They only test a few very specific transforms because it would be difficult to construct a correct reference file for more complex transforms.)
|
|
transform-input-002 |
= |
|
Input (type=file)
- The input element is an atomic inline element, so it falls under the definition of transformable and should be affected by transformations as usual. This is one in a series of tests that verify that a few simple transforms have the expected effect on various types of inputs. (They only test a few very specific transforms because it would be difficult to construct a correct reference file for more complex transforms.)
|
|
transform-input-003 |
= |
|
Input (type=search)
- The input element is an atomic inline element, so it falls under the definition of transformable and should be affected by transformations as usual. This is one in a series of tests that verify that a few simple transforms have the expected effect on various types of inputs. (They only test a few very specific transforms because it would be difficult to construct a correct reference file for more complex transforms.)
|
|
transform-input-004 |
= |
|
Input (type=tel)
- The input element is an atomic inline element, so it falls under the definition of transformable and should be affected by transformations as usual. This is one in a series of tests that verify that a few simple transforms have the expected effect on various types of inputs. (They only test a few very specific transforms because it would be difficult to construct a correct reference file for more complex transforms.)
|
|
transform-input-005 |
= |
|
Input (type=url)
- The input element is an atomic inline element, so it falls under the definition of transformable and should be affected by transformations as usual. This is one in a series of tests that verify that a few simple transforms have the expected effect on various types of inputs. (They only test a few very specific transforms because it would be difficult to construct a correct reference file for more complex transforms.)
|
|
transform-input-006 |
= |
|
Input (type=email)
- The input element is an atomic inline element, so it falls under the definition of transformable and should be affected by transformations as usual. This is one in a series of tests that verify that a few simple transforms have the expected effect on various types of inputs. (They only test a few very specific transforms because it would be difficult to construct a correct reference file for more complex transforms.)
|
|
transform-input-007 |
= |
|
Input (type=password)
- The input element is an atomic inline element, so it falls under the definition of transformable and should be affected by transformations as usual. This is one in a series of tests that verify that a few simple transforms have the expected effect on various types of inputs. (They only test a few very specific transforms because it would be difficult to construct a correct reference file for more complex transforms.)
|
|
transform-input-008 |
= |
|
Input (type=datetime)
- The input element is an atomic inline element, so it falls under the definition of transformable and should be affected by transformations as usual. This is one in a series of tests that verify that a few simple transforms have the expected effect on various types of inputs. (They only test a few very specific transforms because it would be difficult to construct a correct reference file for more complex transforms.)
|
|
transform-input-009 |
= |
|
Input (type=date)
- The input element is an atomic inline element, so it falls under the definition of transformable and should be affected by transformations as usual. This is one in a series of tests that verify that a few simple transforms have the expected effect on various types of inputs. (They only test a few very specific transforms because it would be difficult to construct a correct reference file for more complex transforms.)
|
|
transform-input-010 |
= |
|
Input (type=month)
- The input element is an atomic inline element, so it falls under the definition of transformable and should be affected by transformations as usual. This is one in a series of tests that verify that a few simple transforms have the expected effect on various types of inputs. (They only test a few very specific transforms because it would be difficult to construct a correct reference file for more complex transforms.)
|
|
transform-input-011 |
= |
|
Input (type=week)
- The input element is an atomic inline element, so it falls under the definition of transformable and should be affected by transformations as usual. This is one in a series of tests that verify that a few simple transforms have the expected effect on various types of inputs. (They only test a few very specific transforms because it would be difficult to construct a correct reference file for more complex transforms.)
|
|
transform-input-012 |
= |
|
Input (type=time)
- The input element is an atomic inline element, so it falls under the definition of transformable and should be affected by transformations as usual. This is one in a series of tests that verify that a few simple transforms have the expected effect on various types of inputs. (They only test a few very specific transforms because it would be difficult to construct a correct reference file for more complex transforms.)
|
|
transform-input-013 |
= |
|
Input (type=datetime-local)
- The input element is an atomic inline element, so it falls under the definition of transformable and should be affected by transformations as usual. This is one in a series of tests that verify that a few simple transforms have the expected effect on various types of inputs. (They only test a few very specific transforms because it would be difficult to construct a correct reference file for more complex transforms.)
|
|
transform-input-014 |
= |
|
Input (type=number)
- The input element is an atomic inline element, so it falls under the definition of transformable and should be affected by transformations as usual. This is one in a series of tests that verify that a few simple transforms have the expected effect on various types of inputs. (They only test a few very specific transforms because it would be difficult to construct a correct reference file for more complex transforms.)
|
|
transform-input-015 |
= |
|
Input (type=range)
- The input element is an atomic inline element, so it falls under the definition of transformable and should be affected by transformations as usual. This is one in a series of tests that verify that a few simple transforms have the expected effect on various types of inputs. (They only test a few very specific transforms because it would be difficult to construct a correct reference file for more complex transforms.)
|
|
transform-input-016 |
= |
|
Input (type=color)
- The input element is an atomic inline element, so it falls under the definition of transformable and should be affected by transformations as usual. This is one in a series of tests that verify that a few simple transforms have the expected effect on various types of inputs. (They only test a few very specific transforms because it would be difficult to construct a correct reference file for more complex transforms.)
|
|
transform-input-017 |
= |
|
Input (type=checkbox)
- The input element is an atomic inline element, so it falls under the definition of transformable and should be affected by transformations as usual. This is one in a series of tests that verify that a few simple transforms have the expected effect on various types of inputs. (They only test a few very specific transforms because it would be difficult to construct a correct reference file for more complex transforms.)
|
|
transform-input-018 |
= |
|
Input (type=radio)
- The input element is an atomic inline element, so it falls under the definition of transformable and should be affected by transformations as usual. This is one in a series of tests that verify that a few simple transforms have the expected effect on various types of inputs. (They only test a few very specific transforms because it would be difficult to construct a correct reference file for more complex transforms.)
|
|
transform-input-019 |
= |
|
Input (type=submit)
- The input element is an atomic inline element, so it falls under the definition of transformable and should be affected by transformations as usual. This is one in a series of tests that verify that a few simple transforms have the expected effect on various types of inputs. (They only test a few very specific transforms because it would be difficult to construct a correct reference file for more complex transforms.)
|
|
transform-percent-001 |
= ≠ |
|
Percentages (translateX)
- This is part of a series of tests that check that percentages in 'transform' values are evaluated relative to the transformed element's border box.
|
|
transform-percent-002 |
= ≠ |
|
Percentages (translateY)
- This is part of a series of tests that check that percentages in 'transform' values are evaluated relative to the transformed element's border box.
|
|
transform-percent-003 |
= ≠ |
|
Percentages (translate)
- This is part of a series of tests that check that percentages in 'transform' values are evaluated relative to the transformed element's border box.
|
|
transform-percent-004 |
= ≠ |
|
Percentages (translateX and translateY)
- This is part of a series of tests that check that percentages in 'transform' values are evaluated relative to the transformed element's border box.
|
|
transform-percent-005 |
= ≠ |
|
Percentages (translateX and translateY and translate)
- This is part of a series of tests that check that percentages in 'transform' values are evaluated relative to the transformed element's border box.
|
|
transform-percent-006 |
= ≠ |
|
Percentages (translateX and translate)
- This is part of a series of tests that check that percentages in 'transform' values are evaluated relative to the transformed element's border box.
|
|
transform-percent-007 |
= ≠ |
|
Percentages (translateY and translate)
- This is part of a series of tests that check that percentages in 'transform' values are evaluated relative to the transformed element's border box.
|
|
transform-percent-008 |
= ≠ |
|
Percentages (border box)
- This is part of a series of tests that check that percentages in 'transform' values are evaluated relative to the transformed element's border box. This test adds a thicker border plus margin and padding to make any discrepancies more evident.
|
|
transform-propagate-inherit-boolean-001 |
= |
|
em on Multiple Elements
- This tests that when a 'transform' rule using em affects two elements with different font-sizes, it affects each according to its respective font-size, rather than using the same length for both. See: https://bugzilla.mozilla.org/show_bug.cgi?id=460440
|
|
transform-rounding-001 |
= |
|
Rounding
- This tests that the implementation does not round intermediate matrices to the extent that it significantly distorts the final result. (No requirement in the specification places any specific constraints on rounding, but simple cases like this should not deviate dramatically from the mathematically precise result.)
|
|
transform-scale-test |
= |
|
transform property with scale function.
- This transform shrinks a container by calling scale(.33). It also sets transform-origin to top left in order to visually align with the second green square.
|
|
transform-table-001 |
= ≠ |
|
Transform on Table
- This tests that an appropriately-crafted transform applied to a table works the same as if was applied to a wrapper div.
|
|
transform-table-002 |
= ≠ |
|
Transform on Inline-Table
- This tests that an appropriately-crafted transform applied to an inline-table works the same as if was applied to a wrapper div.
|
|
transform-table-003 |
= ≠ |
|
Transform on Table 2
- This tests that another appropriately-crafted transform applied to a table works the same as if was applied to a wrapper div.
|
|
transform-table-004 |
= ≠ |
|
Transform on Table with caption-side: bottom
- This is the same as transform-table-001.html, except the caption has caption-side: bottom.
|
|
transform-table-005 |
= ≠ |
|
Transform on Table with caption-side: bottom
- This is the same as transform-table-002.html, except the caption has caption-side: bottom.
|
|
transform-transformable-inline-block |
= |
|
Transformability of Inline-Block
- This tests that transforms specified on an inline-block work as expected.
|
|
transform-transformable-inline-table |
= |
|
Transformability of Inline-Table
- This tests that transforms specified on an inline-table work as expected.
|
|
transform-transformable-list-item |
= |
|
Transformability of List-Item
- This tests that transforms specified on a list-item work as expected.
|
|
transform-transformable-table |
= |
|
Transformability of Table
- This tests that transforms specified on a table work as expected.
|
|
transform-transformable-table-caption |
= |
|
Transformability of Table-Caption
- This tests that transforms specified on a table-caption work as expected.
|
|
transform-transformable-table-cell |
= |
|
Transformability of Table-Cell
- This tests that transforms specified on a table-cell work as expected.
|
|
transform-transformable-table-row |
= |
|
Transformability of Table-Row
- This tests that transforms specified on a table-row work as expected.
|
|
transform-transformable-table-row-group |
= |
|
Transformability of Table-Row-Group
- This tests that transforms specified on a table-row-group work as expected.
|
|
transform-translatex-006 |
= |
|
transform property with translateX function
- This tests that translateX(50px) translates a box by 50 pixels in the X direction.
|
|
transform_translate |
|
DOM/JSScript |
transform translate
- Check if transform supports translate(100px, 100px)
|
|
transform_translate_invalid |
|
DOM/JSScript |
transform translate with invalid translation value
- Check if transform sets translate(null, null), transform property returns initial value.
|
|
transform_translate_max |
|
DOM/JSScript |
transform translate with maximum translation value
- Check if transform sets translate(INFINITE, INFINITE), transform property returns initial value.
|
|
transform_translate_min |
|
DOM/JSScript |
transform translate with minimum translation value
- Check if transform sets translate(-INFINITE, -INFINITE), transform property returns initial value.
|
|
transform_translate_neg |
|
DOM/JSScript |
transform translate with negative translation value
- Check if transform supports translate(-1px, -1px)
|
|
transform_translate_second_omited |
|
DOM/JSScript |
transform translate with second translation value omited
- Check if transform supports translate(100px)
|
|
transform_translate_zero |
|
DOM/JSScript |
transform translate
- Check if transform supports translate(0, 0)
|
|
transformed-preserve-3d-1 |
= |
|
transform preserve-3d
- The transformed div should establishe a 3D rendering context
|
|
transformed-rotatex-3 |
= |
|
transform rotateX
- The transformed div should rotateX by 180 degrees
|
|
transformed-rotatey-1 |
= |
|
transform rotateY
- The transformed div should rotate 90 degrees
|
|
transforms-rotate-degree-45 |
= |
|
transform property with rotate function and one parameter
- If the rotate and scale with parameter not provided, greenSquare will not cover redSquare.
|
|
transforms-rotate-degree-90 |
= |
|
transform property with rotate function and one parameter
- If the rotate with parameter not provided, greenRectangle will not cover redRectangle.
|
|
transforms-rotate-translate-scale |
= |
|
transform property with scale function and rotate function with one parameter
- If the rotate and scale with parameter not provided, greenSquare will not cover redSquare.
|
|
transforms-rotatey-degree-60 |
= |
|
transform property with rotate function and one parameter
|
|
transforms-skewx |
= |
|
transform property with skew function for X axis.
- If the skew for X axis not provided, greenSquare will not cover redSquare.
|
|
transforms-skewy |
= |
|
transform property with skew function for Y axis.
- If the skew for Y axis not provided, greenSquare will not cover redSquare.
|
|
translate-optional-second-001 |
= |
|
transform property with translate function and one parameter
- If the second parameter is not provided, it has zero as a value. This transform moves the element by 100 pixels in X direction.
|
|
ttwf-reftest-rotate |
= |
|
transform rotate
- The transform should rotate 180 degrees
|
|
ttwf-transform-skewx-001 |
= |
|
CSS Transform Using skewX() function
- Test that the green shape is skew on X axis by 45 degrees
|
|
ttwf-transform-skewy-001 |
= |
|
CSS Transform Using skewY() function
- Test that the green shape is skew on Y axis by 45 degrees
|
|
ttwf-transform-translatex-001 |
= |
|
CSS Transform Using translateX() function
- Test that the green square is moved on X axis 100px
|
|
ttwf-transform-translatey-001 |
= |
|
CSS Transform Using translateY() function
- Test that the green square is moved on Y axis 100px
|