Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-11 08:25:32 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update CSS tests to revision 31d63cc79bd4c929ed582229e936d7b389f3e6ab

Browse source
This commit is contained in:
James Graham 2015-03-27 09:18:12 +00:00
parent 1a81b18b9f
commit 2c9faf5363
91915 changed files with 5979820 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

69
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/chapter-1.xht Normal file
View file

@ -0,0 +1,69 @@
<!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>Introduction - 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>Introduction (0 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="s1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s1">+</a>
<a href="http://www.w3.org/TR/css-shapes-1/#intro">1 Introduction</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s1.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s1.1">+</a>
<a href="http://www.w3.org/TR/css-shapes-1/#module-interactions">1.1 Module Interactions</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s1.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s1.2">+</a>
<a href="http://www.w3.org/TR/css-shapes-1/#values">1.2 Values</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s1.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s1.3">+</a>
<a href="http://www.w3.org/TR/css-shapes-1/#animations">1.3 Animated Values</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s1.4">
<tr><th colspan="4" scope="rowgroup">
<a href="#s1.4">+</a>
<a href="http://www.w3.org/TR/css-shapes-1/#terminology">1.4 Terminology</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s1.4.#float-area">
<!-- 0 tests -->
</tbody>
<tbody id="s1.4.#wrap">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

141
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/chapter-2.xht Normal file
View file

@ -0,0 +1,141 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Relation to the box model and float behavior - CSS Shapes Module Level 1 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Shapes Module Level 1 CR Test Suite</h1>
<h2>Relation to the box model and float behavior (9 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s2">+</a>
<a href="http://www.w3.org/TR/css-shapes-1/#relation-to-box-model-and-float-behavior">2 Relation to the box model and float behavior</a></th></tr>
<!-- 9 tests -->
<tr id="shape-outside-001-2" class="primary ahem">
<td><strong>
<a href="shape-outside-001.xht">shape-outside-001</a></strong></td>
<td><a href="reference/shape-outside-001-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>Left and right float with shape-outside
<ul class="assert">
<li>This test verifies that left floats with a shape-outside only allow content wrapping on the right side, and right floats only allow wrapping on the left.</li>
</ul>
</td>
</tr>
<tr id="shape-outside-002-2" class="primary ahem">
<td><strong>
<a href="shape-outside-002.xht">shape-outside-002</a></strong></td>
<td><a href="reference/shape-outside-001-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>Left and right float with shape-outside with clipped left float
<ul class="assert">
<li>This test verifies that left floats with a shape-outside only allow content wrapping on the right side, and right floats only allow wrapping on the left and that the left float shape is clipped to the float&amp;acirc;&amp;#8364;&amp;#8482;s margin box</li>
</ul>
</td>
</tr>
<tr id="shape-outside-003-2" class="primary ahem">
<td><strong>
<a href="shape-outside-003.xht">shape-outside-003</a></strong></td>
<td><a href="reference/shape-outside-001-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>Left and right float with shape-outside with clipped right float
<ul class="assert">
<li>This test verifies that left floats with a shape-outside only allow content wrapping on the right side, and right floats only allow wrapping on the left and that the right float shape is clipped to the float&amp;acirc;&amp;#8364;&amp;#8482;s margin box</li>
</ul>
</td>
</tr>
<tr id="shape-outside-004-2" class="primary ahem">
<td><strong>
<a href="shape-outside-004.xht">shape-outside-004</a></strong></td>
<td><a href="reference/shape-outside-004-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>inset with no extent and inline content - inset(50% 50% 50% 50%)
<ul class="assert">
<li>This test verifies that a shape with no extent allow inline content to flow through all of the float&amp;acirc;&amp;#8364;&amp;#8482;s box.</li>
</ul>
</td>
</tr>
<tr id="shape-outside-005-2" class="primary ahem">
<td><strong>
<a href="shape-outside-005.xht">shape-outside-005</a></strong></td>
<td><a href="reference/shape-outside-004-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>inset with no extent and inline content - inset(150% 150% 0% 0%)
<ul class="assert">
<li>This test verifies that a shape with no extent allow inline content to flow through all of the float&amp;acirc;&amp;#8364;&amp;#8482;s box.</li>
</ul>
</td>
</tr>
<tr id="shape-outside-006-2" class="primary ahem">
<td><strong>
<a href="shape-outside-006.xht">shape-outside-006</a></strong></td>
<td><a href="reference/shape-outside-006-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>shape-outside with open areas on both the left &amp; right of the float area
<ul class="assert">
<li>This test verifies that content wraps only on one side of the float even though there is open area on both the left and right sides of the float.</li>
</ul>
</td>
</tr>
<tr id="shape-outside-007-2" class="primary ahem">
<td><strong>
<a href="shape-outside-007.xht">shape-outside-007</a></strong></td>
<td><a href="reference/shape-outside-007-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>Shape smaller than float content area - 1 float
<ul class="assert">
<li>This test verifies that inline content only wraps around the shape, and otherwise overlays the rest of the float margin box</li>
</ul>
</td>
</tr>
<tr id="shape-outside-008-2" class="primary ahem">
<td><strong>
<a href="shape-outside-008.xht">shape-outside-008</a></strong></td>
<td><a href="reference/shape-outside-008-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>Shape smaller than float content area - 2 floats
<ul class="assert">
<li>This test verifies that inline content only wraps around the shapes, and otherwise overlays the rest of the float margin boxes when two floats are stacked next to each other.</li>
</ul>
</td>
</tr>
<tr id="shape-outside-polygon-017-2" class="ahem">
<td>
<a href="shape-outside-polygon-017.xht">shape-outside-polygon-017</a></td>
<td><a href="reference/shape-outside-polygon-017-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>right float, polygon + shape-margin beyond margin box
<ul class="assert">
<li>The test verifies that when a shape-margin is defined that extends beyond the margin box, the shape is clipped to the box.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s2.#empty-float-area">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

1548
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/chapter-3.xht Normal file
View file

File diff suppressed because it is too large Load diff

468
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/chapter-4.xht Normal file
View file

@ -0,0 +1,468 @@
<!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>Shapes from Image - 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>Shapes from Image (39 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="s4">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4">+</a>
<a href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image">4 Shapes from Image</a></th></tr>
<!-- 39 tests -->
<tr id="shape-image-000-4" class="primary ahem image">
<td><strong>
<a href="shape-image-000.xht">shape-image-000</a></strong></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-4" class="primary ahem image">
<td><strong>
<a href="shape-image-001.xht">shape-image-001</a></strong></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-4" class="primary ahem image">
<td><strong>
<a href="shape-image-002.xht">shape-image-002</a></strong></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-4" class="primary ahem image">
<td><strong>
<a href="shape-image-003.xht">shape-image-003</a></strong></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-4" class="primary ahem image">
<td><strong>
<a href="shape-image-004.xht">shape-image-004</a></strong></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-4" class="primary ahem image">
<td><strong>
<a href="shape-image-005.xht">shape-image-005</a></strong></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-4" class="primary ahem">
<td><strong>
<a href="shape-image-006.xht">shape-image-006</a></strong></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-4" class="primary ahem">
<td><strong>
<a href="shape-image-007.xht">shape-image-007</a></strong></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-4" class="primary ahem">
<td><strong>
<a href="shape-image-008.xht">shape-image-008</a></strong></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-4" class="primary ahem">
<td><strong>
<a href="shape-image-009.xht">shape-image-009</a></strong></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-4" class="primary ahem">
<td><strong>
<a href="shape-image-010.xht">shape-image-010</a></strong></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-4" class="primary ahem">
<td><strong>
<a href="shape-image-011.xht">shape-image-011</a></strong></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-4" class="primary ahem">
<td><strong>
<a href="shape-image-012.xht">shape-image-012</a></strong></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-4" class="primary ahem">
<td><strong>
<a href="shape-image-013.xht">shape-image-013</a></strong></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-4" class="primary ahem">
<td><strong>
<a href="shape-image-014.xht">shape-image-014</a></strong></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-4" class="primary ahem image">
<td><strong>
<a href="shape-image-015.xht">shape-image-015</a></strong></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-4" class="primary ahem image">
<td><strong>
<a href="shape-image-016.xht">shape-image-016</a></strong></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-4" class="primary ahem image">
<td><strong>
<a href="shape-image-017.xht">shape-image-017</a></strong></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-4" class="primary ahem">
<td><strong>
<a href="shape-image-018.xht">shape-image-018</a></strong></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-4" class="primary ahem">
<td><strong>
<a href="shape-image-019.xht">shape-image-019</a></strong></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-4" class="primary ahem">
<td><strong>
<a href="shape-image-020.xht">shape-image-020</a></strong></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-4" class="primary ahem">
<td><strong>
<a href="shape-image-021.xht">shape-image-021</a></strong></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-4" class="primary ahem">
<td><strong>
<a href="shape-image-022.xht">shape-image-022</a></strong></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-4" class="primary ahem">
<td><strong>
<a href="shape-image-023.xht">shape-image-023</a></strong></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-4" class="primary ahem">
<td><strong>
<a href="shape-image-024.xht">shape-image-024</a></strong></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-4" class="primary ahem">
<td><strong>
<a href="shape-image-025.xht">shape-image-025</a></strong></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-010-4" class="primary ahem dom script">
<td><strong>
<a href="shape-outside-010.xht">shape-outside-010</a></strong></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-4" class="primary ahem dom script">
<td><strong>
<a href="shape-outside-011.xht">shape-outside-011</a></strong></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 &gt; 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-4" class="primary ahem dom script">
<td><strong>
<a href="shape-outside-012.xht">shape-outside-012</a></strong></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-4" class="primary ahem dom script">
<td><strong>
<a href="shape-outside-013.xht">shape-outside-013</a></strong></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-019-4" class="primary ahem dom script">
<td><strong>
<a href="shape-outside-019.xht">shape-outside-019</a></strong></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 &gt; 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-linear-gradient-001-4" class="primary ahem">
<td><strong>
<a href="shape-outside-linear-gradient-001.xht">shape-outside-linear-gradient-001</a></strong></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-4" class="primary ahem">
<td><strong>
<a href="shape-outside-linear-gradient-002.xht">shape-outside-linear-gradient-002</a></strong></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-4" class="primary ahem">
<td><strong>
<a href="shape-outside-linear-gradient-003.xht">shape-outside-linear-gradient-003</a></strong></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-4" class="primary">
<td><strong>
<a href="shape-outside-linear-gradient-004.xht">shape-outside-linear-gradient-004</a></strong></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-radial-gradient-001-4" class="primary ahem dom">
<td><strong>
<a href="shape-outside-radial-gradient-001.xht">shape-outside-radial-gradient-001</a></strong></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-4" class="primary ahem dom">
<td><strong>
<a href="shape-outside-radial-gradient-002.xht">shape-outside-radial-gradient-002</a></strong></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-4" class="primary ahem dom">
<td><strong>
<a href="shape-outside-radial-gradient-003.xht">shape-outside-radial-gradient-003</a></strong></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-4" class="primary ahem dom">
<td><strong>
<a href="shape-outside-radial-gradient-004.xht">shape-outside-radial-gradient-004</a></strong></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>
</table>
</body>
</html>

648
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/chapter-5.xht Normal file
View file

@ -0,0 +1,648 @@
<!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>Shapes from Box Values - 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>Shapes from Box Values (48 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="s5">
<tr><th colspan="4" scope="rowgroup">
<a href="#s5">+</a>
<a href="http://www.w3.org/TR/css-shapes-1/#shapes-from-box-values">5 Shapes from Box Values</a></th></tr>
<!-- 15 tests -->
<tr id="shape-outside-014-5" class="primary ahem dom script">
<td><strong>
<a href="shape-outside-014.xht">shape-outside-014</a></strong></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-5" class="primary ahem dom script">
<td><strong>
<a href="shape-outside-015.xht">shape-outside-015</a></strong></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-5" class="primary ahem dom script">
<td><strong>
<a href="shape-outside-016.xht">shape-outside-016</a></strong></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-5" class="primary ahem dom script">
<td><strong>
<a href="shape-outside-017.xht">shape-outside-017</a></strong></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-5" class="primary ahem dom script">
<td><strong>
<a href="shape-outside-018.xht">shape-outside-018</a></strong></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-box-002-5" class="primary ahem">
<td><strong>
<a href="shape-outside-box-002.xht">shape-outside-box-002</a></strong></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-5" class="primary ahem">
<td><strong>
<a href="shape-outside-box-003.xht">shape-outside-box-003</a></strong></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-5" class="primary ahem">
<td><strong>
<a href="shape-outside-box-004.xht">shape-outside-box-004</a></strong></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-5" class="primary ahem">
<td><strong>
<a href="shape-outside-box-006.xht">shape-outside-box-006</a></strong></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-5" class="primary ahem">
<td><strong>
<a href="shape-outside-box-007.xht">shape-outside-box-007</a></strong></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-5" class="primary ahem">
<td><strong>
<a href="shape-outside-box-008.xht">shape-outside-box-008</a></strong></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-inset-012-5" 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-5" 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-5" 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-5" 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>
</tbody>
<tbody id="s5.#border-box">
<!-- 9 tests -->
<tr id="shape-outside-box-003-5.#border-box" 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-007-5.#border-box" 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-circle-016-5.#border-box" 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-020-5.#border-box" 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-024-5.#border-box" 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-028-5.#border-box" 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-polygon-009-5.#border-box" 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-013-5.#border-box" 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-5.#border-box" 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>
</tbody>
<tbody id="s5.#content-box">
<!-- 12 tests -->
<tr id="shape-outside-box-002-5.#content-box" 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-006-5.#content-box" 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-circle-014-5.#content-box" 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-022-5.#content-box" 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-026-5.#content-box" 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-5.#content-box" 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-ellipse-014-5.#content-box" 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-017-5.#content-box" 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-022-5.#content-box" 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-024-5.#content-box" 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-polygon-011-5.#content-box" 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-015-5.#content-box" 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>
</tbody>
<tbody id="s5.#margin-box">
<!-- 4 tests -->
<tr id="shape-outside-circle-013-5.#margin-box" 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-019-5.#margin-box" 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-ellipse-020-5.#margin-box" 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-polygon-012-5.#margin-box" 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>
</tbody>
<tbody id="s5.#padding-box">
<!-- 12 tests -->
<tr id="shape-outside-box-004-5.#padding-box" 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-008-5.#padding-box" 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-015-5.#padding-box" 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-021-5.#padding-box" 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-025-5.#padding-box" 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-029-5.#padding-box" 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-015-5.#padding-box" 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-5.#padding-box" 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-019-5.#padding-box" 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-021-5.#padding-box" 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-025-5.#padding-box" 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-polygon-010-5.#padding-box" 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>
</tbody>
<tbody id="s5.#typedef-shape-box">
<!-- 2 tests -->
<tr id="shape-outside-box-000-5.#typedef-shape-box" class="dom script">
<td>
<a href="shape-outside-box-000.xht">shape-outside-box-000</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Shape Outside Box Valid Values
<ul class="assert">
<li>Shape-outside may be one of the box model box values</li>
</ul>
</td>
</tr>
<tr id="shape-outside-shape-box-pair-000-5.#typedef-shape-box" class="dom script">
<td>
<a href="shape-outside-shape-box-pair-000.xht">shape-outside-shape-box-pair-000</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Shape Outside Box Shape and Box Valid Values
<ul class="assert">
<li>Shape-outside may be a pair of shape and box values</li>
</ul>
</td>
</tr>
</tbody>
</table>
</body>
</html>

2482
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/chapter-6.xht Normal file
View file

File diff suppressed because it is too large Load diff

32
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/shape-image-000-ref.xht Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Reference File</title>
<link href="bjonesbe@adobe.com" rel="author" title="Bem Jones-Bey" />
<style type="text/css">
.container {
width: 100px;
height: 100px;
}
img {
float: left;
}
.green {
position: relative;
left: 50px;
width: 50px;
height: 100px;
background: rgb(0, 100, 0);
}
</style>
</head>
<body>
<p>
The test passes if you see a solid green square. There should be no red.
</p>
<div class="container">
<img src="../support/left-half-rectangle-50.png" />
<div class="green"></div>
</div>
</body></html>

32
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/shape-image-001-ref.xht Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Reference File</title>
<link href="bjonesbe@adobe.com" rel="author" title="Bem Jones-Bey" />
<style type="text/css">
.container {
width: 150px;
height: 100px;
background-color: black;
}
img {
float: left;
}
.green {
float: right;
width: 50px;
height: 100px;
background-color: rgb(0, 100, 0);
}
</style>
</head>
<body>
<p>
The test passes if you see a green rectangle, a black rectangle, and a green rectangle next to each other. There should be no red.
</p>
<div class="container">
<img src="../support/left-half-rectangle-70.png" />
<div class="green"></div>
</div>
</body></html>

21
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/shape-image-002-ref.xht Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Reference File</title>
<link href="bjonesbe@adobe.com" rel="author" title="Bem Jones-Bey" />
<style type="text/css">
.container {
width: 100px;
height: 100px;
background: rgb(0, 100, 0);
}
</style>
</head>
<body>
<p>
The test passes if you see a solid green square. There should be no red.
</p>
<div class="container">
</div>
</body></html>

43
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/shape-image-006-ref.xht Normal file
View file

@ -0,0 +1,43 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Reference File</title>
<link href="rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
<style type="text/css">
body {
margin: 0;
}
.green, .blue {
position: absolute;
top: 70px;
}
.left-rect {
left: 10px;
}
.right-rect {
width: 50px;
height: 100px;
left: 70px;
background: rgb(0,100,0);
}
.blue {
width: 2px;
height: 100px;
background-color: blue;
}
.left-line { left: 65px; }
.right-line { left: 125px }
</style>
</head>
<body>
<p>
The test passes if the green rectangle on the right is completely between the two blue lines.
There should be no red.
</p>
<div class="green left-rect">
<img src="../support/left-half-rectangle.png" />
</div>
<div class="green right-rect"></div>
<div class="blue left-line"></div>
<div class="blue right-line"></div>
</body></html>

41
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/shape-image-007-ref.xht Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Reference File</title>
<link href="rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
<style type="text/css">
body {
margin: 0;
}
.green {
background-color: rgb(0,100,0);
width: 50px;
height: 100px;
}
.left-rect { left: 10px; }
.right-rect { left: 70px; }
.blue {
width: 2px;
height: 100px;
background-color: blue;
}
.left-line { left: 65px; }
.right-line { left: 125px }
.green, .blue {
position: absolute;
top: 70px;
}
</style>
</head>
<body>
<p>
The test passes if the green rectangle on the right is completely between the two blue lines.
There should be no red.
</p>
<div class="green left-rect"></div>
<div class="green right-rect"></div>
<div class="blue left-line"></div>
<div class="blue right-line"></div>
</body></html>

47
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/shape-image-008-ref.xht Normal file
View file

File diff suppressed because one or more lines are too long

33
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/shape-image-012-ref.xht Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Reference File</title>
<link href="zoltan@adobe.com" rel="author" title="Zoltan Horvath" />
<style type="text/css">
.container {
position: absolute;
top: 70px;
left: 8px;
width: 200px;
height: 200px;
font-family: Ahem;
font-size: 20px;
line-height: 20px;
text-align: right;
color: green;
}
#image { float: right; }
</style>
</head>
<body>
<p>
The test passes if there's a green square with an image at top right with vertical white and green stripes.
There should be no red.
</p>
<div class="container">
<img src="../support/right-half-rectangle.jpg" id="image" />
XXXXX XXXXX XXXXX XXXXX XXXXX
XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX
</div>
</body></html>

32
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/shape-image-013-ref.xht Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Reference File</title>
<link href="bjonesbe@adobe.com" rel="author" title="Bem Jones-Bey" />
<style type="text/css">
.container {
width: 150px;
height: 100px;
}
img {
position: relative;
left: -50px;
}
.green {
float: left;
width: 50px;
height: 100px;
background: rgb(0, 100, 0);
}
</style>
</head>
<body>
<p>
The test passes if you see a solid green square. There should be no red.
</p>
<div class="container">
<div class="green"></div>
<img src="../support/right-half-rectangle.png" />
</div>
</body></html>

28
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/shape-image-018-ref.xht Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Reference File</title>
<link href="hmuller@adobe.com" rel="author" title="Hans Muller" />
<style type="text/css">
#container {
position: relative;
width: 200px;
font-family: Ahem;
font-size: 40px;
text-align: right;
color: green;
}
#image {
float: right;
margin-left: 20px;
}
</style>
</head>
<body>
<p>The test passes if no red is visible.</p>
<div id="container">
<img src="../support/left-half-rectangle.jpg" id="image" />
X<br />X<br />X<br />X
</div>
</body></html>

33
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/shape-image-019-ref.xht Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Reference File</title>
<link href="hmuller@adobe.com" rel="author" title="Hans Muller" />
<style type="text/css">
#container {
position: relative;
width: 200px;
font-family: Ahem;
font-size: 40px;
text-align: right;
color: green;
}
#image {
float: right;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<p>The two green squares should appear 10 pixels to the left of and 10 pixels below the blue square, respectively. The test passes if no red is visible.</p>
<div id="container">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAK0lEQVQ4T2NkYPj/n4GKgHHUQIpDczQMKQ5ChtEwHA1DMkJgNNmQEWhoWgAkKift4VBlVgAAAABJRU5ErkJggg==" id="image" />
X<br />X
</div>
</body></html>

33
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/shape-image-020-ref.xht Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Reference File</title>
<link href="hmuller@adobe.com" rel="author" title="Hans Muller" />
<style type="text/css">
#container {
position: relative;
width: 200px;
font-family: Ahem;
font-size: 40px;
text-align: right;
color: green;
}
#image {
float: right;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<p>The two green squares should appear 10 pixels to the left of and 10 pixels below the blue square, respectively. The test passes if no red is visible.</p>
<div id="container">
<img src="data:image/svg+xml;utf8,&lt;svg width='20px' height='20px' xmlns='http://www.w3.org/2000/svg'>&lt;rect width='100%' height='100%' fill='blue'/>&lt;/svg>" id="image" />
X<br />X
</div>
</body></html>

31
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/shape-image-021-ref.xht Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Reference File</title>
<link href="hmuller@adobe.com" rel="author" title="Hans Muller" />
<style type="text/css">
#container {
position: relative;
width: 200px;
padding-left: 90px;
font-family: Ahem;
font-size: 40px;
color: green;
}
#image {
position: absolute;
top: 0px;
left: 100px;
float: right;
margin-bottom: 20px;
}
</style>
</head>
<body>
<p>The test passes if no red is visible.</p>
<div id="container">
<img src="../support/right-half-rectangle.png" id="image" />
X<br />X<br />X<br /><span style="padding-left: 70px">X</span>
</div>
</body></html>

31
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/shape-image-022-ref.xht Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Reference File</title>
<link href="hmuller@adobe.com" rel="author" title="Hans Muller" />
<style type="text/css">
#container {
position: relative;
width: 200px;
padding-left: 90px;
font-family: Ahem;
font-size: 40px;
color: green;
}
#image {
position: absolute;
top: 0px;
left: 100px;
float: right;
margin-bottom: 20px;
}
</style>
</head>
<body>
<p>The test passes if no red is visible.</p>
<div id="container">
<img src="../support/right-half-rectangle.gif" id="image" />
X<br />X<br />X<br /><span style="padding-left: 70px">X</span>
</div>
</body></html>

33
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/shape-image-023-ref.xht Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Reference File</title>
<link href="hmuller@adobe.com" rel="author" title="Hans Muller" />
<style type="text/css">
#container {
position: relative;
width: 200px;
font-family: Ahem;
font-size: 40px;
text-align: right;
color: green;
}
#image {
float: right;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<p>The two green squares should appear 10 pixels to the left of and 10 pixels below the blue square, respectively. The test passes if no red is visible.</p>
<div id="container">
<img src="data:image/svg+xml;utf8,&lt;svg width='20px' height='20px' xmlns='http://www.w3.org/2000/svg'>&lt;rect width='100%' height='100%' fill='blue'/>&lt;/svg>" id="image" />
X<br />X
</div>
</body></html>

41
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/shape-image-024-ref.xht Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Reference File</title>
<link href="rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
<style type="text/css">
body {
margin: 0;
}
.green {
background-color: rgb(0,100,0);
width: 100px;
height: 200px;
}
.left-rect { left: 10px; }
.right-rect { left: 120px; }
.blue {
width: 2px;
height: 200px;
background-color: blue;
}
.left-line { left: 115px; }
.right-line { left: 230px }
.green, .blue {
position: absolute;
top: 70px;
}
</style>
</head>
<body>
<p>
The test passes if the green rectangle on the right is completely between the two blue lines.
There should be no red.
</p>
<div class="green left-rect"></div>
<div class="green right-rect"></div>
<div class="blue left-line"></div>
<div class="blue right-line"></div>
</body></html>

34
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/shape-image-025-ref.xht Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Reference File</title>
<link href="rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
<style type="text/css">
body {
margin: 0;
}
.green {
top: 70px;
left: 10px;
width: 100px;
height: 100px;
background-color: rgb(0,100,0);
}
.blue {
top: 50px;
left: 60px;
width: 2px;
height: 140px;
background-color: blue;
}
.green, .blue { position: absolute; }
</style>
</head>
<body>
<p>
The test passes if there are two identical green rectangles on either side of the blue line.
There should be no red.
</p>
<div class="green"></div>
<div class="blue"></div>
</body></html>

83
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/shape-outside-001-ref.xht Normal file
View file

@ -0,0 +1,83 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Reference File</title>
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
<style type="text/css">
body {
margin-left: 0;
}
#container {
position: absolute;
top: 60px;
text-align: center;
font-family: Ahem;
font-size: 20px;
color: green;
line-height: 1em;
}
#level-1 {
width: 400px;
height: 80px;
}
#level-2 {
width: 200px;
height: 40px;
margin-left: 100px;
}
#level-3 {
width: 100px;
height: 40px;
margin-left: 150px;
}
#level-4 {
width: 50px;
height: 20px;
margin-left: 175px;
}
#level5 {
width: 400px;
height: 20px;
}
#left-triangle, #right-triangle {
position: absolute;
top: 60px;
width: 200px;
height: 200px;
background-color: lightblue;
}
#left-triangle {
clip-path: polygon(0 0, 200px 200px, 0 200px);
}
#right-triangle {
left: 200px;
clip-path: polygon(200px 0, 200px 200px, 0 200px);
}
</style>
</head>
<body>
<p>
The test passes if the green shape does not intersect either of the triangles and
there is one green horizontal bar beneath the triangles. There should be no red.
</p>
<div id="container">
<div id="level-1">
XXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXX XXXXXXXXXXXXX XXXXXXXXXXX
</div>
<div id="level-2">
XXXXXXXXX XXXXXXX
</div>
<div id="level-3">
XXXXX XXX
</div>
<div id="level-4">
X
</div>
<br />
<div id="level-5">
XXXXXXXXXXXXXXXXX
</div>
</div>
<div id="left-triangle"></div>
<div id="right-triangle"></div>
</body></html>

43
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/shape-outside-004-ref.xht Normal file
View file

@ -0,0 +1,43 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Reference File</title>
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
<style type="text/css">
#container {
position: absolute;
top: 70px;
width: 400px;
font-family: Ahem;
font-size: 20px;
line-height: 1.5em;
color: green;
}
#square{
position: absolute;
top: 70px;
width: 196px;
height: 196px;
border: 1px solid black;
z-index: 10;
}
</style>
</head>
<body>
<p>
The test passes if there are two columns of six green horizontal bars of the same
size inside the square and two columns of six matching green bars outside and to the
right of the square. There should be no red.
</p>
<div id="container">
XXXX XXXX XXXX XXXX
XXXX XXXX XXXX XXXX
XXXX XXXX XXXX XXXX
XXXX XXXX XXXX XXXX
XXXX XXXX XXXX XXXX
XXXX XXXX XXXX XXXX
</div>
<div id="square"></div>
</body></html>

56
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/shape-outside-006-ref.xht Normal file
View file

@ -0,0 +1,56 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Reference File</title>
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
<style type="text/css">
#container {
position: absolute;
top: 70px;
width: 250px;
height: 105px;
border: 1px solid black;
}
.bar {
position: absolute;
height: 20px;
background-color: green;
}
#line-1 {
top: 10px;
left: 65px;
width: 160px;
}
#line-2 {
top: 40px;
left: 80px;
width: 140px;
}
#line-3 {
top: 70px;
left: 95px;
width: 120px;
}
#triangle {
position: absolute;
top: 70px;
width: 100px;
height: 100px;
background-color: lightblue;
clip-path: polygon(50px 0px, 100px 100px, 0px 100px);
}
</style>
</head>
<body>
<p>
The test passes if all there are three green horizontal bars to the right of the
triangle that are all inside the rectangle and there should be no green to the left
of the triangle. There should be no red.
</p>
<div id="container">
<div class="bar" id="line-1"></div>
<div class="bar" id="line-2"></div>
<div class="bar" id="line-3"></div>
</div>
<div id="triangle"></div>
</body></html>

71
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/shape-outside-007-ref.xht Normal file
View file

@ -0,0 +1,71 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Reference File</title>
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
<style type="text/css">
#container {
position: absolute;
top: 70px;
width: 260px;
height: 120px;
font-family: Ahem;
font-size: 20px;
line-height: 1.5em;
border: 1px solid black;
padding-left: 2px;
}
#margin-line {
position: absolute;
top: 100px;
width: 263px;
border-bottom: 1px solid black;
}
.bar {
position: absolute;
height: 20px;
background-color: green;
}
#bar-1 {
top: 5px;
width: 240px;
}
#bar-2 {
top: 35px;
width: 240px;
}
#bar-3 {
top: 65px;
left: 22px;
width: 220px;
}
#bar-4 {
top: 95px;
left: 52px;
width: 200px;
}
#triangle {
position: absolute;
top: 90px;
width: 100px;
height: 100px;
background-color: lightblue;
margin-left: 2px;
clip-path: polygon(0% 50%, 50% 100%, 0 100%);;
}
</style>
</head>
<body>
<p>
The test passes if one green bar is inside the top rectangle, three green bars
are in the bottom rectangle, and none intersect the triangle. There should be no red.
</p>
<div id="container">
<div class="bar" id="bar-1"></div>
<div class="bar" id="bar-2"></div>
<div class="bar" id="bar-3"></div>
<div class="bar" id="bar-4"></div>
</div>
<div id="margin-line"></div>
<div id="triangle"></div>
</body></html>

88
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/shape-outside-008-ref.xht Normal file
View file

@ -0,0 +1,88 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Reference File</title>
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
<style type="text/css">
#container {
position: absolute;
top: 70px;
width: 262px;
height: 150px;
border: 1px solid black;
}
#failure-container {
}
#margin-line {
position: absolute;
top: 100px;
width: 263px;
border-bottom: 1px solid black;
}
.fail {
position: absolute;
height: 15px;
background-color: green;
z-index: -1;
}
#bar-1 {
top: 7px;
left: 2px;
width: 255px;
}
#bar-2 {
top: 37px;
left: 2px;
width: 255px;
}
#bar-3 {
top: 67px;
left: 22px;
width: 225px;
}
#bar-4 {
top: 97px;
left: 122px;
width: 135px;
}
#bar-5 {
top: 127px;
left: 152px;
width: 105px;
}
.triangle {
position: absolute;
width: 100px;
height: 100px;
background-color: lightblue;
clip-path: polygon(0% 50%, 50% 100%, 0 100%);;
}
#triangle-1 {
top: 90px;
margin-left: 2px;
}
#triangle-2 {
top: 120px;
margin-left: 102px;
}
</style>
</head>
<body>
<p>
The test passes if one green bar is inside the top rectangle, four green bars
are in the bottom rectangle, and none intersect the triangles. There should be no
red.
</p>
<div id="container">
<div class="fail" id="bar-1"></div>
<div class="fail" id="bar-2"></div>
<div class="fail" id="bar-3"></div>
<div class="fail" id="bar-4"></div>
<div class="fail" id="bar-5"></div>
</div>
<div id="margin-line"></div>
<div class="triangle" id="triangle-1"></div>
<div class="triangle" id="triangle-2"></div>
</body></html>

39
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/shape-outside-box-001-ref.xht Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Reference File</title>
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
<style>
body {
margin: 0;
}
#container {
position: relative;
}
#line {
position: absolute;
top: 0px;
left: 198px;
width: 2px;
height: 200px;
border-left: 2px solid blue;
}
#square {
position: absolute;
top: 80px;
left: 200px;
width: 40px;
height: 40px;
background-color: green;
}
</style></head>
<body>
<p>The test passes if there is a green square to the right of the blue line. There should be no red.</p>
<div id="container">
<div id="line"></div>
<div id="square"></div>
</div>
</body></html>

39
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/shape-outside-box-005-ref.xht Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Reference File</title>
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
<style>
body {
margin: 0;
}
#container {
position: relative;
}
#line {
position: absolute;
top: 0px;
left: 100px;
width: 2px;
height: 200px;
border-left: 2px solid blue;
}
#square {
position: absolute;
top: 80px;
left: 60px;
width: 40px;
height: 40px;
background-color: green;
}
</style></head>
<body>
<p>The test passes if there is a green square to the left of the blue line. There should be no red.</p>
<div id="container">
<div id="line"></div>
<div id="square"></div>
</div>
</body></html>

39
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/shape-outside-circle-013-ref.xht Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Reference File</title>
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
<style>
body {
margin: 0;
}
#container {
position: relative;
}
#line {
position: absolute;
top: 0px;
left: 168px;
width: 2px;
height: 200px;
border-left: 2px solid blue;
}
#square {
position: absolute;
top: 80px;
left: 170px;
width: 40px;
height: 40px;
background-color: green;
}
</style></head>
<body>
<p>The test passes if there is a green square to the right of the blue line. There should be no red.</p>
<div id="container">
<div id="line"></div>
<div id="square"></div>
</div>
</body></html>

39
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/shape-outside-circle-023-ref.xht Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Reference File</title>
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
<style>
body {
margin: 0;
}
#container {
position: relative;
}
#line {
position: absolute;
top: 0px;
left: 140px;
width: 2px;
height: 200px;
border-left: 2px solid blue;
}
#square {
position: absolute;
top: 80px;
left: 100px;
width: 40px;
height: 40px;
background-color: green;
}
</style></head>
<body>
<p>The test passes if there is a green square to the left of the blue line. There should be no red.</p>
<div id="container">
<div id="line"></div>
<div id="square"></div>
</div>
</body></html>

69
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/shape-outside-circle-030-ref.xht Normal file
View file

@ -0,0 +1,69 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Reference File</title>
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
<style>
body {
margin: 0;
}
.container {
position: relative;
font: 15px Ahem, sans-serif;
line-height: 20px;
width: 200px;
height: 200px;
color: green;
}
.circle {
z-index: -1;
width: 160px;
height: 160px;
border-radius: 80px;
background-color: blue;
overflow: hidden;
}
#left-circle-outline {
position: absolute;
top: 20px;
left: 0px;
}
.left-circle-float-line {
float: left;
clear: left;
height: 20px;
}
</style></head>
<body>
<p>The test passes if all of the squares are green. There should be no red.</p>
<div class="container">
X<br />
<div id="left-circle-outline"></div>
<!-- generated left-rounded-rect-float-line divs will be inserted here -->
X<br />
X<br />
X<br />
X<br />
X<br />
X<br />
X<br />
X<br />
X
</div>
<script src="../../support/rounded-rectangle.js"></script>
<script src="../../support/subpixel-utils.js"></script>
<script>
genLeftRoundedRectFloatShapeOutsideRefTest({
roundedRect: {x: 0, y: 20, width: 160, height: 160, rx: 80, ry: 80},
containerWidth: 200,
containerHeight: 200,
lineHeight: 20,
floatElementClassSuffix: "circle-float-line",
insertElementIdSuffix: "circle-outline"
});
</script>
</body></html>

39
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/shape-outside-ellipse-013-ref.xht Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Reference File</title>
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
<style>
body {
margin: 0;
}
#container {
position: relative;
}
#line {
position: absolute;
top: 0px;
left: 168px;
width: 2px;
height: 200px;
border-left: 2px solid blue;
}
#square {
position: absolute;
top: 80px;
left: 170px;
width: 40px;
height: 40px;
background-color: green;
}
</style></head>
<body>
<p>The test passes if there is a green square to the right of the blue line. There should be no red.</p>
<div id="container">
<div id="line"></div>
<div id="square"></div>
</div>
</body></html>

39
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/shape-outside-ellipse-021-ref.xht Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Reference File</title>
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
<style>
body {
margin: 0;
}
#container {
position: relative;
}
#line {
position: absolute;
top: 0px;
left: 140px;
width: 2px;
height: 200px;
border-left: 2px solid blue;
}
#square {
position: absolute;
top: 80px;
left: 100px;
width: 40px;
height: 40px;
background-color: green;
}
</style></head>
<body>
<p>The test passes if there is a green square to the left of the blue line. There should be no red.</p>
<div id="container">
<div id="line"></div>
<div id="square"></div>
</div>
</body></html>

65
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/shape-outside-ellipse-030-ref.xht Normal file
View file

@ -0,0 +1,65 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Reference File</title>
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
<style>
body {
margin: 0;
}
.container {
position: relative;
font: 15px Ahem, sans-serif;
line-height: 20px;
width: 200px;
height: 200px;
color: green;
}
.ellipse {
z-index: -1;
width: 160px;
height: 80px;
border-radius: 80px;
background-color: blue;
overflow: hidden;
}
#left-ellipse-outline {
position: absolute;
top: 20px;
left: 0px;
}
.left-ellipse-float-line {
float: left;
clear: left;
height: 20px;
}
</style></head>
<body>
<p>The test passes if all of the squares are green. There should be no red.</p>
<div class="container">
X<br />
<div id="left-ellipse-outline"></div>
<!-- generated left-rounded-rect-float-line divs will be inserted here -->
X<br />
X<br />
X<br />
X<br />
X
</div>
<script src="../../support/rounded-rectangle.js"></script>
<script src="../../support/subpixel-utils.js"></script>
<script>
genLeftRoundedRectFloatShapeOutsideRefTest({
roundedRect: {x: 0, y: 20, width: 160, height: 80, rx: 80, ry: 40},
containerWidth: 200,
containerHeight: 200,
lineHeight: 20,
floatElementClassSuffix: "ellipse-float-line",
insertElementIdSuffix: "ellipse-outline"
});
</script>
</body></html>

19
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/shape-outside-inset-010-ref.xht Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Reference File</title>
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
<style>
#shape {
margin-left: 25px;
width: 200px;
height: 200px;
background-color: green;
}
</style></head>
<body>
<p>The test passes if there is a green square and no red.</p>
<div id="shape"></div>
</body></html>

35
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/shape-outside-linear-gradient-001-ref.xht Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Reference File</title>
<link href="betravis@adobe.com" rel="author" title="Bear Travis" />
<style type="text/css">
.container {
width: 200px;
height: 200px;
background-color: red;
font-family: Ahem;
font-size: 50px;
line-height: 1;
}
#test {
color: green;
}
#gradient {
float: left;
width: 100px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<p>
The test passes if you see a green square. There should be no red.
</p>
<div class="container" id="test">
<div id="gradient"></div>
xx xx xx xx
</div>
</body></html>

35
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/shape-outside-linear-gradient-002-ref.xht Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Reference File</title>
<link href="betravis@adobe.com" rel="author" title="Bear Travis" />
<style type="text/css">
.container {
width: 200px;
height: 200px;
background-color: red;
font-family: Ahem;
font-size: 50px;
line-height: 1;
}
#test {
color: green;
}
#gradient {
float: right;
width: 100px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<p>
The test passes if you see a green square. There should be no red.
</p>
<div class="container" id="test">
<div id="gradient"></div>
xx xx xx xx
</div>
</body></html>

36
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/shape-outside-linear-gradient-004-ref.xht Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Reference File</title>
<link href="mailto:stearns@adobe.com" rel="author" title="Alan Stearns" />
<style type="text/css">
.square {
display: inline-block;
width: 100px;
height: 100px;
line-height: 100px;
background-color: green;
}
#test {
position: absolute;
top: 70px;
width: 200px;
font-size: 0px;
}
#test &gt; .right {
margin-left: 100px;
}
</style>
</head>
<body>
<p>
The test passes if there are four green squares alternating left and right. There
should be no red.
</p>
<div id="test">
<div class="square"></div><br />
<div class="square right"></div><br />
<div class="square"></div><br />
<div class="square right"></div>
</div>
</body></html>

23
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/shape-outside-polygon-007-ref.xht Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Reference File</title>
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
<style>
body {
margin: 0;
}
#green-square {
position: absolute;
top: 50px;
left: 10px;
width: 200px;
height: 200px;
background-color: green;
}
</style></head>
<body>
<p>The test passes if there is green square and no red.</p>
<div id="green-square"></div>
</body></html>

23
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/shape-outside-polygon-010-ref.xht Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Reference File</title>
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
<style>
body {
margin: 0;
}
#green-square {
position: absolute;
top: 50px;
left: 10px;
width: 240px;
height: 240px;
background-color: green;
}
</style></head>
<body>
<p>The test passes if there is green square and no red.</p>
<div id="green-square"></div>
</body></html>

45
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/shape-outside-polygon-017-ref.xht Normal file
View file

@ -0,0 +1,45 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Reference File</title>
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
<style>
body {
margin: 0;
}
.line {
position: absolute;
top: 60px;
width: 2px;
height: 200px;
border-left: 2px solid blue;
}
.right {
left: 220px;
}
.left {
left: 60px;
}
.top {
top: 90px;
left: 180px;
}
.bottom {
top: 170px;
left: 60px;
}
.square {
position: absolute;
width: 40px;
height: 40px;
background-color: green;
}
</style></head>
<body>
<p>The test passes if there there are two green squares between the blue lines. There should be no red.</p>
<div class="bottom square"></div>
<div class="top square"></div>
<div class="left line"></div>
<div class="right line"></div>
</body></html>

BIN
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/support/1x1-green.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 135 B

BIN
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/support/1x1-lime.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 135 B

BIN
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/support/1x1-maroon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 109 B

BIN
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/support/1x1-navy.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 109 B

BIN
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/support/1x1-red.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 135 B

BIN
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/support/1x1-white.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 109 B

BIN
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/support/60x60-gg-rr.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 224 B

BIN
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/support/60x60-green.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 218 B

BIN
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/support/60x60-red.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 217 B

29
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/support/README Normal file
View file

@ -0,0 +1,29 @@
CSS Global Support Directory
============================
This directory contains common support files (such as images and external
style sheets). These are sync'ed into the support directories of all our
test suites. If you have test-suite-specific support files, please add
them to the appropriate test-suite-specific support/ directory.
If you add to a support/ directory, please run the tools/supportprop.py
script from the top of the repository to cascade support files into the
lower-level support directories.
Description of the Common Support File Collection
-------------------------------------------------
The 1x1-* images are all exactly one pixel.
The swatch-* images all use 15x15 cells.
The square-* images all use 15x15 cells with one pixel borders.
The pattern-* images use cells of various sizes:
pattern-gg-gr.png 20x20
pattern-grg-rgr-grg.png 20x20
pattern-rgr-grg-rgr.png 20x20
pattern-tr.png 15x15
pattern-grg-rrg-rgg.png 15x15

1
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/support/a-green.css Normal file
View file

@ -0,0 +1 @@
.a { color: green; }

BIN
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/support/animated.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.8 KiB

1
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/support/b-green.css Normal file
View file

@ -0,0 +1 @@
.b { color: green; }

1
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/support/c-red.css Normal file
View file

@ -0,0 +1 @@
.c { color: red; }

BIN
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/support/cat.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/support/circle-no-shadow.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6.1 KiB

BIN
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/support/circle-shadow.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/support/left-half-rectangle-20.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.9 KiB

3
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/support/left-half-rectangle-20.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" style="background-color: rgba(0,0,0,0.2)" version="1.1">
<path fill="#006400" d=" M 0.00 0.00 L 50.00 0.00 C 50.00 33.33 50.00 66.67 50.00 100.00 L 0.00 100.00 L 0.00 0.00 Z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 252 B

BIN
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/support/left-half-rectangle-50.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 17 KiB

3
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/support/left-half-rectangle-50.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" style="background-color: rgba(0,0,0,0.5)" version="1.1">
<path fill="#006400" d=" M 0.00 0.00 L 50.00 0.00 C 50.00 33.33 50.00 66.67 50.00 100.00 L 0.00 100.00 L 0.00 0.00 Z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 252 B

BIN
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/support/left-half-rectangle-70.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 17 KiB

3
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/support/left-half-rectangle-70.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" style="background-color: rgba(0,0,0,0.7)" version="1.1">
<path fill="#006400" d=" M 0.00 0.00 L 50.00 0.00 C 50.00 33.33 50.00 66.67 50.00 100.00 L 0.00 100.00 L 0.00 0.00 Z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 252 B

BIN
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/support/left-half-rectangle.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/support/left-half-rectangle.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 17 KiB

3
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/support/left-half-rectangle.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" version="1.1">
<path fill="#006400" d=" M 0.00 0.00 L 50.00 0.00 C 50.00 33.33 50.00 66.67 50.00 100.00 L 0.00 100.00 L 0.00 0.00 Z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 210 B

866
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/support/parsing-utils.js Normal file
View file

@ -0,0 +1,866 @@
var ParsingUtils = (function() {
function testInlineStyle(value, expected) {
var div = document.createElement('div');
div.style.setProperty('shape-outside', value);
var actual = div.style.getPropertyValue('shape-outside');
assert_equals(actual, expected);
}
function testComputedStyle(value, expected) {
var div = document.createElement('div');
div.style.setProperty('shape-outside', value);
document.body.appendChild(div);
var style = getComputedStyle(div);
var actual = style.getPropertyValue('shape-outside');
actual = roundResultStr(actual);
document.body.removeChild(div);
// Some of the tests in this suite have either/or expected results
// so this check allows for testing that at least one of them passes.
// Description of the 2 expecteds is below near calcTestValues.
if(Object.prototype.toString.call( expected ) === '[object Array]' && expected.length == 2) {
assert_true(expected[0] == actual || expected[1] == actual)
} else {
assert_equals(actual, typeof expected !== 'undefined' ? expected : value);
}
}
function testShapeMarginInlineStyle(value, expected) {
var div = document.createElement('div');
div.style.setProperty('shape-outside', "border-box inset(10px)");
div.style.setProperty('shape-margin', value);
var actual = div.style.getPropertyValue('shape-margin');
assert_equals(actual, expected);
}
function testShapeMarginComputedStyle(value, expected) {
var outerDiv = document.createElement('div');
outerDiv.style.setProperty('width', '100px');
var innerDiv = document.createElement('div');
innerDiv.style.setProperty('shape-outside', "border-box inset(10px)");
innerDiv.style.setProperty('shape-margin', value);
outerDiv.appendChild(innerDiv);
document.body.appendChild(outerDiv);
var style = getComputedStyle(innerDiv);
var actual = style.getPropertyValue('shape-margin');
assert_not_equals(actual, null);
if(actual.indexOf('calc') == -1 )
actual = roundResultStr(actual);
document.body.removeChild(outerDiv);
// See comment above about multiple expected results
if(Object.prototype.toString.call( expected ) === '[object Array]' && expected.length == 2) {
assert_true(expected[0] == actual || expected[1] == actual)
} else {
assert_equals(actual, !expected ? '0px' : expected);
}
}
function testShapeThresholdInlineStyle(value, expected) {
var div = document.createElement('div');
div.style.setProperty('shape-outside', 'url(someimage.png)');
div.style.setProperty('shape-image-threshold', value);
var actual = div.style.getPropertyValue('shape-image-threshold');
assert_equals(actual, expected);
}
function testShapeThresholdComputedStyle(value, expected) {
var div = document.createElement('div');
div.style.setProperty('shape-outside', 'url(someimage.png)');
div.style.setProperty('shape-image-threshold', value);
document.body.appendChild(div);
var style = getComputedStyle(div);
var actual = style.getPropertyValue('shape-image-threshold');
assert_not_equals(actual, null);
if(actual.indexOf('calc') == -1 )
actual = roundResultStr(actual);
document.body.removeChild(div);
// See comment above about multiple expected results
if(Object.prototype.toString.call( expected ) === '[object Array]' && expected.length == 2) {
assert_true(expected[0] == actual || expected[1] == actual)
} else {
assert_equals(actual, !expected ? '0' : expected);
}
}
// Builds an array of test cases to send to testharness.js where one test case is: [name, actual, expected]
// These test cases will verify results from testInlineStyle() or testComputedStyle()
function buildTestCases(testCases, testType) {
var results = [];
// If test_type isn't specified, test inline style
var type = typeof testType == 'undefined' ? 'invalid': testType;
testCases.forEach(function(test) {
oneTestCase = [];
// name - annotated by type (inline vs. computed)
if ( test.hasOwnProperty('name') ) {
oneTestCase.push(test['name'] +' - '+ type);
} else {
// If test_name isn't specified, use the actual
oneTestCase.push(test['actual'] +' - '+ type);
}
// actual
oneTestCase.push(test['actual'])
// expected
if( type.indexOf('invalid') != -1 ){
oneTestCase.push(null)
} else if( type == 'inline' ) {
oneTestCase.push(test['expected_inline']);
} else if( type == 'computed' ){
oneTestCase.push( convertToPx(test['expected_computed']) );
}
results.push(oneTestCase);
});
return results;
}
function buildPositionTests(shape, valid, type, units) {
var results = new Array();
var convert = type.indexOf('computed') != -1 ? true : false;
if(Object.prototype.toString.call( units ) === '[object Array]') {
units.forEach(function(unit) {
positionTests = buildPositionTests(shape, valid, type, unit);
results = results.concat(positionTests);
});
} else {
if (valid) {
validPositions.forEach(function(test) {
var testCase = [], testName, actual, expected;
// skip if this isn't explicitly testing length units
if( !(type.indexOf('lengthUnit') != -1 && test[0].indexOf("u1") == -1)) {
// actual
actual = shape + '(at ' + setUnit(test[0], false, units) +')';
// expected
// if(convert && shape == 'circle')
// expected = shape + '(at ' + setUnit(test[1], convert, units) +')';
// else if(convert && shape == 'ellipse')
// expected = shape + '(at ' + setUnit(test[1], convert, units) +')';
// else
expected = shape + '(at ' + setUnit(test[1], convert, units) +')';
// name
if (type == 'lengthUnit + inline')
testName = 'test unit (inline): ' + units +' - '+ actual;
else if (type == 'lengthUnit + computed')
testName = 'test unit (computed): ' + units +' - '+ actual;
else
testName = (actual + ' serializes as ' + expected +' - '+ type);
testCase.push(testName)
testCase.push(actual);
testCase.push(expected);
results.push(testCase);
}
});
} else {
invalidPositions.forEach(function(test) {
var testValue = shape + '(at ' + setUnit(test, false, units) +')';
testCase = new Array();
testCase.push(testValue + ' is invalid');
testCase.push(testValue);
testCase.push(null);
results.push(testCase);
});
}
}
return unique(results);
}
function buildRadiiTests(shape, type, units) {
var results = new Array();
var testUnits = typeof units == 'undefined' ? 'px': units;
var convert = type.indexOf('computed') != -1 ? true : false;
if(Object.prototype.toString.call( testUnits ) === '[object Array]') {
testUnits.forEach(function(unit) {
radiiTests = buildRadiiTests(shape, type, unit);
results = results.concat(radiiTests);
});
} else {
var validRadii = shape == 'circle' ? validCircleRadii : validEllipseRadii;
validRadii.forEach(function(test) {
var testCase = [], name, actual, expected;
// skip if this isn't explicitly testing length units
if( !(type.indexOf('lengthUnit') != -1 && test[0].indexOf("u1") == -1) ) {
actual = shape + '(' + setUnit(test[0], false, testUnits) +')';
// name
if (type.indexOf('lengthUnit') != -1) {
name = 'test unit: ' + units +' - '+ actual;
if(type.indexOf('computed') != -1)
name = name + ' - computed';
else
name = name + ' - inline';
}
else
name = actual +' - '+ type;
testCase.push(name);
// actual
testCase.push(actual);
// expected
if(type.indexOf('computed') != -1 && test.length == 3) {
expected = shape + '(' + setUnit(test[2], convert, testUnits) +')';
} else {
expected = shape + '(' + setUnit(test[1], convert, testUnits) +')';
}
testCase.push(expected);
results.push(testCase);
}
});
}
return unique(results);
}
function buildInsetTests(unit1, unit2, type) {
var results = new Array();
var convert = type == 'computed' ? true : false;
if(Object.prototype.toString.call( unit1 ) === '[object Array]') {
unit1.forEach(function(unit) {
insetTests = buildInsetTests(unit, unit2, type);
results = results.concat(insetTests);
});
} else {
validInsets.forEach(function(test) {
var testCase = [], name, actual, expected;
name = setUnit(test[0], false, unit1, unit2) +' - '+ type;
actual = 'inset(' + setUnit(test[1], convert, unit1, unit2) +')';
expected = actual;
testCase.push(name);
testCase.push(actual);
testCase.push(expected);
results.push(testCase);
});
}
return unique(results);
}
function buildPolygonTests(unitSet, type) {
var results = new Array();
var convert = type == 'computed' ? true : false;
unitSet.forEach(function(set) {
validPolygons.forEach(function(test) {
var testCase = [];
// name
testCase.push(setUnit(test[0], false, set[0], set[1], set[2]) +' - '+ type);
// actual
testCase.push('polygon(' + setUnit(test[1], false, set[0], set[1], set[2]) +')');
// expected
testCase.push('polygon(' + setUnit(test[1], convert, set[0], set[1], set[2]) +')');
results.push(testCase);
});
});
return unique(results);
}
function buildCalcTests(testCases, type) {
var results = new Array();
testCases.forEach(function(test){
var testCase = [];
if(type == 'computed') {
testCase.push(test[0] + ' - computed style');
testCase.push(test[0]);
testCase.push(test[2]);
}
else {
testCase.push(test[0] + ' - inline style');
testCase.push(test[0]);
testCase.push(test[1]);
}
testCase.push(type);
results.push(testCase)
});
return unique(results);
}
function unique(tests) {
var list = tests.concat();
for(var i = 0; i< list.length; ++i) {
for(var j = i+1; j < list.length; ++j) {
if(list[i][0] === list[j][0])
list.splice(j--, 1);
}
}
return list;
}
function setUnit(str, convert, unit1, unit2, unit3) {
var retStr = str;
if(typeof unit1 !== 'undefined') {
retStr = retStr.replace(new RegExp('u1', 'g'), unit1);
}
if(typeof unit2 !== 'undefined') {
retStr = retStr.replace(new RegExp("u2", 'g'), unit2);
}
if(typeof unit3 !== 'undefined') {
retStr = retStr.replace(new RegExp("u3", 'g'), unit3);
}
retStr = convert ? convertToPx(retStr) : retStr;
return retStr;
}
function convertToPx(origValue) {
var valuesToConvert = origValue.match(/[0-9]+(\.[0-9]+)?([a-z]{2,4}|%)/g);
if(!valuesToConvert)
return origValue;
var retStr = origValue;
for(var i = 0; i < valuesToConvert.length; i++) {
var unit = valuesToConvert[i].match(/[a-z]{2,4}|%/).toString();
var numberStr = valuesToConvert[i].match(/[0-9]+(\.[0-9]+)?/)[0];
var number = parseFloat(numberStr);
var convertedUnit = 'px';
if( typeof number !== 'NaN' )
{
if (unit == 'in') {
number = (96 * number);
} else if (unit == 'cm') {
number = (37.795275591 * number);
} else if (unit == 'mm') {
number = (3.779527559 * number);
} else if (unit == 'pt') {
number = (1.333333333333 * number);
} else if (unit == 'pc') {
number = (16 * number);
} else if (unit == 'em') {
number = (16 * number);
} else if (unit == 'ex') {
number = (7.1796875 * number);
} else if (unit == 'ch') {
number = (8 * number);
} else if (unit == 'rem') {
number = (16 * number);
} else if (unit == 'vw') {
number = ((.01 * window.innerWidth) * number);
} else if (unit == 'vh') {
number = ((.01 * window.innerHeight) * number);
} else if (unit == 'vmin') {
number = Math.min( (.01 * window.innerWidth), (.01 * window.innerHeight) ) * number;
} else if (unit == 'vmax') {
number = Math.max( (.01 * window.innerWidth), (.01 * window.innerHeight) ) * number;
}
else {
convertedUnit = unit;
}
number = Math.round(number * 1000) / 1000;
var find = valuesToConvert[i];
var replace = number.toString() + convertedUnit;
retStr = retStr.replace(valuesToConvert[i], number.toString() + convertedUnit);
}
}
return retStr.replace(',,', ',');
}
function roundResultStr(str) {
if(Object.prototype.toString.call( str ) !== '[object String]')
return str;
var numbersToRound = str.match(/[0-9]+\.[0-9]+/g);
if(!numbersToRound)
return str;
var retStr = str;
for(var i = 0; i < numbersToRound.length; i++) {
num = parseFloat(numbersToRound[i]);
if( !isNaN(num) ) {
roundedNum = Math.round(num*1000)/1000;
retStr = retStr.replace(numbersToRound[i].toString(), roundedNum.toString());
}
}
return retStr;
}
function generateInsetRoundCases(units, testType) {
var convert = testType.indexOf('computed') != -1 ? true : false;
var testUnit = units;
var sizes = [
'10' + units,
'20' + units,
'30' + units,
'40' + units
];
function insetRound(value) {
return 'inset(10' +testUnit+ ' round ' + value + ')';
}
function serializedInsetRound(lhsValues, rhsValues, convert) {
var retStr = '';
if(!rhsValues)
retStr = 'inset(10' +testUnit+ ' round ' + lhsValues +')';
else
retStr = 'inset(10' +testUnit+ ' round ' + lhsValues +' / '+ rhsValues +')';
if(convert)
return convertToPx(retStr);
return retStr;
}
var results = [], left, lhs, right, rhs;
for (left = 1; left <= 4; left++) {
lhs = sizes.slice(0, left).join(' ');
results.push([insetRound(lhs) +' - '+ testType, insetRound(lhs), serializedInsetRound(lhs, null, convert)]);
for (right = 1; right <= 4; right++) {
rhs = sizes.slice(0, right).join(' ');
if(lhs == rhs)
results.push([insetRound(lhs + ' / ' + rhs) +' - '+ testType, insetRound(lhs + ' / ' + rhs), serializedInsetRound(lhs, null, convert)]);
else
results.push([insetRound(lhs + ' / ' + rhs) +' - '+ testType, insetRound(lhs + ' / ' + rhs), serializedInsetRound(lhs, rhs, convert)]);
}
}
return results;
}
var validUnits = [
"cm","mm","in","pt","pc", // Absolute length units (omitting px b/c we default to that in all tests)
"em","ex","ch","rem", // Font relative length units
"vw","vh","vmin","vmax" // Viewport percentage units
]
/// [actual, expected]
var validPositions = [
/// [ percent ], [ length ], [ percent | percent ], [ percent | length ], [ length | percent ], [ length | length ]
["50%", "50% 50%"],
["50u1", "50u1 50%"],
["50% 50%", "50% 50%"],
["50% 50u1", "50% 50u1"],
["50u1 50%", "50u1 50%"],
["50u1 50u1", "50u1 50u1"],
///// [ keyword ], [ keyword keyword ] x 5 keywords
["left", "0% 50%"],
["top", "50% 0%"],
["right", "100% 50%"],
["bottom", "50% 100%"],
["center", "50% 50%"],
["left top", "0% 0%"],
["left bottom", "0% 100%"],
["left center", "0% 50%"],
["top left", "0% 0%"],
["top right", "100% 0%"],
["top center", "50% 0%"],
["right top", "100% 0%"],
["right bottom", "100% 100%"],
["right center", "100% 50%"],
["bottom left", "0% 100%"],
["bottom right", "100% 100%"],
["bottom center", "50% 100%"],
["center top", "50% 0%"],
["center left", "0% 50%"],
["center right", "100% 50%"],
["center bottom", "50% 100%"],
["center center", "50% 50%"],
////// [ keyword | percent ], [ keyword | length ], [ percent | keyword ], [ length | keyword ] x 5 keywords
["left 50%", "0% 50%"],
["left 50u1", "0% 50u1"],
["50% top", "50% 0%"],
["50u1 top", "50u1 0%"],
["right 80%", "100% 80%"],
["right 80u1", "100% 80u1"],
["70% bottom", "70% 100%"],
["70u1 bottom", "70u1 100%"],
["center 60%", "50% 60%"],
["center 60u1", "50% 60u1"],
["60% center", "60% 50%"],
["60u1 center", "60u1 50%"],
////// [ keyword | keyword percent ], [ keyword | keyword length ] x 5 keywords
["center top 50%", "50% 50%"],
["center top 50u1", "50% 50u1"],
["center left 50%", "50% 50%"],
["center left 50u1", "50u1 50%"],
["center right 70%", "30% 50%"],
["center right 70u1", "right 70u1 top 50%"],
["center bottom 70%", "50% 30%"],
["center bottom 70u1", "left 50% bottom 70u1"],
["left top 50%", "0% 50%"],
["left top 50u1", "0% 50u1"],
["left bottom 70%", "0% 30%"],
["left bottom 70u1", "left 0% bottom 70u1"],
["top left 50%", "50% 0%"],
["top left 50u1", "50u1 0%"],
["top right 70%", "30% 0%"],
["top right 70u1", "right 70u1 top 0%"],
["bottom left 50%", "50% 100%"],
["bottom left 50u1", "50u1 100%"],
["bottom right 70%", "30% 100%"],
["bottom right 70u1", "right 70u1 top 100%"],
["right bottom 70%", "100% 30%"],
["right bottom 70u1", "left 100% bottom 70u1"],
["right top 50%", "100% 50%"],
["right top 50u1", "100% 50u1"],
////// [ keyword percent | keyword], [ keyword length | keyword ] x 5 keywords
["left 50% center", "50% 50%"],
["left 50u1 center", "50u1 50%"],
["left 50% top", "50% 0%"],
["left 50u1 top", "50u1 0%"],
["left 50% bottom", "50% 100%"],
["left 50u1 bottom", "50u1 100%"],
["top 50% center", "50% 50%"],
["top 50u1 center", "50% 50u1"],
["top 50% left", "0% 50%"],
["top 50u1 left", "0% 50u1"],
["top 50% right", "100% 50%"],
["top 50u1 right", "100% 50u1"],
["bottom 70% center", "50% 30%"],
["bottom 70u1 center", "left 50% bottom 70u1"],
["bottom 70% left", "0% 30%"],
["bottom 70u1 left", "left 0% bottom 70u1"],
["bottom 70% right", "100% 30%"],
["bottom 70u1 right", "left 100% bottom 70u1"],
["right 80% center", "20% 50%"],
["right 80u1 center", "right 80u1 top 50%"],
["right 80% bottom", "20% 100%"],
["right 80u1 bottom", "right 80u1 top 100%"],
["right 80% top", "20% 0%"],
["right 80u1 top", "right 80u1 top 0%"],
////// [ keyword percent | keyword percent], [ keyword percent | keyword length],
////// [ keyword length | keyword length], [ keyword length | keyword percent] x 5 keywords
["left 50% top 50%", "50% 50%"],
["left 50% top 50u1", "50% 50u1"],
["left 50% bottom 70%", "50% 30%"],
["left 50% bottom 70u1", "left 50% bottom 70u1"],
["left 50u1 top 50%", "50u1 50%"],
["left 50u1 top 50u1", "50u1 50u1"],
["left 50u1 bottom 70%", "50u1 30%"],
["left 50u1 bottom 70u1", "left 50u1 bottom 70u1"],
["top 50% left 50%", "50% 50%"],
["top 50% left 50u1", "50u1 50%"],
["top 50% right 80%", "20% 50%"],
["top 50% right 80u1", "right 80u1 top 50%"],
["top 50u1 left 50%", "50% 50u1"],
["top 50u1 left 50u1", "50u1 50u1"],
["top 50u1 right 80%", "20% 50u1"],
["top 50u1 right 80u1", "right 80u1 top 50u1"],
["bottom 70% left 50%", "50% 30%"],
["bottom 70% left 50u1", "50u1 30%"],
["bottom 70% right 80%", "20% 30%"],
["bottom 70% right 80u1", "right 80u1 top 30%"],
["bottom 70u1 left 50%", "left 50% bottom 70u1"],
["bottom 70u1 left 50u1", "left 50u1 bottom 70u1"],
["bottom 70u1 right 80%", "left 20% bottom 70u1"],
["bottom 70u1 right 80u1", "right 80u1 bottom 70u1"],
["right 80% top 50%", "20% 50%"],
["right 80% top 50u1", "20% 50u1"],
["right 80% bottom 70%", "20% 30%"],
["right 80% bottom 70u1", "left 20% bottom 70u1"],
["right 80u1 top 50%", "right 80u1 top 50%"],
["right 80u1 top 50u1", "right 80u1 top 50u1"],
["right 80u1 bottom 70%", "right 80u1 top 30%"],
["right 80u1 bottom 70u1", "right 80u1 bottom 70u1"],
];
var invalidPositions = [
////// [ keyword | percent ], [ keyword | length ], [ percent | keyword ], [ length | keyword ] x 5 keywords
"50% left",
"50px left",
"top 50%",
"80% right",
"80px right",
"bottom 70%",
"bottom 70px",
////// [ keyword | keyword percent ], [ keyword | keyword length ] x 5 keywords
"center center 60%",
"center center 60px",
"left center 60%",
"left center 60px",
"left right 80%",
"left right 80px",
"left left 50%",
"left left 50px",
"top center 60%",
"top center 60px",
"top bottom 80%",
"top bottom 80px",
"top top 50%",
"top top 50px",
"bottom center 60%",
"bottom center 60px",
"bottom top 50%",
"bottom top 50px",
"bottom bottom 50%",
"bottom bottom 50px",
"right center 60%",
"right center 60px",
"right left 50%",
"right left 50px",
"right right 70%",
"right right 70px",
////// [ keyword percent | keyword], [ keyword length | keyword ] x 5 keywords
"center 60% top",
"center 60px top",
"center 60% bottom",
"center 60px bottom",
"center 60% left",
"center 60px left",
"center 60% right",
"center 60px right",
"center 60% center",
"center 60px center",
"left 50% right",
"left 50px right",
"left 50% left",
"left 50px left",
"top 50% bottom",
"top 50px bottom",
"top 50% top",
"top 50px top",
"bottom 70% top",
"bottom 70px top",
"bottom 70% bottom",
"bottom 70px bottom",
"right 80% left",
"right 80px left",
////// [ keyword percent | keyword percent], [ keyword percent | keyword length],
////// [ keyword length | keyword length], [ keyword length | keyword percent] x 5 keywords
"center 60% top 50%",
"center 60% top 50px",
"center 60% bottom 70%",
"center 60% bottom 70px",
"center 60% left 50%",
"center 60% left 50px",
"center 60% right 70%",
"center 60% right 70px",
"center 60% center 65%",
"center 60% center 65px",
"center 60px top 50%",
"center 60px top 50px",
"center 60px bottom 70%",
"center 60px bottom 70px",
"center 60px left 50%",
"center 60px left 50px",
"center 60px right 70%",
"center 60px right 70px",
"center 60px center 65%",
"center 60px center 65px",
"left 50% center 60%",
"left 50% center 60px",
"left 50% right 80%",
"left 50% right 80px",
"left 50% left 50%",
"left 50% left 50px",
"left 50px center 60%",
"left 50px center 60px",
"left 50px right 80%",
"left 50px right 80px",
"left 50px left 50%",
"left 50px left 50px",
"top 50% center 60%",
"top 50% center 60px",
"top 50% bottom 50%",
"top 50% bottom 50px",
"top 50% top 50%",
"top 50% top 50px",
"top 50px center 60%",
"top 50px center 60px",
"top 50px bottom 70%",
"top 50px bottom 70px",
"top 50px top 50%",
"top 50px top 50px",
"bottom 70% center 60%",
"bottom 70% center 60px",
"bottom 70% top 50%",
"bottom 70% top 50px",
"bottom 70% bottom 50%",
"bottom 70% bottom 50px",
"bottom 70px center 60%",
"bottom 70px center 60px",
"bottom 70px top 50%",
"bottom 70px top 50px",
"bottom 70px bottom 50%",
"bottom 70px bottom 50px",
"right 80% center 60%",
"right 80% center 60px",
"right 80% left 50%",
"right 80% left 50px",
"right 80% right 85%",
"right 80% right 85px",
"right 80px center 60%",
"right 80px center 60px",
"right 80px left 50%",
"right 80px left 50px",
"right 80px right 85%",
"right 80px right 85px"
];
// valid radii values for circle + ellipse
// [value, expected_inline, [expected_computed?]]
var validCircleRadii = [
['', 'at 50% 50%', 'at 50% 50%'],
['50u1', '50u1 at 50% 50%'],
['50%', '50% at 50% 50%'],
['closest-side', 'at 50% 50%'],
['farthest-side', 'farthest-side at 50% 50%']
]
var validEllipseRadii = [
['', 'at 50% 50%', 'at 50% 50%'],
['50u1', '50u1 at 50% 50%', '50u1 at 50% 50%'],
['50%', '50% at 50% 50%', '50% at 50% 50%'],
['closest-side', 'at 50% 50%', 'at 50% 50%'],
['farthest-side', 'farthest-side at 50% 50%', 'farthest-side at 50% 50%'],
['50u1 100u1', '50u1 100u1 at 50% 50%'],
['100u1 100px', '100u1 100px at 50% 50%'],
['25% 50%', '25% 50% at 50% 50%'],
['50u1 25%', '50u1 25% at 50% 50%'],
['25% 50u1', '25% 50u1 at 50% 50%'],
['25% closest-side', '25% at 50% 50%'],
['25u1 closest-side', '25u1 at 50% 50%'],
['closest-side 75%', 'closest-side 75% at 50% 50%'],
['closest-side 75u1', 'closest-side 75u1 at 50% 50%'],
['25% farthest-side', '25% farthest-side at 50% 50%'],
['25u1 farthest-side', '25u1 farthest-side at 50% 50%'],
['farthest-side 75%', 'farthest-side 75% at 50% 50%'],
['farthest-side 75u1', 'farthest-side 75u1 at 50% 50%'],
['closest-side closest-side', 'at 50% 50%'],
['farthest-side farthest-side', 'farthest-side farthest-side at 50% 50%'],
['closest-side farthest-side', 'closest-side farthest-side at 50% 50%'],
['farthest-side closest-side', 'farthest-side at 50% 50%']
]
var validInsets = [
["One arg - u1", "10u1"],
["One arg - u2", "10u2"],
["Two args - u1 u1", "10u1 20u1"],
["Two args - u1 u2", "10u1 20u2"],
["Two args - u2 u1", "10u2 20u1"],
["Two args - u2 u2", "10u2 20u2"],
["Three args - u1 u1 u1", "10u1 20u1 30u1"],
["Three args - u1 u1 u2", "10u1 20u1 30u2"],
["Three args - u1 u2 u1", "10u1 20u2 30u1"],
["Three args - u1 u2 u2 ", "10u1 20u2 30u2"],
["Three args - u2 u1 u1", "10u2 20u1 30u1"],
["Three args - u2 u1 u2 ", "10u2 20u1 30u2"],
["Three args - u2 u2 u1 ", "10u2 20u2 30u1"],
["Three args - u2 u2 u2 ","10u2 20u2 30u2"],
["Four args - u1 u1 u1 u1", "10u1 20u1 30u1 40u1"],
["Four args - u1 u1 u1 u2", "10u1 20u1 30u1 40u2"],
["Four args - u1 u1 u2 u1", "10u1 20u1 30u2 40u1"],
["Four args - u1 u1 u2 u2", "10u1 20u1 30u2 40u2"],
["Four args - u1 u2 u1 u1", "10u1 20u2 30u1 40u1"],
["Four args - u1 u2 u1 u2", "10u1 20u2 30u1 40u2"],
["Four args - u1 u2 u2 u1", "10u1 20u2 30u2 40u1"],
["Four args - u1 u2 u2 u2", "10u1 20u2 30u2 40u2"],
["Four args - u2 u1 u1 u1", "10u2 20u1 30u1 40u1"],
["Four args - u2 u1 u1 u2", "10u2 20u1 30u1 40u2"],
["Four args - u2 u1 u2 u1", "10u2 20u1 30u2 40u1"],
["Four args - u2 u1 u2 u2", "10u2 20u1 30u2 40u2"],
["Four args - u2 u2 u1 u1", "10u2 20u2 30u1 40u1"],
["Four args - u2 u2 u1 u2", "10u2 20u2 30u1 40u2"],
["Four args - u2 u2 u2 u1", "10u2 20u2 30u2 40u1"],
["Four args - u2 u2 u2 u2", "10u2 20u2 30u2 40u2"]
]
var validPolygons = [
["One vertex - u1 u1", "10u1 20u1"],
["One vertex - u1 u2", "10u1 20u2"],
["Two vertices - u1 u1, u1 u1", "10u1 20u1, 30u1 40u1"],
["Two vertices - u1 u1, u2 u2", "10u1 20u1, 30u2 40u2"],
["Two vertices - u2 u2, u1 u1", "10u2 20u2, 30u1 40u1"],
["Two vertices - u1 u2, u2 u1", "10u1 20u2, 30u2 40u1"],
["Three vertices - u1 u1, u1 u1, u1 u1", "10u1 20u1, 30u1 40u1, 50u1 60u1"],
["Three vertices - u2 u2, u2 u2, u2 u2", "10u2 20u2, 30u2 40u2, 50u2 60u2"],
["Three vertices - u3 u3, u3 u3, u3 u3", "10u3 20u3, 30u3 40u3, 50u3 60u3"],
["Three vertices - u1 u1, u2 u2, u3 u3", "10u1 20u1, 30u2 40u2, 50u3 60u3"],
["Three vertices - u3 u3, u1, u1, u2 u2", "10u3 20u3, 30u1 40u1, 50u2 60u2"],
]
// [test value, expected property value, expected computed style]
var calcTestValues = [
["calc(10in)", "calc(10in)", "960px"],
["calc(10in + 20px)", "calc(980px)", "980px"],
["calc(30%)", "calc(30%)", "30%"],
["calc(100%/4)", "calc(25%)", "25%"],
["calc(25%*3)", "calc(75%)", "75%"],
// These following two test cases represent an either/or situation in the spec
// computed value is always supposed to be, at most, a tuple of a length and a percentage.
// the computed value of a ‘calc()’ expression can be represented as either a number or a tuple
// of a dimension and a percentage.
// http://www.w3.org/TR/css3-values/#calc-notation
["calc(25%*3 - 10in)", "calc(75% - 10in)", ["calc(75% - 960px)", "calc(-960px + 75%)"]],
["calc((12.5%*6 + 10in) / 4)", "calc((75% + 10in) / 4)", ["calc((75% + 960px) / 4)", "calc(240px + 18.75%)"]]
]
return {
testInlineStyle: testInlineStyle,
testComputedStyle: testComputedStyle,
testShapeMarginInlineStyle: testShapeMarginInlineStyle,
testShapeMarginComputedStyle: testShapeMarginComputedStyle,
testShapeThresholdInlineStyle: testShapeThresholdInlineStyle,
testShapeThresholdComputedStyle: testShapeThresholdComputedStyle,
buildTestCases: buildTestCases,
buildRadiiTests: buildRadiiTests,
buildPositionTests: buildPositionTests,
buildInsetTests: buildInsetTests,
buildPolygonTests: buildPolygonTests,
generateInsetRoundCases: generateInsetRoundCases,
buildCalcTests: buildCalcTests,
validUnits: validUnits,
calcTestValues: calcTestValues,
roundResultStr: roundResultStr
}
})();

BIN
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/support/pattern-grg-rgr-grg.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 222 B

BIN
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/support/pattern-grg-rrg-rgg.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 231 B

BIN
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/support/pattern-rgr-grg-rgr.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 223 B

BIN
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/support/pattern-tr.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 137 B

BIN
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/support/right-half-rectangle-20.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/support/right-half-rectangle-50.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/support/right-half-rectangle-70.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 17 KiB

3
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/support/right-half-rectangle-70.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" style="background-color: rgba(0,0,0,0.7)" version="1.1">
<path fill="#006400" d="M50,0h50c0,33.3,0,66.7,0,100H50V0z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 194 B

BIN
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/support/right-half-rectangle.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 320 B

BIN
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/support/right-half-rectangle.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/support/right-half-rectangle.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 17 KiB

3
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/support/right-half-rectangle.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="100px" version="1.1" x="0px" y="0px">
<path fill="#006400" d="M50,0h50c0,33.3,0,66.7,0,100H50V0z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 211 B

5
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/support/rounded-triangle.svg Normal file
View file

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px" height="200px">
<g>
<path fill="#AED8E6" d="M167.405,164.386C186.707,183.974,180,200,152.5,200H50c-27.5,0-50-22.5-50-50V44.5 C0,17,15.792,10.526,35.094,30.114L167.405,164.386z"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 290 B

26
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/support/spec-example-utils.js Normal file
View file

@ -0,0 +1,26 @@
function approxShapeTest(testId, linePrefix, epsilon, lineOffsets) {
var isPositioned = { 'relative': true, 'fixed': true, 'absolute': true, 'sticky': true },
loops = 0,
testDiv = document.getElementById(testId),
testOffset = isPositioned[getComputedStyle(testDiv).position] ? 0 : testDiv.offsetLeft,
firstLine = document.getElementById(linePrefix + '0');
function runTest() {
if (firstLine.offsetLeft == testOffset) {
// wait for the shape image to load and layout to happen
if (loops > 100)
assert_unreached("Giving up waiting for shape layout to happen!");
else
loops++;
window.setTimeout(runTest, 5);
return;
}
for (var i = 0; i < lineOffsets.length; i++) {
var line = document.getElementById(linePrefix + i);
assert_approx_equals(line.offsetLeft, lineOffsets[i] + testOffset, epsilon, 'Line ' + i + ' is positioned properly');
}
done();
}
runTest();
}

BIN
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/support/square-purple.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 92 B

BIN
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/support/square-teal.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 92 B

BIN
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/support/square-white.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 78 B

BIN
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/support/swatch-blue.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 84 B

BIN
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/support/swatch-green.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 84 B

BIN
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/support/swatch-lime.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 84 B

BIN
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/support/swatch-orange.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 84 B

BIN
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/support/swatch-red.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 84 B

BIN
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/support/swatch-white.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 85 B

BIN
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/support/swatch-yellow.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 84 B

BIN
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/support/test-bl.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/support/test-br.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

BIN
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/support/test-outer.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/support/test-tl.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

BIN
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reference/support/test-tr.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

798
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reftest-toc.xht Normal file
View file

@ -0,0 +1,798 @@
<!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>CSS Shapes Module Level 1 CR Test Suite Reftest Index</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 Reftest Index</h1>
<table width="100%">
<col id="test-column"></col>
<col id="ref-column"></col>
<col id="flags-column"></col>
<thead>
<tr>
<th>Test</th>
<th>Reference</th>
<th>Flags</th>
</tr>
</thead>
<tbody id="shape-image-000" class="ahem image">
<tr>
<td rowspan="1" title="Image shape on a left float">
<a href="shape-image-000.xht">shape-image-000</a></td>
<td><a href="reference/shape-image-000-ref.xht">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
</tr>
</tbody>
<tbody id="shape-image-001" class="ahem image">
<tr>
<td rowspan="1" title="Image shape on a left float">
<a href="shape-image-001.xht">shape-image-001</a></td>
<td><a href="reference/shape-image-001-ref.xht">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
</tr>
</tbody>
<tbody id="shape-image-002" class="ahem image">
<tr>
<td rowspan="1" title="Image shape on a left float">
<a href="shape-image-002.xht">shape-image-002</a></td>
<td><a href="reference/shape-image-002-ref.xht">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
</tr>
</tbody>
<tbody id="shape-image-003" class="ahem image">
<tr>
<td rowspan="1" title="Image shape on a left float">
<a href="shape-image-003.xht">shape-image-003</a></td>
<td><a href="reference/shape-image-002-ref.xht">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
</tr>
</tbody>
<tbody id="shape-image-004" class="ahem image">
<tr>
<td rowspan="1" title="Image shape on a left float">
<a href="shape-image-004.xht">shape-image-004</a></td>
<td><a href="reference/shape-image-000-ref.xht">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
</tr>
</tbody>
<tbody id="shape-image-005" class="ahem image">
<tr>
<td rowspan="1" title="Image shape on a left float">
<a href="shape-image-005.xht">shape-image-005</a></td>
<td><a href="reference/shape-image-002-ref.xht">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
</tr>
</tbody>
<tbody id="shape-image-006" class="ahem">
<tr>
<td rowspan="1" title="left float, url(png), real image + shape-margin (px)">
<a href="shape-image-006.xht">shape-image-006</a></td>
<td><a href="reference/shape-image-006-ref.xht">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-image-007" class="ahem">
<tr>
<td rowspan="1" title="left float, url(svg), real image + shape-margin (px)">
<a href="shape-image-007.xht">shape-image-007</a></td>
<td><a href="reference/shape-image-007-ref.xht">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-image-008" class="ahem">
<tr>
<td rowspan="1" title="left float, url(jpg), data uri + shape-margin (%)">
<a href="shape-image-008.xht">shape-image-008</a></td>
<td><a href="reference/shape-image-008-ref.xht">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-image-009" class="ahem">
<tr>
<td rowspan="1" title="left float, url(png), real image 70% + shape-image-threshold + shape-margin (px)">
<a href="shape-image-009.xht">shape-image-009</a></td>
<td><a href="reference/shape-image-006-ref.xht">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-image-010" class="ahem">
<tr>
<td rowspan="1" title="left float, url(png), data uri + shape-image-threshold + shape-margin (%)">
<a href="shape-image-010.xht">shape-image-010</a></td>
<td><a href="reference/shape-image-006-ref.xht">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-image-011" class="ahem">
<tr>
<td rowspan="1" title="left float, url(svg), real image + shape-image-threshold + shape-margin (px)">
<a href="shape-image-011.xht">shape-image-011</a></td>
<td><a href="reference/shape-image-007-ref.xht">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-image-012" class="ahem">
<tr>
<td rowspan="1" title="Wrapping content around right floating actual jpg image">
<a href="shape-image-012.xht">shape-image-012</a></td>
<td><a href="reference/shape-image-012-ref.xht">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-image-013" class="ahem">
<tr>
<td rowspan="1" title="Wrapping content around shape given by a right floating png">
<a href="shape-image-013.xht">shape-image-013</a></td>
<td><a href="reference/shape-image-013-ref.xht">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-image-014" class="ahem">
<tr>
<td rowspan="1" title="Wrapping content around shape given by a right floating svg file">
<a href="shape-image-014.xht">shape-image-014</a></td>
<td><a href="reference/shape-image-002-ref.xht">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-image-015" class="ahem image">
<tr>
<td rowspan="1" title="Image shape on a right float">
<a href="shape-image-015.xht">shape-image-015</a></td>
<td><a href="reference/shape-image-013-ref.xht">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
</tr>
</tbody>
<tbody id="shape-image-016" class="ahem image">
<tr>
<td rowspan="1" title="Image shape on a right float">
<a href="shape-image-016.xht">shape-image-016</a></td>
<td><a href="reference/shape-image-013-ref.xht">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
</tr>
</tbody>
<tbody id="shape-image-017" class="ahem image">
<tr>
<td rowspan="1" title="Image shape on a right float">
<a href="shape-image-017.xht">shape-image-017</a></td>
<td><a href="reference/shape-image-002-ref.xht">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
</tr>
</tbody>
<tbody id="shape-image-018" class="ahem">
<tr>
<td rowspan="1" title="right float, url(jpg), real image + shape-margin (%)">
<a href="shape-image-018.xht">shape-image-018</a></td>
<td><a href="reference/shape-image-018-ref.xht">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-image-019" class="ahem">
<tr>
<td rowspan="1" title="right float, url(png), data uri + shape-margin (px)">
<a href="shape-image-019.xht">shape-image-019</a></td>
<td><a href="reference/shape-image-019-ref.xht">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-image-020" class="ahem">
<tr>
<td rowspan="1" title="right float, url(svg), data uri + shape-margin (%)">
<a href="shape-image-020.xht">shape-image-020</a></td>
<td><a href="reference/shape-image-020-ref.xht">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-image-021" class="ahem">
<tr>
<td rowspan="1" title="right float, url(png), real image + shape-image-threshold + shape-margin (%)">
<a href="shape-image-021.xht">shape-image-021</a></td>
<td><a href="reference/shape-image-021-ref.xht">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-image-022" class="ahem">
<tr>
<td rowspan="1" title="right float, url(gif), real image + shape-image-threshold + shape-margin (px)">
<a href="shape-image-022.xht">shape-image-022</a></td>
<td><a href="reference/shape-image-022-ref.xht">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-image-023" class="ahem">
<tr>
<td rowspan="1" title="right float, url(svg), data uri + shape-image-threshold + shape-margin (%)">
<a href="shape-image-023.xht">shape-image-023</a></td>
<td><a href="reference/shape-image-023-ref.xht">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-image-024" class="ahem">
<tr>
<td rowspan="1" title="shape-outside from img element with different size than the image file">
<a href="shape-image-024.xht">shape-image-024</a></td>
<td><a href="reference/shape-image-024-ref.xht">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-image-025" class="ahem">
<tr>
<td rowspan="1" title="shape-outside from first frame of animated gif">
<a href="shape-image-025.xht">shape-image-025</a></td>
<td><a href="reference/shape-image-025-ref.xht">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-001" class="ahem">
<tr>
<td rowspan="1" title="Left and right float with shape-outside">
<a href="shape-outside-001.xht">shape-outside-001</a></td>
<td><a href="reference/shape-outside-001-ref.xht">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-002" class="ahem">
<tr>
<td rowspan="1" title="Left and right float with shape-outside with clipped left float">
<a href="shape-outside-002.xht">shape-outside-002</a></td>
<td><a href="reference/shape-outside-001-ref.xht">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-003" class="ahem">
<tr>
<td rowspan="1" title="Left and right float with shape-outside with clipped right float">
<a href="shape-outside-003.xht">shape-outside-003</a></td>
<td><a href="reference/shape-outside-001-ref.xht">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-004" class="ahem">
<tr>
<td rowspan="1" title="inset with no extent and inline content - inset(50% 50% 50% 50%)">
<a href="shape-outside-004.xht">shape-outside-004</a></td>
<td><a href="reference/shape-outside-004-ref.xht">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-005" class="ahem">
<tr>
<td rowspan="1" title="inset with no extent and inline content - inset(150% 150% 0% 0%)">
<a href="shape-outside-005.xht">shape-outside-005</a></td>
<td><a href="reference/shape-outside-004-ref.xht">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-006" class="ahem">
<tr>
<td rowspan="1" title="shape-outside with open areas on both the left &amp; right of the float area">
<a href="shape-outside-006.xht">shape-outside-006</a></td>
<td><a href="reference/shape-outside-006-ref.xht">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-007" class="ahem">
<tr>
<td rowspan="1" title="Shape smaller than float content area - 1 float">
<a href="shape-outside-007.xht">shape-outside-007</a></td>
<td><a href="reference/shape-outside-007-ref.xht">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-008" class="ahem">
<tr>
<td rowspan="1" title="Shape smaller than float content area - 2 floats">
<a href="shape-outside-008.xht">shape-outside-008</a></td>
<td><a href="reference/shape-outside-008-ref.xht">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-012" class="ahem dom script">
<tr>
<td rowspan="1" title="Shape from image - shape-image-threshold - 0.9">
<a href="shape-outside-012.xht">shape-outside-012</a></td>
<td><a href="reference/shape-outside-012-ref.xht">=</a> </td>
<td rowspan="1"><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>
</tr>
</tbody>
<tbody id="shape-outside-box-002" class="ahem">
<tr>
<td rowspan="1" title="left float, shape-outside: content-box">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-box-003" class="ahem">
<tr>
<td rowspan="1" title="left float, shape-outside: border-box">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-box-004" class="ahem">
<tr>
<td rowspan="1" title="left float, shape-outside: padding-box">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-box-006" class="ahem">
<tr>
<td rowspan="1" title="right float, shape-outside: content-box">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-box-007" class="ahem">
<tr>
<td rowspan="1" title="right float, shape-outside: border-box">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-box-008" class="ahem">
<tr>
<td rowspan="1" title="right float, shape-outside: padding-box">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-circle-013" class="ahem">
<tr>
<td rowspan="1" title="left float, circle + margin-box + position (px)">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-circle-014" class="ahem">
<tr>
<td rowspan="1" title="left float, circle + content-box + radius and position in % units">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-circle-015" class="ahem">
<tr>
<td rowspan="1" title="left float, circle + closest-side + padding-box">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-circle-016" class="ahem">
<tr>
<td rowspan="1" title="left float, circle + farthest-side + border-box">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-circle-017" class="ahem">
<tr>
<td rowspan="1" title="left float, circle + shape-margin in px">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-circle-018" class="ahem">
<tr>
<td rowspan="1" title="left float, circle + shape-margin in % units">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-circle-019" class="ahem">
<tr>
<td rowspan="1" title="left float, circle at top left + margin-box + shape-margin">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-circle-020" class="ahem">
<tr>
<td rowspan="1" title="left float, circle at % + border-box + shape-margin">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-circle-021" class="ahem">
<tr>
<td rowspan="1" title="left float, circle + farthest-side + padding-box + shape-margin">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-circle-022" class="ahem">
<tr>
<td rowspan="1" title="left float, circle at bottom right + content-box + shape-margin">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-circle-024" class="ahem">
<tr>
<td rowspan="1" title="right float, circle radius in % units + shape-margin + border-box">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-circle-025" class="ahem">
<tr>
<td rowspan="1" title="right float, circle + shape-margin + padding-box">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-circle-026" class="ahem">
<tr>
<td rowspan="1" title="right float, circle + shape-margin + content-box">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-circle-027" class="ahem">
<tr>
<td rowspan="1" title="right float, circle with radius in % units + shape-margin + margin-box">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-circle-028" class="ahem">
<tr>
<td rowspan="1" title="right float, circle(closest-side) at position % + shape-margin + border-box">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-circle-029" class="ahem">
<tr>
<td rowspan="1" title="right float, circle at center right + shape-margin + padding-box">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-circle-030" class="ahem dom">
<tr>
<td rowspan="1" title="left float, circle radius in px units">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-circle-031" class="ahem dom">
<tr>
<td rowspan="1" title="left float, circle radius in % units">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-ellipse-013" class="ahem">
<tr>
<td rowspan="1" title="left float, ellipse radii and position in px">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-ellipse-014" class="ahem">
<tr>
<td rowspan="1" title="left float, ellipse radii and position in % units + content-box">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-ellipse-015" class="ahem">
<tr>
<td rowspan="1" title="left float, ellipse + closest-side + padding-box">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-ellipse-016" class="ahem">
<tr>
<td rowspan="1" title="left float, ellipse radii in % units + padding-box">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-ellipse-017" class="ahem">
<tr>
<td rowspan="1" title="left float, ellipse(farthest-side) + shape-margin + content-box">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-ellipse-018" class="ahem">
<tr>
<td rowspan="1" title="left float, ellipse + shape-margin in % units">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-ellipse-019" class="ahem">
<tr>
<td rowspan="1" title="left float, ellipse radii in % units + padding-box + shape-margin">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-ellipse-020" class="ahem">
<tr>
<td rowspan="1" title="left float, ellipse radii in % units + margin-box + shape-margin">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-ellipse-021" class="ahem">
<tr>
<td rowspan="1" title="right float, ellipse (closest-side px) + shape-margin + padding box">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-ellipse-022" class="ahem">
<tr>
<td rowspan="1" title="right float, ellipse(closest-side px) + shape-margin + content-box">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-ellipse-023" class="ahem">
<tr>
<td rowspan="1" title="right float, ellipse + shape-margin">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-ellipse-024" class="ahem">
<tr>
<td rowspan="1" title="right float, ellipse at position (%) + shape-margin (%) + border-box">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-ellipse-025" class="ahem">
<tr>
<td rowspan="1" title="right float, ellipse radii in % at center right + shape-margin + padding-box">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-ellipse-030" class="ahem dom">
<tr>
<td rowspan="1" title="left float, ellipse radii in px">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-ellipse-031" class="ahem dom">
<tr>
<td rowspan="1" title="left float, ellipse radii in % units">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-inset-010" class="ahem">
<tr>
<td rowspan="1" title="left float, inset, px units">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-inset-011" class="ahem">
<tr>
<td rowspan="1" title="left float, inset, % units">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-inset-012" class="ahem">
<tr>
<td rowspan="1" title="left float, inset + margin-box">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-inset-013" class="ahem">
<tr>
<td rowspan="1" title="left float, inset + border-box">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-inset-014" class="ahem">
<tr>
<td rowspan="1" title="left float, inset + content-box">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-inset-015" class="ahem">
<tr>
<td rowspan="1" title="left float, inset + padding-box">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-linear-gradient-001" class="ahem">
<tr>
<td rowspan="1" title="Left float with linear gradient">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-linear-gradient-002" class="ahem">
<tr>
<td rowspan="1" title="Right float with linear gradient">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-linear-gradient-003" class="ahem">
<tr>
<td rowspan="1" title="Right float with linear gradient">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-linear-gradient-004" class="">
<tr>
<td rowspan="1" title="Shape outside and repeating linear gradient">
<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 rowspan="1"></td>
</tr>
</tbody>
<tbody id="shape-outside-polygon-007" class="ahem">
<tr>
<td rowspan="1" title="left float, polygon, args in px units">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-polygon-008" class="ahem">
<tr>
<td rowspan="1" title="left float, polygon, args in % units">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-polygon-009" class="ahem">
<tr>
<td rowspan="1" title="left float, polygon + border box">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-polygon-010" class="ahem">
<tr>
<td rowspan="1" title="left float, polygon + padding box">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-polygon-011" class="ahem">
<tr>
<td rowspan="1" title="left float, polygon + content box">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-polygon-012" class="ahem">
<tr>
<td rowspan="1" title="right float, polygon + margin-box + shape-margin">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-polygon-013" class="ahem">
<tr>
<td rowspan="1" title="right float, polygon + border-box + shape-margin">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-polygon-014" class="ahem">
<tr>
<td rowspan="1" title="right float, polygon + padding-box + shape-margin">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-polygon-015" class="ahem">
<tr>
<td rowspan="1" title="right float, polygon + content-box + shape-margin">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-polygon-016" class="ahem">
<tr>
<td rowspan="1" title="polygon, evenodd">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-polygon-017" class="ahem">
<tr>
<td rowspan="1" title="right float, polygon + shape-margin beyond margin box">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="shape-outside-radial-gradient-001" class="ahem dom">
<tr>
<td rowspan="1" title="Left float with radial gradient">
<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 rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
</tr>
</tbody>
</table>
</body>
</html>

97
tests/wpt/css-tests/css-shapes-1_dev/xhtml1print/reftest.list Normal file
View file

@ -0,0 +1,97 @@
shape-image-000.xht == reference/shape-image-000-ref.xht
shape-image-001.xht == reference/shape-image-001-ref.xht
shape-image-002.xht == reference/shape-image-002-ref.xht
shape-image-003.xht == reference/shape-image-002-ref.xht
shape-image-004.xht == reference/shape-image-000-ref.xht
shape-image-005.xht == reference/shape-image-002-ref.xht
shape-image-006.xht == reference/shape-image-006-ref.xht
shape-image-007.xht == reference/shape-image-007-ref.xht
shape-image-008.xht == reference/shape-image-008-ref.xht
shape-image-009.xht == reference/shape-image-006-ref.xht
shape-image-010.xht == reference/shape-image-006-ref.xht
shape-image-011.xht == reference/shape-image-007-ref.xht
shape-image-012.xht == reference/shape-image-012-ref.xht
shape-image-013.xht == reference/shape-image-013-ref.xht
shape-image-014.xht == reference/shape-image-002-ref.xht
shape-image-015.xht == reference/shape-image-013-ref.xht
shape-image-016.xht == reference/shape-image-013-ref.xht
shape-image-017.xht == reference/shape-image-002-ref.xht
shape-image-018.xht == reference/shape-image-018-ref.xht
shape-image-019.xht == reference/shape-image-019-ref.xht
shape-image-020.xht == reference/shape-image-020-ref.xht
shape-image-021.xht == reference/shape-image-021-ref.xht
shape-image-022.xht == reference/shape-image-022-ref.xht
shape-image-023.xht == reference/shape-image-023-ref.xht
shape-image-024.xht == reference/shape-image-024-ref.xht
shape-image-025.xht == reference/shape-image-025-ref.xht
shape-outside-001.xht == reference/shape-outside-001-ref.xht
shape-outside-002.xht == reference/shape-outside-001-ref.xht
shape-outside-003.xht == reference/shape-outside-001-ref.xht
shape-outside-004.xht == reference/shape-outside-004-ref.xht
shape-outside-005.xht == reference/shape-outside-004-ref.xht
shape-outside-006.xht == reference/shape-outside-006-ref.xht
shape-outside-007.xht == reference/shape-outside-007-ref.xht
shape-outside-008.xht == reference/shape-outside-008-ref.xht
shape-outside-012.xht == reference/shape-outside-012-ref.xht
shape-outside-box-002.xht == reference/shape-outside-box-001-ref.xht
shape-outside-box-003.xht == reference/shape-outside-box-001-ref.xht
shape-outside-box-004.xht == reference/shape-outside-box-001-ref.xht
shape-outside-box-006.xht == reference/shape-outside-box-005-ref.xht
shape-outside-box-007.xht == reference/shape-outside-box-005-ref.xht
shape-outside-box-008.xht == reference/shape-outside-box-005-ref.xht
shape-outside-circle-013.xht == reference/shape-outside-circle-013-ref.xht
shape-outside-circle-014.xht == reference/shape-outside-circle-013-ref.xht
shape-outside-circle-015.xht == reference/shape-outside-circle-013-ref.xht
shape-outside-circle-016.xht == reference/shape-outside-circle-013-ref.xht
shape-outside-circle-017.xht == reference/shape-outside-circle-013-ref.xht
shape-outside-circle-018.xht == reference/shape-outside-circle-013-ref.xht
shape-outside-circle-019.xht == reference/shape-outside-circle-013-ref.xht
shape-outside-circle-020.xht == reference/shape-outside-circle-013-ref.xht
shape-outside-circle-021.xht == reference/shape-outside-circle-013-ref.xht
shape-outside-circle-022.xht == reference/shape-outside-circle-013-ref.xht
shape-outside-circle-024.xht == reference/shape-outside-circle-023-ref.xht
shape-outside-circle-025.xht == reference/shape-outside-circle-023-ref.xht
shape-outside-circle-026.xht == reference/shape-outside-circle-023-ref.xht
shape-outside-circle-027.xht == reference/shape-outside-circle-023-ref.xht
shape-outside-circle-028.xht == reference/shape-outside-circle-023-ref.xht
shape-outside-circle-029.xht == reference/shape-outside-circle-023-ref.xht
shape-outside-circle-030.xht == reference/shape-outside-circle-030-ref.xht
shape-outside-circle-031.xht == reference/shape-outside-circle-030-ref.xht
shape-outside-ellipse-013.xht == reference/shape-outside-ellipse-013-ref.xht
shape-outside-ellipse-014.xht == reference/shape-outside-ellipse-013-ref.xht
shape-outside-ellipse-015.xht == reference/shape-outside-ellipse-013-ref.xht
shape-outside-ellipse-016.xht == reference/shape-outside-ellipse-013-ref.xht
shape-outside-ellipse-017.xht == reference/shape-outside-ellipse-013-ref.xht
shape-outside-ellipse-018.xht == reference/shape-outside-ellipse-013-ref.xht
shape-outside-ellipse-019.xht == reference/shape-outside-ellipse-013-ref.xht
shape-outside-ellipse-020.xht == reference/shape-outside-ellipse-013-ref.xht
shape-outside-ellipse-021.xht == reference/shape-outside-ellipse-021-ref.xht
shape-outside-ellipse-022.xht == reference/shape-outside-ellipse-021-ref.xht
shape-outside-ellipse-023.xht == reference/shape-outside-ellipse-021-ref.xht
shape-outside-ellipse-024.xht == reference/shape-outside-ellipse-021-ref.xht
shape-outside-ellipse-025.xht == reference/shape-outside-ellipse-021-ref.xht
shape-outside-ellipse-030.xht == reference/shape-outside-ellipse-030-ref.xht
shape-outside-ellipse-031.xht == reference/shape-outside-ellipse-030-ref.xht
shape-outside-inset-010.xht == reference/shape-outside-inset-010-ref.xht
shape-outside-inset-011.xht == reference/shape-outside-inset-010-ref.xht
shape-outside-inset-012.xht == reference/shape-outside-inset-010-ref.xht
shape-outside-inset-013.xht == reference/shape-outside-inset-010-ref.xht
shape-outside-inset-014.xht == reference/shape-outside-inset-010-ref.xht
shape-outside-inset-015.xht == reference/shape-outside-inset-010-ref.xht
shape-outside-linear-gradient-001.xht == reference/shape-outside-linear-gradient-001-ref.xht
shape-outside-linear-gradient-002.xht == reference/shape-outside-linear-gradient-002-ref.xht
shape-outside-linear-gradient-003.xht == reference/shape-outside-linear-gradient-002-ref.xht
shape-outside-linear-gradient-004.xht == reference/shape-outside-linear-gradient-004-ref.xht
shape-outside-polygon-007.xht == reference/shape-outside-polygon-007-ref.xht
shape-outside-polygon-008.xht == reference/shape-outside-polygon-007-ref.xht
shape-outside-polygon-009.xht == reference/shape-outside-polygon-007-ref.xht
shape-outside-polygon-010.xht == reference/shape-outside-polygon-010-ref.xht
shape-outside-polygon-011.xht == reference/shape-outside-polygon-010-ref.xht
shape-outside-polygon-012.xht == reference/shape-outside-polygon-010-ref.xht
shape-outside-polygon-013.xht == reference/shape-outside-polygon-010-ref.xht
shape-outside-polygon-014.xht == reference/shape-outside-polygon-010-ref.xht
shape-outside-polygon-015.xht == reference/shape-outside-polygon-010-ref.xht
shape-outside-polygon-016.xht == reference/shape-outside-polygon-010-ref.xht
shape-outside-polygon-017.xht == reference/shape-outside-polygon-017-ref.xht
shape-outside-radial-gradient-001.xht == reference/shape-outside-radial-gradient-001-ref.xht

Some files were not shown because too many files have changed in this diff Show more