mirror of
https://github.com/servo/servo.git
synced 2025-06-23 16:44:33 +01:00
138 lines
No EOL
6.1 KiB
HTML
138 lines
No EOL
6.1 KiB
HTML
|
|
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<title>SVG Clipping Path Sources - CSS Masking 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 Masking Level 1 CR Test Suite</h1>
|
|
<h2>SVG Clipping Path Sources (6 tests)</h2>
|
|
<table width="100%">
|
|
<col id="test-column"></col>
|
|
<col id="refs-column"></col>
|
|
<col id="flags-column"></col>
|
|
<col id="info-column"></col>
|
|
<thead>
|
|
<tr>
|
|
<th>Test</th>
|
|
<th><abbr title="Rendering References">Refs</abbr></th>
|
|
<th>Flags</th>
|
|
<th>Info</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="s6">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s6">+</a>
|
|
<a href="https://www.w3.org/TR/css-masking-1/#svg-clipping-paths">6 SVG Clipping Path Sources</a></th></tr>
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.1">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s6.1">+</a>
|
|
<a href="https://www.w3.org/TR/css-masking-1/#ClipPathElement">6.1 The clipPath element</a></th></tr>
|
|
<!-- 6 tests -->
|
|
<tr id="clip-path-element-userspaceonuse-001-6.1" class="">
|
|
<td>
|
|
<a href="clip-path-element-userSpaceOnUse-001.xht">clip-path-element-userspaceonuse-001</a></td>
|
|
<td><a href="reference/clip-path-rectangle-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>CSS Masking: Test clip-path property and external clipPath reference with userSpaceOnUse - 1
|
|
<ul class="assert">
|
|
<li>The clip-path property takes an external reference to a clipPath element for clipping. On pass you should see a green box.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="clip-path-element-userspaceonuse-002-6.1" class="">
|
|
<td>
|
|
<a href="clip-path-element-userSpaceOnUse-002.xht">clip-path-element-userspaceonuse-002</a></td>
|
|
<td><a href="reference/clip-path-rectangle-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>CSS Masking: Test clip-path property and external clipPath reference with userSpaceOnUse - 2
|
|
<ul class="assert">
|
|
<li>The clip-path property takes an reference to a clipPath element for clipping. On pass you should see a green with a blue border.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="clip-path-element-userspaceonuse-003-6.1" class="">
|
|
<td>
|
|
<a href="clip-path-element-userSpaceOnUse-003.xht">clip-path-element-userspaceonuse-003</a></td>
|
|
<td><a href="reference/clip-path-ref-right-green-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>CSS Masking: Test clip-path property and external clipPath reference with userSpaceOnUse with percentage - 1
|
|
<ul class="assert">
|
|
<li>The clip-path property takes a reference to a clipPath element for clipping. Percentage values are relative to the viewport for userSpaceOnUse on clipPathUnits. On pass the left half of the site is white and the right half of the site is blue.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="clip-path-element-userspaceonuse-004-6.1" class="">
|
|
<td>
|
|
<a href="clip-path-element-userSpaceOnUse-004.xht">clip-path-element-userspaceonuse-004</a></td>
|
|
<td><a href="reference/clip-path-ref-bottom-green-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>CSS Masking: Test clip-path property and external clipPath reference with userSpaceOnUse with percentage - 2
|
|
<ul class="assert">
|
|
<li>The clip-path property takes a reference to a clipPath element for clipping. Percentage values are relative to the viewport for userSpaceOnUse on clipPathUnits. On pass the top half of the site is white and the bottom half of the site is green.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="clip-rule-001-6.1" class="">
|
|
<td>
|
|
<a href="clip-rule-001.xht">clip-rule-001</a></td>
|
|
<td><a href="reference/clip-rule-rectangle-border-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>CSS Masking: Test clip-rule property on polygon clip rule evenodd
|
|
<ul class="assert">
|
|
<li>The clipPath element takes the basic shape 'polygon' for clipping. The point list for the polygon creates a 'whole' with the dimension of the background. With the clip rule 'evenodd', this whole is clipped out. The clipping makes the green background of the parent div box visible. On pass you should see a green box with a blue border.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="clip-rule-002-6.1" class="">
|
|
<td>
|
|
<a href="clip-rule-002.xht">clip-rule-002</a></td>
|
|
<td><a href="reference/clip-rule-rectangle-border-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>CSS Masking: Test clip-rule property on polygon clip rule nonzero
|
|
<ul class="assert">
|
|
<li>The clipPath element takes the basic shape 'polygon' for clipping. The point list for the polygon creates a 'whole' with the dimension of the background. With the clip rule 'nonzero', this whole is clipped out. The clipping makes the green background of the parent div box visible. On pass you should see a green box with a blue border.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s6.1.#element-attrdef-clippathunits">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.1.#elementdef-clippath">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.1.#valuedef-objectboundingbox0">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.1.#valuedef-userspaceonuse0">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.2">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s6.2">+</a>
|
|
<a href="https://www.w3.org/TR/css-masking-1/#the-clip-rule">6.2 Winding Rules: the clip-rule property</a></th></tr>
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.2.#propdef-clip-rule">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.2.#valuedef-evenodd">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.2.#valuedef-nonzero">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
</table>
|
|
|
|
</body>
|
|
</html> |