<!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 > 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 > 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>