mirror of
https://github.com/servo/servo.git
synced 2025-06-26 18:14:34 +01:00
2482 lines
No EOL
128 KiB
HTML
2482 lines
No EOL
128 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="http://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="http://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&acirc;&#8364;&#8482;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&acirc;&#8364;&#8482;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&acirc;&#8364;&#8482;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&acirc;&#8364;&#8482;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="primary dom script">
|
|
<td><strong>
|
|
<a href="shape-outside-box-000.xht">shape-outside-box-000</a></strong></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="primary dom script">
|
|
<td><strong>
|
|
<a href="shape-outside-computed-shape-000.xht">shape-outside-computed-shape-000</a></strong></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="primary dom script">
|
|
<td><strong>
|
|
<a href="shape-outside-computed-shape-001.xht">shape-outside-computed-shape-001</a></strong></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">
|
|
<td>
|
|
<a href="shape-outside-radial-gradient-001.xht">shape-outside-radial-gradient-001</a></td>
|
|
<td><a href="reference/shape-outside-radial-gradient-001-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 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">
|
|
<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></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">
|
|
<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></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">
|
|
<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></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="primary dom script">
|
|
<td><strong>
|
|
<a href="shape-outside-shape-box-pair-000.xht">shape-outside-shape-box-pair-000</a></strong></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="primary dom script">
|
|
<td><strong>
|
|
<a href="shape-outside-shape-inherit-000.xht">shape-outside-shape-inherit-000</a></strong></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="primary dom script">
|
|
<td><strong>
|
|
<a href="shape-outside-shape-initial-000.xht">shape-outside-shape-initial-000</a></strong></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="primary dom script">
|
|
<td><strong>
|
|
<a href="shape-outside-shape-none-000.xht">shape-outside-shape-none-000</a></strong></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="primary dom script">
|
|
<td><strong>
|
|
<a href="shape-outside-shape-notation-000.xht">shape-outside-shape-notation-000</a></strong></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="http://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="primary dom script">
|
|
<td><strong>
|
|
<a href="shape-image-threshold-000.xht">shape-image-threshold-000</a></strong></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="primary dom script">
|
|
<td><strong>
|
|
<a href="shape-image-threshold-001.xht">shape-image-threshold-001</a></strong></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="primary dom script">
|
|
<td><strong>
|
|
<a href="shape-image-threshold-002.xht">shape-image-threshold-002</a></strong></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="primary dom script">
|
|
<td><strong>
|
|
<a href="shape-image-threshold-003.xht">shape-image-threshold-003</a></strong></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">
|
|
<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></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">
|
|
<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></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="http://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="primary dom script">
|
|
<td><strong>
|
|
<a href="shape-margin-000.xht">shape-margin-000</a></strong></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="primary dom script">
|
|
<td><strong>
|
|
<a href="shape-margin-001.xht">shape-margin-001</a></strong></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="primary dom script">
|
|
<td><strong>
|
|
<a href="shape-margin-002.xht">shape-margin-002</a></strong></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="primary dom script">
|
|
<td><strong>
|
|
<a href="shape-margin-003.xht">shape-margin-003</a></strong></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="primary dom script">
|
|
<td><strong>
|
|
<a href="shape-margin-004.xht">shape-margin-004</a></strong></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="primary dom script">
|
|
<td><strong>
|
|
<a href="shape-margin-005.xht">shape-margin-005</a></strong></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">
|
|
<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></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">
|
|
<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></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.#20111213">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s.#20120503">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s.#20130620">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s.#20131203">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s.#20140211">
|
|
<!-- 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.#conformance-classes">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s.#contents">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s.#conventions">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s.#cr-exit-criteria">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s.#css-masking">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s.#css21">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s.#css3-exclusions">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s.#css3-transitions">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s.#css3bg">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s.#css3box">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s.#css3val">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s.#experimental">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s.#html5">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s.#index">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s.#informative">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s.#normative">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s.#partial">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s.#property-index">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s.#references">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s.#rfc2119">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s.#status">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s.#subtitle">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s.#testing">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s.#title">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
</table>
|
|
|
|
</body>
|
|
</html> |