servo/tests/wpt/css-tests/css-shapes-1_dev/html/chapter-4.htm
Ms2ger 296fa2512b Update web-platform-tests and CSS tests.
- Update CSS tests to revision e05bfd5e30ed662c2f8a353577003f8eed230180.
- Update web-platform-tests to revision a052787dd5c069a340031011196b73affbd68cd9.
2017-02-06 22:38:29 +01:00

468 lines
No EOL
24 KiB
HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<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 id="refs-column">
<col id="flags-column">
<col id="info-column">
<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="https://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="ahem image">
<td>
<a href="shape-image-000.htm">shape-image-000</a></td>
<td><a href="reference/shape-image-000-ref.htm">=</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="ahem image">
<td>
<a href="shape-image-001.htm">shape-image-001</a></td>
<td><a href="reference/shape-image-001-ref.htm">=</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="ahem image">
<td>
<a href="shape-image-002.htm">shape-image-002</a></td>
<td><a href="reference/shape-image-002-ref.htm">=</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="ahem image">
<td>
<a href="shape-image-003.htm">shape-image-003</a></td>
<td><a href="reference/shape-image-002-ref.htm">=</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="ahem image">
<td>
<a href="shape-image-004.htm">shape-image-004</a></td>
<td><a href="reference/shape-image-000-ref.htm">=</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="ahem image">
<td>
<a href="shape-image-005.htm">shape-image-005</a></td>
<td><a href="reference/shape-image-002-ref.htm">=</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="ahem">
<td>
<a href="shape-image-006.htm">shape-image-006</a></td>
<td><a href="reference/shape-image-006-ref.htm">=</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="ahem">
<td>
<a href="shape-image-007.htm">shape-image-007</a></td>
<td><a href="reference/shape-image-007-ref.htm">=</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="ahem">
<td>
<a href="shape-image-008.htm">shape-image-008</a></td>
<td><a href="reference/shape-image-008-ref.htm">=</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="ahem">
<td>
<a href="shape-image-009.htm">shape-image-009</a></td>
<td><a href="reference/shape-image-006-ref.htm">=</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="ahem">
<td>
<a href="shape-image-010.htm">shape-image-010</a></td>
<td><a href="reference/shape-image-006-ref.htm">=</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="ahem">
<td>
<a href="shape-image-011.htm">shape-image-011</a></td>
<td><a href="reference/shape-image-007-ref.htm">=</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="ahem">
<td>
<a href="shape-image-012.htm">shape-image-012</a></td>
<td><a href="reference/shape-image-012-ref.htm">=</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="ahem">
<td>
<a href="shape-image-013.htm">shape-image-013</a></td>
<td><a href="reference/shape-image-013-ref.htm">=</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="ahem">
<td>
<a href="shape-image-014.htm">shape-image-014</a></td>
<td><a href="reference/shape-image-002-ref.htm">=</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="ahem image">
<td>
<a href="shape-image-015.htm">shape-image-015</a></td>
<td><a href="reference/shape-image-013-ref.htm">=</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="ahem image">
<td>
<a href="shape-image-016.htm">shape-image-016</a></td>
<td><a href="reference/shape-image-013-ref.htm">=</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="ahem image">
<td>
<a href="shape-image-017.htm">shape-image-017</a></td>
<td><a href="reference/shape-image-002-ref.htm">=</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="ahem">
<td>
<a href="shape-image-018.htm">shape-image-018</a></td>
<td><a href="reference/shape-image-018-ref.htm">=</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="ahem">
<td>
<a href="shape-image-019.htm">shape-image-019</a></td>
<td><a href="reference/shape-image-019-ref.htm">=</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="ahem">
<td>
<a href="shape-image-020.htm">shape-image-020</a></td>
<td><a href="reference/shape-image-020-ref.htm">=</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="ahem">
<td>
<a href="shape-image-021.htm">shape-image-021</a></td>
<td><a href="reference/shape-image-021-ref.htm">=</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="ahem">
<td>
<a href="shape-image-022.htm">shape-image-022</a></td>
<td><a href="reference/shape-image-022-ref.htm">=</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="ahem">
<td>
<a href="shape-image-023.htm">shape-image-023</a></td>
<td><a href="reference/shape-image-023-ref.htm">=</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="ahem">
<td>
<a href="shape-image-024.htm">shape-image-024</a></td>
<td><a href="reference/shape-image-024-ref.htm">=</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="ahem">
<td>
<a href="shape-image-025.htm">shape-image-025</a></td>
<td><a href="reference/shape-image-025-ref.htm">=</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="ahem dom script">
<td>
<a href="shape-outside-010.htm">shape-outside-010</a></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Shape from image - url(), alpha channel, opacity 0
<ul class="assert">
<li>This test verifies that the content flows around the shape defined in the images alpha channel that is completely transparent.</li>
</ul>
</td>
</tr>
<tr id="shape-outside-011-4" class="ahem dom script">
<td>
<a href="shape-outside-011.htm">shape-outside-011</a></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Shape from image - url(), alpha channel, opacity &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="ahem dom script">
<td>
<a href="shape-outside-012.htm">shape-outside-012</a></td>
<td><a href="reference/shape-outside-012-ref.htm">=</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="ahem dom script">
<td>
<a href="shape-outside-013.htm">shape-outside-013</a></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Shape from image - shape-margin
<ul class="assert">
<li>This test verifies that the content flows around the shape defined in the images alpha channel and adjusted by the shape-margin.</li>
</ul>
</td>
</tr>
<tr id="shape-outside-019-4" class="ahem dom script">
<td>
<a href="shape-outside-019.htm">shape-outside-019</a></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Shape from image - alpha channel, opacity &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="ahem">
<td>
<a href="shape-outside-linear-gradient-001.htm">shape-outside-linear-gradient-001</a></td>
<td><a href="reference/shape-outside-linear-gradient-001-ref.htm">=</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="ahem">
<td>
<a href="shape-outside-linear-gradient-002.htm">shape-outside-linear-gradient-002</a></td>
<td><a href="reference/shape-outside-linear-gradient-002-ref.htm">=</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="ahem">
<td>
<a href="shape-outside-linear-gradient-003.htm">shape-outside-linear-gradient-003</a></td>
<td><a href="reference/shape-outside-linear-gradient-002-ref.htm">=</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="">
<td>
<a href="shape-outside-linear-gradient-004.htm">shape-outside-linear-gradient-004</a></td>
<td><a href="reference/shape-outside-linear-gradient-004-ref.htm">=</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="ahem dom script">
<td>
<a href="shape-outside-radial-gradient-001.htm">shape-outside-radial-gradient-001</a></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Left float with radial gradient
<ul class="assert">
<li>This test verifies that shape-outside respects a simple radial gradient.</li>
</ul>
</td>
</tr>
<tr id="shape-outside-radial-gradient-002-4" class="ahem dom script">
<td>
<a href="shape-outside-radial-gradient-002.htm">shape-outside-radial-gradient-002</a></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Left float with radial gradient and percentage shape margin
<ul class="assert">
<li>This test verifies that shape-outside respects a simple radial gradient when a percentage margin is applied.</li>
</ul>
</td>
</tr>
<tr id="shape-outside-radial-gradient-003-4" class="ahem dom script">
<td>
<a href="shape-outside-radial-gradient-003.htm">shape-outside-radial-gradient-003</a></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Left float with radial gradient shape, shape margin, and shape-image-threshold
<ul class="assert">
<li>This test verifies that shape-outside respects a simple radial gradient when a shape margin and shape-image threshold are applied.</li>
</ul>
</td>
</tr>
<tr id="shape-outside-radial-gradient-004-4" class="ahem dom script">
<td>
<a href="shape-outside-radial-gradient-004.htm">shape-outside-radial-gradient-004</a></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Left float with radial gradient shape, shape margin, and shape-image-threshold
<ul class="assert">
<li>This test verifies that shape-outside respects a simple radial gradient on a right float when shape-image-threshold is applied.</li>
</ul>
</td>
</tr>
</tbody>
</table>
</body>
</html>