mirror of
https://github.com/servo/servo.git
synced 2025-06-23 16:44:33 +01:00
144 lines
No EOL
7.5 KiB
HTML
144 lines
No EOL
7.5 KiB
HTML
|
|
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<title>The backface-visibility Property - CSS Transforms Module Level 1 CR Test Suite</title>
|
|
<style type="text/css">
|
|
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
|
@import "../indices.css";
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<h1>CSS Transforms Module Level 1 CR Test Suite</h1>
|
|
<h2>The backface-visibility Property (9 tests)</h2>
|
|
<table width="100%">
|
|
<col id="test-column"></col>
|
|
<col id="refs-column"></col>
|
|
<col id="flags-column"></col>
|
|
<col id="info-column"></col>
|
|
<thead>
|
|
<tr>
|
|
<th>Test</th>
|
|
<th><abbr title="Rendering References">Refs</abbr></th>
|
|
<th>Flags</th>
|
|
<th>Info</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="s12">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s12">+</a>
|
|
<a href="http://www.w3.org/TR/css-transforms-1/#backface-visibility-property">12 The backface-visibility Property</a></th></tr>
|
|
<!-- 1 tests -->
|
|
<tr id="transform3d-backface-visibility-008-12" class="primary">
|
|
<td><strong>
|
|
<a href="transform3d-backface-visibility-008.xht">transform3d-backface-visibility-008</a></strong></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
|
|
<td></td>
|
|
<td>backface-visibility - visible
|
|
<ul class="assert">
|
|
<li>When 'backface-visiblity' is set to visible, the back side of a transformed element is visible.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s12.#issue-5f192247">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s12.#propdef-backface-visibility">
|
|
<!-- 8 tests -->
|
|
<tr id="backface-visibility-hidden-001-12.#propdef-backface-visibility" class="">
|
|
<td>
|
|
<a href="backface-visibility-hidden-001.xht">backface-visibility-hidden-001</a></td>
|
|
<td><a href="reference/backface-visibility-hidden-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>transform property with backface visibility = hidden
|
|
<ul class="assert">
|
|
<li>When the value of backface visibility property is 'hidden', the back side of a transformed element is invisible when facing the viewer.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="transform3d-backface-visibility-001-12.#propdef-backface-visibility" class="primary">
|
|
<td><strong>
|
|
<a href="transform3d-backface-visibility-001.xht">transform3d-backface-visibility-001</a></strong></td>
|
|
<td><a href="reference/transform-lime-square-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>Simple Backface-Visibility, rotatex(180deg)
|
|
<ul class="assert">
|
|
<li>This tests that a very simple case of backface-visibility causes the element to disappear: rotateX(180deg) is specified on the same element that has backface-visibility: hidden.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="transform3d-backface-visibility-002-12.#propdef-backface-visibility" class="primary">
|
|
<td><strong>
|
|
<a href="transform3d-backface-visibility-002.xht">transform3d-backface-visibility-002</a></strong></td>
|
|
<td><a href="reference/transform-lime-square-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>Backface-Visibility With Transformed Parent and Child in Different Rendering Contexts
|
|
<ul class="assert">
|
|
<li>This tests that if an element has 'backface-visibility: hidden' and is rotated 180deg, so it would normally disappear, it doesn't reappear just because its parent also has a 180deg rotation. The rotations don't cancel, since the parent doesn't have 'transform-style: preserve-3d' and is in a different rendering context.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="transform3d-backface-visibility-003-12.#propdef-backface-visibility" class="primary">
|
|
<td><strong>
|
|
<a href="transform3d-backface-visibility-003.xht">transform3d-backface-visibility-003</a></strong></td>
|
|
<td><a href="reference/transform-lime-square-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>Simple Backface-Visibility, rotatex(180deg) on Table
|
|
<ul class="assert">
|
|
<li>This is identical to transform3d-backface-visibility-001.html, except that display: table is specified too. This is motivated by a real-world UA bug: <https://bugzilla.mozilla.org/show_bug.cgi?id=724750>.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="transform3d-backface-visibility-004-12.#propdef-backface-visibility" class="primary">
|
|
<td><strong>
|
|
<a href="transform3d-backface-visibility-004.xht">transform3d-backface-visibility-004</a></strong></td>
|
|
<td><a href="reference/transform-lime-square-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>Backface-Visibility With Transformed Parent in Same Rendering Context, Split Transform
|
|
<ul class="assert">
|
|
<li>This tests that if a parent and child are in the same 3D rendering context, and a 60deg rotation on the parent combines with a 60deg rotation on the child to make a 120deg rotation, the child will disappear if 'backface-visibility: hidden' is specified, just like if the 120deg rotation were specified on the child to start with.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="transform3d-backface-visibility-005-12.#propdef-backface-visibility" class="primary">
|
|
<td><strong>
|
|
<a href="transform3d-backface-visibility-005.xht">transform3d-backface-visibility-005</a></strong></td>
|
|
<td><a href="reference/transform-lime-square-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>Backface-Visibility With Transformed Parent in Different Rendering Context
|
|
<ul class="assert">
|
|
<li>This tests that if an element is not transformed, but its parent is rotated 180deg in a different rendering context, the child's 'backface-visibility: hidden' does not make it disappear. Only transforms that affect the child itself are relevant to 'backface-visibility'.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="transform3d-backface-visibility-006-12.#propdef-backface-visibility" class="primary">
|
|
<td><strong>
|
|
<a href="transform3d-backface-visibility-006.xht">transform3d-backface-visibility-006</a></strong></td>
|
|
<td><a href="reference/transform-lime-square-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>Backface-Visibility With Transformed Parent in Same Rendering Context
|
|
<ul class="assert">
|
|
<li>This is the same as transform3d-backface-visibility-005.html, except that the parent has 'transform-style: preserve-3d'. Thus the child is affected by the parent's transform and should not be visible.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="transform3d-backface-visibility-007-12.#propdef-backface-visibility" class="primary">
|
|
<td><strong>
|
|
<a href="transform3d-backface-visibility-007.xht">transform3d-backface-visibility-007</a></strong></td>
|
|
<td><a href="reference/transform-lime-square-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>Simple Backface-Visibility, scalez(-1)
|
|
<ul class="assert">
|
|
<li>This is the same as transform3d-backface-visibility-001.html, except it uses scalez(-1) instead of rotatex(180deg). scalez(-1) has no visible effect when applied by itself to a box, since the box's Z-coordinates are all 0, but it still causes it to be affected by 'backface-visibility'.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
</body>
|
|
</html> |