mirror of
https://github.com/servo/servo.git
synced 2025-06-26 01:54:33 +01:00
141 lines
No EOL
6.8 KiB
HTML
141 lines
No EOL
6.8 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>Relation to the box model and float behavior - CSS Shapes 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 Shapes Module Level 1 CR Test Suite</h1>
|
|
<h2>Relation to the box model and float behavior (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="s2">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s2">+</a>
|
|
<a href="http://www.w3.org/TR/css-shapes-1/#relation-to-box-model-and-float-behavior">2 Relation to the box model and float behavior</a></th></tr>
|
|
<!-- 9 tests -->
|
|
<tr id="shape-outside-001-2" class="primary ahem">
|
|
<td><strong>
|
|
<a href="shape-outside-001.xht">shape-outside-001</a></strong></td>
|
|
<td><a href="reference/shape-outside-001-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>Left and right float with shape-outside
|
|
<ul class="assert">
|
|
<li>This test verifies that left floats with a shape-outside only allow content wrapping on the right side, and right floats only allow wrapping on the left.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-002-2" class="primary ahem">
|
|
<td><strong>
|
|
<a href="shape-outside-002.xht">shape-outside-002</a></strong></td>
|
|
<td><a href="reference/shape-outside-001-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>Left and right float with shape-outside with clipped left float
|
|
<ul class="assert">
|
|
<li>This test verifies that left floats with a shape-outside only allow content wrapping on the right side, and right floats only allow wrapping on the left and that the left float shape is clipped to the float&acirc;&#8364;&#8482;s margin box</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-003-2" class="primary ahem">
|
|
<td><strong>
|
|
<a href="shape-outside-003.xht">shape-outside-003</a></strong></td>
|
|
<td><a href="reference/shape-outside-001-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>Left and right float with shape-outside with clipped right float
|
|
<ul class="assert">
|
|
<li>This test verifies that left floats with a shape-outside only allow content wrapping on the right side, and right floats only allow wrapping on the left and that the right float shape is clipped to the float&acirc;&#8364;&#8482;s margin box</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-004-2" class="primary ahem">
|
|
<td><strong>
|
|
<a href="shape-outside-004.xht">shape-outside-004</a></strong></td>
|
|
<td><a href="reference/shape-outside-004-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>inset with no extent and inline content - inset(50% 50% 50% 50%)
|
|
<ul class="assert">
|
|
<li>This test verifies that a shape with no extent allow inline content to flow through all of the float&acirc;&#8364;&#8482;s box.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-005-2" class="primary ahem">
|
|
<td><strong>
|
|
<a href="shape-outside-005.xht">shape-outside-005</a></strong></td>
|
|
<td><a href="reference/shape-outside-004-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>inset with no extent and inline content - inset(150% 150% 0% 0%)
|
|
<ul class="assert">
|
|
<li>This test verifies that a shape with no extent allow inline content to flow through all of the float&acirc;&#8364;&#8482;s box.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-006-2" class="primary ahem">
|
|
<td><strong>
|
|
<a href="shape-outside-006.xht">shape-outside-006</a></strong></td>
|
|
<td><a href="reference/shape-outside-006-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>shape-outside with open areas on both the left & right of the float area
|
|
<ul class="assert">
|
|
<li>This test verifies that content wraps only on one side of the float even though there is open area on both the left and right sides of the float.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-007-2" class="primary ahem">
|
|
<td><strong>
|
|
<a href="shape-outside-007.xht">shape-outside-007</a></strong></td>
|
|
<td><a href="reference/shape-outside-007-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>Shape smaller than float content area - 1 float
|
|
<ul class="assert">
|
|
<li>This test verifies that inline content only wraps around the shape, and otherwise overlays the rest of the float margin box</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-008-2" class="primary ahem">
|
|
<td><strong>
|
|
<a href="shape-outside-008.xht">shape-outside-008</a></strong></td>
|
|
<td><a href="reference/shape-outside-008-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>Shape smaller than float content area - 2 floats
|
|
<ul class="assert">
|
|
<li>This test verifies that inline content only wraps around the shapes, and otherwise overlays the rest of the float margin boxes when two floats are stacked next to each other.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-polygon-017-2" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-polygon-017.xht">shape-outside-polygon-017</a></td>
|
|
<td><a href="reference/shape-outside-polygon-017-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>right float, polygon + shape-margin beyond margin box
|
|
<ul class="assert">
|
|
<li>The test verifies that when a shape-margin is defined that extends beyond the margin box, the shape is clipped to the box.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s2.#empty-float-area">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
</table>
|
|
|
|
</body>
|
|
</html> |