mirror of
https://github.com/servo/servo.git
synced 2025-06-23 16:44:33 +01:00
296fa2512b
- Update CSS tests to revision e05bfd5e30ed662c2f8a353577003f8eed230180. - Update web-platform-tests to revision a052787dd5c069a340031011196b73affbd68cd9.
2482 lines
No EOL
129 KiB
HTML
2482 lines
No EOL
129 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>Declaring Shapes - 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>Declaring Shapes (169 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="s6">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s6">+</a>
|
|
<a href="https://www.w3.org/TR/css-shapes-1/#declaring-shapes">6 Declaring Shapes</a></th></tr>
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.1">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s6.1">+</a>
|
|
<a href="https://www.w3.org/TR/css-shapes-1/#shape-outside-property">6.1 Float Area Shape: the shape-outside property</a></th></tr>
|
|
<!-- 159 tests -->
|
|
<tr id="shape-image-000-6.1" class="ahem image">
|
|
<td>
|
|
<a href="shape-image-000.xht">shape-image-000</a></td>
|
|
<td><a href="reference/shape-image-000-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>Image shape on a left float
|
|
<ul class="assert">
|
|
<li>This test verifies that a shape specified as a png image in a data: url is properly respected on a left float.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-image-001-6.1" class="ahem image">
|
|
<td>
|
|
<a href="shape-image-001.xht">shape-image-001</a></td>
|
|
<td><a href="reference/shape-image-001-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>Image shape on a left float
|
|
<ul class="assert">
|
|
<li>This test verifies that a shape specified as a png image with 70% alpha is treated as if the image had no alpha.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-image-002-6.1" class="ahem image">
|
|
<td>
|
|
<a href="shape-image-002.xht">shape-image-002</a></td>
|
|
<td><a href="reference/shape-image-002-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>Image shape on a left float
|
|
<ul class="assert">
|
|
<li>This test verifies that a shape specified as a svg image in a data uri is properly interpreted as a shape.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-image-003-6.1" class="ahem image">
|
|
<td>
|
|
<a href="shape-image-003.xht">shape-image-003</a></td>
|
|
<td><a href="reference/shape-image-002-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>Image shape on a left float
|
|
<ul class="assert">
|
|
<li>This test verifies that a shape specified as a svg image with 20% alpha and 0.3 shape-image-threshold creates a proper shape.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-image-004-6.1" class="ahem image">
|
|
<td>
|
|
<a href="shape-image-004.xht">shape-image-004</a></td>
|
|
<td><a href="reference/shape-image-000-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>Image shape on a left float
|
|
<ul class="assert">
|
|
<li>This test verifies that a shape specified as a png image with 50% alpha and 0.6 shape-image-threshold creates a proper shape.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-image-005-6.1" class="ahem image">
|
|
<td>
|
|
<a href="shape-image-005.xht">shape-image-005</a></td>
|
|
<td><a href="reference/shape-image-002-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>Image shape on a left float
|
|
<ul class="assert">
|
|
<li>This test verifies that a shape specified as a svg image in a data uri with 70% alpha and 0.8 shape-image-threshold creates a proper shape.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-image-006-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-image-006.xht">shape-image-006</a></td>
|
|
<td><a href="reference/shape-image-006-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>left float, url(png), real image + shape-margin (px)
|
|
<ul class="assert">
|
|
<li>This test verifies that content wraps around all the image pixels + the shape-margin when shape-outside is given a png file.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-image-007-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-image-007.xht">shape-image-007</a></td>
|
|
<td><a href="reference/shape-image-007-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>left float, url(svg), real image + shape-margin (px)
|
|
<ul class="assert">
|
|
<li>This test verifies that content wraps around all the image pixels + the shape-margin when shape-outside is given an svg file.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-image-008-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-image-008.xht">shape-image-008</a></td>
|
|
<td><a href="reference/shape-image-008-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>left float, url(jpg), data uri + shape-margin (%)
|
|
<ul class="assert">
|
|
<li>This test verifies that content wraps around all the image pixels + the shape-margin as a percentage when shape-outside is given an jpg data uri.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-image-009-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-image-009.xht">shape-image-009</a></td>
|
|
<td><a href="reference/shape-image-006-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>left float, url(png), real image 70% + shape-image-threshold + shape-margin (px)
|
|
<ul class="assert">
|
|
<li>This test verifies that content wraps around the image pixels extracted from a shape-outside png file with shape-image-threshold set + the shape-margin in absolute length.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-image-010-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-image-010.xht">shape-image-010</a></td>
|
|
<td><a href="reference/shape-image-006-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>left float, url(png), data uri + shape-image-threshold + shape-margin (%)
|
|
<ul class="assert">
|
|
<li>This test verifies that content wraps around the image pixels extracted from a shape-outside png file with shape-image-threshold set + the shape-margin as a percentage.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-image-011-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-image-011.xht">shape-image-011</a></td>
|
|
<td><a href="reference/shape-image-007-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>left float, url(svg), real image + shape-image-threshold + shape-margin (px)
|
|
<ul class="assert">
|
|
<li>This test verifies that content wraps around the image pixels extracted from a shape-outside svg file with shape-image-threshold set + the shape-margin in absolute length.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-image-012-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-image-012.xht">shape-image-012</a></td>
|
|
<td><a href="reference/shape-image-012-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>Wrapping content around right floating actual jpg image
|
|
<ul class="assert">
|
|
<li>This test verifies that content wraps around all the image pixels when shape-outside is given a jpg.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-image-013-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-image-013.xht">shape-image-013</a></td>
|
|
<td><a href="reference/shape-image-013-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>Wrapping content around shape given by a right floating png
|
|
<ul class="assert">
|
|
<li>This test verifies that content wraps around the shape defined by the data uri png.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-image-014-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-image-014.xht">shape-image-014</a></td>
|
|
<td><a href="reference/shape-image-002-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>Wrapping content around shape given by a right floating svg file
|
|
<ul class="assert">
|
|
<li>This test verifies that content wraps around the shape defined by an svg file.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-image-015-6.1" class="ahem image">
|
|
<td>
|
|
<a href="shape-image-015.xht">shape-image-015</a></td>
|
|
<td><a href="reference/shape-image-013-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>Image shape on a right float
|
|
<ul class="assert">
|
|
<li>This test verifies that a shape specified as a png image with 20% alpha and 0.2 shape-image-threshold creates a proper shape.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-image-016-6.1" class="ahem image">
|
|
<td>
|
|
<a href="shape-image-016.xht">shape-image-016</a></td>
|
|
<td><a href="reference/shape-image-013-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>Image shape on a right float
|
|
<ul class="assert">
|
|
<li>This test verifies that a shape specified as a png image with 70% alpha and 0.71 shape-image-threshold creates a proper shape.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-image-017-6.1" class="ahem image">
|
|
<td>
|
|
<a href="shape-image-017.xht">shape-image-017</a></td>
|
|
<td><a href="reference/shape-image-002-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>Image shape on a right float
|
|
<ul class="assert">
|
|
<li>This test verifies that a shape specified as a data uri svg with 70% alpha creates a proper shape, shape-image-threshold is defined to 0.71.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-image-018-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-image-018.xht">shape-image-018</a></td>
|
|
<td><a href="reference/shape-image-018-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>right float, url(jpg), real image + shape-margin (%)
|
|
<ul class="assert">
|
|
<li>This test verifies that the boundary of a shape-outside defined by a JPEG image file is the same as the image's dimensions + shape-margin.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-image-019-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-image-019.xht">shape-image-019</a></td>
|
|
<td><a href="reference/shape-image-019-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>right float, url(png), data uri + shape-margin (px)
|
|
<ul class="assert">
|
|
<li>This test verifies the boundary of a shape-outside defined by a PNG data URI and a shape-margin.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-image-020-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-image-020.xht">shape-image-020</a></td>
|
|
<td><a href="reference/shape-image-020-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>right float, url(svg), data uri + shape-margin (%)
|
|
<ul class="assert">
|
|
<li>This test verifies the boundary of a shape-outside defined by an SVG URI and a shape-margin.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-image-021-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-image-021.xht">shape-image-021</a></td>
|
|
<td><a href="reference/shape-image-021-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>right float, url(png), real image + shape-image-threshold + shape-margin (%)
|
|
<ul class="assert">
|
|
<li>This test verifies that the boundary of a shape-outside defined by a PNG image file and shape-margin is correct.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-image-022-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-image-022.xht">shape-image-022</a></td>
|
|
<td><a href="reference/shape-image-022-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>right float, url(gif), real image + shape-image-threshold + shape-margin (px)
|
|
<ul class="assert">
|
|
<li>This test verifies that the boundary of a shape-outside defined by a GIF image file and shape-margin is correct.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-image-023-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-image-023.xht">shape-image-023</a></td>
|
|
<td><a href="reference/shape-image-023-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>right float, url(svg), data uri + shape-image-threshold + shape-margin (%)
|
|
<ul class="assert">
|
|
<li>This test verifies the boundary of a shape-outside defined by an SVG URI, shape-image-threshold, and a shape-margin.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-image-024-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-image-024.xht">shape-image-024</a></td>
|
|
<td><a href="reference/shape-image-024-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>shape-outside from img element with different size than the image file
|
|
<ul class="assert">
|
|
<li>This test verifies that content wraps around all the image pixels calculated from the size of the img element, which is different than the size of the image itself.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-image-025-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-image-025.xht">shape-image-025</a></td>
|
|
<td><a href="reference/shape-image-025-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>shape-outside from first frame of animated gif
|
|
<ul class="assert">
|
|
<li>This test verifies that shape-outside is extracted from the first frame of an animated gif.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-001-6.1" 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-6.1" 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-6.1" 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-6.1" 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-6.1" 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-6.1" 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-6.1" 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-6.1" 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-010-6.1" class="ahem dom script">
|
|
<td>
|
|
<a href="shape-outside-010.xht">shape-outside-010</a></td>
|
|
<td></td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape from image - url(), alpha channel, opacity 0
|
|
<ul class="assert">
|
|
<li>This test verifies that the content flows around the shape defined in the images alpha channel that is completely transparent.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-011-6.1" class="ahem dom script">
|
|
<td>
|
|
<a href="shape-outside-011.xht">shape-outside-011</a></td>
|
|
<td></td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape from image - url(), alpha channel, opacity > 0
|
|
<ul class="assert">
|
|
<li>This test verifies that the content flows around the shape defined in the images alpha channel that has some opacity.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-012-6.1" class="ahem dom script">
|
|
<td>
|
|
<a href="shape-outside-012.xht">shape-outside-012</a></td>
|
|
<td><a href="reference/shape-outside-012-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape from image - shape-image-threshold - 0.9
|
|
<ul class="assert">
|
|
<li>This test verifies content flows around a shape that is defined in the image's alpha channel and adjusted by the image-threshold</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-013-6.1" class="ahem dom script">
|
|
<td>
|
|
<a href="shape-outside-013.xht">shape-outside-013</a></td>
|
|
<td></td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape from image - shape-margin
|
|
<ul class="assert">
|
|
<li>This test verifies that the content flows around the shape defined in the images alpha channel and adjusted by the shape-margin.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-014-6.1" class="ahem dom script">
|
|
<td>
|
|
<a href="shape-outside-014.xht">shape-outside-014</a></td>
|
|
<td></td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape from box value - margin-box
|
|
<ul class="assert">
|
|
<li>This test verifies that content wraps around a shape defined by its margin box.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-015-6.1" class="ahem dom script">
|
|
<td>
|
|
<a href="shape-outside-015.xht">shape-outside-015</a></td>
|
|
<td></td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape from box value - border-box
|
|
<ul class="assert">
|
|
<li>This test verifies that content wraps around a shape defined by its border box.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-016-6.1" class="ahem dom script">
|
|
<td>
|
|
<a href="shape-outside-016.xht">shape-outside-016</a></td>
|
|
<td></td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape from box value - padding-box
|
|
<ul class="assert">
|
|
<li>This test verifies that content wraps around a shape defined by its padding box.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-017-6.1" class="ahem dom script">
|
|
<td>
|
|
<a href="shape-outside-017.xht">shape-outside-017</a></td>
|
|
<td></td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape from box value - content-box
|
|
<ul class="assert">
|
|
<li>This test verifies that content wraps around a shape defined by its content box.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-018-6.1" class="ahem dom script">
|
|
<td>
|
|
<a href="shape-outside-018.xht">shape-outside-018</a></td>
|
|
<td></td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>shape-margin offset from a polygonal shape-outside
|
|
<ul class="assert">
|
|
<li>This test verifies that that content flows around the shape-margin defined on a polygonal shape-outside.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-019-6.1" class="ahem dom script">
|
|
<td>
|
|
<a href="shape-outside-019.xht">shape-outside-019</a></td>
|
|
<td></td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape from image - alpha channel, opacity > 0 + shape-margin
|
|
<ul class="assert">
|
|
<li>This test verifies that the content flows around the shape defined in the images alpha channel and the shape-margin.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-box-000-6.1" class="dom script">
|
|
<td>
|
|
<a href="shape-outside-box-000.xht">shape-outside-box-000</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Outside Box Valid Values
|
|
<ul class="assert">
|
|
<li>Shape-outside may be one of the box model box values</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-box-002-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-box-002.xht">shape-outside-box-002</a></td>
|
|
<td><a href="reference/shape-outside-box-001-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>left float, shape-outside: content-box
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a left float with a shape-outside defined as the content box.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-box-003-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-box-003.xht">shape-outside-box-003</a></td>
|
|
<td><a href="reference/shape-outside-box-001-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>left float, shape-outside: border-box
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a left float with a shape-outside defined as the border box.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-box-004-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-box-004.xht">shape-outside-box-004</a></td>
|
|
<td><a href="reference/shape-outside-box-001-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>left float, shape-outside: padding-box
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a left float with a shape-outside defined as the padding box.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-box-006-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-box-006.xht">shape-outside-box-006</a></td>
|
|
<td><a href="reference/shape-outside-box-005-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>right float, shape-outside: content-box
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a right float with a shape-outside defined as the content box.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-box-007-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-box-007.xht">shape-outside-box-007</a></td>
|
|
<td><a href="reference/shape-outside-box-005-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>right float, shape-outside: border-box
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a right float with a shape-outside defined as the border box.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-box-008-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-box-008.xht">shape-outside-box-008</a></td>
|
|
<td><a href="reference/shape-outside-box-005-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>right float, shape-outside: padding-box
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a right float with a shape-outside defined as the padding box.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-circle-000-6.1" class="dom script">
|
|
<td>
|
|
<a href="shape-outside-circle-000.xht">shape-outside-circle-000</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Outside Circle Valid Formats
|
|
<ul class="assert">
|
|
<li>A circular basic shape has an optional radius and position component</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-circle-001-6.1" class="dom script">
|
|
<td>
|
|
<a href="shape-outside-circle-001.xht">shape-outside-circle-001</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Outside Circle Valid Radii
|
|
<ul class="assert">
|
|
<li>A circle's radius may be a length, percentage, or keyword.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-circle-002-6.1" class="dom script">
|
|
<td>
|
|
<a href="shape-outside-circle-002.xht">shape-outside-circle-002</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Outside Circle Valid Positions
|
|
<ul class="assert">
|
|
<li>A circle's position argument may be any of the valid combinations: [ percentage|length left|center|right ] or [ percentage|length left|center|right ] [ percentage|length top|center|bottom ] or [ left|center|right ] or [ left|center|right top|center|bottom ] or [ top|center|bottom ].</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-circle-003-6.1" class="dom script">
|
|
<td>
|
|
<a href="shape-outside-circle-003.xht">shape-outside-circle-003</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Outside Circle Invalid Position Argument Lists
|
|
<ul class="assert">
|
|
<li>Valid circle position argument list are in the form of: [ percentage|length left|center|right ] or [ percentage|length left|center|right ] [ percentage|length top|center|bottom ] or [ left|center|right ] or [ left|center|right top|center|bottom ] or [ top|center|bottom ]. All position arguments not in this form are invalid.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-circle-004-6.1" class="dom script">
|
|
<td>
|
|
<a href="shape-outside-circle-004.xht">shape-outside-circle-004</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Outside Circle - Position Length Units
|
|
<ul class="assert">
|
|
<li>A circle's position arguments may in any valid <length> unit allowed by a <position> value.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-circle-005-6.1" class="dom script">
|
|
<td>
|
|
<a href="shape-outside-circle-005.xht">shape-outside-circle-005</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Outside Circle Valid Radii - length units
|
|
<ul class="assert">
|
|
<li>A circle's radius may be in any valid length unit.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-circle-006-6.1" class="dom script">
|
|
<td>
|
|
<a href="shape-outside-circle-006.xht">shape-outside-circle-006</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Outside Circle Radii - positive/negative, decimal/non-decimal
|
|
<ul class="assert">
|
|
<li>A circle's radius may be in signed positive or decimal/non-decimal format. Negative radii are invalid.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-circle-007-6.1" class="dom script">
|
|
<td>
|
|
<a href="shape-outside-circle-007.xht">shape-outside-circle-007</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Outside Circle Radii - invalid args
|
|
<ul class="assert">
|
|
<li>This test verifies that invalid shape-radius arguments on circle() don't parse.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-circle-008-6.1" class="dom script">
|
|
<td>
|
|
<a href="shape-outside-circle-008.xht">shape-outside-circle-008</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Outside Circle Invalid Position Argument Values
|
|
<ul class="assert">
|
|
<li>This test verifies that invalid position arguments on circle() don't parse</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-circle-009-6.1" class="dom script">
|
|
<td>
|
|
<a href="shape-outside-circle-009.xht">shape-outside-circle-009</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Outside Circle Position Arguments - positive/negative, decimal/non-decimal
|
|
<ul class="assert">
|
|
<li>A circle's position arguments may be in signed positive/negative or decimal/non-decimal format.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-circle-010-6.1" class="dom script">
|
|
<td>
|
|
<a href="shape-outside-circle-010.xht">shape-outside-circle-010</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Outside Circle args - calc() values
|
|
<ul class="assert">
|
|
<li>A circle's arguments may be in calc() values.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-circle-011-6.1" class="dom script">
|
|
<td>
|
|
<a href="shape-outside-circle-011.xht">shape-outside-circle-011</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Outside Circle position args - calc() values
|
|
<ul class="assert">
|
|
<li>A circle's <position> arguments may be in calc() values.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-circle-013-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-circle-013.xht">shape-outside-circle-013</a></td>
|
|
<td><a href="reference/shape-outside-circle-013-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>left float, circle + margin-box + position (px)
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a left float with a shape-outside defined as a circle from the margin box and positioned in px units.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-circle-014-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-circle-014.xht">shape-outside-circle-014</a></td>
|
|
<td><a href="reference/shape-outside-circle-013-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>left float, circle + content-box + radius and position in % units
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a left float with a shape-outside defined as a circle from the content box with the radius and position in percentage units.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-circle-015-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-circle-015.xht">shape-outside-circle-015</a></td>
|
|
<td><a href="reference/shape-outside-circle-013-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>left float, circle + closest-side + padding-box
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a left float with a shape-outside defined as a circle with the radius explicitly set as closest-side from the padding box.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-circle-016-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-circle-016.xht">shape-outside-circle-016</a></td>
|
|
<td><a href="reference/shape-outside-circle-013-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>left float, circle + farthest-side + border-box
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a left float with a shape-outside defined as a circle with the radius defined as farthest-side from the border box.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-circle-017-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-circle-017.xht">shape-outside-circle-017</a></td>
|
|
<td><a href="reference/shape-outside-circle-013-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>left float, circle + shape-margin in px
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a left float with a shape-outside defined as a circle with a shape-margin in px units.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-circle-018-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-circle-018.xht">shape-outside-circle-018</a></td>
|
|
<td><a href="reference/shape-outside-circle-013-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>left float, circle + shape-margin in % units
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a left float with a shape-outside defined as a circle with a shape-margin in percentage units.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-circle-019-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-circle-019.xht">shape-outside-circle-019</a></td>
|
|
<td><a href="reference/shape-outside-circle-013-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>left float, circle at top left + margin-box + shape-margin
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a left float with a shape-outside defined as a circle from the margin box and is positioned top left with a shape-margin.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-circle-020-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-circle-020.xht">shape-outside-circle-020</a></td>
|
|
<td><a href="reference/shape-outside-circle-013-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>left float, circle at % + border-box + shape-margin
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a left float with a shape-outside defined as a circle from the padding box with a position specified as a percentage and with a shape-margin.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-circle-021-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-circle-021.xht">shape-outside-circle-021</a></td>
|
|
<td><a href="reference/shape-outside-circle-013-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>left float, circle + farthest-side + padding-box + shape-margin
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a left float with a shape-outside defined as a circle with a farthest-side radius from the padding box with a shape-margin.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-circle-022-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-circle-022.xht">shape-outside-circle-022</a></td>
|
|
<td><a href="reference/shape-outside-circle-013-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>left float, circle at bottom right + content-box + shape-margin
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a left float with a shape-outside defined as a circle from the padding box positioned at center right with a shape-margin.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-circle-024-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-circle-024.xht">shape-outside-circle-024</a></td>
|
|
<td><a href="reference/shape-outside-circle-023-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>right float, circle radius in % units + shape-margin + border-box
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a right float with a shape-outside defined as a circle from the border box with radius in percentage units and with a shape-margin.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-circle-025-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-circle-025.xht">shape-outside-circle-025</a></td>
|
|
<td><a href="reference/shape-outside-circle-023-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>right float, circle + shape-margin + padding-box
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a right float with a shape-outside defined as a circle from the padding box with a shape-margin.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-circle-026-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-circle-026.xht">shape-outside-circle-026</a></td>
|
|
<td><a href="reference/shape-outside-circle-023-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>right float, circle + shape-margin + content-box
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a right float with a shape-outside defined as a circle from the content box with a shape-margin.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-circle-027-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-circle-027.xht">shape-outside-circle-027</a></td>
|
|
<td><a href="reference/shape-outside-circle-023-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>right float, circle with radius in % units + shape-margin + margin-box
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a right float with a shape-outside defined as a circle positioned from the margin box with a shape-margin.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-circle-028-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-circle-028.xht">shape-outside-circle-028</a></td>
|
|
<td><a href="reference/shape-outside-circle-023-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>right float, circle(closest-side) at position % + shape-margin + border-box
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a right float with a shape-outside defined as a circle positioned from the border box with a shape-margin.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-circle-029-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-circle-029.xht">shape-outside-circle-029</a></td>
|
|
<td><a href="reference/shape-outside-circle-023-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>right float, circle at center right + shape-margin + padding-box
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a right float with a shape-outside defined as a circle positioned center right from the padding box with a shape-margin.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-circle-030-6.1" class="ahem dom">
|
|
<td>
|
|
<a href="shape-outside-circle-030.xht">shape-outside-circle-030</a></td>
|
|
<td><a href="reference/shape-outside-circle-030-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
|
<td>left float, circle radius in px units
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a left float with a shape-outside defined as an circle with the radius in px units.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-circle-031-6.1" class="ahem dom">
|
|
<td>
|
|
<a href="shape-outside-circle-031.xht">shape-outside-circle-031</a></td>
|
|
<td><a href="reference/shape-outside-circle-030-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
|
<td>left float, circle radius in % units
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a left float with a shape-outside defined as an circle with the radius in percentage units.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-computed-shape-000-6.1" class="dom script">
|
|
<td>
|
|
<a href="shape-outside-computed-shape-000.xht">shape-outside-computed-shape-000</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Outside Basic Shape Computed Font Relative Lengths
|
|
<ul class="assert">
|
|
<li>The basic shape can contain relative length formats, which resolve to the computed (absolute) length value</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-computed-shape-001-6.1" class="dom script">
|
|
<td>
|
|
<a href="shape-outside-computed-shape-001.xht">shape-outside-computed-shape-001</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Outside Basic Shape Computed Percentage Lengths
|
|
<ul class="assert">
|
|
<li>The basic shape can contain percentages, which remain unchanged when computed</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-ellipse-000-6.1" class="dom script">
|
|
<td>
|
|
<a href="shape-outside-ellipse-000.xht">shape-outside-ellipse-000</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Outside Ellipse Valid Formats
|
|
<ul class="assert">
|
|
<li>An elliptical basic shape has two optional components, radii (2) and a position.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-ellipse-001-6.1" class="dom script">
|
|
<td>
|
|
<a href="shape-outside-ellipse-001.xht">shape-outside-ellipse-001</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Outside Ellipse Valid Radii
|
|
<ul class="assert">
|
|
<li>An elliptical basic shape's radii may be keywords, lengths or percentages</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-ellipse-002-6.1" class="dom script">
|
|
<td>
|
|
<a href="shape-outside-ellipse-002.xht">shape-outside-ellipse-002</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Outside Ellipse Valid Positions
|
|
<ul class="assert">
|
|
<li>An ellipse's position argument may be any of the valid combinations: [ percentage|length left|center|right ] or [ percentage|length left|center|right ] [ percentage|length top|center|bottom ] or [ left|center|right ] or [ left|center|right top|center|bottom ] or [ top|center|bottom ].</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-ellipse-003-6.1" class="dom script">
|
|
<td>
|
|
<a href="shape-outside-ellipse-003.xht">shape-outside-ellipse-003</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Outside Ellipse Invalid Position Argument Lists
|
|
<ul class="assert">
|
|
<li>Valid ellipse position argument list are in the form of: [ percentage|length left|center|right ] or [ percentage|length left|center|right ] [ percentage|length top|center|bottom ] or [ left|center|right ] or [ left|center|right top|center|bottom ] or [ top|center|bottom ]. All position arguments not in this form are invalid.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-ellipse-004-6.1" class="dom script">
|
|
<td>
|
|
<a href="shape-outside-ellipse-004.xht">shape-outside-ellipse-004</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Outside Ellipse - Position Length Units
|
|
<ul class="assert">
|
|
<li>An ellipse's position arguments may in any valid <length> unit allowed by a <position> value.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-ellipse-005-6.1" class="dom script">
|
|
<td>
|
|
<a href="shape-outside-ellipse-005.xht">shape-outside-ellipse-005</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Outside Ellipse Valid Radii - length units
|
|
<ul class="assert">
|
|
<li>An ellipse's radii may be in any valid length unit.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-ellipse-006-6.1" class="dom script">
|
|
<td>
|
|
<a href="shape-outside-ellipse-006.xht">shape-outside-ellipse-006</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Outside Ellipse Radii - positive/negative, decimal/non-decimal
|
|
<ul class="assert">
|
|
<li>An ellipse's radii may be in signed positive or decimal/non-decimal format. Negative radii are invalid.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-ellipse-007-6.1" class="dom script">
|
|
<td>
|
|
<a href="shape-outside-ellipse-007.xht">shape-outside-ellipse-007</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Outside Ellipse Radii - invalid args
|
|
<ul class="assert">
|
|
<li>This test verifies that invalid shape-radius arguments on ellipse() don't parse.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-ellipse-008-6.1" class="dom script">
|
|
<td>
|
|
<a href="shape-outside-ellipse-008.xht">shape-outside-ellipse-008</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Outside Ellipse Invalid Position Argument Values
|
|
<ul class="assert">
|
|
<li>This test verifies that invalid position arguments on ellipse() don't parse</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-ellipse-009-6.1" class="dom script">
|
|
<td>
|
|
<a href="shape-outside-ellipse-009.xht">shape-outside-ellipse-009</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Outside Ellipse Position Arguments - positive/negative, decimal/non-decimal
|
|
<ul class="assert">
|
|
<li>An ellipse's position arguments may be in signed positive/negative or decimal/non-decimal format.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-ellipse-010-6.1" class="dom script">
|
|
<td>
|
|
<a href="shape-outside-ellipse-010.xht">shape-outside-ellipse-010</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Outside Ellipse args - calc() values
|
|
<ul class="assert">
|
|
<li>An ellipse's arguments may be in calc() values.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-ellipse-011-6.1" class="dom script">
|
|
<td>
|
|
<a href="shape-outside-ellipse-011.xht">shape-outside-ellipse-011</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Outside Ellipse position args - calc() values
|
|
<ul class="assert">
|
|
<li>An ellipse's <position> arguments may be in calc() values.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-ellipse-013-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-ellipse-013.xht">shape-outside-ellipse-013</a></td>
|
|
<td><a href="reference/shape-outside-ellipse-013-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>left float, ellipse radii and position in px
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a left float with a shape-outside defined as a ellipse with radii and position in px units.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-ellipse-014-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-ellipse-014.xht">shape-outside-ellipse-014</a></td>
|
|
<td><a href="reference/shape-outside-ellipse-013-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>left float, ellipse radii and position in % units + content-box
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a left float with a shape-outside defined as a ellipse from the content box with the position and radii in percentage units.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-ellipse-015-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-ellipse-015.xht">shape-outside-ellipse-015</a></td>
|
|
<td><a href="reference/shape-outside-ellipse-013-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>left float, ellipse + closest-side + padding-box
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a left float with a shape-outside defined as an ellipse with the radii explicitly set as closest-side from the padding box.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-ellipse-016-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-ellipse-016.xht">shape-outside-ellipse-016</a></td>
|
|
<td><a href="reference/shape-outside-ellipse-013-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>left float, ellipse radii in % units + padding-box
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a left float with a shape-outside defined as a ellipse from the padding box with the radii in percentage units.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-ellipse-017-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-ellipse-017.xht">shape-outside-ellipse-017</a></td>
|
|
<td><a href="reference/shape-outside-ellipse-013-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>left float, ellipse(farthest-side) + shape-margin + content-box
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a left float with a shape-outside defined as a ellipse from the content box with only the rx defined as farthest-side and with a shape-margin.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-ellipse-018-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-ellipse-018.xht">shape-outside-ellipse-018</a></td>
|
|
<td><a href="reference/shape-outside-ellipse-013-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>left float, ellipse + shape-margin in % units
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a left float with a shape-outside defined as a ellipse with a shape-margin in percentage units.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-ellipse-019-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-ellipse-019.xht">shape-outside-ellipse-019</a></td>
|
|
<td><a href="reference/shape-outside-ellipse-013-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>left float, ellipse radii in % units + padding-box + shape-margin
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a left float with a shape-outside defined as a ellipse from the padding box with radii in percentage units and with a shape-margin.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-ellipse-020-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-ellipse-020.xht">shape-outside-ellipse-020</a></td>
|
|
<td><a href="reference/shape-outside-ellipse-013-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>left float, ellipse radii in % units + margin-box + shape-margin
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a left float with a shape-outside defined as a ellipse from the margin box with the radii specified in percentage units and with a shape-margin.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-ellipse-021-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-ellipse-021.xht">shape-outside-ellipse-021</a></td>
|
|
<td><a href="reference/shape-outside-ellipse-021-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>right float, ellipse (closest-side px) + shape-margin + padding box
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a right float with a shape-outside defined as a ellipse from the padding box with rx explicitly set at closest-side and ry in px units and with a shape-margin.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-ellipse-022-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-ellipse-022.xht">shape-outside-ellipse-022</a></td>
|
|
<td><a href="reference/shape-outside-ellipse-021-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>right float, ellipse(closest-side px) + shape-margin + content-box
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a right float with a shape-outside defined as a ellipse from the content box with a shape-margin.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-ellipse-023-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-ellipse-023.xht">shape-outside-ellipse-023</a></td>
|
|
<td><a href="reference/shape-outside-ellipse-021-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>right float, ellipse + shape-margin
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a right float with a shape-outside defined as an ellipse with only the horizontal offset specifed in px and with a shape-margin.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-ellipse-024-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-ellipse-024.xht">shape-outside-ellipse-024</a></td>
|
|
<td><a href="reference/shape-outside-ellipse-021-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>right float, ellipse at position (%) + shape-margin (%) + border-box
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a right float with a shape-outside defined as a ellipse positioned from the border box with only the horizontal offset specified in percentage units and with a shape-margin in percentage units.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-ellipse-025-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-ellipse-025.xht">shape-outside-ellipse-025</a></td>
|
|
<td><a href="reference/shape-outside-ellipse-021-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>right float, ellipse radii in % at center right + shape-margin + padding-box
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a right float with a shape-outside defined as a ellipse with the radii in percentage units positioned at center right from the margin box with a shape-margin.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-ellipse-030-6.1" class="ahem dom">
|
|
<td>
|
|
<a href="shape-outside-ellipse-030.xht">shape-outside-ellipse-030</a></td>
|
|
<td><a href="reference/shape-outside-ellipse-030-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
|
<td>left float, ellipse radii in px
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a left float with a shape-outside defined as an ellipse with radii in px units.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-ellipse-031-6.1" class="ahem dom">
|
|
<td>
|
|
<a href="shape-outside-ellipse-031.xht">shape-outside-ellipse-031</a></td>
|
|
<td><a href="reference/shape-outside-ellipse-030-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
|
<td>left float, ellipse radii in % units
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a left float with a shape-outside defined as an ellipse with radii in % units.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-inset-000-6.1" class="dom script">
|
|
<td>
|
|
<a href="shape-outside-inset-000.xht">shape-outside-inset-000</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Outside Inset Valid Formats
|
|
<ul class="assert">
|
|
<li>An inset has 1 to 4 insets, and optional border radii that follow the border-radius format</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-inset-001-6.1" class="dom script">
|
|
<td>
|
|
<a href="shape-outside-inset-001.xht">shape-outside-inset-001</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Outside Inset Valid Insets
|
|
<ul class="assert">
|
|
<li>An inset has 1 to 4 insets as percentages or length in any unit</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-inset-002-6.1" class="dom script">
|
|
<td>
|
|
<a href="shape-outside-inset-002.xht">shape-outside-inset-002</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Outside Inset Valid Rounds
|
|
<ul class="assert">
|
|
<li>An inset's radial component has 1 to 4 length/percentages, optionally followed by a '/' and an additional 1 to 4 length/percentages and lengths can be in any unit.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-inset-003-6.1" class="dom script">
|
|
<td>
|
|
<a href="shape-outside-inset-003.xht">shape-outside-inset-003</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Outside Inset Valid Round Length Units
|
|
<ul class="assert">
|
|
<li>An inset's radial component's values can be in any length unit</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-inset-004-6.1" class="dom script">
|
|
<td>
|
|
<a href="shape-outside-inset-004.xht">shape-outside-inset-004</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Outside Inset - positive/negative, decimal/non-decimal args
|
|
<ul class="assert">
|
|
<li>These tests verify that shape-outside inset() arguments can be numbers that are signed in positive and negative and/or decimal/non-decimal form.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-inset-005-6.1" class="dom script">
|
|
<td>
|
|
<a href="shape-outside-inset-005.xht">shape-outside-inset-005</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Outside Inset - Invalid args
|
|
<ul class="assert">
|
|
<li>These tests verifies that invalid inset() arguments don't parse.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-inset-006-6.1" class="dom script">
|
|
<td>
|
|
<a href="shape-outside-inset-006.xht">shape-outside-inset-006</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Outside Inset Radial Args - positive/negative, decimal/non-decimal
|
|
<ul class="assert">
|
|
<li>These tests verify that shape-outside inset() radial component can be numbers that are in signed positive and/or decimal/non-decimal form. Negative values are not allowed</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-inset-007-6.1" class="dom script">
|
|
<td>
|
|
<a href="shape-outside-inset-007.xht">shape-outside-inset-007</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Outside Inset Radial Args - Invalid
|
|
<ul class="assert">
|
|
<li>These tests verify invalid radial component arguments don't parse.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-inset-008-6.1" class="dom script">
|
|
<td>
|
|
<a href="shape-outside-inset-008.xht">shape-outside-inset-008</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Outside Inset Args - calc() values
|
|
<ul class="assert">
|
|
<li>An inset's arguments may be in calc() values.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-inset-009-6.1" class="dom script">
|
|
<td>
|
|
<a href="shape-outside-inset-009.xht">shape-outside-inset-009</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Outside Inset round args - calc() values
|
|
<ul class="assert">
|
|
<li>An inset's radial component arguments may be in calc() values.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-inset-010-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-inset-010.xht">shape-outside-inset-010</a></td>
|
|
<td><a href="reference/shape-outside-inset-010-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>left float, inset, px units
|
|
<ul class="assert">
|
|
<li>The test verfies that text flows around a left float with a shape-outside defined as an inset rectangle in px units.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-inset-011-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-inset-011.xht">shape-outside-inset-011</a></td>
|
|
<td><a href="reference/shape-outside-inset-010-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>left float, inset, % units
|
|
<ul class="assert">
|
|
<li>The test verfies that text flows around a left float with a shape-outside defined as an inset rectangle in percentage units.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-inset-012-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-inset-012.xht">shape-outside-inset-012</a></td>
|
|
<td><a href="reference/shape-outside-inset-010-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>left float, inset + margin-box
|
|
<ul class="assert">
|
|
<li>The test verfies that text flows around a left float with a shape-outside defined as an inset rectangle + margin-box.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-inset-013-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-inset-013.xht">shape-outside-inset-013</a></td>
|
|
<td><a href="reference/shape-outside-inset-010-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>left float, inset + border-box
|
|
<ul class="assert">
|
|
<li>The test verfies that text flows around a left float with a shape-outside defined as an inset rectangle + border-box.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-inset-014-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-inset-014.xht">shape-outside-inset-014</a></td>
|
|
<td><a href="reference/shape-outside-inset-010-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>left float, inset + content-box
|
|
<ul class="assert">
|
|
<li>The test verfies that text flows around a left float with a shape-outside defined as an inset rectangle + content-box.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-inset-015-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-inset-015.xht">shape-outside-inset-015</a></td>
|
|
<td><a href="reference/shape-outside-inset-010-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>left float, inset + padding-box
|
|
<ul class="assert">
|
|
<li>The test verfies that text flows around a left float with a shape-outside defined as an inset rectangle + padding-box.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-linear-gradient-001-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-linear-gradient-001.xht">shape-outside-linear-gradient-001</a></td>
|
|
<td><a href="reference/shape-outside-linear-gradient-001-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>Left float with linear gradient
|
|
<ul class="assert">
|
|
<li>This test verifies that shape-outside respects a simple linear gradient.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-linear-gradient-002-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-linear-gradient-002.xht">shape-outside-linear-gradient-002</a></td>
|
|
<td><a href="reference/shape-outside-linear-gradient-002-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>Right float with linear gradient
|
|
<ul class="assert">
|
|
<li>This test verifies that shape-outside respects a simple linear gradient on a right float.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-linear-gradient-003-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-linear-gradient-003.xht">shape-outside-linear-gradient-003</a></td>
|
|
<td><a href="reference/shape-outside-linear-gradient-002-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>Right float with linear gradient
|
|
<ul class="assert">
|
|
<li>This test verifies that shape-outside respects a simple linear gradient on a right float with shape-margin applied.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-linear-gradient-004-6.1" class="">
|
|
<td>
|
|
<a href="shape-outside-linear-gradient-004.xht">shape-outside-linear-gradient-004</a></td>
|
|
<td><a href="reference/shape-outside-linear-gradient-004-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>Shape outside and repeating linear gradient
|
|
<ul class="assert">
|
|
<li>This test verifies that content wraps correctly around a shape defined by a repeating linear gradient.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-polygon-000-6.1" class="dom script">
|
|
<td>
|
|
<a href="shape-outside-polygon-000.xht">shape-outside-polygon-000</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Outside Polygon Valid Formats
|
|
<ul class="assert">
|
|
<li>A polygonal basic shape has an optional fill-rule and one or more pairs of coordinates</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-polygon-001-6.1" class="dom script">
|
|
<td>
|
|
<a href="shape-outside-polygon-001.xht">shape-outside-polygon-001</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Outside Polygon Valid Fill-Rules
|
|
<ul class="assert">
|
|
<li>A polygonal basic shape's optional fill-rule may be either 'nonzero' or 'evenodd'</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-polygon-002-6.1" class="dom script">
|
|
<td>
|
|
<a href="shape-outside-polygon-002.xht">shape-outside-polygon-002</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Outside Polygon Valid Points
|
|
<ul class="assert">
|
|
<li>A polygonal basic shape's points may be either lengths or percentages</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-polygon-003-6.1" class="dom script">
|
|
<td>
|
|
<a href="shape-outside-polygon-003.xht">shape-outside-polygon-003</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Outside Polygon Invalid Points
|
|
<ul class="assert">
|
|
<li>A polygonal basic shape's points may be either lengths or percentages</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-polygon-004-6.1" class="dom script">
|
|
<td>
|
|
<a href="shape-outside-polygon-004.xht">shape-outside-polygon-004</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Outside Polygon - Argument Length Units
|
|
<ul class="assert">
|
|
<li>A polygon's veritices may in percentage or any valid <length> units.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-polygon-005-6.1" class="dom script">
|
|
<td>
|
|
<a href="shape-outside-polygon-005.xht">shape-outside-polygon-005</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Outside Polygon Valid Points
|
|
<ul class="assert">
|
|
<li>A polygon's vertices can be in signed positive/negative or decimal/non-decimal format</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-polygon-006-6.1" class="dom script">
|
|
<td>
|
|
<a href="shape-outside-polygon-006.xht">shape-outside-polygon-006</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Outside Polygon args - calc() values
|
|
<ul class="assert">
|
|
<li>A polygon's arguments may be in calc() values.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-polygon-007-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-polygon-007.xht">shape-outside-polygon-007</a></td>
|
|
<td><a href="reference/shape-outside-polygon-007-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>left float, polygon, args in px units
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a left float with a shape-outside defined as an polygon with the args in px units.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-polygon-008-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-polygon-008.xht">shape-outside-polygon-008</a></td>
|
|
<td><a href="reference/shape-outside-polygon-007-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>left float, polygon, args in % units
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a left float with a shape-outside defined as an polygon with the args in px units.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-polygon-009-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-polygon-009.xht">shape-outside-polygon-009</a></td>
|
|
<td><a href="reference/shape-outside-polygon-007-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>left float, polygon + border box
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a left float with a shape-outside defined as an polygon from the border box.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-polygon-010-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-polygon-010.xht">shape-outside-polygon-010</a></td>
|
|
<td><a href="reference/shape-outside-polygon-010-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>left float, polygon + padding box
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a left float with a shape-outside defined as an polygon from the padding box.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-polygon-011-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-polygon-011.xht">shape-outside-polygon-011</a></td>
|
|
<td><a href="reference/shape-outside-polygon-010-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>left float, polygon + content box
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a left float with a shape-outside defined as an polygon from the content box.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-polygon-012-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-polygon-012.xht">shape-outside-polygon-012</a></td>
|
|
<td><a href="reference/shape-outside-polygon-010-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>right float, polygon + margin-box + shape-margin
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a right float with a shape-outside defined as an polygon from the margin box with a shape margin.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-polygon-013-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-polygon-013.xht">shape-outside-polygon-013</a></td>
|
|
<td><a href="reference/shape-outside-polygon-010-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>right float, polygon + border-box + shape-margin
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a right float with a shape-outside defined as an polygon from the border box with a shape margin.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-polygon-014-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-polygon-014.xht">shape-outside-polygon-014</a></td>
|
|
<td><a href="reference/shape-outside-polygon-010-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>right float, polygon + padding-box + shape-margin
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a right float with a shape-outside defined as an polygon from the padding box with a shape margin.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-polygon-015-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-polygon-015.xht">shape-outside-polygon-015</a></td>
|
|
<td><a href="reference/shape-outside-polygon-010-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>right float, polygon + content-box + shape-margin
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a right float with a shape-outside defined as an polygon from the content box wtih a shape margin.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-polygon-016-6.1" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-polygon-016.xht">shape-outside-polygon-016</a></td>
|
|
<td><a href="reference/shape-outside-polygon-010-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>polygon, evenodd
|
|
<ul class="assert">
|
|
<li>The test verifies that evenodd behaves the same as nonzero for shape-outside and that text will wraps around the outer edge of a polygon.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-polygon-017-6.1" 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>
|
|
<tr id="shape-outside-radial-gradient-001-6.1" class="ahem dom script">
|
|
<td>
|
|
<a href="shape-outside-radial-gradient-001.xht">shape-outside-radial-gradient-001</a></td>
|
|
<td></td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Left float with radial gradient
|
|
<ul class="assert">
|
|
<li>This test verifies that shape-outside respects a simple radial gradient.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-radial-gradient-002-6.1" class="ahem dom script">
|
|
<td>
|
|
<a href="shape-outside-radial-gradient-002.xht">shape-outside-radial-gradient-002</a></td>
|
|
<td></td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Left float with radial gradient and percentage shape margin
|
|
<ul class="assert">
|
|
<li>This test verifies that shape-outside respects a simple radial gradient when a percentage margin is applied.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-radial-gradient-003-6.1" class="ahem dom script">
|
|
<td>
|
|
<a href="shape-outside-radial-gradient-003.xht">shape-outside-radial-gradient-003</a></td>
|
|
<td></td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Left float with radial gradient shape, shape margin, and shape-image-threshold
|
|
<ul class="assert">
|
|
<li>This test verifies that shape-outside respects a simple radial gradient when a shape margin and shape-image threshold are applied.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-radial-gradient-004-6.1" class="ahem dom script">
|
|
<td>
|
|
<a href="shape-outside-radial-gradient-004.xht">shape-outside-radial-gradient-004</a></td>
|
|
<td></td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Left float with radial gradient shape, shape margin, and shape-image-threshold
|
|
<ul class="assert">
|
|
<li>This test verifies that shape-outside respects a simple radial gradient on a right float when shape-image-threshold is applied.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-shape-arguments-000-6.1" class="dom script">
|
|
<td>
|
|
<a href="shape-outside-shape-arguments-000.xht">shape-outside-shape-arguments-000</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Outside Basic Shape Arguments
|
|
<ul class="assert">
|
|
<li>A basic basic shape can contain any length unit type, or percentage</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-shape-arguments-001-6.1" class="dom script">
|
|
<td>
|
|
<a href="shape-outside-shape-arguments-001.xht">shape-outside-shape-arguments-001</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Outside Shape Number Values
|
|
<ul class="assert">
|
|
<li>The basic shape can contain all valid number formats</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-shape-box-pair-000-6.1" class="dom script">
|
|
<td>
|
|
<a href="shape-outside-shape-box-pair-000.xht">shape-outside-shape-box-pair-000</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Outside Box Shape and Box Valid Values
|
|
<ul class="assert">
|
|
<li>Shape-outside may be a pair of shape and box values</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-shape-inherit-000-6.1" class="dom script">
|
|
<td>
|
|
<a href="shape-outside-shape-inherit-000.xht">shape-outside-shape-inherit-000</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Outside Box Inherit Value
|
|
<ul class="assert">
|
|
<li>Shape-outside takes can be assigned the 'inherit' value.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-shape-initial-000-6.1" class="dom script">
|
|
<td>
|
|
<a href="shape-outside-shape-initial-000.xht">shape-outside-shape-initial-000</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Outside Box Initial Value
|
|
<ul class="assert">
|
|
<li>Shape-outside takes its default value of none when assigned the 'initial' value</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-shape-none-000-6.1" class="dom script">
|
|
<td>
|
|
<a href="shape-outside-shape-none-000.xht">shape-outside-shape-none-000</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Outside - none
|
|
<ul class="assert">
|
|
<li>shape-outside can be explictly assigned the default value of none.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-shape-notation-000-6.1" class="dom script">
|
|
<td>
|
|
<a href="shape-outside-shape-notation-000.xht">shape-outside-shape-notation-000</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Outside Valid Basic Shape Functional Notation
|
|
<ul class="assert">
|
|
<li>Basic shapes use functional notation, and may contain optional whitespace inside the parentheses</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s6.1.#propdef-shape-outside">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.1.#valuedef-basic-shape">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.1.#valuedef-image">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.1.#valuedef-none">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.2">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s6.2">+</a>
|
|
<a href="https://www.w3.org/TR/css-shapes-1/#shape-image-threshold-property">6.2 Choosing Image Pixels: the shape-image-threshold property</a></th></tr>
|
|
<!-- 10 tests -->
|
|
<tr id="shape-image-009-6.2" class="ahem">
|
|
<td>
|
|
<a href="shape-image-009.xht">shape-image-009</a></td>
|
|
<td><a href="reference/shape-image-006-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>left float, url(png), real image 70% + shape-image-threshold + shape-margin (px)
|
|
<ul class="assert">
|
|
<li>This test verifies that content wraps around the image pixels extracted from a shape-outside png file with shape-image-threshold set + the shape-margin in absolute length.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-image-010-6.2" class="ahem">
|
|
<td>
|
|
<a href="shape-image-010.xht">shape-image-010</a></td>
|
|
<td><a href="reference/shape-image-006-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>left float, url(png), data uri + shape-image-threshold + shape-margin (%)
|
|
<ul class="assert">
|
|
<li>This test verifies that content wraps around the image pixels extracted from a shape-outside png file with shape-image-threshold set + the shape-margin as a percentage.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-image-011-6.2" class="ahem">
|
|
<td>
|
|
<a href="shape-image-011.xht">shape-image-011</a></td>
|
|
<td><a href="reference/shape-image-007-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>left float, url(svg), real image + shape-image-threshold + shape-margin (px)
|
|
<ul class="assert">
|
|
<li>This test verifies that content wraps around the image pixels extracted from a shape-outside svg file with shape-image-threshold set + the shape-margin in absolute length.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-image-threshold-000-6.2" class="dom script">
|
|
<td>
|
|
<a href="shape-image-threshold-000.xht">shape-image-threshold-000</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Image Threshold - Valid values
|
|
<ul class="assert">
|
|
<li>shape-image-threshold is any valid number and computed the clipped value between 0 and 1.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-image-threshold-001-6.2" class="dom script">
|
|
<td>
|
|
<a href="shape-image-threshold-001.xht">shape-image-threshold-001</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Image Threshold - calc() values
|
|
<ul class="assert">
|
|
<li>shape-image-threshold may take calc values and computed the clipped value between 0 and 1.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-image-threshold-002-6.2" class="dom script">
|
|
<td>
|
|
<a href="shape-image-threshold-002.xht">shape-image-threshold-002</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Image Threshold - Invalid values
|
|
<ul class="assert">
|
|
<li>shape-image-threshold is set to 0 when an invalid value is specified.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-image-threshold-003-6.2" class="dom script">
|
|
<td>
|
|
<a href="shape-image-threshold-003.xht">shape-image-threshold-003</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Image Threshold Inherit
|
|
<ul class="assert">
|
|
<li>shape-outside can be assigned the 'inherit' value and does not inherit by default.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-012-6.2" class="ahem dom script">
|
|
<td>
|
|
<a href="shape-outside-012.xht">shape-outside-012</a></td>
|
|
<td><a href="reference/shape-outside-012-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape from image - shape-image-threshold - 0.9
|
|
<ul class="assert">
|
|
<li>This test verifies content flows around a shape that is defined in the image's alpha channel and adjusted by the image-threshold</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-radial-gradient-003-6.2" class="ahem dom script">
|
|
<td>
|
|
<a href="shape-outside-radial-gradient-003.xht">shape-outside-radial-gradient-003</a></td>
|
|
<td></td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Left float with radial gradient shape, shape margin, and shape-image-threshold
|
|
<ul class="assert">
|
|
<li>This test verifies that shape-outside respects a simple radial gradient when a shape margin and shape-image threshold are applied.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-radial-gradient-004-6.2" class="ahem dom script">
|
|
<td>
|
|
<a href="shape-outside-radial-gradient-004.xht">shape-outside-radial-gradient-004</a></td>
|
|
<td></td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Left float with radial gradient shape, shape margin, and shape-image-threshold
|
|
<ul class="assert">
|
|
<li>This test verifies that shape-outside respects a simple radial gradient on a right float when shape-image-threshold is applied.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s6.2.#propdef-shape-image-threshold">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.2.#valuedef-number">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.3">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s6.3">+</a>
|
|
<a href="https://www.w3.org/TR/css-shapes-1/#shape-margin-property">6.3 Embiggening a Shape: the shape-margin property</a></th></tr>
|
|
<!-- 40 tests -->
|
|
<tr id="shape-image-006-6.3" class="ahem">
|
|
<td>
|
|
<a href="shape-image-006.xht">shape-image-006</a></td>
|
|
<td><a href="reference/shape-image-006-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>left float, url(png), real image + shape-margin (px)
|
|
<ul class="assert">
|
|
<li>This test verifies that content wraps around all the image pixels + the shape-margin when shape-outside is given a png file.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-image-007-6.3" class="ahem">
|
|
<td>
|
|
<a href="shape-image-007.xht">shape-image-007</a></td>
|
|
<td><a href="reference/shape-image-007-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>left float, url(svg), real image + shape-margin (px)
|
|
<ul class="assert">
|
|
<li>This test verifies that content wraps around all the image pixels + the shape-margin when shape-outside is given an svg file.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-image-008-6.3" class="ahem">
|
|
<td>
|
|
<a href="shape-image-008.xht">shape-image-008</a></td>
|
|
<td><a href="reference/shape-image-008-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>left float, url(jpg), data uri + shape-margin (%)
|
|
<ul class="assert">
|
|
<li>This test verifies that content wraps around all the image pixels + the shape-margin as a percentage when shape-outside is given an jpg data uri.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-image-009-6.3" class="ahem">
|
|
<td>
|
|
<a href="shape-image-009.xht">shape-image-009</a></td>
|
|
<td><a href="reference/shape-image-006-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>left float, url(png), real image 70% + shape-image-threshold + shape-margin (px)
|
|
<ul class="assert">
|
|
<li>This test verifies that content wraps around the image pixels extracted from a shape-outside png file with shape-image-threshold set + the shape-margin in absolute length.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-image-010-6.3" class="ahem">
|
|
<td>
|
|
<a href="shape-image-010.xht">shape-image-010</a></td>
|
|
<td><a href="reference/shape-image-006-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>left float, url(png), data uri + shape-image-threshold + shape-margin (%)
|
|
<ul class="assert">
|
|
<li>This test verifies that content wraps around the image pixels extracted from a shape-outside png file with shape-image-threshold set + the shape-margin as a percentage.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-image-011-6.3" class="ahem">
|
|
<td>
|
|
<a href="shape-image-011.xht">shape-image-011</a></td>
|
|
<td><a href="reference/shape-image-007-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>left float, url(svg), real image + shape-image-threshold + shape-margin (px)
|
|
<ul class="assert">
|
|
<li>This test verifies that content wraps around the image pixels extracted from a shape-outside svg file with shape-image-threshold set + the shape-margin in absolute length.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-margin-000-6.3" class="dom script">
|
|
<td>
|
|
<a href="shape-margin-000.xht">shape-margin-000</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Margin Valid Values - Length or Percentage
|
|
<ul class="assert">
|
|
<li>shape-margin values may be either a length or percentage</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-margin-001-6.3" class="dom script">
|
|
<td>
|
|
<a href="shape-margin-001.xht">shape-margin-001</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Margin Valid Values - Length Units
|
|
<ul class="assert">
|
|
<li>shape-margin values may be in any length unit</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-margin-002-6.3" class="dom script">
|
|
<td>
|
|
<a href="shape-margin-002.xht">shape-margin-002</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Margin Valid Values - Decimal, Positive/Negative lengths
|
|
<ul class="assert">
|
|
<li>shape-margin values may be either a length or percentage</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-margin-003-6.3" class="dom script">
|
|
<td>
|
|
<a href="shape-margin-003.xht">shape-margin-003</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Margin Valid Values - calc() values
|
|
<ul class="assert">
|
|
<li>shape-margin values may be calc() values</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-margin-004-6.3" class="dom script">
|
|
<td>
|
|
<a href="shape-margin-004.xht">shape-margin-004</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Margin Invalid Values
|
|
<ul class="assert">
|
|
<li>shape-margin values may only be positive length units.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-margin-005-6.3" class="dom script">
|
|
<td>
|
|
<a href="shape-margin-005.xht">shape-margin-005</a></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Shape Margin - inherit
|
|
<ul class="assert">
|
|
<li>The shape-margin value is not inherited and can be assigned the 'inherit' value.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-circle-017-6.3" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-circle-017.xht">shape-outside-circle-017</a></td>
|
|
<td><a href="reference/shape-outside-circle-013-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>left float, circle + shape-margin in px
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a left float with a shape-outside defined as a circle with a shape-margin in px units.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-circle-018-6.3" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-circle-018.xht">shape-outside-circle-018</a></td>
|
|
<td><a href="reference/shape-outside-circle-013-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>left float, circle + shape-margin in % units
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a left float with a shape-outside defined as a circle with a shape-margin in percentage units.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-circle-019-6.3" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-circle-019.xht">shape-outside-circle-019</a></td>
|
|
<td><a href="reference/shape-outside-circle-013-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>left float, circle at top left + margin-box + shape-margin
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a left float with a shape-outside defined as a circle from the margin box and is positioned top left with a shape-margin.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-circle-020-6.3" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-circle-020.xht">shape-outside-circle-020</a></td>
|
|
<td><a href="reference/shape-outside-circle-013-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>left float, circle at % + border-box + shape-margin
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a left float with a shape-outside defined as a circle from the padding box with a position specified as a percentage and with a shape-margin.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-circle-021-6.3" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-circle-021.xht">shape-outside-circle-021</a></td>
|
|
<td><a href="reference/shape-outside-circle-013-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>left float, circle + farthest-side + padding-box + shape-margin
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a left float with a shape-outside defined as a circle with a farthest-side radius from the padding box with a shape-margin.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-circle-022-6.3" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-circle-022.xht">shape-outside-circle-022</a></td>
|
|
<td><a href="reference/shape-outside-circle-013-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>left float, circle at bottom right + content-box + shape-margin
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a left float with a shape-outside defined as a circle from the padding box positioned at center right with a shape-margin.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-circle-024-6.3" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-circle-024.xht">shape-outside-circle-024</a></td>
|
|
<td><a href="reference/shape-outside-circle-023-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>right float, circle radius in % units + shape-margin + border-box
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a right float with a shape-outside defined as a circle from the border box with radius in percentage units and with a shape-margin.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-circle-025-6.3" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-circle-025.xht">shape-outside-circle-025</a></td>
|
|
<td><a href="reference/shape-outside-circle-023-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>right float, circle + shape-margin + padding-box
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a right float with a shape-outside defined as a circle from the padding box with a shape-margin.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-circle-026-6.3" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-circle-026.xht">shape-outside-circle-026</a></td>
|
|
<td><a href="reference/shape-outside-circle-023-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>right float, circle + shape-margin + content-box
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a right float with a shape-outside defined as a circle from the content box with a shape-margin.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-circle-027-6.3" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-circle-027.xht">shape-outside-circle-027</a></td>
|
|
<td><a href="reference/shape-outside-circle-023-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>right float, circle with radius in % units + shape-margin + margin-box
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a right float with a shape-outside defined as a circle positioned from the margin box with a shape-margin.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-circle-028-6.3" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-circle-028.xht">shape-outside-circle-028</a></td>
|
|
<td><a href="reference/shape-outside-circle-023-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>right float, circle(closest-side) at position % + shape-margin + border-box
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a right float with a shape-outside defined as a circle positioned from the border box with a shape-margin.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-circle-029-6.3" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-circle-029.xht">shape-outside-circle-029</a></td>
|
|
<td><a href="reference/shape-outside-circle-023-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>right float, circle at center right + shape-margin + padding-box
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a right float with a shape-outside defined as a circle positioned center right from the padding box with a shape-margin.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-ellipse-017-6.3" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-ellipse-017.xht">shape-outside-ellipse-017</a></td>
|
|
<td><a href="reference/shape-outside-ellipse-013-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>left float, ellipse(farthest-side) + shape-margin + content-box
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a left float with a shape-outside defined as a ellipse from the content box with only the rx defined as farthest-side and with a shape-margin.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-ellipse-018-6.3" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-ellipse-018.xht">shape-outside-ellipse-018</a></td>
|
|
<td><a href="reference/shape-outside-ellipse-013-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>left float, ellipse + shape-margin in % units
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a left float with a shape-outside defined as a ellipse with a shape-margin in percentage units.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-ellipse-019-6.3" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-ellipse-019.xht">shape-outside-ellipse-019</a></td>
|
|
<td><a href="reference/shape-outside-ellipse-013-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>left float, ellipse radii in % units + padding-box + shape-margin
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a left float with a shape-outside defined as a ellipse from the padding box with radii in percentage units and with a shape-margin.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-ellipse-020-6.3" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-ellipse-020.xht">shape-outside-ellipse-020</a></td>
|
|
<td><a href="reference/shape-outside-ellipse-013-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>left float, ellipse radii in % units + margin-box + shape-margin
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a left float with a shape-outside defined as a ellipse from the margin box with the radii specified in percentage units and with a shape-margin.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-ellipse-021-6.3" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-ellipse-021.xht">shape-outside-ellipse-021</a></td>
|
|
<td><a href="reference/shape-outside-ellipse-021-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>right float, ellipse (closest-side px) + shape-margin + padding box
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a right float with a shape-outside defined as a ellipse from the padding box with rx explicitly set at closest-side and ry in px units and with a shape-margin.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-ellipse-022-6.3" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-ellipse-022.xht">shape-outside-ellipse-022</a></td>
|
|
<td><a href="reference/shape-outside-ellipse-021-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>right float, ellipse(closest-side px) + shape-margin + content-box
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a right float with a shape-outside defined as a ellipse from the content box with a shape-margin.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-ellipse-023-6.3" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-ellipse-023.xht">shape-outside-ellipse-023</a></td>
|
|
<td><a href="reference/shape-outside-ellipse-021-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>right float, ellipse + shape-margin
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a right float with a shape-outside defined as an ellipse with only the horizontal offset specifed in px and with a shape-margin.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-ellipse-024-6.3" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-ellipse-024.xht">shape-outside-ellipse-024</a></td>
|
|
<td><a href="reference/shape-outside-ellipse-021-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>right float, ellipse at position (%) + shape-margin (%) + border-box
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a right float with a shape-outside defined as a ellipse positioned from the border box with only the horizontal offset specified in percentage units and with a shape-margin in percentage units.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-ellipse-025-6.3" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-ellipse-025.xht">shape-outside-ellipse-025</a></td>
|
|
<td><a href="reference/shape-outside-ellipse-021-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>right float, ellipse radii in % at center right + shape-margin + padding-box
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a right float with a shape-outside defined as a ellipse with the radii in percentage units positioned at center right from the margin box with a shape-margin.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-linear-gradient-003-6.3" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-linear-gradient-003.xht">shape-outside-linear-gradient-003</a></td>
|
|
<td><a href="reference/shape-outside-linear-gradient-002-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>Right float with linear gradient
|
|
<ul class="assert">
|
|
<li>This test verifies that shape-outside respects a simple linear gradient on a right float with shape-margin applied.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-polygon-012-6.3" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-polygon-012.xht">shape-outside-polygon-012</a></td>
|
|
<td><a href="reference/shape-outside-polygon-010-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>right float, polygon + margin-box + shape-margin
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a right float with a shape-outside defined as an polygon from the margin box with a shape margin.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-polygon-013-6.3" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-polygon-013.xht">shape-outside-polygon-013</a></td>
|
|
<td><a href="reference/shape-outside-polygon-010-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>right float, polygon + border-box + shape-margin
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a right float with a shape-outside defined as an polygon from the border box with a shape margin.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-polygon-014-6.3" class="ahem">
|
|
<td>
|
|
<a href="shape-outside-polygon-014.xht">shape-outside-polygon-014</a></td>
|
|
<td><a href="reference/shape-outside-polygon-010-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>right float, polygon + padding-box + shape-margin
|
|
<ul class="assert">
|
|
<li>The test verifies that text wraps around a right float with a shape-outside defined as an polygon from the padding box with a shape margin.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-polygon-017-6.3" 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>
|
|
<tr id="shape-outside-radial-gradient-002-6.3" class="ahem dom script">
|
|
<td>
|
|
<a href="shape-outside-radial-gradient-002.xht">shape-outside-radial-gradient-002</a></td>
|
|
<td></td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Left float with radial gradient and percentage shape margin
|
|
<ul class="assert">
|
|
<li>This test verifies that shape-outside respects a simple radial gradient when a percentage margin is applied.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="shape-outside-radial-gradient-003-6.3" class="ahem dom script">
|
|
<td>
|
|
<a href="shape-outside-radial-gradient-003.xht">shape-outside-radial-gradient-003</a></td>
|
|
<td></td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>Left float with radial gradient shape, shape margin, and shape-image-threshold
|
|
<ul class="assert">
|
|
<li>This test verifies that shape-outside respects a simple radial gradient when a shape margin and shape-image threshold are applied.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s6.3.#propdef-shape-margin">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.3.#valuedef-length">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.3.#valuedef-percentage">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s.#abstract">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s.#acknowledgments">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s.#change-log">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s.#conformance">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s.#contents">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s.#index">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s.#property-index">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s.#references">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s.#status">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s.#subtitle">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s.#title">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="schange-log.#20111213">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="schange-log.#20120503">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="schange-log.#20130620">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="schange-log.#20131203">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="schange-log.#20140211">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="sconformance.#conformance-classes">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="sconformance.#conventions">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="sconformance.#cr-exit-criteria">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="sconformance.#experimental">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="sconformance.#partial">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="sconformance.#testing">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="sinformative.#css-masking">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="sinformative.#css3-exclusions">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="sinformative.#css3-transitions">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="snormative.#css21">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="snormative.#css3bg">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="snormative.#css3box">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="snormative.#css3val">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="snormative.#html5">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="snormative.#rfc2119">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="sreferences.#informative">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="sreferences.#normative">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
</table>
|
|
|
|
</body>
|
|
</html> |