|
+
6 The Transform Rendering Model |
|---|
|
css-transforms-3d-on-anonymous-block-001 |
= |
|
No 3D transforms on anonymous block boxes
- 3D transforms can not be applied to anonymous block boxes.
|
|
transform-abspos-001 |
= |
|
Containing Block for Absolute Positioning (left/top)
- "In the HTML namespace, any value other than 'none' for the transform results in the creation of . . . a containing block." This means absolutely positioned elements need to be rooted at a transformed ancestor, just as though it had non-static position.
|
|
transform-abspos-002 |
= |
|
Containing Block for Fixed Positioning (left/top offsets)
- "In the HTML namespace, any value other than 'none' for the transform results in the creation of . . . a containing block. The object acts as a containing block for fixed positioned descendants." This means fixed-position elements need to be rooted at a transformed ancestor, rather than the viewport.
|
|
transform-abspos-003 |
= |
|
Containing Block for Fixed Positioning (right/bottom offsets)
- "In the HTML namespace, any value other than 'none' for the transform results in the creation of . . . a containing block. The object acts as a containing block for fixed positioned descendants." This means fixed-position elements need to be rooted at a transformed ancestor, rather than the viewport. (This test differs from the previous in that it uses right/bottom properties for positioning instead of left/top.)
|
|
transform-abspos-004 |
= |
|
Containing Block for Absolute Positioning (bottom/right)
- "In the HTML namespace, any value other than 'none' for the transform results in the creation of . . . a containing block." This means absolutely positioned elements need to be rooted at a transformed ancestor, just as though it had non-static position. This test differs from transform-abspos-001.html in that it uses the right/bottom properties for positioning instead of top/left.
|
|
transform-abspos-005 |
≠ |
|
Containing Block for Absolute Positioning (bottom/right)
- "In the HTML namespace, any value other than 'none' for the transform results in the creation of . . . a containing block." This means absolutely positioned elements need to be rooted at a transformed ancestor, just as though it had non-static position. Therefore, this test should be offset by one pixel from the reference.
|
|
transform-abspos-006 |
= |
|
Containing Block for Absolute Positioning (table)
- "In the HTML namespace, any value other than 'none' for the transform results in the creation of . . . a containing block." This means absolutely positioned elements need to be rooted at a transformed ancestor, just as though it had non-static position. This test differs from transform-abspos-001.html in that the outer div is a table, which might cause buggy rendering engines to treat it differently.
|
|
transform-abspos-007 |
= |
|
Containing Block for Fixed Positioning (inline-table)
- "In the HTML namespace, any value other than 'none' for the transform results in the creation of . . . a containing block. The object acts as a containing block for fixed positioned descendants." This means fixed-position elements need to be rooted at a transformed ancestor, rather than the viewport. This test differs from transform-abspos-002.html in that the outer div has display: inline-table, which might cause it to render differently in buggy UAs.
|
|
transform-background-007 |
= |
SVG |
Transform of Background Image (propagated body with root element transform)
- "If the root element is transformed, the transformation applies to the entire canvas, including any background specified for the root element. Since the background painting area for the root element is the entire canvas, which is infinite, the transformation might cause parts of the background that were originally off-screen to appear. For example, if the root element's background were repeating dots, and a transformation of 'scale(0.5)' were specified on the root element, the dots would shrink to half their size, but there will be twice as many, so they still cover the whole viewport." In this case, the background is specified on the body but propagates to the root element. The transform is on the root element, so it needs to affect the background. The rotation 90 degrees clockwise means that most of the screen will be filled with triangles that were originally above the top of the viewport; the original top row of triangles will now be on the left.
|
|
transform-background-008 |
= |
SVG |
Transform of Background Image (root element background and transform)
- This is exactly the same as transform-background-007.html, except that the background is specified directly on the root element instead of being specified on the body and propagating to the root.
|
|
transform-compound-001 |
= ≠ ≠ |
|
Compound Transforms
- Tests that applying multiple transforms to an element is the same as applying the transforms in the same order to nested elements.
|
|
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-descendant-001 |
= |
|
Transform Affects Descendant
- This just tests that a transform on a container div moves its contents, not just the div itself.
|
|
transform-fixed-bg-001 |
= |
SVG |
Fixed Background
- "Fixed backgrounds are affected by any transform specified for the root element, and not by any other transforms." Thus if we have a div that's 100px square aligned at the top left of the page, giving it a fixed background and translating it 50px down and right should be the same as giving it a non-fixed background that's translated 50px down and right.
|
|
transform-fixed-bg-002 |
= |
DOM/JSSVG |
Fixed Background (with scrolling)
- "Fixed backgrounds are affected by any transform specified for the root element, and not by any other transforms." Here we translate the div 150px down instead of 50px, and also scroll down 100px. This should be the same as the previous test because the background image is 100px square.
|
|
transform-fixed-bg-003 |
= |
SVG |
Fixed Background (with rotation)
- This is the same as transform-fixed-bg-001, except that we also test that a rotation on a non-root element doesn't affect fixed backgrounds.
|
|
transform-fixed-bg-004 |
= |
DOM/JSSVG |
Fixed Background (with rotation and scrolling)
- This is the same as transform-fixed-bg-002, except that we also test that a rotation on a non-root element doesn't affect fixed backgrounds.
|
|
transform-fixed-bg-005 |
= |
SVG |
Fixed Background (no-op transform)
- This affects that adding a no-op transform to an element with a fixed background doesn't affect rendering.
|
|
transform-fixed-bg-006 |
= |
SVG |
Fixed Background (transform of intermediate)
- This tests that adding a rotation to a non-root element doesn't affect rendering of fixed backgrounds on its descendants.
|
|
transform-fixed-bg-007 |
= |
SVG |
Fixed Background (transform on root)
- This tests that a transform on the root element *does* affect the rendering of fixed backgrounds on its descendants.
|
|
transform-generated-001 |
= ≠ |
|
Generated Content (block)
- Transforms need to work on boxes of generated content just as on any other boxes. This file tests a generated block box.
|
|
transform-generated-002 |
= ≠ |
|
Generated Content (inline)
- Transforms need to work on boxes of generated content just as on any other boxes. This file tests a generated inline box.
|
|
transform-iframe-001 |
= |
|
Iframe
- This test ensures that transforms cannot move the contents of an iframe onto the parent page. The iframe here contains a red box shifted 500px down and to the right, outside the iframe's visible area. overflow: hidden ensures that scrollbars are not tested.
|
|
transform-overflow-001 |
= |
|
overflow: auto
- ". . . if the value of the 'overflow' property is 'scroll' or 'auto', scrollbars will appear as needed to see content that is transformed outside the visible area." This tests that the effect of overflow: auto for a translation is the same as for an equivalent relative positioning.
|
|
transform-overflow-002 |
= |
|
overflow: scroll
- ". . . if the value of the 'overflow' property is 'scroll' or 'auto', scrollbars will appear as needed to see content that is transformed outside the visible area." This tests that the effect of overflow: scroll for a translation is the same as for an equivalent relative positioning.
|
|
transform-root-bg-001 |
= |
|
scale(-1) on Root Element With Background
- The background here extends to the whole canvas, and a transform on the root element must transform the whole canvas, background included. Thus the entire tiled background of left-pointing triangles needs to be rotated 180 degrees (same as scale(-1)) around the top center of the viewport, which is the default transform-origin of 50% 50% in this case. An implementation that doesn't draw the background on parts of the canvas outside the viewport might incorrectly display nothing, because the part of the background that's supposed to be rotated into view was initially above the visible part of the canvas.
|
|
transform-root-bg-002 |
= |
|
scale(-1) on Root Element With Background On Body
- Identical to transform-root-bg-001.html, except that the background property is put on the body rather than the root element. This should make no difference, because the body's background propagates up to the canvas if there's no root element background.
|
|
transform-root-bg-003 |
= |
|
scale(0.5) on Root Element With Background
- This is the same as transform-root-bg-001.html, except that it uses scale(0.5) instead of scale(-1). It also specifies a transform-origin, because the default of 50% 50% wouldn't work well with the way the reference image is constructed.
|
|
transform-root-bg-004 |
= |
|
scale(-1) On Body With Background
- This is like transform-root-bg-002.html, except that the transform is specified on the body element, not just the background. The background gets lifted to the root element, but the transform does not, so the transform has no effect.
|
|
transform-stacking-001 |
= |
|
Stacking, transform: scale(1)
- This tests that specifying the identity transform on an element still causes it to create a new stacking context (unlike transform: none).
|
|
transform-stacking-002 |
= |
|
Stacking, transform: none
- This tests that "transform: none" does not create a new stacking context -- it should have no effect at all.
|
|
transform-stacking-003 |
= |
|
Stacking, invalid transform value
- This tests that specifying the transform property with an invalid value does not create a new stacking context -- it should have no effect at all, same as "transform: none".
|
|
transform-stacking-004 |
= |
|
Stacking, inherited transform: none
- This tests that specifying "transform: inherit" (when the parent has no transform) does not create a new stacking context -- it should have no effect at all, same as "transform: none".
|
|
+
6.1 3D Transform Rendering |
|---|
|
css-transforms-3d-on-anonymous-block-001 |
= |
|
No 3D transforms on anonymous block boxes
- 3D transforms can not be applied to anonymous block boxes.
|
|
rotate_45deg |
= |
|
rotateY with perspective produces a trapezoid
- Rotate 45 degree in y axis
|
|
rotate_x_45deg |
= |
|
rotateX with perspective produces a trapezoid
- Rotate 45 degree in y axis
|
|
rotate_y_45deg |
= |
|
rotateY with perspective produces a trapezoid
- Rotate 45 degree in y axis
|
|
scalex |
= |
|
test scale x
|
|
scaley |
= |
|
test scale y
|
|
transform-3d-rotatey-stair-above-001 |
= |
|
rotateY with perspective produces a trapezoid
- A rotateY transform with perspective should result in a trapezoid.
|
|
transform-3d-rotatey-stair-below-001 |
= |
|
rotateY with perspective produces a trapezoid
- A rotateY transform with perspective should result in a trapezoid.
|
|
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.
|
|
translate |
= |
|
test translate
|
|
ttwf-css-3d-polygon-cycle |
= |
SVG |
3d transform polygon cycle
- The red, green and blue rectangles are forming a cycle, which should be detected and rendered using Newell Algorithm's.
|
|
ttwf-css-3d-polygon-cycle-mismatch |
= |
SVG |
3d transform polygon cycle
- The red, green and blue rectangles are forming a cycle, which should be detected and rendered using Newell Algorithm's.
|