|
+
3 The Transform Rendering Model |
|---|
|
background-attachment-fixed-inside-transform-1 |
= |
|
CSS Background: background-attachment: background-attachment:fixed inside a transform
- Test checks whether background-attachment: 'fixed' inside a transform behaves like background-attachment: 'scroll'.
|
|
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".
|
|
transform-transformed-caption-contains-fixed-position |
= |
|
Transformed caption contains fixed position elements.
- This test ensures that transformed caption element is a containing block for fixed position elements.
|
|
transform-transformed-tbody-contains-fixed-position |
= |
|
Transformed tbody contains fixed position elements.
- This test ensures that transformed tbody element is a containing block for fixed position elements.
|
|
transform-transformed-td-contains-fixed-position |
= |
|
Transformed td contains fixed position elements.
- This test ensures that transformed td element is a containing block for fixed position elements.
|
|
transform-transformed-th-contains-fixed-position |
= |
|
Transformed th contains fixed position elements.
- This test ensures that transformed th element is a containing block for fixed position elements.
|
|
transform-transformed-thead-contains-fixed-position |
= |
|
Transformed thead contains fixed position elements.
- This test ensures that transformed thead element is a containing block for fixed position elements.
|
|
transform-transformed-tr-contains-fixed-position |
= |
|
Transformed tr contains fixed position elements.
- This test ensures that transformed tr element is a containing block for fixed position elements.
|
|
transform-transformed-tr-percent-height-child |
= |
|
Transformed tr with percent height abspos child.
- This test ensures that transformed tr's percent height abspos child uses tr's height as reference.
|