mirror of
https://github.com/servo/servo.git
synced 2025-06-23 08:34:42 +01:00
141 lines
No EOL
6.5 KiB
HTML
141 lines
No EOL
6.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>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="https://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="ahem">
|
|
<td>
|
|
<a href="shape-outside-001.xht">shape-outside-001</a></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="ahem">
|
|
<td>
|
|
<a href="shape-outside-002.xht">shape-outside-002</a></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's margin box</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-003-2" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-003.xht">shape-outside-003</a></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's margin box</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-004-2" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-004.xht">shape-outside-004</a></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's box.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-005-2" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-005.xht">shape-outside-005</a></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's box.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-006-2" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-006.xht">shape-outside-006</a></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="ahem">
|
|
<td>
|
|
<a href="shape-outside-007.xht">shape-outside-007</a></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="ahem">
|
|
<td>
|
|
<a href="shape-outside-008.xht">shape-outside-008</a></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> |