|
+
9 The transform-style Property |
|---|
|
css-transform-3d-transform-style |
= |
|
rotateY with transform-style on nested elements
- Test checks that rotate the nested div with transform-style preserve-3d, rotated parent div for -60 degree on Y-axis then and rotated child div for 120 degree, at this time the parent and child should have equal width, then child div could cover the red box.
|
|
transform-table-006 |
= |
|
Table Without Preserve-3D 1
- This has preserve-3d applied to the outer wrapper of a table, but not the inner wrapper containing its contents. Therefore, the contents should be rotated 90 degrees and vanish, and the 90-degree rotation on the outer wrapper shouldn't restore them. An implementation that incorrectly propagated preserve-3d to table descendants might cause the text to appear, but mirrored.
|
|
transform-table-007 |
= |
|
Table Without Preserve-3D 2
- In this case, preserve-3d is applied to every element that's explicitly specified in the source code. However, the HTML parser will insert an extra <tbody> element around the <tr>, which will not have preserve-3d specified, so the contents should again vainsh. An implementation that incorrectly propagated preserve-3d to table descendants might cause the text to appear, but mirrored.
|
|
transform-table-008 |
= |
|
Table Without Preserve-3D 3
- This is essentially the same as transform-table-006.html, except using divs with 'display' specified instead of actual table elements.
|
|
transform-table-009 |
= ≠ |
|
Table With Preserve-3D 1
- This is the same as transform-table-007.html, except that transform-style is also explicitly applied to the intervening <tbody>, so nothing should vanish.
|
|
transform-table-010 |
= ≠ |
|
Table With Preserve-3D 2
- This is the same as transform-table-007.html, except that now divs are used instead of actual table elements. This means that the parser doesn't create an implicit intervening <tbody>, so preserve-3d is applied to all intervening elements, and the text should display (mirrored).
|
|
transform-table-011 |
= ≠ |
|
Table With Preserve-3D 3
- This is an even more extreme example of transform-table-010.html. CSS will create several anonymous table boxes wrapping the div with display: table-cell, but none of these have corresponding elements. Every actual element in the DOM still has preserve-3d specified, so the text should not vanish.
|
|
transform3d-preserve3d-001 |
= |
|
Simple Preserve-3D
- This tests that if preserve-3d is specified, four 45deg rotations equal one 180deg rotation.
|
|
transform3d-preserve3d-002 |
= |
|
Preserve-3D With Margins 1
- This is the first in a series of four tests that test that translations work correctly when combined with margins or translations on various elements, when preserve-3d is enabled. They test for a real-world implementation bug: <https://bugzilla.mozilla.org/show_bug.cgi?id=691864>.
|
|
transform3d-preserve3d-003 |
= |
|
Preserve-3D With Margins 2
- This is the second in a series of four tests that test that translations work correctly when combined with margins or translations on various elements, when preserve-3d is enabled. They test for a real-world implementation bug: <https://bugzilla.mozilla.org/show_bug.cgi?id=691864>.
|
|
transform3d-preserve3d-004 |
= |
|
Preserve-3D With Margins 3
- This is the third in a series of four tests that test that translations work correctly when combined with margins or translations on various elements, when preserve-3d is enabled. They test for a real-world implementation bug: <https://bugzilla.mozilla.org/show_bug.cgi?id=691864>.
|
|
transform3d-preserve3d-005 |
= |
|
Preserve-3D With Transformed Grandparent and Grandchild
- This is the fourth in a series of four tests that test that translations work correctly when combined with margins or translations on various elements, when preserve-3d is enabled. They test for a real-world implementation bug: <https://bugzilla.mozilla.org/show_bug.cgi?id=691864>.
|
|
transform3d-preserve3d-006 |
= |
|
Two rotatex(), No Preserve-3D
- rotatex(45deg) or rotatex(-45deg), by itself, should both just scale down the element by a factor of sqrt(2) (and perhaps shift it, depending on 'transform-origin'). Without 'transform-style: preserve-3d', the rotations on parent and child shouldn't cancel, so its height should be halved with no other effect.
|
|
transform3d-preserve3d-007 |
= |
|
Two rotatey(), No Preserve-3D
- This is identical to transform3d-preserve3d-006.html, except with rotatey() instead of rotatex().
|
|
transform3d-preserve3d-008 |
= |
|
Preserve-3D with 'overflow: hidden'
- This is identical to transform3d-preserve3d-006.html, except that it has 'transform-style: preserve-3d; overflow: hidden' specified on the parent element. 'transform-style: preserve-3d' would normally make the result different, but 'overflow: hidden' overrides its effect and causes it to work the same as 'transform-style: flat'.
|
|
transform3d-preserve3d-009 |
= |
|
Preserve-3D with 'overflow: auto'
- This is identical to transform3d-preserve3d-008.html, except with 'overflow: auto' instead of 'hidden'.
|
|
transform3d-preserve3d-010 |
= |
|
rotatex() With Preserve-3D
- This tests that two rotations of 22.5deg properly add when preserve-3d is used. The result, a 45deg rotation around the X-axis, should be equivalent to shrinking the height by a factor of sqrt(2), i.e., 1.41421356....
|
|
transform3d-preserve3d-011 |
= |
|
Preserve-3D With 90-Degree Rotation
- This tests that when preserve-3d is specified, a 90-degree rotation on the parent plus a 90-degree rotation on the child cancel out, adding to a 180-degree rotation (which has no visible effect on a lime square). scale(2) is added to ensure that the test doesn't pass if the transforms are just ignored.
|
|
transform3d-preserve3d-012 |
= |
|
90-Degree Rotations Without Preserve-3D
- This tests that two 90-degree rotations with the default 'transform-style: flat' do not add together to form a 180-degree rotation. Instead, the first causes the contents to vanish and the second does not restore them.
|
|
transform3d-preserve3d-013 |
= |
|
Preserve-3D with 'overflow: scroll'
- This is identical to transform3d-preserve3d-008.html, except with 'overflow: scroll' instead of 'hidden'. (Note that the ref is nontrivial, because the scrollbar has to be scaled appropriately.)
|
|
transform3d-sorting-001 |
= |
|
Simple Sorting
- The red box here is translated in the negative Z-direction, so it should render beneath the lime box even though it comes later in DOM order.
|
|
transform3d-sorting-002 |
= |
|
Simple Sorting With Rotation
- The red box here is translated to the same extent as the lime box, so they should render in stacking context order: the lime box is on top, because it's later in the DOM. But then we apply rotatex(180deg) to the whole thing, so the lime box should wind up on top in the end.
|
|
transform3d-sorting-003 |
= |
|
Simple Sorting With No Preserve-3D
- The red box here is translated to above the lime box, but they aren't in the same 3D rendering context, so they should be drawn in DOM order regardless: lime box on top.
|
|
transform3d-sorting-004 |
= |
|
Simple Sorting With Preserve-3D on Grandparent
- This is the same as transform3d-sorting-003.html, except with two wrapper divs. 'transform-style: preserve-3d' only affects children, not grandchildren, so the two divs with backgrounds are still in different rendering contexts and the Z-position should still not affect stacking.
|
|
transform3d-sorting-005 |
= |
|
Sorting With Background on Parent
- This tests that if a parent has 'transform-style: preserve-3d', it's in the same rendering context as its children. Thus the translateZ(10px) puts the child above it, and the rotateX(180deg) puts it below, so the lime parent is rendered on top.
|
|
transform3d-sorting-006 |
= |
|
Sorting With Intersection
- This tests that when two boxes intersect in a simple fashion, they're rendered according to Newell's algorithm.
|