mirror of
https://github.com/servo/servo.git
synced 2025-08-03 20:50:07 +01:00
Update CSS tests to revision 31d63cc79bd4c929ed582229e936d7b389f3e6ab
This commit is contained in:
James Graham
parent
1a81b18b9f
commit
2c9faf5363
91915 changed files with 5979820 additions and 0 deletions
54
tests/wpt/css-tests/css-masking-1_dev/xhtml1/chapter-1.xht
Normal file
54
tests/wpt/css-tests/css-masking-1_dev/xhtml1/chapter-1.xht
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
|
||||
|
||||
<!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 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>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-masking-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-masking-1/#clipping">1.1 Clipping</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s1.1.#clipping-path">
|
||||
<!-- 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-masking-1/#masking0">1.2 Masking</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
129
tests/wpt/css-tests/css-masking-1_dev/xhtml1/chapter-10.xht
Normal file
129
tests/wpt/css-tests/css-masking-1_dev/xhtml1/chapter-10.xht
Normal file
|
|
@ -0,0 +1,129 @@
|
|||
|
||||
|
||||
<!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>Security - 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>Security (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="s10">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s10">+</a>
|
||||
<a href="http://www.w3.org/TR/css-masking-1/#security">10 Security</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#abstract">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#acknowledgments">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-compositing-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-css-shapes">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-css21">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-css3-transforms">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-css3bg">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-css3color">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-css3val">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-filter-effects">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-html5">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-rfc2119">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-svg11">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#changes">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#conformance">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#conformance-classes">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#contents">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#conventions">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#cr-exit-criteria">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#experimental">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#index">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#informative">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#normative">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#partial">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#property-index">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#references">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#status">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#subtitle">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#testing">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#title">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
39
tests/wpt/css-tests/css-masking-1_dev/xhtml1/chapter-2.xht
Normal file
39
tests/wpt/css-tests/css-masking-1_dev/xhtml1/chapter-2.xht
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
|
||||
|
||||
<!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>Module interactions - 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>Module interactions (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="s2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s2">+</a>
|
||||
<a href="http://www.w3.org/TR/css-masking-1/#placement">2 Module interactions</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
39
tests/wpt/css-tests/css-masking-1_dev/xhtml1/chapter-3.xht
Normal file
39
tests/wpt/css-tests/css-masking-1_dev/xhtml1/chapter-3.xht
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
|
||||
|
||||
<!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>Values - 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>Values (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="s3">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s3">+</a>
|
||||
<a href="http://www.w3.org/TR/css-masking-1/#values">3 Values</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
48
tests/wpt/css-tests/css-masking-1_dev/xhtml1/chapter-4.xht
Normal file
48
tests/wpt/css-tests/css-masking-1_dev/xhtml1/chapter-4.xht
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
|
||||
|
||||
<!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>Terminology - 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>Terminology (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="s4">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s4">+</a>
|
||||
<a href="http://www.w3.org/TR/css-masking-1/#terminology">4 Terminology</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.#mask-position">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.#mask-size">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.#term-matching">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
1034
tests/wpt/css-tests/css-masking-1_dev/xhtml1/chapter-5.xht
Normal file
1034
tests/wpt/css-tests/css-masking-1_dev/xhtml1/chapter-5.xht
Normal file
File diff suppressed because it is too large
Load diff
138
tests/wpt/css-tests/css-masking-1_dev/xhtml1/chapter-6.xht
Normal file
138
tests/wpt/css-tests/css-masking-1_dev/xhtml1/chapter-6.xht
Normal file
|
|
@ -0,0 +1,138 @@
|
|||
|
||||
|
||||
<!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="http://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="http://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="http://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>
|
||||
251
tests/wpt/css-tests/css-masking-1_dev/xhtml1/chapter-7.xht
Normal file
251
tests/wpt/css-tests/css-masking-1_dev/xhtml1/chapter-7.xht
Normal file
|
|
@ -0,0 +1,251 @@
|
|||
|
||||
|
||||
<!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>Positioned Masks - 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>Positioned Masks (1 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="s7">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s7">+</a>
|
||||
<a href="http://www.w3.org/TR/css-masking-1/#masking">7 Positioned Masks</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s7.1">+</a>
|
||||
<a href="http://www.w3.org/TR/css-masking-1/#the-mask-image">7.1 Mask Image Source: the mask-image property</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.1.#mask-layer-image">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.1.#propdef-mask-image">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.1.#typedef-mask-reference">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.1.#typedef-mask-source">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.1.#valuedef-url">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s7.2">+</a>
|
||||
<a href="http://www.w3.org/TR/css-masking-1/#the-mask-mode">7.2 Mask Image Interpretation: the mask-mode property</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.2.#propdef-mask-mode">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.2.#typedef-masking-mode">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.2.#valuedef-alpha0">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.2.#valuedef-auto">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.2.#valuedef-luminance0">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.3">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s7.3">+</a>
|
||||
<a href="http://www.w3.org/TR/css-masking-1/#the-mask-repeat">7.3 Tiling Mask Images: The mask-repeat property</a></th></tr>
|
||||
<!-- 1 tests -->
|
||||
<tr id="test-mask-7.3" class="primary">
|
||||
<td><strong>
|
||||
<a href="test-mask.xht">test-mask</a></strong></td>
|
||||
<td><a href="reference/test-mask-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-repeat:round repeat;
|
||||
<ul class="assert">
|
||||
<li>Test checks that the mask-repeart value</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s7.3.#propdef-mask-repeat">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.4">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s7.4">+</a>
|
||||
<a href="http://www.w3.org/TR/css-masking-1/#the-mask-position">7.4 Positioning Mask Images: the mask-position property</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.4.#propdef-mask-position">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.5">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s7.5">+</a>
|
||||
<a href="http://www.w3.org/TR/css-masking-1/#the-mask-clip">7.5 Masking Area: the mask-clip property</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.5.#mask-painting-area">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.5.#propdef-mask-clip">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.5.#valuedef-border-box0">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.5.#valuedef-content-box0">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.5.#valuedef-fill-box1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.5.#valuedef-margin-box0">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.5.#valuedef-no-clip">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.5.#valuedef-padding-box0">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.5.#valuedef-stroke-box1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.5.#valuedef-view-box1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.6">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s7.6">+</a>
|
||||
<a href="http://www.w3.org/TR/css-masking-1/#the-mask-origin">7.6 Positioning Area: the mask-origin property</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.6.#mask-positioning-area">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.6.#propdef-mask-origin">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.6.#valuedef-border-box">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.6.#valuedef-content-box">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.6.#valuedef-fill-box">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.6.#valuedef-margin-box">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.6.#valuedef-padding-box">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.6.#valuedef-stroke-box">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.6.#valuedef-view-box">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.7">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s7.7">+</a>
|
||||
<a href="http://www.w3.org/TR/css-masking-1/#the-mask-size">7.7 Sizing Mask Images: the mask-size property</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.7.#propdef-mask-size">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.8">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s7.8">+</a>
|
||||
<a href="http://www.w3.org/TR/css-masking-1/#the-mask-composite">7.8 Compositing mask layers: the mask-composite property</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.8.#destination">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.8.#propdef-mask-composite">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.8.#source">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.8.#typedef-compositing-operator">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.8.#valuedef-add">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.8.#valuedef-exclude">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.8.#valuedef-intersect">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.8.#valuedef-subtract">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.9">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s7.9">+</a>
|
||||
<a href="http://www.w3.org/TR/css-masking-1/#the-mask">7.9 Mask Shorthand: the mask property</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.9.#propdef-mask">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.9.#typedef-mask-layer">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.10">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s7.10">+</a>
|
||||
<a href="http://www.w3.org/TR/css-masking-1/#the-mask-image-rendering-model">7.10 The Mask Image Rendering Model</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.10.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s7.10.1">+</a>
|
||||
<a href="http://www.w3.org/TR/css-masking-1/#MaskValues">7.10.1 Mask processing</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.10.1.#mask-image">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.10.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s7.10.2">+</a>
|
||||
<a href="http://www.w3.org/TR/css-masking-1/#layering">7.10.2 Layering Multiple Mask Images</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
123
tests/wpt/css-tests/css-masking-1_dev/xhtml1/chapter-8.xht
Normal file
123
tests/wpt/css-tests/css-masking-1_dev/xhtml1/chapter-8.xht
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
|
||||
|
||||
<!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>Border-Box Mask - 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>Border-Box Mask (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="s8">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s8">+</a>
|
||||
<a href="http://www.w3.org/TR/css-masking-1/#mask-borders">8 Border-Box Mask</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s8.1">+</a>
|
||||
<a href="http://www.w3.org/TR/css-masking-1/#the-mask-border-source">8.1 Mask Border Image Source: the mask-border-source property</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.1.#mask-border-image">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.1.#propdef-mask-border-source">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s8.2">+</a>
|
||||
<a href="http://www.w3.org/TR/css-masking-1/#the-mask-border-mode">8.2 Mask Border Image Interpretation: the mask-border-mode property</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.2.#propdef-mask-border-mode">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.2.#valuedef-alpha1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.2.#valuedef-luminance1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.3">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s8.3">+</a>
|
||||
<a href="http://www.w3.org/TR/css-masking-1/#the-mask-border-slice">8.3 Mask Border Image Slicing: the mask-border-slice property</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.3.#propdef-mask-border-slice">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.3.#valuedef-fill">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.4">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s8.4">+</a>
|
||||
<a href="http://www.w3.org/TR/css-masking-1/#the-mask-border-width">8.4 Masking Areas: the mask-border-width property</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.4.#mask-border-image-area">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.4.#propdef-mask-border-width">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.5">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s8.5">+</a>
|
||||
<a href="http://www.w3.org/TR/css-masking-1/#the-mask-border-outset">8.5 Edge Overhang: the mask-border-outset property</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.5.#propdef-mask-border-outset">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.6">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s8.6">+</a>
|
||||
<a href="http://www.w3.org/TR/css-masking-1/#the-mask-border-repeat">8.6 Mask Border Image Tiling: the mask-border-repeat property</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.6.#propdef-mask-border-repeat">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.7">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s8.7">+</a>
|
||||
<a href="http://www.w3.org/TR/css-masking-1/#the-mask-border">8.7 Mask Border Image Shorthand: the mask-border property</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.7.#propdef-mask-border">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.8">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s8.8">+</a>
|
||||
<a href="http://www.w3.org/TR/css-masking-1/#masking-with-the-mask-border-image">8.8 Masking with the mask border image</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
93
tests/wpt/css-tests/css-masking-1_dev/xhtml1/chapter-9.xht
Normal file
93
tests/wpt/css-tests/css-masking-1_dev/xhtml1/chapter-9.xht
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
|
||||
|
||||
<!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 Mask 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 Mask Sources (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="s9">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s9">+</a>
|
||||
<a href="http://www.w3.org/TR/css-masking-1/#svg-masks">9 SVG Mask Sources</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s9.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s9.1">+</a>
|
||||
<a href="http://www.w3.org/TR/css-masking-1/#MaskElement">9.1 The mask element</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s9.1.#element-attrdef-height">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s9.1.#element-attrdef-maskcontentunits">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s9.1.#element-attrdef-maskunits">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s9.1.#element-attrdef-width">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s9.1.#element-attrdef-x">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s9.1.#element-attrdef-y">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s9.1.#elementdef-mask">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s9.1.#valuedef-objectboundingbox">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s9.1.#valuedef-objectboundingbox1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s9.1.#valuedef-userspaceonuse">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s9.1.#valuedef-userspaceonuse1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s9.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s9.2">+</a>
|
||||
<a href="http://www.w3.org/TR/css-masking-1/#the-mask-type">9.2 Mask Source Interpretation: the mask-type property</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s9.2.#propdef-mask-type">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s9.2.#valuedef-alpha">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s9.2.#valuedef-luminance">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
299
tests/wpt/css-tests/css-masking-1_dev/xhtml1/chapter-A.xht
Normal file
299
tests/wpt/css-tests/css-masking-1_dev/xhtml1/chapter-A.xht
Normal file
|
|
@ -0,0 +1,299 @@
|
|||
|
||||
|
||||
<!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>The deprecated clip property - 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>The deprecated clip property (22 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="sA">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#sA">+</a>
|
||||
<a href="http://www.w3.org/TR/css-masking-1/#clip-property">A The deprecated clip property</a></th></tr>
|
||||
<!-- 22 tests -->
|
||||
<tr id="clip-absolute-positioned-001-A" class="">
|
||||
<td>
|
||||
<a href="clip-absolute-positioned-001.xht">clip-absolute-positioned-001</a></td>
|
||||
<td><a href="reference/clip-absolute-positioned-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: Test clip property and rect function on div with position: absolute
|
||||
<ul class="assert">
|
||||
<li>The clip property should clip elements whose layout are governed by the CSS box model and that are abolutely positioned with 'position: absolute;'. On pass you should see a green square and no red.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-absolute-positioned-002-A" class="">
|
||||
<td>
|
||||
<a href="clip-absolute-positioned-002.xht">clip-absolute-positioned-002</a></td>
|
||||
<td><a href="reference/clip-absolute-positioned-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: Test clip property and rect function on div with position: fixed
|
||||
<ul class="assert">
|
||||
<li>The clip property should clip elements whose layout are governed by the CSS box model and that are abolutely positioned with 'position: fixed;'. On pass you should see a green square and no red.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-negative-values-001-A" class="">
|
||||
<td>
|
||||
<a href="clip-negative-values-001.xht">clip-negative-values-001</a></td>
|
||||
<td><a href="reference/clip-full-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: Test clip property does not clip on with negative values - 1
|
||||
<ul class="assert">
|
||||
<li>Negative values are permitted on rect function for clip. Test that whole element is clipped if bottom edge is before top edge. On pass you should see a green square and no red.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-negative-values-002-A" class="">
|
||||
<td>
|
||||
<a href="clip-negative-values-002.xht">clip-negative-values-002</a></td>
|
||||
<td><a href="reference/clip-full-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: Test clip property does not clip on with negative values - 2
|
||||
<ul class="assert">
|
||||
<li>Negative values are permitted on rect function for clip. Test that whole element is clipped if right edge is before left edge. On pass you should see a green square and no red.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-negative-values-003-A" class="">
|
||||
<td>
|
||||
<a href="clip-negative-values-003.xht">clip-negative-values-003</a></td>
|
||||
<td><a href="reference/clip-vertical-stripe-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: Test clip property does not clip on with negative values - 3
|
||||
<ul class="assert">
|
||||
<li>Negative values are permited on rect function for clip. Test that left edge can be negative. On pass you should see a vertical blue stripe.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-negative-values-004-A" class="">
|
||||
<td>
|
||||
<a href="clip-negative-values-004.xht">clip-negative-values-004</a></td>
|
||||
<td><a href="reference/clip-horizontal-stripe-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: Test clip property does not clip on with negative values - 4
|
||||
<ul class="assert">
|
||||
<li>Negative values are permited on rect function for clip. Test that top edge can be negative. On pass you should see a horizontal blue stripe.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-no-clipping-001-A" class="">
|
||||
<td>
|
||||
<a href="clip-no-clipping-001.xht">clip-no-clipping-001</a></td>
|
||||
<td><a href="reference/clip-no-clipping-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: Test clip property does not clip on 'auto'
|
||||
<ul class="assert">
|
||||
<li>The clip property should on 'auto'. On pass you should see a green box with a blue border.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-no-clipping-002-A" class="">
|
||||
<td>
|
||||
<a href="clip-no-clipping-002.xht">clip-no-clipping-002</a></td>
|
||||
<td><a href="reference/clip-no-clipping-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: Test clip property does not clip overflowing content on 'auto'.
|
||||
<ul class="assert">
|
||||
<li>The clip property should not clip overflowing content of elements whose layout are governed by the CSS box model, the position is absolute and the clip value is 'auto'. On pass you should see a a green square with a blue border.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-not-absolute-positioned-001-A" class="">
|
||||
<td>
|
||||
<a href="clip-not-absolute-positioned-001.xht">clip-not-absolute-positioned-001</a></td>
|
||||
<td><a href="reference/clip-no-clipping-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: Test clip property and rect function on not absolutely positioned div - 1
|
||||
<ul class="assert">
|
||||
<li>The clip property should be ignored on elements whose layout are governed by the CSS box model and are not abolutely positioned. On pass you should see a green square with a blue border.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-not-absolute-positioned-002-A" class="">
|
||||
<td>
|
||||
<a href="clip-not-absolute-positioned-002.xht">clip-not-absolute-positioned-002</a></td>
|
||||
<td><a href="reference/clip-no-clipping-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: Test clip property and rect function on not absolutely positioned div - 2
|
||||
<ul class="assert">
|
||||
<li>The clip property should be ignored on elements whose layout are governed by the CSS box model and are not abolutely positioned. Creating a stacking context with z-index does not influence clipping behavior. On pass you should see a green box square with a blue border.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-not-absolute-positioned-003-A" class="">
|
||||
<td>
|
||||
<a href="clip-not-absolute-positioned-003.xht">clip-not-absolute-positioned-003</a></td>
|
||||
<td><a href="reference/clip-no-clipping-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: Test clip property and rect function on not absolutely positioned div - 3
|
||||
<ul class="assert">
|
||||
<li>The clip property should be ignored on elements whose layout are governed by the CSS box model and are not abolutely positioned. Creating a 3d rednering context does not influence clipping behavior. On pass you should see a green square with a blue border.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-not-absolute-positioned-004-A" class="">
|
||||
<td>
|
||||
<a href="clip-not-absolute-positioned-004.xht">clip-not-absolute-positioned-004</a></td>
|
||||
<td><a href="reference/clip-no-clipping-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: Test clip property and rect function on not absolutely positioned div - 4
|
||||
<ul class="assert">
|
||||
<li>The clip property should be ignored on elements whose layout are governed by the CSS box model and are not abolutely positioned. position: relative does not influence clipping behavior. On pass you should see a green square with a blue border.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-rect-auto-001-A" class="">
|
||||
<td>
|
||||
<a href="clip-rect-auto-001.xht">clip-rect-auto-001</a></td>
|
||||
<td><a href="reference/clip-overflow-hidden-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: Test clip property with rect function and auto values clip to border box - 1
|
||||
<ul class="assert">
|
||||
<li>A value of 'auto' in the rect function is equal to the certain edge of the border box. The content should be clipped to the border box. On pass you see a blue square and a smaller green square in the bottom right corner of the blue square.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-rect-auto-002-A" class="">
|
||||
<td>
|
||||
<a href="clip-rect-auto-002.xht">clip-rect-auto-002</a></td>
|
||||
<td><a href="reference/clip-no-clipping-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: Test clip property with rect function and auto values clip to border box - 2
|
||||
<ul class="assert">
|
||||
<li>A value of 'auto' in the rect function is equal to the certain edge of the border box. The box shadow should be clipped, since it is painted outside the border box. On pass you should see a green square with a blue border.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-rect-auto-003-A" class="">
|
||||
<td>
|
||||
<a href="clip-rect-auto-003.xht">clip-rect-auto-003</a></td>
|
||||
<td><a href="reference/clip-rect-top-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: Test clip property with rect function and auto value for top value
|
||||
<ul class="assert">
|
||||
<li>A value of 'auto' for 'top' in the rect function is equal to the top edge of the border box. The box shadow should be clipped, since it is painted outside the border box. On pass you should see a horizontal green stripe under a horizontal blue stripe.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-rect-auto-004-A" class="">
|
||||
<td>
|
||||
<a href="clip-rect-auto-004.xht">clip-rect-auto-004</a></td>
|
||||
<td><a href="reference/clip-rect-right-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: Test clip property with rect function and auto value for right value
|
||||
<ul class="assert">
|
||||
<li>A value of 'auto' for 'right' in the rect function is equal to the top edge of the border box. The box shadow should be clipped, since it is painted outside the border box. On pass you should see a vertical blue stripe on the right side of a vertical green stripe.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-rect-auto-005-A" class="">
|
||||
<td>
|
||||
<a href="clip-rect-auto-005.xht">clip-rect-auto-005</a></td>
|
||||
<td><a href="reference/clip-rect-bottom-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: Test clip property with rect function and auto value for bottom value
|
||||
<ul class="assert">
|
||||
<li>A value of 'auto' for 'bottom' in the rect function is equal to the top edge of the border box. The box shadow should be clipped, since it is painted outside the border box. On pass you should see a horizontal blue stripe under a horizontal green stripe.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-rect-auto-006-A" class="">
|
||||
<td>
|
||||
<a href="clip-rect-auto-006.xht">clip-rect-auto-006</a></td>
|
||||
<td><a href="reference/clip-rect-left-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: Test clip property with rect function and auto value for left value
|
||||
<ul class="assert">
|
||||
<li>A value of 'auto' for 'left' in the rect function is equal to the top edge of the border box. The box shadow should be clipped, since it is painted outside the border box. On pass you should see a vertical green stripe on the right side of a vertical blue stripe.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-rect-comma-001-A" class="primary">
|
||||
<td><strong>
|
||||
<a href="clip-rect-comma-001.xht">clip-rect-comma-001</a></strong></td>
|
||||
<td><a href="reference/clip-absolute-positioned-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: Test comma separation of rect function on clip - no commas
|
||||
<ul class="assert">
|
||||
<li>Values for rect function on clip can be white space or comma separated, but not both. Otherwise the property setting gets ignored. Testing rect function with white space separation. On pass you should see a green square and no red.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-rect-comma-002-A" class="primary">
|
||||
<td><strong>
|
||||
<a href="clip-rect-comma-002.xht">clip-rect-comma-002</a></strong></td>
|
||||
<td><a href="reference/clip-no-clipping-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: Test comma separation of rect function on clip - no comma between 1st and 2nd value
|
||||
<ul class="assert">
|
||||
<li>Values for rect function on clip can be white space or comma separated, but not both. Otherwise the property setting gets ignored. Testing rect function without comma separation between 1st and 2nd value. On pass you should see a green square with a blue border.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-rect-comma-003-A" class="primary">
|
||||
<td><strong>
|
||||
<a href="clip-rect-comma-003.xht">clip-rect-comma-003</a></strong></td>
|
||||
<td><a href="reference/clip-no-clipping-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: Test comma separation of rect function on clip - no comma between 2nd and 3rd value
|
||||
<ul class="assert">
|
||||
<li>Values for rect function on clip can be white space or comma separated, but not both. Otherwise the property setting gets ignored. Testing rect function without comma separation between 2nd and 3rd value. On pass you should see a green square with a blue border.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-rect-comma-004-A" class="primary">
|
||||
<td><strong>
|
||||
<a href="clip-rect-comma-004.xht">clip-rect-comma-004</a></strong></td>
|
||||
<td><a href="reference/clip-no-clipping-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: Test comma separation of rect function on clip - no comma between 3rd and 4th value
|
||||
<ul class="assert">
|
||||
<li>Values for rect function on clip can be white space or comma separated, but not both. Otherwise the property setting gets ignored. Testing rect function without comma separation between 3rd and 4th value. On pass you should see a green square with a blue border.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="sA.#funcdef-rect">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sA.#propdef-clip">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sA.#typedef-bottom">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sA.#typedef-left">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sA.#typedef-right">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sA.#typedef-top">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
42
tests/wpt/css-tests/css-masking-1_dev/xhtml1/chapter-B.xht
Normal file
42
tests/wpt/css-tests/css-masking-1_dev/xhtml1/chapter-B.xht
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
|
||||
|
||||
<!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>Compute stroke bounding box - 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>Compute stroke bounding box (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="sB">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#sB">+</a>
|
||||
<a href="http://www.w3.org/TR/css-masking-1/#compute-stroke-bounding-box">B Compute stroke bounding box</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sB.#stroke-bounding-box">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
69
tests/wpt/css-tests/css-masking-1_dev/xhtml1/chapter-C.xht
Normal file
69
tests/wpt/css-tests/css-masking-1_dev/xhtml1/chapter-C.xht
Normal 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>DOM interfaces - 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>DOM interfaces (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="sC">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#sC">+</a>
|
||||
<a href="http://www.w3.org/TR/css-masking-1/#DOMInterfaces">C DOM interfaces</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sC.#InterfaceSVGClipPathElement">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sC.#InterfaceSVGMaskElement">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sC.#SVGClipPathElement__clipPathUnits">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sC.#SVGClipPathElement__transform">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sC.#SVGMaskElement__height">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sC.#SVGMaskElement__maskContentUnits">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sC.#SVGMaskElement__maskUnits">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sC.#SVGMaskElement__width">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sC.#SVGMaskElement__x">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sC.#SVGMaskElement__y">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!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 Masking: Test clip property and rect function on div with position: absolute</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clipping-paths" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clip-property" rel="help" />
|
||||
<link href="reference/clip-absolute-positioned-ref.xht" rel="match" />
|
||||
<meta content="The clip property should clip elements whose
|
||||
layout are governed by the CSS box model and that are abolutely positioned
|
||||
with 'position: absolute;'. On pass you should see a green square and no
|
||||
red." name="assert" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<div style="width: 100px; height: 100px; border: solid red 50px; position: absolute; background-color: green; clip: rect(50px, 150px, 150px, 50px);"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!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 Masking: Test clip property and rect function on div with position: fixed</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clipping-paths" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clip-property" rel="help" />
|
||||
<link href="reference/clip-absolute-positioned-ref.xht" rel="match" />
|
||||
<meta content="The clip property should clip elements whose
|
||||
layout are governed by the CSS box model and that are abolutely positioned
|
||||
with 'position: fixed;'. On pass you should see a green square and no
|
||||
red." name="assert" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<div style="width: 100px; height: 100px; border: solid red 50px; position: fixed; background-color: green; clip: rect(50px, 150px, 150px, 50px);"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!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 Masking: Test clip property does not clip on with negative values - 1</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clipping-paths" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clip-property" rel="help" />
|
||||
<link href="reference/clip-full-ref.xht" rel="match" />
|
||||
<meta content="Negative values are permitted on rect function
|
||||
for clip. Test that whole element is clipped if bottom edge is before top
|
||||
edge. On pass you should see a green square and no red." name="assert" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<div style="background-color: green; width: 200px; height: 200px;">
|
||||
<div style="width: 200px; height: 200px; background-color: red; position: absolute; clip: rect(0, -50px, 200px, 50px);"></div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!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 Masking: Test clip property does not clip on with negative values - 2</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clipping-paths" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clip-property" rel="help" />
|
||||
<link href="reference/clip-full-ref.xht" rel="match" />
|
||||
<meta content="Negative values are permitted on rect function
|
||||
for clip. Test that whole element is clipped if right edge is before left
|
||||
edge. On pass you should see a green square and no red." name="assert" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<div style="background-color: green; width: 200px; height: 200px;">
|
||||
<div style="width: 200px; height: 200px; background-color: red; position: absolute; clip: rect(50px, 200px, -50px, 0);"></div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!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 Masking: Test clip property does not clip on with negative values - 3</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clipping-paths" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clip-property" rel="help" />
|
||||
<link href="reference/clip-vertical-stripe-ref.xht" rel="match" />
|
||||
<meta content="Negative values are permited on rect function
|
||||
for clip. Test that left edge can be negative. On pass you should see a
|
||||
vertical blue stripe." name="assert" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is only a vertical blue stripe.</p>
|
||||
<div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; position: absolute; clip: rect(0, 50px, 200px, -50px);"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!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 Masking: Test clip property does not clip on with negative values - 4</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clipping-paths" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clip-property" rel="help" />
|
||||
<link href="reference/clip-horizontal-stripe-ref.xht" rel="match" />
|
||||
<meta content="Negative values are permited on rect function
|
||||
for clip. Test that top edge can be negative. On pass you should see a
|
||||
horizontal blue stripe." name="assert" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is only a horizontal blue stripe.</p>
|
||||
<div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; position: absolute; clip: rect(-50px, 200px, 50px, 0);"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!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 Masking: Test clip property does not clip on 'auto'</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clipping-paths" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clip-property" rel="help" />
|
||||
<link href="reference/clip-no-clipping-ref.xht" rel="match" />
|
||||
<meta content="The clip property should on 'auto'. On pass
|
||||
you should see a green box with a blue border." name="assert" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square with a blue border.</p>
|
||||
<div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; position: absolute; clip: auto"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -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 Masking: Test clip property does not clip overflowing content on 'auto'.</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clipping-paths" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clip-property" rel="help" />
|
||||
<link href="reference/clip-no-clipping-ref.xht" rel="match" />
|
||||
<meta content="The clip property should not clip overflowing
|
||||
content of elements whose layout are governed by the CSS box model, the
|
||||
position is absolute and the clip value is 'auto'. On pass you should see a
|
||||
a green square with a blue border." name="assert" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square with a blue border.</p>
|
||||
<div style="width: 100px; height: 100px; position: absolute; clip: auto;">
|
||||
<div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green;"></div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!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 Masking: Test clip property and rect function on not absolutely positioned div - 1</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clipping-paths" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clip-property" rel="help" />
|
||||
<link href="reference/clip-no-clipping-ref.xht" rel="match" />
|
||||
<meta content="The clip property should be ignored on
|
||||
elements whose layout are governed by the CSS box model and are not
|
||||
abolutely positioned. On pass you should see a green square with a blue
|
||||
border." name="assert" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square with a blue border.</p>
|
||||
<div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; clip: rect(50px, 150px, 150px, 50px);"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!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 Masking: Test clip property and rect function on not absolutely positioned div - 2</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clipping-paths" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clip-property" rel="help" />
|
||||
<link href="reference/clip-no-clipping-ref.xht" rel="match" />
|
||||
<meta content="The clip property should be ignored on
|
||||
elements whose layout are governed by the CSS box model and are not
|
||||
abolutely positioned. Creating a stacking context with z-index does not
|
||||
influence clipping behavior. On pass you should see a green box square with
|
||||
a blue border." name="assert" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square with a blue border.</p>
|
||||
<div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; z-index: 10; clip: rect(50px, 150px, 150px, 50px);"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!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 Masking: Test clip property and rect function on not absolutely positioned div - 3</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clipping-paths" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clip-property" rel="help" />
|
||||
<link href="reference/clip-no-clipping-ref.xht" rel="match" />
|
||||
<meta content="The clip property should be ignored on
|
||||
elements whose layout are governed by the CSS box model and are not
|
||||
abolutely positioned. Creating a 3d rednering context does not influence
|
||||
clipping behavior. On pass you should see a green square with a blue
|
||||
border." name="assert" />
|
||||
</head>
|
||||
<body style="perspective: 400px;">
|
||||
<p>The test passes if there is a green square with a blue border.</p>
|
||||
<div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; transform-style: preserve-3d; transform: translate3d(0, 0, 0); clip: rect(50px, 150px, 150px, 50px);"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!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 Masking: Test clip property and rect function on not absolutely positioned div - 4</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clipping-paths" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clip-property" rel="help" />
|
||||
<link href="reference/clip-no-clipping-ref.xht" rel="match" />
|
||||
<meta content="The clip property should be ignored on
|
||||
elements whose layout are governed by the CSS box model and are not
|
||||
abolutely positioned. position: relative does not influence clipping
|
||||
behavior. On pass you should see a green square with a blue border." name="assert" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square with a blue border.</p>
|
||||
<div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; position: relative; clip: rect(50px, 150px, 150px, 50px);"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!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 Masking: Test clip-path property and circle function with absolute values</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<link href="mailto:denisegwhite@outlook.com" rel="author" title="Denise White" />
|
||||
<link href="mailto:webshiva@mac.com" rel="author" title="Laury Kenton" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clipping-paths" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#the-clip-path" rel="help" />
|
||||
<link href="reference/clip-path-circle-ref.xht" rel="match" />
|
||||
<meta content="The clip-path property takes the basic shape
|
||||
'circle' for clipping. Test absolute values for arguments. On pass you
|
||||
should see a green circle and no red." name="assert" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a full green circle.</p>
|
||||
<div style="width: 200px; height: 200px; background-color: green; clip-path: circle();"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!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 Masking: Test clip-path property and circle function with percentage values</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clipping-paths" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#the-clip-path" rel="help" />
|
||||
<link href="reference/clip-path-circle-ref.xht" rel="match" />
|
||||
<meta content="The clip-path property takes the basic shape
|
||||
'circle' for clipping. Test percentage values for arguments. If no
|
||||
reference box was specified, percentage is relative to border-box. On pass
|
||||
there should be a green circle." name="assert" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a full green circle.</p>
|
||||
<div style="width: 200px; height: 200px; background-color: green; clip-path: circle(50% at 50% 50%);"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!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 Masking: Test clip-path property and circle function with percentage radius</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clipping-paths" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#the-clip-path" rel="help" />
|
||||
<link href="reference/clip-path-circle-ref.xht" rel="match" />
|
||||
<meta content="The clip-path property takes the basic shape
|
||||
'circle' for clipping. Test percentage value as argument for radius and no
|
||||
position arguments. The circle should be in the center of the element. On
|
||||
pass there should be a green circle." name="assert" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a full green circle.</p>
|
||||
<div style="width: 200px; height: 200px; background-color: green; clip-path: circle(50%);"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!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 Masking: Test clip-path property and circle function with percentage position</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clipping-paths" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#the-clip-path" rel="help" />
|
||||
<link href="reference/clip-path-circle-ref.xht" rel="match" />
|
||||
<meta content="The clip-path property takes the basic shape
|
||||
'circle' for clipping. Test percentage value as argument for position and
|
||||
no radius argument. The circle must behave like it has a radius of
|
||||
'closest-side'. On pass there should be a green circle." name="assert" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a full green circle.</p>
|
||||
<div style="width: 200px; height: 200px; background-color: green; clip-path: circle(at 50%);"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!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 Masking: Test clip-path property and circle function with closest-side</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clipping-paths" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#the-clip-path" rel="help" />
|
||||
<link href="reference/clip-path-circle-ref.xht" rel="match" />
|
||||
<meta content="The clip-path property takes the basic shape
|
||||
'circle' for clipping. The circle has a radius of 'closest-side'. This test
|
||||
has a squred div-box. Therefore, 'closest-side', 50% and 'farthest-side'
|
||||
show the same behavior. On pass there should be a green circle." name="assert" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a full green circle.</p>
|
||||
<div style="width: 200px; height: 200px; background-color: green; clip-path: circle(closest-side);"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!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 Masking: Test clip-path property and circle function with farthest-side</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clipping-paths" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#the-clip-path" rel="help" />
|
||||
<link href="reference/clip-path-circle-ref.xht" rel="match" />
|
||||
<meta content="The clip-path property takes the basic shape
|
||||
'circle' for clipping. The circle has a radius of 'farthest-side'. This
|
||||
test has a squred div-box. Therefore, 'closest-side', 50% and
|
||||
'farthest-side' show the same behavior. On pass there should be a green
|
||||
circle." name="assert" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a full green circle.</p>
|
||||
<div style="width: 200px; height: 200px; background-color: green; clip-path: circle(farthest-side);"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!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 Masking: Test clip-path property and circle with closest-side on rectangular div 1</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clipping-paths" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#the-clip-path" rel="help" />
|
||||
<link href="reference/clip-path-circle-2-ref.xht" rel="match" />
|
||||
<meta content="The clip-path property takes the basic shape
|
||||
'circle' for clipping. The clipped div box is twice as wide as it is
|
||||
height. With 'closest-side', there should be a full green circle." name="assert" />
|
||||
<style type="text/css">
|
||||
body, div {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a full green circle.</p>
|
||||
<div style="width: 400px; height: 200px; background-color: green; clip-path: circle(closest-side);"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!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 Masking: Test clip-path property and circle with closest-side on rectangular div 2</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clipping-paths" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#the-clip-path" rel="help" />
|
||||
<link href="reference/clip-path-circle-3-ref.xht" rel="match" />
|
||||
<meta content="The clip-path property takes the basic shape
|
||||
'circle' for clipping. The clipped div box is twice as high as it is
|
||||
wide. With 'closest-side', there should be a full green circle." name="assert" />
|
||||
<style type="text/css">
|
||||
body, div {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a full green circle.</p>
|
||||
<div style="width: 200px; height: 400px; background-color: green; clip-path: circle(closest-side);"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!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 Masking: Test clip-path property and external clipPath reference with userSpaceOnUse - 1</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clipping-paths" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#ClipPathElement" rel="help" />
|
||||
<link href="reference/clip-path-rectangle-ref.xht" rel="match" />
|
||||
<meta content="The clip-path property takes an external reference to a clipPath element for clipping.
|
||||
On pass you should see a green box." name="assert" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green box.</p>
|
||||
<div style="width: 150px; height: 100px; border: solid red 50px; background-color: green; clip-path: url(#clip);"></div>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<clipPath id="clip">
|
||||
<rect y="50" width="150px" height="100" x="50"></rect>
|
||||
</clipPath>
|
||||
</svg>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!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 Masking: Test clip-path property and external clipPath reference with userSpaceOnUse - 2</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clipping-paths" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#ClipPathElement" rel="help" />
|
||||
<link href="reference/clip-path-rectangle-ref.xht" rel="match" />
|
||||
<meta content="The clip-path property takes an reference to a clipPath element for clipping.
|
||||
On pass you should see a green with a blue border." name="assert" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green box with a blue border.</p>
|
||||
<div style="width: 150px; height: 100px; border: solid blue 50px; background-color: green; clip-path: url(#clip);"></div>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<clipPath id="clip">
|
||||
<rect y="0" width="250px" height="200" x="0"></rect>
|
||||
</clipPath>
|
||||
</svg>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -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 Masking: Test clip-path property and external clipPath reference with userSpaceOnUse with percentage - 1</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clipping-paths" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#ClipPathElement" rel="help" />
|
||||
<link href="reference/clip-path-ref-right-green-ref.xht" rel="match" />
|
||||
<meta content="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." name="assert" />
|
||||
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style="width: 100%; height: 100%; background-color: green; clip-path: url(#clip); position: absolute;"></div>
|
||||
<p style="position: absolute;">The test passes if the left half of the site is white and the right half of the site is blue.</p>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<clipPath id="clip">
|
||||
<rect y="0" width="50%" height="100%" x="50%"></rect>
|
||||
</clipPath>
|
||||
</svg>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -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 Masking: Test clip-path property and external clipPath reference with userSpaceOnUse with percentage - 2</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clipping-paths" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#ClipPathElement" rel="help" />
|
||||
<link href="reference/clip-path-ref-bottom-green-ref.xht" rel="match" />
|
||||
<meta content="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." name="assert" />
|
||||
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style="width: 100%; height: 100%; background-color: green; clip-path: url(#clip); position: absolute;"></div>
|
||||
<p style="position: absolute;">The test passes if the top half of the site is white and the bottom half of the site is green.</p>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<clipPath id="clip">
|
||||
<rect y="50%" width="100%" height="50%" x="0"></rect>
|
||||
</clipPath>
|
||||
</svg>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!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 Masking: Test clip-path property and ellipse function with absolute values</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clipping-paths" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path" rel="help" />
|
||||
<link href="reference/clip-path-ellipse-ref.xht" rel="match" />
|
||||
<meta content="The clip-path property takes the basic shape
|
||||
'ellipse' for clipping. Test absolute values for radii and position
|
||||
arguments. On pass you should see a green ellipse." name="assert" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a full green ellipse.</p>
|
||||
<div style="width: 150px; height: 100px; border: solid red 50px; background-color: green; clip-path: ellipse(75px 50px at 125px 100px);"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!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 Masking: Test clip-path property and ellipse function with percentage values</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clipping-paths" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path" rel="help" />
|
||||
<link href="reference/clip-path-ellipse-ref.xht" rel="match" />
|
||||
<meta content="The clip-path property takes the basic shape
|
||||
'ellipse' for clipping. Test percentage values for radii and position
|
||||
arguments. Percentage values are relative to a reference box. If no
|
||||
reference box was specified, percentage values are relative to border-box.
|
||||
On pass you should see a green ellipse." name="assert" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green ellipse.</p>
|
||||
<div style="width: 150px; height: 100px; border: solid red 50px; background-color: green; clip-path: ellipse(30% 25% at 50% 50%);"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!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 Masking: Test clip-path property and ellipse function with percentage values on square</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clipping-paths" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path" rel="help" />
|
||||
<link href="reference/clip-path-circle-ref.xht" rel="match" />
|
||||
<meta content="The clip-path property takes the basic shape
|
||||
'ellipse' for clipping. Test percentage values for radii and position
|
||||
arguments. Percentage values are relative to a reference box. If no
|
||||
reference box was specified, percentage values are relative to border-box.
|
||||
On pass there should be a full green circle." name="assert" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green circle.</p>
|
||||
<div style="width: 200px; height: 200px; background-color: green; clip-path: ellipse(50% 50% at 50% 50%);"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!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 Masking: Test clip-path property and ellipse function with different absolute values on square</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clipping-paths" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path" rel="help" />
|
||||
<link href="reference/clip-path-ellipse-ref.xht" rel="match" />
|
||||
<meta content="The clip-path property takes the basic shape
|
||||
'ellipse' for clipping. Test absolute values for arguments. On pass you
|
||||
should see a green ellipse." name="assert" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green ellipse.</p>
|
||||
<div style="width: 200px; height: 200px; background-color: green; clip-path: ellipse(75px 50px at 125px 100px);"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -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 Masking: Test clip-path property and ellipse function with different percentage values on square</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clipping-paths" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path" rel="help" />
|
||||
<link href="reference/clip-path-ellipse-ref.xht" rel="match" />
|
||||
<meta content="The clip-path property takes the basic shape
|
||||
'ellipse' for clipping. Test percentage values for radii and position
|
||||
arguments. Percentage values are relative to a reference box. If no
|
||||
reference box was specified, percentage values are relative to border-box.
|
||||
Different values for getting an ellipse from a square. On pass you should
|
||||
see a green ellipse." name="assert" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green ellipse.</p>
|
||||
<div style="width: 200px; height: 200px; background-color: green; clip-path: ellipse(37.5% 25% at 62.5% 50%);"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!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 Masking: Test clip-path property and ellipse function with absolute values</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clipping-paths" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path" rel="help" />
|
||||
<link href="reference/clip-path-circle-ref.xht" rel="match" />
|
||||
<meta content="The clip-path property takes the basic shape
|
||||
'ellipse' for clipping. Test absolute values for radii and position
|
||||
arguments. On pass you should see a green circle." name="assert" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green circle.</p>
|
||||
<div style="width: 150px; height: 100px; border: solid red 50px; background-color: green; clip-path: ellipse();"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!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 Masking: Test clip-path property and ellipse function with no arguments</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clipping-paths" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path" rel="help" />
|
||||
<link href="reference/clip-path-ellipse-ref.xht" rel="match" />
|
||||
<meta content="The clip-path property takes the basic shape
|
||||
'ellipse' for clipping. If no further arguments were specified, the radii
|
||||
are 'closest-side' each. The position is initialised to the center of the
|
||||
element. On pass there is a full green ellipse." name="assert" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a full green ellipse.</p>
|
||||
<div style="width: 150px; height: 100px; border: solid red 50px; background-color: green; clip-path: ellipse(farthest-side closest-side);"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!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 Masking: Test clip-path property and ellipse function with 50% 50%</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clipping-paths" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path" rel="help" />
|
||||
<link href="reference/clip-path-ellipse-ref.xht" rel="match" />
|
||||
<meta content="The clip-path property takes the basic shape
|
||||
'ellipse' for clipping. Test percentage values for radii and position
|
||||
arguments. Percentage values are relative to a reference box. If no
|
||||
reference box was specified, percentage values are relative to border-box.
|
||||
Both radii are specified with percentage values. The position is
|
||||
initialised to the center of the element. On pass there is a full green
|
||||
ellipse." name="assert" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a full green ellipse.</p>
|
||||
<div style="width: 150px; height: 100px; border: solid red 50px; background-color: green; clip-path: ellipse(50% 50%);"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!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 Masking: Test clip-path property and polygon function with absolute values</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clipping-paths" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path" rel="help" />
|
||||
<link href="reference/clip-path-rectangle-ref.xht" rel="match" />
|
||||
<meta content="The clip-path property takes the basic shape
|
||||
'polygon' for clipping. Test absolute value arguments. On pass you should
|
||||
see a green square and no red." name="assert" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<div style="width: 150px; height: 100px; border: solid red 50px; background-color: green; clip-path: polygon(50px 50px, 200px 50px, 200px 150px, 50px 150px)"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -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 Masking: Test clip-path property and polygon function with percentage values</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clipping-paths" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path" rel="help" />
|
||||
<link href="reference/clip-path-rectangle-ref.xht" rel="match" />
|
||||
<meta content="The clip-path property takes the basic shape
|
||||
'polygon' for clipping. Test percentage values for arguments. Percentage
|
||||
values are relative to specified reference box. If no reference box was
|
||||
specified, percentage values are relative to border-box. A number of
|
||||
percentage values are specified as coordinates. On pass you should see a
|
||||
green square and no red." name="assert" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<div style="width: 150px; height: 100px; border: solid red 50px; background-color: green; clip-path: polygon(20% 25%, 80% 25%, 80% 75%, 20% 75%)"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!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 Masking: Test clip-path property and polygon function with absolute and percentage values</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clipping-paths" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path" rel="help" />
|
||||
<link href="reference/clip-path-rectangle-ref.xht" rel="match" />
|
||||
<meta content="The clip-path property takes the basic shape
|
||||
'polygon' for clipping. Test absolute and percentage value arguments. On
|
||||
pass you should see a green square and no red." name="assert" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<div style="width: 150px; height: 100px; border: solid red 50px; background-color: green; position: absolute; clip-path: polygon(20% 50px, 200px 25%, 200px 150px, 20% 75%)"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!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 Masking: Test clip-path property and polygon function with fill rule evenodd</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clipping-paths" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path" rel="help" />
|
||||
<link href="reference/clip-path-rectangle-border-ref.xht" rel="match" />
|
||||
<meta content="The clip-path property takes the basic shape 'polygon' for clipping.
|
||||
The point list for the polygon creates a 'whole' with the dimension of the background. With
|
||||
the fill 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." name="assert" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green box with a blue border.</p>
|
||||
<div style="background-color: green; width: 250px;">
|
||||
<div style="width: 150px; height: 100px; border: solid blue 50px; background-color: red; clip-path: polygon(evenodd, 0 0, 250px 0, 250px 200px, 0 200px, 0 50px, 200px 50px, 200px 150px, 50px 150px, 50px 50px, 0 50px)"></div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -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 Masking: Test clip-path property and polygon function with fill rule nonzero</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clipping-paths" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path" rel="help" />
|
||||
<link href="reference/clip-path-rectangle-border-ref.xht" rel="match" />
|
||||
<meta content="The clip-path property takes the basic shape
|
||||
'polygon' for clipping. The point list for the polygon creates a 'hole'
|
||||
with the dimension of the background of the clipped element. With the fill
|
||||
rule 'nonzero', this hole is clipped out. The clipping makes the green
|
||||
background of the parent div box visible. On pass you should see a green
|
||||
square with a blue border." name="assert" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square with a blue border.</p>
|
||||
<div style="background-color: green; width: 250px;">
|
||||
<div style="width: 150px; height: 100px; border: solid blue 50px; background-color: red; clip-path: polygon(nonzero, 0 0, 250px 0, 250px 200px, 0 200px, 0 50px, 50px 50px, 50px 150px, 200px 150px, 200px 50px, 0 50px)"></div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -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 Masking: Test clip-path and polygon with padding-box</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clipping-paths" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path" rel="help" />
|
||||
<link href="reference/clip-path-square-001-ref.xht" rel="match" />
|
||||
<meta content="The clip-path property allows specifying
|
||||
basic shapes and reference boxes. This test checks the usage of the correct
|
||||
reference box 'padding-box' for the polygon() function by mixing percentage
|
||||
and absolute values as coordinates. On sucess you should see a green square
|
||||
and no red." name="assert" />
|
||||
<style>
|
||||
div {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: green;
|
||||
padding: 25px;
|
||||
margin: 25px;
|
||||
border: red solid 50px;
|
||||
}
|
||||
</style></head>
|
||||
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<div style="clip-path: polygon(0% 0%, 100% 0%, 100px 100%, 0 100px) padding-box"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!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 Masking: Test clip-path and polygon with border-box</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clipping-paths" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path" rel="help" />
|
||||
<link href="reference/clip-path-stripes-001-ref.xht" rel="match" />
|
||||
<meta content="The clip-path property allows specifying
|
||||
basic shapes and reference boxes. This test checks the usage of the correct
|
||||
reference box 'border-box' for the polygon() function by mixing percentage
|
||||
and absolute values as coordinates. On sucess you should see a green
|
||||
vertical stripe next to a lime green vertical stripe. Both should be of equal
|
||||
size." name="assert" />
|
||||
<style>
|
||||
div {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: green;
|
||||
padding: 25px;
|
||||
margin: 25px;
|
||||
border: red solid 50px;
|
||||
border-left: lime solid 50px;
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
<p>The test passes if you see a green vertical stripe next to a lime green vertical stripe, both stripes should be of equal size and there should be no red.</p>
|
||||
<div style="clip-path: polygon(0% 25%, 50% 50px, 100px 75%, 0 150px) border-box"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!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 Masking: Test clip-path and polygon with margin-box</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clipping-paths" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path" rel="help" />
|
||||
<link href="reference/clip-path-stripes-002-ref.xht" rel="match" />
|
||||
<meta content="The clip-path property allows specifying
|
||||
basic shapes and reference boxes. This test checks the usage of the correct
|
||||
reference box 'margin-box' for the polygon() function by mixing percentage
|
||||
and absolute values as coordinates. On sucess you should see a green
|
||||
vertical stripe next to a lime green vertical stripe. Both should be of equal
|
||||
size." name="assert" />
|
||||
<style>
|
||||
div {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: green;
|
||||
padding: 25px;
|
||||
margin: 25px;
|
||||
border: red solid 25px;
|
||||
border-left: lime solid 25px;
|
||||
}
|
||||
</style></head>
|
||||
|
||||
<body>
|
||||
<p>The test passes if you see a green vertical stripe next to a lime green vertical stripe, both stripes should be of equal size and there should be no red.</p>
|
||||
<div style="clip-path: polygon(12.5% 25%, 37.5% 50px, 75px 50%, 25px 100px) margin-box"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -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 Masking: Test clip-path and polygon with content-box</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clipping-paths" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path" rel="help" />
|
||||
<link href="reference/clip-path-square-002-ref.xht" rel="match" />
|
||||
<meta content="The clip-path property allows specifying
|
||||
basic shapes and reference boxes. This test checks the usage of the correct
|
||||
reference box 'content-box' for the polygon() function by mixing percentage
|
||||
and absolute values as coordinates. On sucess you should see a green square
|
||||
and no red." name="assert" />
|
||||
<style>
|
||||
div {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: green;
|
||||
padding: 25px;
|
||||
margin: 25px;
|
||||
border: red solid 25px;
|
||||
}
|
||||
</style></head>
|
||||
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<div style="clip-path: polygon(0% 0px, 50px 0%, 100% 50px, 0px 100%) content-box"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -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 Masking: Test clip-path and polygon with fill-box</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clipping-paths" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path" rel="help" />
|
||||
<link href="reference/clip-path-stripes-001-ref.xht" rel="match" />
|
||||
<meta content="The clip-path property allows specifying
|
||||
basic shapes and reference boxes. This test checks the usage of the correct
|
||||
reference box. 'fill-box' was specified but is not supported for HTML
|
||||
elements. The used value should be 'border-box' for the polygon() function
|
||||
instead. By mixing percentage and absolute values as coordinates we check
|
||||
the correct used reference box. On sucess you should see a green
|
||||
vertical stripe next to a lime green vertical stripe. Both should be of equal
|
||||
size." name="assert" />
|
||||
<style>
|
||||
div {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: green;
|
||||
padding: 25px;
|
||||
margin: 25px;
|
||||
border: red solid 50px;
|
||||
border-left: lime solid 50px;
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
<p>The test passes if you see a green vertical stripe next to a lime green vertical stripe, both stripes should be of equal size and there should be no red.</p>
|
||||
<div style="clip-path: polygon(0% 25%, 50% 50px, 100px 75%, 0 150px) fill-box"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -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 Masking: Test clip-path and polygon with stroke-box</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clipping-paths" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path" rel="help" />
|
||||
<link href="reference/clip-path-stripes-001-ref.xht" rel="match" />
|
||||
<meta content="The clip-path property allows specifying
|
||||
basic shapes and reference boxes. This test checks the usage of the correct
|
||||
reference box. 'stroke-box' was specified but is not supported for HTML
|
||||
elements. The used value should be 'border-box' for the polygon() function
|
||||
instead. By mixing percentage and absolute values as coordinates we check
|
||||
the correct used reference box. On sucess you should see a green
|
||||
vertical stripe next to a lime green vertical stripe. Both should be of equal
|
||||
size." name="assert" />
|
||||
<style>
|
||||
div {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: green;
|
||||
padding: 25px;
|
||||
margin: 25px;
|
||||
border: red solid 50px;
|
||||
border-left: lime solid 50px;
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
<p>The test passes if you see a green vertical stripe next to a lime green vertical stripe, both stripes should be of equal size and there should be no red.</p>
|
||||
<div style="clip-path: polygon(0% 25%, 50% 50px, 100px 75%, 0 150px) stroke-box"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -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 Masking: Test clip-path and polygon with view-box</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clipping-paths" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path" rel="help" />
|
||||
<link href="reference/clip-path-stripes-001-ref.xht" rel="match" />
|
||||
<meta content="The clip-path property allows specifying
|
||||
basic shapes and reference boxes. This test checks the usage of the correct
|
||||
reference box. 'view-box' was specified but is not supported for HTML
|
||||
elements. The used value should be 'border-box' for the polygon() function
|
||||
instead. By mixing percentage and absolute values as coordinates we check
|
||||
the correct used reference box. On sucess you should see a green
|
||||
vertical stripe next to a lime green vertical stripe. Both should be of equal
|
||||
size." name="assert" />
|
||||
<style>
|
||||
div {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: green;
|
||||
padding: 25px;
|
||||
margin: 25px;
|
||||
border: red solid 50px;
|
||||
border-left: lime solid 50px;
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
<p>The test passes if you see a green vertical stripe next to a lime green vertical stripe, both stripes should be of equal size and there should be no red.</p>
|
||||
<div style="clip-path: polygon(0% 25%, 50% 50px, 100px 75%, 0 150px) view-box"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -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 Masking: Test clip-path and polygon different units</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clipping-paths" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path" rel="help" />
|
||||
<link href="reference/clip-path-stripes-003-ref.xht" rel="match" />
|
||||
<meta content="Test the support of different units for
|
||||
polygon coordinates. The test passes if you see a multiple green and blue
|
||||
stripe pairs. For each pair, the blue and green stripe must be of same
|
||||
length." name="assert" />
|
||||
<style>
|
||||
div {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
background-color: green;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
div:nth-child(odd) {
|
||||
margin-bottom: 5px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
<p>The test passes if you see a multiple green and blue stripe pairs. For each pair, the blue and green stripe must be of same length.</p>
|
||||
<div style="clip-path: polygon(0 0, 50% 0, 50% 20px, 0 20px)"></div>
|
||||
<div style="width: 50%"></div>
|
||||
|
||||
<div style="clip-path: polygon(0 0, 20em 0, 20em 20px, 0 20px)"></div>
|
||||
<div style="width: 20em"></div>
|
||||
|
||||
<div style="clip-path: polygon(0 0, 50vw 0, 50vw 20px, 0 20px)"></div>
|
||||
<div style="width: 50vw"></div>
|
||||
|
||||
<div style="clip-path: polygon(0 0, 40vh 0, 40vh 20px, 0 20px)"></div>
|
||||
<div style="width: 40vh"></div>
|
||||
|
||||
<div style="clip-path: polygon(0 0, calc(30% + 15px) 0, calc(30% + 15px) 20px, 0 20px)"></div>
|
||||
<div style="width: calc(30% + 15px)"></div>
|
||||
|
||||
<div style="clip-path: polygon(0 0, 30ex 0, 30ex 20px, 0 20px)"></div>
|
||||
<div style="width: 30ex"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -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 Masking: Test clip property with rect function and auto values clip to border box - 1</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clipping-paths" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clip-property" rel="help" />
|
||||
<link href="reference/clip-overflow-hidden-ref.xht" rel="match" />
|
||||
<meta content="A value of 'auto' in the rect function is
|
||||
equal to the certain edge of the border box. The content should be clipped
|
||||
to the border box. On pass you see a blue square and a smaller green square
|
||||
in the bottom right corner of the blue square." name="assert" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a blue square and a smaller green square in the bottom right corner of the blue square .</p>
|
||||
<div style="position: absolute; clip: rect(auto, auto, auto, auto); width: 100px; height: 100px;">
|
||||
<div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green;"></div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!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 Masking: Test clip property with rect function and auto values clip to border box - 2</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clipping-paths" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clip-property" rel="help" />
|
||||
<link href="reference/clip-no-clipping-ref.xht" rel="match" />
|
||||
<meta content="A value of 'auto' in the rect function is
|
||||
equal to the certain edge of the border box. The box shadow should be
|
||||
clipped, since it is painted outside the border box. On pass you should see
|
||||
a green square with a blue border." name="assert" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square with a blue border.</p>
|
||||
<div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; position: absolute; clip: rect(auto, auto, auto, auto); box-shadow: 0 0 10px red;"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!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 Masking: Test clip property with rect function and auto value for top value</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clipping-paths" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clip-property" rel="help" />
|
||||
<link href="reference/clip-rect-top-ref.xht" rel="match" />
|
||||
<meta content="A value of 'auto' for 'top' in the rect
|
||||
function is equal to the top edge of the border box. The box shadow should
|
||||
be clipped, since it is painted outside the border box. On pass you should see a horizontal green stripe under a horizontal blue stripe." name="assert" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a horizontal green stripe under a horizontal blue stripe.</p>
|
||||
<div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; position: absolute; clip: rect(auto, 150px, 100px, 50px); box-shadow: 0 0 10px red;"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!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 Masking: Test clip property with rect function and auto value for right value</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clipping-paths" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clip-property" rel="help" />
|
||||
<link href="reference/clip-rect-right-ref.xht" rel="match" />
|
||||
<meta content="A value of 'auto' for 'right' in the rect
|
||||
function is equal to the top edge of the border box. The box shadow should
|
||||
be clipped, since it is painted outside the border box. On pass you should
|
||||
see a vertical blue stripe on the right side of a vertical green stripe." name="assert" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a vertical blue stripe on the right side of a vertical green stripe.</p>
|
||||
<div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; position: absolute; clip: rect(50px, auto, 150px, 100px); box-shadow: 0 0 10px red;"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!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 Masking: Test clip property with rect function and auto value for bottom value</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clipping-paths" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clip-property" rel="help" />
|
||||
<link href="reference/clip-rect-bottom-ref.xht" rel="match" />
|
||||
<meta content="A value of 'auto' for 'bottom' in the rect
|
||||
function is equal to the top edge of the border box. The box shadow should
|
||||
be clipped, since it is painted outside the border box. On pass you should
|
||||
see a horizontal blue stripe under a horizontal green stripe." name="assert" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a horizontal blue stripe under a horizontal green stripe.</p>
|
||||
<div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; position: absolute; clip: rect(100px, 150px, auto, 50px); box-shadow: 0 0 10px red;"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!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 Masking: Test clip property with rect function and auto value for left value</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clipping-paths" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clip-property" rel="help" />
|
||||
<link href="reference/clip-rect-left-ref.xht" rel="match" />
|
||||
<meta content="A value of 'auto' for 'left' in the rect
|
||||
function is equal to the top edge of the border box. The box shadow should
|
||||
be clipped, since it is painted outside the border box. On pass you should
|
||||
see a vertical green stripe on the right side of a vertical blue stripe." name="assert" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a vertical green stripe on the right side of a vertical blue stripe.</p>
|
||||
<div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; position: absolute; clip: rect(50px, 100px, 150px, auto); box-shadow: 0 0 10px red;"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!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 Masking: Test comma separation of rect function on clip - no commas</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clip-property" rel="help" />
|
||||
<link href="reference/clip-absolute-positioned-ref.xht" rel="match" />
|
||||
<meta content="Values for rect function on clip can be white
|
||||
space or comma separated, but not both. Otherwise the property setting gets
|
||||
ignored. Testing rect function with white space separation. On pass you
|
||||
should see a green square and no red." name="assert" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<div style="width: 100px; height: 100px; border: solid red 50px; background-color: green; position: absolute; clip: rect(50px 150px 150px 50px);"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!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 Masking: Test comma separation of rect function on clip - no comma between 1st and 2nd value</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clip-property" rel="help" />
|
||||
<link href="reference/clip-no-clipping-ref.xht" rel="match" />
|
||||
<meta content="Values for rect function on clip can be white
|
||||
space or comma separated, but not both. Otherwise the property setting gets
|
||||
ignored. Testing rect function without comma separation between 1st and 2nd
|
||||
value. On pass you should see a green square with a blue border." name="assert" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square with a blue border.</p>
|
||||
<div style="width: 100px; height: 100px; border: solid red 50px; background-color: green; position: absolute; clip: rect(50px 150px, 150px, 50px);"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!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 Masking: Test comma separation of rect function on clip - no comma between 2nd and 3rd value</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clip-property" rel="help" />
|
||||
<link href="reference/clip-no-clipping-ref.xht" rel="match" />
|
||||
<meta content="Values for rect function on clip can be white
|
||||
space or comma separated, but not both. Otherwise the property setting gets
|
||||
ignored. Testing rect function without comma separation between 2nd and 3rd
|
||||
value. On pass you should see a green square with a blue border." name="assert" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square with a blue border.</p>
|
||||
<div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; position: absolute; clip: rect(50px, 150px 150px, 50px);"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!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 Masking: Test comma separation of rect function on clip - no comma between 3rd and 4th value</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clip-property" rel="help" />
|
||||
<link href="reference/clip-no-clipping-ref.xht" rel="match" />
|
||||
<meta content="Values for rect function on clip can be white
|
||||
space or comma separated, but not both. Otherwise the property setting gets
|
||||
ignored. Testing rect function without comma separation between 3rd and 4th
|
||||
value. On pass you should see a green square with a blue border." name="assert" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square with a blue border.</p>
|
||||
<div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; position: absolute; clip: rect(50px, 150px, 150px 50px);"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!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 Masking: Test clip-rule property on polygon clip rule evenodd</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clipping-paths" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#ClipPathElement" rel="help" />
|
||||
<link href="reference/clip-rule-rectangle-border-ref.xht" rel="match" />
|
||||
<meta content="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." name="assert" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green box with a blue border.</p>
|
||||
<div style="background-color: green; width: 250px;">
|
||||
<div style="width: 150px; height: 100px; border: solid blue 50px; background-color: red; clip-path: url(#clip);"></div>
|
||||
</div>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<clipPath id="clip">
|
||||
<polygon points="0 0, 250 0, 250 200, 0 200, 0 50, 200 50, 200 150, 50 150, 50 50, 0 50" clip-rule="evenodd"></polygon>
|
||||
</clipPath>
|
||||
</svg>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!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 Masking: Test clip-rule property on polygon clip rule nonzero</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#clipping-paths" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path" rel="help" />
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#ClipPathElement" rel="help" />
|
||||
<link href="reference/clip-rule-rectangle-border-ref.xht" rel="match" />
|
||||
<meta content="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." name="assert" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green box with a blue border.</p>
|
||||
<div style="background-color: green; width: 250px;">
|
||||
<div style="width: 150px; height: 100px; border: solid blue 50px; background-color: red; clip-path: url(#clip);"></div>
|
||||
</div>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<clipPath id="clip">
|
||||
<polygon points="0 0, 250 0, 250 200, 0 200, 0 50, 50 50, 50 150, 200 150, 200 50, 0 50" clip-rule="nonzero"></polygon>
|
||||
</clipPath>
|
||||
</svg>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!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 Reftest Reference</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<div style="width: 100px; height: 100px; border: 50px solid white; background-color: green;"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!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 Reftest Reference</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<div style="width: 200px; height: 200px; background-color: green;"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!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 Reftest Reference</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is only a vertical blue stripe.</p>
|
||||
<div style="width: 200px; height: 50px; background-color: blue;"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!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 Reftest Reference</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square with a blue border.</p>
|
||||
<div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green;"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!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 Reftest Reference</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a blue square and a smaller green square in the bottom right corner of the blue square.</p>
|
||||
<div style="overflow: hidden; width: 100px; height: 100px;">
|
||||
<div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green;"></div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!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 Reftest Reference</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<style type="text/css">
|
||||
body, div {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a full green circle.</p>
|
||||
<div style="width: 200px; height: 200px; border-radius: 100px; background-color: green; position: absolute; left: 100px;"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!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 Reftest Reference</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<style type="text/css">
|
||||
body, div {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a full green circle.</p>
|
||||
<div style="width: 200px; height: 200px; border-radius: 100px; background-color: green; position: relative; top: 100px;"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!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 Reftest Reference</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a full green circle.</p>
|
||||
<div style="width: 200px; height: 200px; border-radius: 100px; background-color: green;"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!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 Reftest Reference</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a full green ellipse.</p>
|
||||
<div style="margin-top: 50px; margin-left: 50px; position: absolute; width: 150px; height: 100px; border-top-right-radius: 75px 50px; border-bottom-right-radius: 75px 50px; border-top-left-radius: 75px 50px; border-bottom-left-radius: 75px 50px; background-color: green;"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!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 Reftest Reference</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green box with a blue border.</p>
|
||||
<div style="width: 150px; height: 100px; border: solid blue 50px; background-color: green;"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!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 Reftest Reference</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green box.</p>
|
||||
<div style="margin-top: 50px; margin-left: 50px; position: absolute; width: 150px; height: 100px; background-color: green;"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!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 Reftest Reference</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style="width: 100%; height: 50%; margin-top: 50%; background-color: green; position: absolute;"></div>
|
||||
<p style="position: absolute;">The test passes if the top half of the site is white and the bottom half of the site is green.</p>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!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 Reftest Reference</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style="width: 50%; height: 100%; margin-left: 50%; background-color: green; position: absolute;"></div>
|
||||
<p style="position: absolute;">The test passes if the left half of the site is white and the right half of the site is green.</p>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!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 Masking: Reftest reference</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<div style="width: 100px; height: 100px; background-color: green; margin: 75px;"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!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 Masking: Reftest reference</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<div style="width: 50px; height: 50px; background-color: green; margin: 75px;"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!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 Masking: Reftest reference</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if you see a green vertical stripe next to a lime green vertical stripe, both stripes should be of equal size and there should be no red.</p>
|
||||
<div style="width: 100px; height: 100px; margin: 75px 0 0 25px; background-color: green;">
|
||||
<div style="width: 50px; height: 100px; background-color: lime;"></div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!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 Masking: Reftest reference</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if you see a green vertical stripe next to a lime green vertical stripe, both stripes should be of equal size and there should be no red.</p>
|
||||
<div style="width: 50px; height: 50px; margin: 50px 0 0 25px; background-color: green;">
|
||||
<div style="width: 25px; height: 50px; background-color: lime;"></div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!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 Masking: Reftest reference</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
<style>
|
||||
div {
|
||||
height: 20px;
|
||||
background-color: green;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
div:nth-child(odd) {
|
||||
margin-bottom: 5px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
<p>The test passes if you see a multiple green and blue stripe pairs. For each pair, the blue and green stripe must be of same length.</p>
|
||||
<div style="width: 50%"></div>
|
||||
<div style="width: 50%"></div>
|
||||
|
||||
<div style="width: 20em"></div>
|
||||
<div style="width: 20em"></div>
|
||||
|
||||
<div style="width: 50vw"></div>
|
||||
<div style="width: 50vw"></div>
|
||||
|
||||
<div style="width: 40vh"></div>
|
||||
<div style="width: 40vh"></div>
|
||||
|
||||
<div style="width: calc(30% + 15px)"></div>
|
||||
<div style="width: calc(30% + 15px)"></div>
|
||||
|
||||
<div style="width: 30ex"></div>
|
||||
<div style="width: 30ex"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!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 Reftest Reference</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a horizontal blue stripe under a horizontal green stripe.</p>
|
||||
<div style="background-color: blue; width: 100px; height: 100px; border-left: 50px solid white; border-top: 100px solid white">
|
||||
<div style="width: 100px; height: 50px; background-color: green;"></div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!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 Reftest Reference</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a vertical green stripe on the right side of a vertical blue stripe.</p>
|
||||
<div style="background-color: green; width: 100px; height: 100px; border-top: 50px solid white;">
|
||||
<div style="width: 50px; height: 100px; background-color: blue;"></div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!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 Reftest Reference</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a vertical blue stripe on the right side of a vertical green stripe.</p>
|
||||
<div style="background-color: blue; width: 100px; height: 100px; border-left: 100px solid white; border-top: 50px solid white;">
|
||||
<div style="width: 50px; height: 100px; background-color: green;"></div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!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 Reftest Reference</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a horizontal green stripe under a horizontal blue stripe.</p>
|
||||
<div style="background-color: green; width: 100px; height: 100px; margin-left: 50px;">
|
||||
<div style="width: 100px; height: 50px; background-color: blue;"></div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!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 Reftest Reference</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green box with a blue border.</p>
|
||||
<div style="width: 150px; height: 100px; border: solid blue 50px; background-color: green;"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!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 Reftest Reference</title>
|
||||
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is only a vertical blue stripe.</p>
|
||||
<div style="width: 50px; height: 200px; background-color: blue;"></div>
|
||||
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 135 B |
Binary file not shown.
|
After Width: | Height: | Size: 135 B |
Binary file not shown.
|
After Width: | Height: | Size: 109 B |
Binary file not shown.
|
After Width: | Height: | Size: 109 B |
Binary file not shown.
|
After Width: | Height: | Size: 135 B |
Binary file not shown.
|
After Width: | Height: | Size: 109 B |
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue