mirror of
https://github.com/servo/servo.git
synced 2025-08-11 16:35:33 +01:00
Update web-platform-tests and CSS tests.
- Update CSS tests to revision e05bfd5e30ed662c2f8a353577003f8eed230180. - Update web-platform-tests to revision a052787dd5c069a340031011196b73affbd68cd9.
This commit is contained in:
Ms2ger
parent
fb4f421c8b
commit
296fa2512b
21852 changed files with 2080936 additions and 892894 deletions
8
tests/wpt/css-tests/css-masking-1_dev/html/blank.htm
Normal file
8
tests/wpt/css-tests/css-masking-1_dev/html/blank.htm
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>Blank document</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku">
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
</head><body>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
<body>
|
||||
|
||||
<h1>CSS Masking Level 1 CR Test Suite</h1>
|
||||
<h2>Clipping Paths (53 tests)</h2>
|
||||
<h2>Clipping Paths (72 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
|
|
@ -623,7 +623,40 @@
|
|||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s5.1">+</a>
|
||||
<a href="https://www.w3.org/TR/css-masking-1/#the-clip-path">5.1 Clipping Shape: the clip-path property</a></th></tr>
|
||||
<!-- 8 tests -->
|
||||
<!-- 27 tests -->
|
||||
<tr id="clip-path-borderbox-1a-5.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="clip-path-borderBox-1a.htm">clip-path-borderbox-1a</a></strong></td>
|
||||
<td><a href="reference/clip-path-geometryBox-1-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: clip-path: clip path border-box
|
||||
<ul class="assert">
|
||||
<li>Test checks whether clip-path border-box works correctly or not. This test is for clip-path applied to an HTML element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-path-borderbox-1b-5.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="clip-path-borderBox-1b.htm">clip-path-borderbox-1b</a></strong></td>
|
||||
<td><a href="reference/clip-path-geometryBox-1-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: clip-path: clip path border-box
|
||||
<ul class="assert">
|
||||
<li>Test checks whether clip-path border-box works correctly or not. This test is for clip-path applied to an SVG element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-path-borderbox-1c-5.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="clip-path-borderBox-1c.htm">clip-path-borderbox-1c</a></strong></td>
|
||||
<td><a href="reference/clip-path-geometryBox-1-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: clip-path: clip path border-box
|
||||
<ul class="assert">
|
||||
<li>Test checks whether clip-path border-box works correctly or not. This test is for clip-path applied to an SVG SVG element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-path-circle-001-5.1" class="">
|
||||
<td>
|
||||
<a href="clip-path-circle-001.htm">clip-path-circle-001</a></td>
|
||||
|
|
@ -712,6 +745,182 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-path-contentbox-1a-5.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="clip-path-contentBox-1a.htm">clip-path-contentbox-1a</a></strong></td>
|
||||
<td><a href="reference/clip-path-geometryBox-1-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: clip-path: clip path content-box
|
||||
<ul class="assert">
|
||||
<li>Test checks whether clip-path content-box works correctly or not. This test is for clip-path applied to an HTML element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-path-contentbox-1b-5.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="clip-path-contentBox-1b.htm">clip-path-contentbox-1b</a></strong></td>
|
||||
<td><a href="reference/clip-path-geometryBox-1-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: clip-path: clip path content-box
|
||||
<ul class="assert">
|
||||
<li>Test checks whether clip-path content-box works correctly or not. This test is for clip-path applied to an SVG element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-path-contentbox-1c-5.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="clip-path-contentBox-1c.htm">clip-path-contentbox-1c</a></strong></td>
|
||||
<td><a href="reference/clip-path-geometryBox-1-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: clip-path: clip path content-box
|
||||
<ul class="assert">
|
||||
<li>Test checks whether clip-path content-box works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-path-fillbox-1a-5.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="clip-path-fillBox-1a.htm">clip-path-fillbox-1a</a></strong></td>
|
||||
<td><a href="reference/clip-path-geometryBox-1-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: clip-path: clip path fill-box
|
||||
<ul class="assert">
|
||||
<li>Test checks whether clip-path fill-box works correctly or not. This test is for clip-path applied to an SVG SVG element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-path-geometrybox-2-5.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="clip-path-geometryBox-2.htm">clip-path-geometrybox-2</a></strong></td>
|
||||
<td><a href="reference/clip-path-geometryBox-2-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: clip-path: clip path margin-box
|
||||
<ul class="assert">
|
||||
<li>Test checks whether clip-path margin-box works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-path-localref-1-5.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="clip-path-localRef-1.htm">clip-path-localref-1</a></strong></td>
|
||||
<td><a href="reference/clip-path-localRef-1-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>Testcase for clip-path linked to local-ref URL
|
||||
<ul class="assert">
|
||||
<li>Test checks after changing base URL, whether fragment URLs works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-path-marginbox-1a-5.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="clip-path-marginBox-1a.htm">clip-path-marginbox-1a</a></strong></td>
|
||||
<td><a href="reference/clip-path-geometryBox-1-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: clip-path: clip path margin-box
|
||||
<ul class="assert">
|
||||
<li>Test checks whether clip-path margin-box works correctly or not. This test is for clip-path applied to an SVG element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-path-mix-blend-mode-1-5.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="clip-path-mix-blend-mode-1.htm">clip-path-mix-blend-mode-1</a></strong></td>
|
||||
<td><a href="reference/clip-path-mix-blend-mode-1-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: clip-path with mix-blend-mode
|
||||
<ul class="assert">
|
||||
<li>Test checks whether clip-path works with mix-blend-mode correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-path-paddingbox-1a-5.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="clip-path-paddingBox-1a.htm">clip-path-paddingbox-1a</a></strong></td>
|
||||
<td><a href="reference/clip-path-geometryBox-1-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: clip-path: clip path padding-box
|
||||
<ul class="assert">
|
||||
<li>Test checks whether clip-path padding-box works correctly or not. This test is for clip-path applied to an HTML element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-path-paddingbox-1b-5.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="clip-path-paddingBox-1b.htm">clip-path-paddingbox-1b</a></strong></td>
|
||||
<td><a href="reference/clip-path-geometryBox-1-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: clip-path: clip path padding-box
|
||||
<ul class="assert">
|
||||
<li>Test checks whether clip-path padding-box works correctly or not. This test is for clip-path applied to an SVG element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-path-paddingbox-1c-5.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="clip-path-paddingBox-1c.htm">clip-path-paddingbox-1c</a></strong></td>
|
||||
<td><a href="reference/clip-path-geometryBox-1-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: clip-path: clip path padding-box
|
||||
<ul class="assert">
|
||||
<li>Test checks whether clip-path padding-box works correctly or not. This test is for clip-path applied to an SVG SVG element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-path-strokebox-1a-5.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="clip-path-strokeBox-1a.htm">clip-path-strokebox-1a</a></strong></td>
|
||||
<td><a href="reference/clip-path-geometryBox-1-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: clip-path: clip path stroke-box
|
||||
<ul class="assert">
|
||||
<li>Test checks whether clip-path stroke-box works correctly or not. This test is for clip-path applied to an SVG SVG element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-path-strokebox-1b-5.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="clip-path-strokeBox-1b.htm">clip-path-strokebox-1b</a></strong></td>
|
||||
<td><a href="reference/clip-path-geometryBox-1-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: clip-path: clip path stroke-box
|
||||
<ul class="assert">
|
||||
<li>Test checks whether clip-path stroke-box works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-path-viewbox-1a-5.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="clip-path-viewBox-1a.htm">clip-path-viewbox-1a</a></strong></td>
|
||||
<td><a href="reference/clip-path-geometryBox-1-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: clip-path: clip path view-box
|
||||
<ul class="assert">
|
||||
<li>Test checks whether clip-path view-box works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-path-viewbox-1b-5.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="clip-path-viewBox-1b.htm">clip-path-viewbox-1b</a></strong></td>
|
||||
<td><a href="reference/clip-path-geometryBox-1-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: clip-path: clip path view-box with viewbox
|
||||
<ul class="assert">
|
||||
<li>Test checks whether clip-path view-box with viewbox works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-path-viewbox-1c-5.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="clip-path-viewBox-1c.htm">clip-path-viewbox-1c</a></strong></td>
|
||||
<td><a href="reference/clip-path-geometryBox-1-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: clip-path: clip path view-box
|
||||
<ul class="assert">
|
||||
<li>Test checks whether clip-path view-box works correctly or not. This test is for clip-path applied to an SVG SVG element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s5.1.#propdef-clip-path">
|
||||
<!-- 27 tests -->
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
<body>
|
||||
|
||||
<h1>CSS Masking Level 1 CR Test Suite</h1>
|
||||
<h2>Positioned Masks (49 tests)</h2>
|
||||
<h2>Positioned Masks (73 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s7.1">+</a>
|
||||
<a href="https://www.w3.org/TR/css-masking-1/#the-mask-image">7.1 Mask Image Source: the mask-image property</a></th></tr>
|
||||
<!-- 4 tests -->
|
||||
<!-- 23 tests -->
|
||||
<tr id="mask-image-1a-7.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-image-1a.htm">mask-image-1a</a></strong></td>
|
||||
|
|
@ -71,6 +71,17 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-image-1d-7.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-image-1d.htm">mask-image-1d</a></strong></td>
|
||||
<td><a href="reference/mask-image-1-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-image: mask layer image
|
||||
<ul class="assert">
|
||||
<li>Test checks whether treat unresolvable mask as no-mask for a SVG element embedded in HTML document.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-image-2-7.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-image-2.htm">mask-image-2</a></strong></td>
|
||||
|
|
@ -82,6 +93,204 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-image-3a-7.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-image-3a.htm">mask-image-3a</a></strong></td>
|
||||
<td><a href="reference/mask-image-3-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-image: multiple SVG masks
|
||||
<ul class="assert">
|
||||
<li>Test checks whether SVG mask as mask layer works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-image-3b-7.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-image-3b.htm">mask-image-3b</a></strong></td>
|
||||
<td><a href="reference/mask-image-3-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-image: interleave SVG mask with image mask
|
||||
<ul class="assert">
|
||||
<li>Test checks whether SVG mask and image as mask layer works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-image-3c-7.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-image-3c.htm">mask-image-3c</a></strong></td>
|
||||
<td><a href="reference/mask-image-3-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-image: interleave SVG mask with image mask
|
||||
<ul class="assert">
|
||||
<li>Test checks whether SVG mask and image as mask layer works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-image-3d-7.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-image-3d.htm">mask-image-3d</a></strong></td>
|
||||
<td><a href="reference/mask-image-3-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-image: interleave SVG mask with image mask
|
||||
<ul class="assert">
|
||||
<li>Test checks whether SVG mask and image as mask layer works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-image-3e-7.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-image-3e.htm">mask-image-3e</a></strong></td>
|
||||
<td><a href="reference/mask-image-3-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-image: interleave SVG mask with image mask
|
||||
<ul class="assert">
|
||||
<li>Test checks whether SVG mask and image as mask layer works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-image-3f-7.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-image-3f.htm">mask-image-3f</a></strong></td>
|
||||
<td><a href="reference/mask-image-3-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-image: SVG masks apply on border area
|
||||
<ul class="assert">
|
||||
<li>Test checks whether SVG mask layer can be positioned on box-shadow area correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-image-3g-7.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-image-3g.htm">mask-image-3g</a></strong></td>
|
||||
<td><a href="reference/mask-image-3-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-image: SVG masks apply on border area
|
||||
<ul class="assert">
|
||||
<li>Test checks whether apply transfrom to a SVG mask layer works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-image-3h-7.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-image-3h.htm">mask-image-3h</a></strong></td>
|
||||
<td><a href="reference/mask-image-3-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: clip-path in SVG mask
|
||||
<ul class="assert">
|
||||
<li>Test checks whether clip-path in SVG mask works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-image-3i-7.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-image-3i.htm">mask-image-3i</a></strong></td>
|
||||
<td><a href="reference/mask-image-3-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-image: interleave SVG mask with image mask
|
||||
<ul class="assert">
|
||||
<li>Test checks whether SVG mask and image as mask layer works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-image-4a-7.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-image-4a.htm">mask-image-4a</a></strong></td>
|
||||
<td><a href="blank.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-image: unresovlable mask url
|
||||
<ul class="assert">
|
||||
<li>Test checks non-existent url should be counted as an image layer of transparent black.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-image-4b-7.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-image-4b.htm">mask-image-4b</a></strong></td>
|
||||
<td><a href="blank.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-image: unresovlable mask url
|
||||
<ul class="assert">
|
||||
<li>Test checks a mask reference to a none-mask SVG element should be counted as an image layer of transparent black.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-image-5-7.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-image-5.htm">mask-image-5</a></strong></td>
|
||||
<td><a href="reference/mask-image-5-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-image: data url mask
|
||||
<ul class="assert">
|
||||
<li>Test checks handling data url mask correctly.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-image-6-7.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-image-6.htm">mask-image-6</a></strong></td>
|
||||
<td><a href="reference/mask-image-6-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask on inline element
|
||||
<ul class="assert">
|
||||
<li>Test checks whether mask on inline elemnt works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-opacity-1a-7.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-opacity-1a.htm">mask-opacity-1a</a></strong></td>
|
||||
<td><a href="reference/mask-opacity-1-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-image: mask with filter and opacity
|
||||
<ul class="assert">
|
||||
<li>Test checks whether apply opacity to masked element correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-opacity-1b-7.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-opacity-1b.htm">mask-opacity-1b</a></strong></td>
|
||||
<td><a href="reference/mask-opacity-1-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-image: mask with opacity
|
||||
<ul class="assert">
|
||||
<li>Test checks whether apply opacity to masked element correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-opacity-1c-7.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-opacity-1c.htm">mask-opacity-1c</a></strong></td>
|
||||
<td><a href="reference/mask-opacity-1-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-image: filter with opacity
|
||||
<ul class="assert">
|
||||
<li>Test checks whether apply opacity to masked element correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-opacity-1d-7.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-opacity-1d.htm">mask-opacity-1d</a></strong></td>
|
||||
<td><a href="reference/mask-opacity-1-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-image: mask with opacity
|
||||
<ul class="assert">
|
||||
<li>Test checks whether apply opacity to masked element correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-opacity-1e-7.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-opacity-1e.htm">mask-opacity-1e</a></strong></td>
|
||||
<td><a href="reference/mask-opacity-1-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-image: mask with opacity
|
||||
<ul class="assert">
|
||||
<li>Test checks whether apply opacity to masked element correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s7.1.#mask-layer-image">
|
||||
<!-- 0 tests -->
|
||||
|
|
@ -105,7 +314,7 @@
|
|||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.2.#propdef-mask-mode">
|
||||
<!-- 2 tests -->
|
||||
<!-- 3 tests -->
|
||||
<tr id="mask-mode-a-7.2.#propdef-mask-mode" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-mode-a.htm">mask-mode-a</a></strong></td>
|
||||
|
|
@ -128,6 +337,17 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-mode-to-mask-type-7.2.#propdef-mask-mode" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-mode-to-mask-type.htm">mask-mode-to-mask-type</a></strong></td>
|
||||
<td><a href="reference/mask-mode-to-mask-type-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-mode with vector image
|
||||
<ul class="assert">
|
||||
<li>Test checks the fallback logic between mask-mode and mask-type.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s7.2.#typedef-masking-mode">
|
||||
<!-- 0 tests -->
|
||||
|
|
@ -361,7 +581,7 @@
|
|||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s7.5">+</a>
|
||||
<a href="https://www.w3.org/TR/css-masking-1/#the-mask-clip">7.5 Masking Area: the mask-clip property</a></th></tr>
|
||||
<!-- 1 tests -->
|
||||
<!-- 2 tests -->
|
||||
<tr id="mask-clip-1-7.5" class="">
|
||||
<td>
|
||||
<a href="mask-clip-1.htm">mask-clip-1</a></td>
|
||||
|
|
@ -369,7 +589,18 @@
|
|||
<td></td>
|
||||
<td>CSS Masking: mask-clip: clip mask image
|
||||
<ul class="assert">
|
||||
<li>border-box, padding-box, and content-box values of mask-clip should clip to the appropriate boxes.</li>
|
||||
<li>border-box, padding-box, content-box and no-clip values of mask-clip should clip to the appropriate boxes.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-clip-2-7.5" class="">
|
||||
<td>
|
||||
<a href="mask-clip-2.htm">mask-clip-2</a></td>
|
||||
<td><a href="reference/mask-clip-2-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-clip: clip mask image
|
||||
<ul class="assert">
|
||||
<li>fill-box, stroke-box and view-box values of mask-clip should clip to the appropriate boxes.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -408,7 +639,7 @@
|
|||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s7.6">+</a>
|
||||
<a href="https://www.w3.org/TR/css-masking-1/#the-mask-origin">7.6 Positioning Area: the mask-origin property</a></th></tr>
|
||||
<!-- 2 tests -->
|
||||
<!-- 3 tests -->
|
||||
<tr id="mask-origin-1-7.6" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-origin-1.htm">mask-origin-1</a></strong></td>
|
||||
|
|
@ -431,6 +662,17 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-origin-3-7.6" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-origin-3.htm">mask-origin-3</a></strong></td>
|
||||
<td><a href="reference/mask-origin-3-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-origin: mask positioning area
|
||||
<ul class="assert">
|
||||
<li>Test checks whether setting mask position area works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s7.6.#mask-positioning-area">
|
||||
<!-- 0 tests -->
|
||||
|
|
@ -670,7 +912,7 @@
|
|||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s7.8">+</a>
|
||||
<a href="https://www.w3.org/TR/css-masking-1/#the-mask-composite">7.8 Compositing mask layers: the mask-composite property</a></th></tr>
|
||||
<!-- 4 tests -->
|
||||
<!-- 6 tests -->
|
||||
<tr id="mask-composite-1a-7.8" class="">
|
||||
<td>
|
||||
<a href="mask-composite-1a.htm">mask-composite-1a</a></td>
|
||||
|
|
@ -693,6 +935,17 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-composite-1c-7.8" class="">
|
||||
<td>
|
||||
<a href="mask-composite-1c.htm">mask-composite-1c</a></td>
|
||||
<td><a href="reference/mask-composite-1-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-composite: compose svg mask
|
||||
<ul class="assert">
|
||||
<li>Test checks that vector-mask-image can be composed correctly by different mask-composite value.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-composite-2a-7.8" class="">
|
||||
<td>
|
||||
<a href="mask-composite-2a.htm">mask-composite-2a</a></td>
|
||||
|
|
@ -715,6 +968,17 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-composite-2c-7.8" class="">
|
||||
<td>
|
||||
<a href="mask-composite-2c.htm">mask-composite-2c</a></td>
|
||||
<td><a href="reference/mask-composite-2-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-composite: compose SVG mask
|
||||
<ul class="assert">
|
||||
<li>Test checks that svg-mask can be composed correctly by different mask-composite value.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s7.8.#destination">
|
||||
<!-- 0 tests -->
|
||||
|
|
|
|||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: clip-path: clip path border-box</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku">
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-clip-path" rel="help">
|
||||
<link href="reference/clip-path-geometryBox-1-ref.htm" rel="match">
|
||||
<meta content="Test checks whether clip-path border-box works correctly or not. This test is for clip-path applied to an HTML element." name="assert">
|
||||
<style type="text/css">
|
||||
div {
|
||||
position: absolute;
|
||||
left: 50px;
|
||||
top: 50px;
|
||||
background-color: blue;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
padding: 10px;
|
||||
border: solid blue 25px;
|
||||
clip-path: circle(farthest-side) border-box;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: clip-path: clip path border-box</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku">
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-clip-path" rel="help">
|
||||
<link href="reference/clip-path-geometryBox-1-ref.htm" rel="match">
|
||||
<meta content="Test checks whether clip-path border-box works correctly or not. This test is for clip-path applied to an SVG element." name="assert">
|
||||
</head>
|
||||
<body>
|
||||
<svg width="200" style="position: absolute; left: 15px; top: 10px;" height="200">
|
||||
<rect width="100" clip-path="circle(50%) border-box" y="40" x="35" fill="blue" height="100"></rect>
|
||||
</svg>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: clip-path: clip path border-box</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku">
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-clip-path" rel="help">
|
||||
<link href="reference/clip-path-geometryBox-1-ref.htm" rel="match">
|
||||
<meta content="Test checks whether clip-path border-box works correctly or not. This test is for clip-path applied to an SVG SVG element." name="assert">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
position: absolute;
|
||||
left: 50px;
|
||||
top: 50px;
|
||||
background-color: blue;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
padding: 10px;
|
||||
border: solid blue 25px;
|
||||
clip-path: circle(farthest-side) border-box;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg width="200" height="200">
|
||||
<rect y="0" width="200" fill="blue" x="0" height="200"></rect>
|
||||
</svg>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: clip-path: clip path content-box</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku">
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-clip-path" rel="help">
|
||||
<link href="reference/clip-path-geometryBox-1-ref.htm" rel="match">
|
||||
<meta content="Test checks whether clip-path content-box works correctly or not. This test is for clip-path applied to an HTML element." name="assert">
|
||||
<style type="text/css">
|
||||
div {
|
||||
background-color: blue;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 40px;
|
||||
clip-path: circle(farthest-side) content-box;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: clip-path: clip path content-box</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku">
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-clip-path" rel="help">
|
||||
<link href="reference/clip-path-geometryBox-1-ref.htm" rel="match">
|
||||
<meta content="Test checks whether clip-path content-box works correctly or not. This test is for clip-path applied to an SVG element." name="assert">
|
||||
</head>
|
||||
<body>
|
||||
<svg width="200" style="position: absolute; left: 0px; top: 0px;" height="200">
|
||||
<rect width="100" clip-path="circle(50%) content-box" y="50" x="50" fill="blue" height="100"></rect>
|
||||
</svg>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: clip-path: clip path content-box</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku">
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-clip-path" rel="help">
|
||||
<link href="reference/clip-path-geometryBox-1-ref.htm" rel="match">
|
||||
<meta content="Test checks whether clip-path content-box works correctly or not." name="assert">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 40px;
|
||||
clip-path: circle(farthest-side) content-box;
|
||||
}
|
||||
</style></head>
|
||||
|
||||
<body>
|
||||
<svg width="200" height="200">
|
||||
<rect y="0" width="200" fill="blue" x="0" height="200"></rect>
|
||||
</svg>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: clip-path: clip path fill-box</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku">
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-clip-path" rel="help">
|
||||
<link href="reference/clip-path-geometryBox-1-ref.htm" rel="match">
|
||||
<meta content="Test checks whether clip-path fill-box works correctly or not. This test is for clip-path applied to an SVG SVG element." name="assert">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
position: absolute;
|
||||
left: 40px;
|
||||
top: 40px;
|
||||
background-color: blue;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
border: solid blue 25px;
|
||||
clip-path: circle(farthest-side) fill-box;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg width="200" height="200">
|
||||
<rect y="0" width="200" fill="blue" x="0" height="200">
|
||||
</rect></svg>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: clip-path: clip path margin-box</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku">
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-clip-path" rel="help">
|
||||
<link href="reference/clip-path-geometryBox-2-ref.htm" rel="match">
|
||||
<meta content="Test checks whether clip-path margin-box works correctly or not." name="assert">
|
||||
<style type="text/css">
|
||||
div {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 50px;
|
||||
clip-path: polygon(0% 75%, 50% 25%, 100% 75%) margin-box;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
|
||||
<base href="http://example.com">
|
||||
<meta charset="utf-8">
|
||||
<title>Testcase for clip-path linked to local-ref URL</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku">
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-clip-path" rel="help">
|
||||
<link href="reference/clip-path-localRef-1-ref.htm" rel="match">
|
||||
<meta content="Test checks after changing base URL, whether fragment URLs works correctly or not." name="assert">
|
||||
</head><body><svg width="0" height="0">
|
||||
<defs>
|
||||
<clipPath id="c1">
|
||||
<circle cy="110" cx="137" r="90"></circle>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
<style>
|
||||
div {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background-color: blue;
|
||||
clip-path: url(#c1);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: clip-path: clip path margin-box</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku">
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-clip-path" rel="help">
|
||||
<link href="reference/clip-path-geometryBox-1-ref.htm" rel="match">
|
||||
<meta content="Test checks whether clip-path margin-box works correctly or not. This test is for clip-path applied to an SVG element." name="assert">
|
||||
</head>
|
||||
<body>
|
||||
<svg width="200" style="position: absolute; left: 10px; top: 15px;" height="200">
|
||||
<rect width="100" clip-path="circle(50%) margin-box" y="35" x="40" fill="blue" height="100"></rect>
|
||||
</svg>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: clip-path with mix-blend-mode</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku">
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-clip-path" rel="help">
|
||||
<link href="reference/clip-path-mix-blend-mode-1-ref.htm" rel="match">
|
||||
<meta content="Test checks whether clip-path works with mix-blend-mode correctly or not." name="assert">
|
||||
<style type="text/css">
|
||||
div {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
div.foreground {
|
||||
background-color: rgb(255,0,255);
|
||||
clip-path: url(#top_left);
|
||||
z-index: 100;
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
|
||||
div.background {
|
||||
background-color: rgb(0,255,255);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="foreground"></div>
|
||||
<div class="background"></div>
|
||||
<svg width="0" height="0">
|
||||
<defs>
|
||||
<clipPath id="top_left">
|
||||
<rect y="0" width="50" height="50" x="0"></rect>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: clip-path: clip path padding-box</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku">
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-clip-path" rel="help">
|
||||
<link href="reference/clip-path-geometryBox-1-ref.htm" rel="match">
|
||||
<meta content="Test checks whether clip-path padding-box works correctly or not. This test is for clip-path applied to an HTML element." name="assert">
|
||||
<style type="text/css">
|
||||
div {
|
||||
position: absolute;
|
||||
left: 50px;
|
||||
top: 50px;
|
||||
background-color: blue;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
padding: 25px;
|
||||
clip-path: circle(farthest-side) padding-box;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: clip-path: clip path padding-box</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku">
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-clip-path" rel="help">
|
||||
<link href="reference/clip-path-geometryBox-1-ref.htm" rel="match">
|
||||
<meta content="Test checks whether clip-path padding-box works correctly or not. This test is for clip-path applied to an SVG element." name="assert">
|
||||
</head>
|
||||
<body>
|
||||
<svg width="200" style="position: absolute; left: 0px; top: 0px;" height="200">
|
||||
<rect width="100" clip-path="circle(50%) padding-box" y="50" x="50" fill="blue" height="100"></rect>
|
||||
</svg>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: clip-path: clip path padding-box</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku">
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-clip-path" rel="help">
|
||||
<link href="reference/clip-path-geometryBox-1-ref.htm" rel="match">
|
||||
<meta content="Test checks whether clip-path padding-box works correctly or not. This test is for clip-path applied to an SVG SVG element." name="assert">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
position: absolute;
|
||||
left: 50px;
|
||||
top: 50px;
|
||||
background-color: blue;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
padding: 25px;
|
||||
clip-path: circle(farthest-side) padding-box;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg width="200" height="200">
|
||||
<rect y="0" width="200" fill="blue" x="0" height="200"></rect>
|
||||
</svg>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: clip-path: clip path stroke-box</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku">
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-clip-path" rel="help">
|
||||
<link href="reference/clip-path-geometryBox-1-ref.htm" rel="match">
|
||||
<meta content="Test checks whether clip-path stroke-box works correctly or not. This test is for clip-path applied to an SVG SVG element." name="assert">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
position: absolute;
|
||||
left: 40px;
|
||||
top: 40px;
|
||||
background-color: blue;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
border: solid blue 25px;
|
||||
clip-path: circle(farthest-side) stroke-box;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg width="200" height="200">
|
||||
<rect y="0" width="200" fill="blue" x="0" height="200"></rect>
|
||||
</svg>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: clip-path: clip path stroke-box</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku">
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-clip-path" rel="help">
|
||||
<link href="reference/clip-path-geometryBox-1-ref.htm" rel="match">
|
||||
<meta content="Test checks whether clip-path stroke-box works correctly or not." name="assert">
|
||||
</head>
|
||||
<body>
|
||||
<svg width="200" style="position: absolute; left: 0px; top: 0px;" height="200">
|
||||
<rect clip-path="circle(50%) stroke-box" height="80" width="80" stroke="blue" y="60" x="60" stroke-width="20" fill="blue"></rect>
|
||||
</svg>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: clip-path: clip path view-box</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku">
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-clip-path" rel="help">
|
||||
<link href="reference/clip-path-geometryBox-1-ref.htm" rel="match">
|
||||
<meta content="Test checks whether clip-path view-box works correctly or not." name="assert">
|
||||
</head>
|
||||
<body>
|
||||
<svg width="200" style="position: absolute; left: 10px; top: 10px;" height="200">
|
||||
<rect width="135" clip-path="circle(25% at calc(50% - 10px) calc(50% - 10px)) view-box" y="20" x="20" fill="blue" height="135"></rect>
|
||||
</svg>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: clip-path: clip path view-box with viewbox</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku">
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-clip-path" rel="help">
|
||||
<link href="reference/clip-path-geometryBox-1-ref.htm" rel="match">
|
||||
<meta content="Test checks whether clip-path view-box with viewbox works correctly or not." name="assert">
|
||||
</head>
|
||||
<body>
|
||||
<svg viewBox="50 50 100 100" width="200" style="position: absolute; left: 10px; top: 10px;" preserveAspectRatio="none" height="200">
|
||||
<rect width="200" clip-path="circle(25% at calc(50% - 5px) calc(50% - 5px)) view-box" y="0" x="0" fill="blue" height="200"></rect>
|
||||
</svg>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: clip-path: clip path view-box</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku">
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-clip-path" rel="help">
|
||||
<link href="reference/clip-path-geometryBox-1-ref.htm" rel="match">
|
||||
<meta content="Test checks whether clip-path view-box works correctly or not. This test is for clip-path applied to an SVG SVG element." name="assert">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
position: absolute;
|
||||
left: 40px;
|
||||
top: 40px;
|
||||
background-color: blue;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
border: solid blue 25px;
|
||||
clip-path: circle(farthest-side) view-box;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg width="200" height="200">
|
||||
<rect y="0" width="200" fill="blue" x="0" height="200"></rect>
|
||||
</svg>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -6,9 +6,9 @@
|
|||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#the-mask-clip" rel="help">
|
||||
<link href="reference/mask-clip-1-ref.htm" rel="match">
|
||||
<meta content="border-box, padding-box, and content-box values of mask-clip should clip to the appropriate boxes." name="assert">
|
||||
<meta content="border-box, padding-box, content-box and no-clip values of mask-clip should clip to the appropriate boxes." name="assert">
|
||||
<style type="text/css">
|
||||
div {
|
||||
div.outer {
|
||||
/*
|
||||
* content box: 40 x 20
|
||||
* padding box: 52 x 38
|
||||
|
|
@ -46,12 +46,32 @@
|
|||
left: 210px;
|
||||
mask-clip: content-box;
|
||||
}
|
||||
|
||||
div.no-clip {
|
||||
background-color: yellow;
|
||||
left: 310px;
|
||||
mask-clip: no-clip;
|
||||
}
|
||||
|
||||
div.no-clip-inner {
|
||||
background-color: purple;
|
||||
position: absolute;
|
||||
/* allign with border area of the parent*/
|
||||
top: -8px;
|
||||
left: -6px;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer mask border"></div>
|
||||
<div class="outer mask padding"></div>
|
||||
<div class="outer mask content"></div>
|
||||
<div class="outer mask no-clip">
|
||||
<div class="no-clip-inner"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
49
tests/wpt/css-tests/css-masking-1_dev/html/mask-clip-2.htm
Normal file
49
tests/wpt/css-tests/css-masking-1_dev/html/mask-clip-2.htm
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-clip: clip mask image</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku">
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#the-mask-clip" rel="help">
|
||||
<link href="reference/mask-clip-2-ref.htm" rel="match">
|
||||
<meta content="fill-box, stroke-box and view-box values of mask-clip should clip to the appropriate boxes." name="assert">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
rect.mask {
|
||||
fill: blue;
|
||||
mask-origin: fill-box;
|
||||
mask-repeat: no-repeat;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
}
|
||||
|
||||
rect.view {
|
||||
mask-clip: view-box;
|
||||
}
|
||||
|
||||
rect.fill {
|
||||
mask-clip: fill-box;
|
||||
}
|
||||
|
||||
rect.stroke {
|
||||
mask-clip: stroke-box;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg viewBox="100 100 100 100" width="200" style="left: 10px;" preserveAspectRatio="none" height="200">
|
||||
<rect y="110" width="50" height="100" class="view mask" x="110"></rect>
|
||||
</svg>
|
||||
<svg width="200" style="left: 220px;" height="200">
|
||||
<rect y="50" width="150" height="150" class="fill mask" x="50"></rect>
|
||||
</svg>
|
||||
<svg width="200" style="left: 10px; top: 220px;" height="200">
|
||||
<rect width="100" stroke="green" y="50" x="50" stroke-width="20" class="stroke mask" height="100"></rect>
|
||||
</svg>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -25,9 +25,9 @@
|
|||
mask-composite: add;
|
||||
}
|
||||
|
||||
div.substract {
|
||||
div.subtract {
|
||||
left: 120px;
|
||||
mask-composite: substract;
|
||||
mask-composite: subtract;
|
||||
}
|
||||
|
||||
div.intersect {
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<div class="add"></div>
|
||||
<div class="substract"></div>
|
||||
<div class="subtract"></div>
|
||||
<div class="intersect"></div>
|
||||
<div class="exclude"></div>
|
||||
|
||||
|
|
|
|||
|
|
@ -25,9 +25,9 @@
|
|||
mask-composite: add;
|
||||
}
|
||||
|
||||
div.substract {
|
||||
div.subtract {
|
||||
left: 120px;
|
||||
mask-composite: substract;
|
||||
mask-composite: subtract;
|
||||
}
|
||||
|
||||
div.intersect {
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<div class="add"></div>
|
||||
<div class="substract"></div>
|
||||
<div class="subtract"></div>
|
||||
<div class="intersect"></div>
|
||||
<div class="exclude"></div>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-composite: compose svg mask</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku">
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#the-mask-composite" rel="help">
|
||||
<link href="reference/mask-composite-1-ref.htm" rel="match">
|
||||
<meta content="Test checks that vector-mask-image can be composed correctly by different mask-composite value." name="assert">
|
||||
</head><body><svg height="0">
|
||||
<mask y="0" width="100" height="100" id="rectMask" x="0">
|
||||
<rect y="50" width="100" style="stroke:none; fill: #ffffff" height="50" x="0"></rect>
|
||||
</mask>
|
||||
</svg>
|
||||
<style type="text/css">
|
||||
div {
|
||||
background-color: blue;
|
||||
position: absolute;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
top:10px;
|
||||
mask-image: url(#rectMask),
|
||||
url(#rectMask);
|
||||
}
|
||||
|
||||
div.add {
|
||||
left: 10px;
|
||||
mask-composite: add;
|
||||
}
|
||||
|
||||
div.subtract {
|
||||
left: 120px;
|
||||
mask-composite: subtract;
|
||||
}
|
||||
|
||||
div.intersect {
|
||||
left: 230px;
|
||||
mask-composite: intersect;
|
||||
}
|
||||
|
||||
div.exclude {
|
||||
left: 340px;
|
||||
mask-composite: exclude;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<div class="add"></div>
|
||||
<div class="subtract"></div>
|
||||
<div class="intersect"></div>
|
||||
<div class="exclude"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -25,9 +25,9 @@
|
|||
mask-composite: add;
|
||||
}
|
||||
|
||||
div.substract {
|
||||
div.subtract {
|
||||
left: 120px;
|
||||
mask-composite: substract;
|
||||
mask-composite: subtract;
|
||||
}
|
||||
|
||||
div.intersect {
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<div class="add"></div>
|
||||
<div class="substract"></div>
|
||||
<div class="subtract"></div>
|
||||
<div class="intersect"></div>
|
||||
<div class="exclude"></div>
|
||||
|
||||
|
|
|
|||
|
|
@ -25,9 +25,9 @@
|
|||
mask-composite: add;
|
||||
}
|
||||
|
||||
div.substract {
|
||||
div.subtract {
|
||||
left: 120px;
|
||||
mask-composite: substract;
|
||||
mask-composite: subtract;
|
||||
}
|
||||
|
||||
div.intersect {
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<div class="add"></div>
|
||||
<div class="substract"></div>
|
||||
<div class="subtract"></div>
|
||||
<div class="intersect"></div>
|
||||
<div class="exclude"></div>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-composite: compose SVG mask</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku">
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
<link href="http://www.w3.org/TR/css-masking-1/#the-mask-composite" rel="help">
|
||||
<link href="reference/mask-composite-2-ref.htm" rel="match">
|
||||
<meta content="Test checks that svg-mask can be composed correctly by different mask-composite value." name="assert">
|
||||
</head><body><svg height="0">
|
||||
<mask y="0" width="100" height="100" id="rectMask1" x="0">
|
||||
<rect y="50" width="100" style="stroke:none; fill: #ffffff" height="50" x="0"></rect>
|
||||
</mask>
|
||||
<mask y="0" width="100" height="100" id="rectMask2" x="0">
|
||||
<rect y="0" width="100" style="stroke:none; fill: #ffffff" height="50" x="0"></rect>
|
||||
</mask>
|
||||
</svg>
|
||||
<style type="text/css">
|
||||
div {
|
||||
background-color: blue;
|
||||
position: absolute;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
top:10px;
|
||||
mask-image: url(#rectMask1),
|
||||
url(#rectMask2);
|
||||
}
|
||||
|
||||
div.add {
|
||||
left: 10px;
|
||||
mask-composite: add;
|
||||
}
|
||||
|
||||
div.subtract {
|
||||
left: 120px;
|
||||
mask-composite: subtract;
|
||||
}
|
||||
|
||||
div.intersect {
|
||||
left: 230px;
|
||||
mask-composite: intersect;
|
||||
}
|
||||
|
||||
div.exclude {
|
||||
left: 340px;
|
||||
mask-composite: exclude;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<div class="add"></div>
|
||||
<div class="subtract"></div>
|
||||
<div class="intersect"></div>
|
||||
<div class="exclude"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
16
tests/wpt/css-tests/css-masking-1_dev/html/mask-image-1d.htm
Normal file
16
tests/wpt/css-tests/css-masking-1_dev/html/mask-image-1d.htm
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-image: mask layer image</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku">
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-mask-image" rel="help">
|
||||
<link href="reference/mask-image-1-ref.htm" rel="match">
|
||||
<meta content="Test checks whether treat unresolvable mask as no-mask for a SVG element embedded in HTML document." name="assert">
|
||||
</head>
|
||||
<body>
|
||||
<svg width="100" height="100">
|
||||
<rect width="100" y="0" x="0" fill="purple" mask="url(#foo)" height="50"></rect>
|
||||
</svg>
|
||||
|
||||
</body></html>
|
||||
33
tests/wpt/css-tests/css-masking-1_dev/html/mask-image-3a.htm
Normal file
33
tests/wpt/css-tests/css-masking-1_dev/html/mask-image-3a.htm
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-image: multiple SVG masks</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku">
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-mask-image" rel="help">
|
||||
<link href="reference/mask-image-3-ref.htm" rel="match">
|
||||
<meta content="Test checks whether SVG mask as mask layer works correctly or not." name="assert">
|
||||
</head><body><svg height="0">
|
||||
<mask y="0" width="1" height="1" id="mask1" x="0">
|
||||
<rect y="0" width="50" style="stroke:none; fill: #ffffff" height="50" x="0"></rect>
|
||||
</mask>
|
||||
<mask y="0" width="1" height="1" id="mask2" x="0">
|
||||
<circle style="stroke:none; fill: #ffffff" cx="50" r="25" cy="50"></circle>
|
||||
</mask>
|
||||
</svg>
|
||||
<style type="text/css">
|
||||
div {
|
||||
background-color: purple;
|
||||
mask-image: url(#mask1), url(#mask2);
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
<div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
32
tests/wpt/css-tests/css-masking-1_dev/html/mask-image-3b.htm
Normal file
32
tests/wpt/css-tests/css-masking-1_dev/html/mask-image-3b.htm
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-image: interleave SVG mask with image mask</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku">
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-mask-image" rel="help">
|
||||
<link href="reference/mask-image-3-ref.htm" rel="match">
|
||||
<meta content="Test checks whether SVG mask and image as mask layer works correctly or not." name="assert">
|
||||
</head><body><svg height="0">
|
||||
<mask y="0" width="1" height="1" id="mask1" x="0">
|
||||
<circle style="stroke:none; fill: #ffffff" cx="50" r="25" cy="50"></circle>
|
||||
</mask>
|
||||
</svg>
|
||||
<style type="text/css">
|
||||
div {
|
||||
background-color: purple;
|
||||
mask-image: url(support/50x50-opaque-blue.svg), url(#mask1);
|
||||
mask-repeat: no-repeat, repeat;
|
||||
mask-position: 0 0, 0 0;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
<div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
32
tests/wpt/css-tests/css-masking-1_dev/html/mask-image-3c.htm
Normal file
32
tests/wpt/css-tests/css-masking-1_dev/html/mask-image-3c.htm
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-image: interleave SVG mask with image mask</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku">
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-mask-image" rel="help">
|
||||
<link href="reference/mask-image-3-ref.htm" rel="match">
|
||||
<meta content="Test checks whether SVG mask and image as mask layer works correctly or not." name="assert">
|
||||
</head><body><svg height="0">
|
||||
<mask y="0" width="1" height="1" id="mask1" x="0">
|
||||
<circle style="stroke:none; fill: #ffffff" cx="50" r="25" cy="50"></circle>
|
||||
</mask>
|
||||
</svg>
|
||||
<style type="text/css">
|
||||
div {
|
||||
background-color: purple;
|
||||
mask-image: url(#mask1), url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: repeat-x, no-repeat;
|
||||
mask-position: 0 0, 0 0;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
<div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
32
tests/wpt/css-tests/css-masking-1_dev/html/mask-image-3d.htm
Normal file
32
tests/wpt/css-tests/css-masking-1_dev/html/mask-image-3d.htm
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-image: interleave SVG mask with image mask</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku">
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-mask-image" rel="help">
|
||||
<link href="reference/mask-image-3-ref.htm" rel="match">
|
||||
<meta content="Test checks whether SVG mask and image as mask layer works correctly or not." name="assert">
|
||||
</head><body><svg height="0">
|
||||
<mask y="10%" width="0.8" height="0.8" id="mask1" x="10%">
|
||||
<circle style="stroke:none; fill: #ffffff" cx="50" r="25" cy="50"></circle>
|
||||
</mask>
|
||||
</svg>
|
||||
<style type="text/css">
|
||||
div {
|
||||
background-color: purple;
|
||||
mask: url(#mask1), url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat, no-repeat;
|
||||
mask-position: 0 0, 0 0;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
<div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
42
tests/wpt/css-tests/css-masking-1_dev/html/mask-image-3e.htm
Normal file
42
tests/wpt/css-tests/css-masking-1_dev/html/mask-image-3e.htm
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-image: interleave SVG mask with image mask</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku">
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-mask-image" rel="help">
|
||||
<link href="reference/mask-image-3-ref.htm" rel="match">
|
||||
<meta content="Test checks whether SVG mask and image as mask layer works correctly or not." name="assert">
|
||||
</head><body><svg height="0">
|
||||
<mask y="0" width="1" height="1" id="mask1" x="0">
|
||||
<circle style="stroke:none; fill: #ffffff" cx="50" r="25" cy="50"></circle>
|
||||
</mask>
|
||||
</svg>
|
||||
<style type="text/css">
|
||||
div.outter {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
transform: translate(-10px, -10px);
|
||||
}
|
||||
div.inner {
|
||||
background-color: purple;
|
||||
mask-image: url(support/50x50-opaque-blue.svg), url(#mask1);
|
||||
mask-repeat: no-repeat, repeat;
|
||||
mask-position: 0 0, 0 0;
|
||||
/*mask: url(#mask1);*/
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
transform: translate(10px, 10px);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
<div class="outter">
|
||||
<div class="inner"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
35
tests/wpt/css-tests/css-masking-1_dev/html/mask-image-3f.htm
Normal file
35
tests/wpt/css-tests/css-masking-1_dev/html/mask-image-3f.htm
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-image: SVG masks apply on border area</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku">
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-mask-image" rel="help">
|
||||
<link href="reference/mask-image-3-ref.htm" rel="match">
|
||||
<meta content="Test checks whether SVG mask layer can be positioned on box-shadow area correctly or not." name="assert">
|
||||
</head><body><svg height="0">
|
||||
<mask width="300" y="-100" x="-100" maskUnits="userSpaceOnUse" id="mask1" height="300">
|
||||
<rect y="-100" width="50" style="stroke:none; fill: #ffffff" height="50" x="-100"></rect>
|
||||
</mask>
|
||||
<mask width="300" y="-100" x="-100" maskUnits="userSpaceOnUse" id="mask2" height="300">
|
||||
<circle style="stroke:none; fill: #ffffff" cx="-50" r="25" cy="-50"></circle>
|
||||
</mask>
|
||||
</svg>
|
||||
<style type="text/css">
|
||||
div {
|
||||
background-color: red;
|
||||
mask-image: url(#mask1), url(#mask2);
|
||||
box-shadow: 0 0 0 100px purple;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
left: 100px;
|
||||
top: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
46
tests/wpt/css-tests/css-masking-1_dev/html/mask-image-3g.htm
Normal file
46
tests/wpt/css-tests/css-masking-1_dev/html/mask-image-3g.htm
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-image: SVG masks apply on border area</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku">
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-mask-image" rel="help">
|
||||
<link href="reference/mask-image-3-ref.htm" rel="match">
|
||||
<meta content="Test checks whether apply transfrom to a SVG mask layer works correctly or not." name="assert">
|
||||
</head><body><svg height="0">
|
||||
<mask width="300" y="-100" x="-100" maskUnits="userSpaceOnUse" id="mask1" height="300">
|
||||
<rect y="-100" width="50" style="stroke:none; fill: #ffffff" height="50" x="-100"></rect>
|
||||
</mask>
|
||||
<mask width="300" y="-100" x="-100" maskUnits="userSpaceOnUse" id="mask2" height="300">
|
||||
<circle style="stroke:none; fill: #ffffff" cx="-50" r="25" cy="-50"></circle>
|
||||
</mask>
|
||||
</svg>
|
||||
<style type="text/css">
|
||||
div.outter {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
transform: translate(-10px, -20px);
|
||||
}
|
||||
div.inner {
|
||||
background-color: red;
|
||||
mask-image: url(#mask1), url(#mask2);
|
||||
mask-repeat: no-repeat, no-repeat;
|
||||
box-shadow: 0 0 0 100px purple;
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
left: 100px;
|
||||
top: 100px;
|
||||
transform: translate(10px, 20px);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<div class="outter">
|
||||
<div class="inner"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
33
tests/wpt/css-tests/css-masking-1_dev/html/mask-image-3h.htm
Normal file
33
tests/wpt/css-tests/css-masking-1_dev/html/mask-image-3h.htm
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: clip-path in SVG mask</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku">
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-mask-image" rel="help">
|
||||
<link href="reference/mask-image-3-ref.htm" rel="match">
|
||||
<meta content="Test checks whether clip-path in SVG mask works correctly or not." name="assert">
|
||||
</head><body><svg height="0">
|
||||
<mask y="0" width="1" height="1" id="mask1" x="0">
|
||||
<rect y="0" width="50" style="stroke:none; fill: #ffffff" height="50" x="0"></rect>
|
||||
</mask>
|
||||
<mask y="0" width="1" height="1" id="mask2" x="0">
|
||||
<rect width="50" style="stroke:none; fill: #ffffff" clip-path="circle(50% at 50% 50%)" y="25" x="25" height="50"></rect>
|
||||
</mask>
|
||||
</svg>
|
||||
<style type="text/css">
|
||||
div {
|
||||
background-color: purple;
|
||||
mask-image: url(#mask1), url(#mask2);
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
<div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
32
tests/wpt/css-tests/css-masking-1_dev/html/mask-image-3i.htm
Normal file
32
tests/wpt/css-tests/css-masking-1_dev/html/mask-image-3i.htm
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-image: interleave SVG mask with image mask</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku">
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-mask-image" rel="help">
|
||||
<link href="reference/mask-image-3-ref.htm" rel="match">
|
||||
<meta content="Test checks whether SVG mask and image as mask layer works correctly or not." name="assert">
|
||||
</head><body><svg height="0">
|
||||
<mask y="0" width="1" height="1" id="mask1" x="0">
|
||||
<circle style="stroke:none; fill: #ffffff" cx="50" r="25" cy="50"></circle>
|
||||
</mask>
|
||||
</svg>
|
||||
<style type="text/css">
|
||||
rect {
|
||||
fill: purple;
|
||||
mask-image: url(#mask1), url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat, no-repeat;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
<br>
|
||||
<svg width="100" height="100">
|
||||
<rect y="0" width="100" height="100" x="0"></rect>
|
||||
</svg>
|
||||
|
||||
|
||||
</body></html>
|
||||
26
tests/wpt/css-tests/css-masking-1_dev/html/mask-image-4a.htm
Normal file
26
tests/wpt/css-tests/css-masking-1_dev/html/mask-image-4a.htm
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-image: unresovlable mask url</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku">
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-mask-image" rel="help">
|
||||
<link href="blank.htm" rel="match">
|
||||
<meta content="Test checks non-existent url should be counted as an image layer of transparent black." name="assert">
|
||||
<style type="text/css">
|
||||
div {
|
||||
background-color: purple;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
div.mask-by-png {
|
||||
mask-image: url(non-existent.png);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="mask-by-png"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
31
tests/wpt/css-tests/css-masking-1_dev/html/mask-image-4b.htm
Normal file
31
tests/wpt/css-tests/css-masking-1_dev/html/mask-image-4b.htm
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-image: unresovlable mask url</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku">
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-mask-image" rel="help">
|
||||
<link href="blank.htm" rel="match">
|
||||
<meta content="Test checks a mask reference to a none-mask SVG element should be counted as an image layer of transparent black." name="assert">
|
||||
</head><body><svg height="0">
|
||||
<clipPath id="clip1">
|
||||
<circle cy="50" cx="50" r="25"></circle>
|
||||
</clipPath>
|
||||
</svg>
|
||||
<style type="text/css">
|
||||
div {
|
||||
background-color: purple;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
div.mask-by-reference {
|
||||
mask-image: url(#clip1);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<div class="mask-by-reference"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
26
tests/wpt/css-tests/css-masking-1_dev/html/mask-image-5.htm
Normal file
26
tests/wpt/css-tests/css-masking-1_dev/html/mask-image-5.htm
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-image: data url mask</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku">
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-mask-image" rel="help">
|
||||
<link href="reference/mask-image-5-ref.htm" rel="match">
|
||||
<meta content="Test checks handling data url mask correctly." name="assert">
|
||||
<style type="text/css">
|
||||
div {
|
||||
background-color: purple;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
div.mask-by-data-url {
|
||||
/* a 50x50 opaque blue rect */
|
||||
mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxyZWN0IHg9IjAiIHk9IjAiICB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9ImJsdWUiIGZpbGwtb3BhY2l0eT0iMSIvPgo8L3N2Zz4K");
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="mask-by-data-url">
|
||||
|
||||
|
||||
</div></body></html>
|
||||
31
tests/wpt/css-tests/css-masking-1_dev/html/mask-image-6.htm
Normal file
31
tests/wpt/css-tests/css-masking-1_dev/html/mask-image-6.htm
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask on inline element</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku">
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-mask-image" rel="help">
|
||||
<link href="reference/mask-image-6-ref.htm" rel="match">
|
||||
<meta content="Test checks whether mask on inline elemnt works correctly or not." name="assert">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
span {
|
||||
font-size: 100px;
|
||||
line-height: 100px;
|
||||
mask-image: url(support/transparent-100x50-blue-100x50.png);
|
||||
mask-position: center;
|
||||
mask-repeat: repeat;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<span>A B</span>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-mode with vector image</title>
|
||||
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#propdef-mask-mode" rel="help">
|
||||
<link href="reference/mask-mode-to-mask-type-ref.htm" rel="match">
|
||||
<meta content="Test checks the fallback logic between mask-mode and mask-type." name="assert">
|
||||
<style type="text/css">
|
||||
div {
|
||||
background-color: blue;
|
||||
position: absolute;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
div.match-luminance {
|
||||
left: 10px;
|
||||
mask-mode: match-source;
|
||||
mask-image: url("#svg-luminance");
|
||||
}
|
||||
|
||||
div.match-alpha {
|
||||
left: 120px;
|
||||
mask-mode: match-source;
|
||||
mask-image: url("#svg-alpha");
|
||||
}
|
||||
|
||||
div.luminance-luminance {
|
||||
top: 120px;
|
||||
left: 10px;
|
||||
mask-mode: luminance;
|
||||
mask-image: url("#svg-luminance");
|
||||
}
|
||||
|
||||
div.luminance-alpha {
|
||||
top: 120px;
|
||||
left: 120px;
|
||||
mask-mode: luminance;
|
||||
mask-image: url("#svg-alpha");
|
||||
}
|
||||
|
||||
div.alpha-luminance {
|
||||
top: 230px;
|
||||
left: 10px;
|
||||
mask-mode: alpha;
|
||||
mask-image: url("#svg-luminance");
|
||||
}
|
||||
|
||||
div.alpha-alpha {
|
||||
top: 230px;
|
||||
left: 120px;
|
||||
mask-mode: alpha;
|
||||
mask-image: url("#svg-alpha");
|
||||
}
|
||||
|
||||
#svg-luminance {
|
||||
mask-type: luminance;
|
||||
}
|
||||
|
||||
#svg-alpha {
|
||||
mask-type: alpha;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="match-luminance"></div>
|
||||
<div class="match-alpha"></div>
|
||||
<div class="luminance-luminance"></div>
|
||||
<div class="luminance-alpha"></div>
|
||||
<div class="alpha-luminance"></div>
|
||||
<div class="alpha-alpha"></div>
|
||||
<svg xmlns:xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<mask id="svg-luminance">
|
||||
<rect y="0" width="100%" fill="blue" x="0" height="100%"></rect>
|
||||
</mask>
|
||||
<mask id="svg-alpha">
|
||||
<rect y="0" width="100%" fill="blue" x="0" height="100%"></rect>
|
||||
</mask>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-image: mask with filter and opacity</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku">
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-mask-image" rel="help">
|
||||
<link href="reference/mask-opacity-1-ref.htm" rel="match">
|
||||
<meta content="Test checks whether apply opacity to masked element correctly or not." name="assert">
|
||||
<style type="text/css">
|
||||
div {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
background-color: rgb(255,255,0);
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
filter: invert(100%);
|
||||
mask-image: url(support/blue-100x50-transparent-100x50.png);
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-image: mask with opacity</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku">
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-mask-image" rel="help">
|
||||
<link href="reference/mask-opacity-1-ref.htm" rel="match">
|
||||
<meta content="Test checks whether apply opacity to masked element correctly or not." name="assert">
|
||||
</head><body><svg height="0">
|
||||
<mask y="0" width="100" height="100" id="myMask" x="0">
|
||||
<rect y="0" width="50" style="stroke:none; fill: #ffffff" height="50" x="0"></rect>
|
||||
</mask>
|
||||
</svg>
|
||||
<style type="text/css">
|
||||
div {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
background-color: rgb(0,0,255);
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
mask-image: url(support/blue-100x50-transparent-100x50.png);
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-image: filter with opacity</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku">
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-mask-image" rel="help">
|
||||
<link href="reference/mask-opacity-1-ref.htm" rel="match">
|
||||
<meta content="Test checks whether apply opacity to masked element correctly or not." name="assert">
|
||||
<style type="text/css">
|
||||
div {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 60px;
|
||||
background-color: rgb(255,255,0);
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
filter: invert(100%);
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-image: mask with opacity</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku">
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-mask-image" rel="help">
|
||||
<link href="reference/mask-opacity-1-ref.htm" rel="match">
|
||||
<meta content="Test checks whether apply opacity to masked element correctly or not." name="assert">
|
||||
</head><body><svg height="0">
|
||||
<mask y="0" width="100" height="100" id="myMask" x="0">
|
||||
<rect y="50" width="100" style="stroke:none; fill: #ffffff" height="50" x="0"></rect>
|
||||
</mask>
|
||||
</svg>
|
||||
<style type="text/css">
|
||||
div {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
background-color: rgb(0,0,255);
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
mask-image: url(#myMask), url(#myMask);
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-image: mask with opacity</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku">
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-mask-image" rel="help">
|
||||
<link href="reference/mask-opacity-1-ref.htm" rel="match">
|
||||
<meta content="Test checks whether apply opacity to masked element correctly or not." name="assert">
|
||||
<style type="text/css">
|
||||
#outter {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
mask-image: url(support/blue-100x50-transparent-100x50.png),
|
||||
url(support/blue-100x50-transparent-100x50.png);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
#inner {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
box-sizing:border-box;
|
||||
background-color: blue;
|
||||
border: 1px solid transparent;
|
||||
will-change: transform;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outter"><div id="inner"></div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
52
tests/wpt/css-tests/css-masking-1_dev/html/mask-origin-3.htm
Normal file
52
tests/wpt/css-tests/css-masking-1_dev/html/mask-origin-3.htm
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-origin: mask positioning area</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku">
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-mask-origin" rel="help">
|
||||
<link href="reference/mask-origin-3-ref.htm" rel="match">
|
||||
<meta content="Test checks whether setting mask position area works correctly or not." name="assert">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
rect.mask {
|
||||
fill: blue;
|
||||
mask-origin: fill-box;
|
||||
mask-clip: fill-box;
|
||||
mask-repeat: no-repeat;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
}
|
||||
|
||||
rect.view {
|
||||
mask-origin: view-box;
|
||||
mask-clip: view-box;
|
||||
}
|
||||
|
||||
rect.fill {
|
||||
mask-origin: fill-box;
|
||||
mask-clip: stroke-box;
|
||||
}
|
||||
|
||||
rect.stroke {
|
||||
mask-origin: stroke-box;
|
||||
mask-clip: stroke-box;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg viewBox="100 100 100 100" width="200" style="left: 10px;" preserveAspectRatio="none" height="200">
|
||||
<rect y="125" width="100" height="100" class="view mask" x="125"></rect>
|
||||
</svg>
|
||||
<svg width="200" style="left: 240px;" height="200">
|
||||
<rect width="80" stroke="green" y="50" x="50" stroke-width="20" class="fill mask" height="80"></rect>
|
||||
</svg>
|
||||
<svg width="200" style="left: 10px; top: 220px;" height="200">
|
||||
<rect width="80" stroke="green" y="50" x="70" stroke-width="20" class="stroke mask" height="80"></rect>
|
||||
</svg>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -20,6 +20,7 @@
|
|||
div.inner {
|
||||
background-color: purple;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-position: left top;
|
||||
}
|
||||
|
||||
#no-repeat {
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@
|
|||
div.inner {
|
||||
background-color: purple;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-position: left top;
|
||||
}
|
||||
|
||||
#space {
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@
|
|||
div.inner {
|
||||
background-color: purple;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-position: left top;
|
||||
}
|
||||
|
||||
#round {
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
background-color: purple;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: left top;
|
||||
mask-size: auto auto;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@
|
|||
background-color: purple;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: left top;
|
||||
mask-size: auto 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@
|
|||
background-color: purple;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: left top;
|
||||
mask-size: auto 15.625%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
background-color: purple;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: left top;
|
||||
mask-size: auto;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
background-color: purple;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: left top;
|
||||
mask-clip: border-box;
|
||||
mask-origin: border-box;
|
||||
mask-size: contain;
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
height: 88px;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: left top;
|
||||
mask-clip: padding-box;
|
||||
mask-origin: padding-box;
|
||||
mask-size: contain;
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
background-color: purple;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: left top;
|
||||
mask-size: contain;
|
||||
mask-position: 50% 50%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
background-color: purple;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: left top;
|
||||
mask-size: contain;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
background-color: purple;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: left top;
|
||||
mask-origin: content-box;
|
||||
mask-clip: content-box;
|
||||
mask-size: cover;
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
background-color: purple;
|
||||
mask-image: url(support/50x100-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: left top;
|
||||
mask-size: 32px auto;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
background-color: purple;
|
||||
mask-image: url(support/50x100-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: left top;
|
||||
mask-size: 32px 64px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
background-color: purple;
|
||||
mask-image: url(support/50x100-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: left top;
|
||||
mask-size: 16px 25%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
background-color: purple;
|
||||
mask-image: url(support/50x100-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: left top;
|
||||
mask-size: 32px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
background-color: purple;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: left top;
|
||||
mask-size: 50% auto;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
background-color: purple;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: left top;
|
||||
mask-size: 50% 32px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
background-color: purple;
|
||||
mask-image: url(support/transparent-100x50-blue-100x50.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: left top;
|
||||
mask-size: 100% 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
background-color: purple;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: left top;
|
||||
mask-size: 50% 25%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
background-color: purple;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: left top;
|
||||
mask-size: 50%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: clip-path: clip path geometry box</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku">
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
</head>
|
||||
<body>
|
||||
<svg width="200" style="position: absolute; left: 0px; top: 0px;" height="200">
|
||||
<circle cy="100" cx="100" r="50" fill="blue"></circle>
|
||||
</svg>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: clip-path: clip path geometry box</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku">
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
</head>
|
||||
<body>
|
||||
<svg width="200" style="position: absolute; left: 0px; top: 0px;" height="200">
|
||||
<polygon points="100,50 150,100 150,150 50,150 50,100" fill="blue"></polygon>
|
||||
</svg>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference for clip-path linked to local-ref URL</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku">
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
</head><body><svg width="0" height="0">
|
||||
<defs>
|
||||
<clipPath id="c1">
|
||||
<circle cy="110" cx="137" r="90"></circle>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
<style>
|
||||
div {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background-color: blue;
|
||||
clip-path: url(#c1);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS clip-path reference</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku">
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
<style type="text/css">
|
||||
div.foreground {
|
||||
position: absolute;
|
||||
background-color: rgb(0,0,255);
|
||||
z-index: 100;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
div.background {
|
||||
position: absolute;
|
||||
background-color: rgb(0,255,255);
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="foreground"></div>
|
||||
<div class="background"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -31,12 +31,20 @@
|
|||
width: 40px;
|
||||
height: 11px;
|
||||
}
|
||||
|
||||
div.no-clip {
|
||||
left: 310px;
|
||||
margin: 1px 4px;
|
||||
width: 100px;
|
||||
height: 25px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="color border"></div>
|
||||
<div class="color padding"></div>
|
||||
<div class="color content"></div>
|
||||
<div class="color no-clip"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS mask-clip reference</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku">
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg width="200" style="left: 10px;" height="200">
|
||||
<rect y="20" width="100" fill="blue" x="20" height="100"></rect>
|
||||
</svg>
|
||||
<svg width="200" style="left: 220px;" height="200">
|
||||
<rect y="50" width="50" fill="blue" x="50" height="50"></rect>
|
||||
</svg>
|
||||
<svg width="200" style="left: 10px; top: 220px;" height="200">
|
||||
<rect y="50" width="50" fill="green" x="50" height="50"></rect>
|
||||
<rect y="60" width="40" fill="blue" x="60" height="40"></rect>
|
||||
</svg>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
background-color: blue;
|
||||
}
|
||||
|
||||
div.substract {
|
||||
div.subtract {
|
||||
left: 120px;
|
||||
background-image: url(support/blue-100x50-transparent-100x50.svg);
|
||||
}
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<div class="add"></div>
|
||||
<div class="substract"></div>
|
||||
<div class="subtract"></div>
|
||||
<div class="exclude"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-image: multiple SVG masks</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku">
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
</head><body><svg height="0">
|
||||
<mask y="0" width="1" height="1" id="mask" x="0">
|
||||
<rect y="0" width="50" style="stroke:none; fill: #ffffff" height="50" x="0"></rect>
|
||||
<circle style="stroke:none; fill: #ffffff" cx="50" r="25" cy="50"></circle>
|
||||
</mask>
|
||||
</svg>
|
||||
<style type="text/css">
|
||||
div {
|
||||
background-color: purple;
|
||||
mask: url(#mask);
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
<div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-image: data url mask</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku">
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
<style type="text/css">
|
||||
div {
|
||||
background-color: purple;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
|
||||
|
||||
</div></body></html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask on inline element</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku">
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
font-size: 100px;
|
||||
line-height: 100px;
|
||||
}
|
||||
|
||||
div.mask-by-png {
|
||||
mask-image: url(support/transparent-100x50-blue-100x50.png);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="mask-by-png">A</div>
|
||||
<div class="mask-by-png">B</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS mask-mode reference</title>
|
||||
<link href="mailto:ethlin@mozilla.com" rel="author" title="Ethan Lin">
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
<style type="text/css">
|
||||
div {
|
||||
background-color: blue;
|
||||
position: absolute;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
div.match-luminance {
|
||||
left: 10px;
|
||||
background-image: url(support/blue-luminance-100x100.svg);
|
||||
}
|
||||
|
||||
div.match-alpha {
|
||||
left: 120px;
|
||||
background-image: url(support/blue-100x100.svg);
|
||||
}
|
||||
|
||||
div.luminance-luminance {
|
||||
top: 120px;
|
||||
left: 10px;
|
||||
background-image: url(support/blue-luminance-100x100.svg);
|
||||
}
|
||||
|
||||
div.luminance-alpha {
|
||||
top: 120px;
|
||||
left: 120px;
|
||||
background-image: url(support/blue-luminance-100x100.svg);
|
||||
}
|
||||
|
||||
div.alpha-luminance {
|
||||
top: 230px;
|
||||
left: 10px;
|
||||
background-image: url(support/blue-100x100.svg);
|
||||
}
|
||||
|
||||
div.alpha-alpha {
|
||||
top: 230px;
|
||||
left: 120px;
|
||||
background-image: url(support/blue-100x100.svg);
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="match-luminance"></div>
|
||||
<div class="match-alpha"></div>
|
||||
<div class="luminance-luminance"></div>
|
||||
<div class="luminance-alpha"></div>
|
||||
<div class="alpha-luminance"></div>
|
||||
<div class="alpha-alpha"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-image: mask with opacity</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku">
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
<style type="text/css">
|
||||
div {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 60px;
|
||||
background-color: rgba(0,0,255,0.5);
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-origin: mask positioning area</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku">
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg width="200" style="left: 10px;" height="200">
|
||||
<rect y="50" width="50" fill="blue" x="50" height="50"></rect>
|
||||
</svg>
|
||||
<svg width="200" style="left: 240px;" height="200">
|
||||
<rect y="50" width="50" fill="green" x="50" height="50"></rect>
|
||||
<rect y="60" width="40" fill="blue" x="60" height="40"></rect>
|
||||
</svg>
|
||||
<svg width="200" style="left: 10px; top: 220px;" height="200">
|
||||
<rect y="40" width="50" fill="green" x="60" height="50"></rect>
|
||||
<rect y="60" width="30" fill="blue" x="80" height="30"></rect>
|
||||
</svg>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -12,33 +12,37 @@
|
|||
border: 1px solid black;
|
||||
}
|
||||
|
||||
div.inner {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
.color {
|
||||
background-color: purple;
|
||||
}
|
||||
|
||||
#pos-top-left { left: 0; top: 0; }
|
||||
#pos-top-right { right: 0; top: 0; }
|
||||
#pos-bottom-left { left: 0; bottom: 0; }
|
||||
#pos-bottom-right { right: 0; bottom: 0; }
|
||||
#default {
|
||||
position: absolute;
|
||||
width: 50px; height: 50px;
|
||||
}
|
||||
|
||||
#repeat-x {
|
||||
position: absolute;
|
||||
width: 100%; height: 50px;
|
||||
}
|
||||
|
||||
#repeat-y {
|
||||
position: absolute;
|
||||
width: 50px; height: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer color"></div>
|
||||
<div class="outer">
|
||||
<div id="pos-top-left" class="inner"></div>
|
||||
<div id="pos-top-right" class="inner"></div>
|
||||
<div id="pos-bottom-left" class="inner"></div>
|
||||
<div id="pos-bottom-right" class="inner"></div>
|
||||
<div id="default" class="color"></div>
|
||||
</div>
|
||||
<div class="outer color"></div>
|
||||
<div class="outer">
|
||||
<div id="repeat-x" class="color"></div>
|
||||
</div>
|
||||
<div class="outer">
|
||||
<div id="pos-top-left" class="inner"></div>
|
||||
<div id="pos-top-right" class="inner"></div>
|
||||
</div>
|
||||
<div class="outer">
|
||||
<div id="pos-top-left" class="inner"></div>
|
||||
<div id="pos-bottom-left" class="inner"></div>
|
||||
<div id="repeat-y" class="color"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -120,6 +120,30 @@
|
|||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="clip-path-borderbox-1a" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: clip-path: clip path border-box">
|
||||
<a href="clip-path-borderBox-1a.htm">clip-path-borderbox-1a</a></td>
|
||||
<td><a href="reference/clip-path-geometryBox-1-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="clip-path-borderbox-1b" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: clip-path: clip path border-box">
|
||||
<a href="clip-path-borderBox-1b.htm">clip-path-borderbox-1b</a></td>
|
||||
<td><a href="reference/clip-path-geometryBox-1-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="clip-path-borderbox-1c" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: clip-path: clip path border-box">
|
||||
<a href="clip-path-borderBox-1c.htm">clip-path-borderbox-1c</a></td>
|
||||
<td><a href="reference/clip-path-geometryBox-1-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="clip-path-circle-001" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: Test clip-path property and circle function with absolute values">
|
||||
|
|
@ -184,6 +208,30 @@
|
|||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="clip-path-contentbox-1a" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: clip-path: clip path content-box">
|
||||
<a href="clip-path-contentBox-1a.htm">clip-path-contentbox-1a</a></td>
|
||||
<td><a href="reference/clip-path-geometryBox-1-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="clip-path-contentbox-1b" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: clip-path: clip path content-box">
|
||||
<a href="clip-path-contentBox-1b.htm">clip-path-contentbox-1b</a></td>
|
||||
<td><a href="reference/clip-path-geometryBox-1-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="clip-path-contentbox-1c" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: clip-path: clip path content-box">
|
||||
<a href="clip-path-contentBox-1c.htm">clip-path-contentbox-1c</a></td>
|
||||
<td><a href="reference/clip-path-geometryBox-1-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="clip-path-element-userspaceonuse-001" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: Test clip-path property and external clipPath reference with userSpaceOnUse - 1">
|
||||
|
|
@ -280,6 +328,70 @@
|
|||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="clip-path-fillbox-1a" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: clip-path: clip path fill-box">
|
||||
<a href="clip-path-fillBox-1a.htm">clip-path-fillbox-1a</a></td>
|
||||
<td><a href="reference/clip-path-geometryBox-1-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="clip-path-geometrybox-2" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: clip-path: clip path margin-box">
|
||||
<a href="clip-path-geometryBox-2.htm">clip-path-geometrybox-2</a></td>
|
||||
<td><a href="reference/clip-path-geometryBox-2-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="clip-path-localref-1" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="Testcase for clip-path linked to local-ref URL">
|
||||
<a href="clip-path-localRef-1.htm">clip-path-localref-1</a></td>
|
||||
<td><a href="reference/clip-path-localRef-1-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="clip-path-marginbox-1a" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: clip-path: clip path margin-box">
|
||||
<a href="clip-path-marginBox-1a.htm">clip-path-marginbox-1a</a></td>
|
||||
<td><a href="reference/clip-path-geometryBox-1-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="clip-path-mix-blend-mode-1" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: clip-path with mix-blend-mode">
|
||||
<a href="clip-path-mix-blend-mode-1.htm">clip-path-mix-blend-mode-1</a></td>
|
||||
<td><a href="reference/clip-path-mix-blend-mode-1-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="clip-path-paddingbox-1a" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: clip-path: clip path padding-box">
|
||||
<a href="clip-path-paddingBox-1a.htm">clip-path-paddingbox-1a</a></td>
|
||||
<td><a href="reference/clip-path-geometryBox-1-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="clip-path-paddingbox-1b" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: clip-path: clip path padding-box">
|
||||
<a href="clip-path-paddingBox-1b.htm">clip-path-paddingbox-1b</a></td>
|
||||
<td><a href="reference/clip-path-geometryBox-1-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="clip-path-paddingbox-1c" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: clip-path: clip path padding-box">
|
||||
<a href="clip-path-paddingBox-1c.htm">clip-path-paddingbox-1c</a></td>
|
||||
<td><a href="reference/clip-path-geometryBox-1-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="clip-path-polygon-001" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: Test clip-path property and polygon function with absolute values">
|
||||
|
|
@ -384,6 +496,46 @@
|
|||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="clip-path-strokebox-1a" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: clip-path: clip path stroke-box">
|
||||
<a href="clip-path-strokeBox-1a.htm">clip-path-strokebox-1a</a></td>
|
||||
<td><a href="reference/clip-path-geometryBox-1-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="clip-path-strokebox-1b" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: clip-path: clip path stroke-box">
|
||||
<a href="clip-path-strokeBox-1b.htm">clip-path-strokebox-1b</a></td>
|
||||
<td><a href="reference/clip-path-geometryBox-1-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="clip-path-viewbox-1a" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: clip-path: clip path view-box">
|
||||
<a href="clip-path-viewBox-1a.htm">clip-path-viewbox-1a</a></td>
|
||||
<td><a href="reference/clip-path-geometryBox-1-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="clip-path-viewbox-1b" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: clip-path: clip path view-box with viewbox">
|
||||
<a href="clip-path-viewBox-1b.htm">clip-path-viewbox-1b</a></td>
|
||||
<td><a href="reference/clip-path-geometryBox-1-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="clip-path-viewbox-1c" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: clip-path: clip path view-box">
|
||||
<a href="clip-path-viewBox-1c.htm">clip-path-viewbox-1c</a></td>
|
||||
<td><a href="reference/clip-path-geometryBox-1-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="clip-rect-auto-001" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: Test clip property with rect function and auto values clip to border box - 1">
|
||||
|
|
@ -488,6 +640,14 @@
|
|||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-clip-2" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-clip: clip mask image">
|
||||
<a href="mask-clip-2.htm">mask-clip-2</a></td>
|
||||
<td><a href="reference/mask-clip-2-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-composite-1a" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-composite: compose vector image">
|
||||
|
|
@ -504,6 +664,14 @@
|
|||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-composite-1c" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-composite: compose svg mask">
|
||||
<a href="mask-composite-1c.htm">mask-composite-1c</a></td>
|
||||
<td><a href="reference/mask-composite-1-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-composite-2a" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-composite: compose vector image">
|
||||
|
|
@ -520,6 +688,14 @@
|
|||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-composite-2c" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-composite: compose SVG mask">
|
||||
<a href="mask-composite-2c.htm">mask-composite-2c</a></td>
|
||||
<td><a href="reference/mask-composite-2-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-image-1a" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-image: mask layer image">
|
||||
|
|
@ -544,6 +720,14 @@
|
|||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-image-1d" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-image: mask layer image">
|
||||
<a href="mask-image-1d.htm">mask-image-1d</a></td>
|
||||
<td><a href="reference/mask-image-1-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-image-2" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-image: mask layer image">
|
||||
|
|
@ -552,6 +736,110 @@
|
|||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-image-3a" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-image: multiple SVG masks">
|
||||
<a href="mask-image-3a.htm">mask-image-3a</a></td>
|
||||
<td><a href="reference/mask-image-3-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-image-3b" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-image: interleave SVG mask with image mask">
|
||||
<a href="mask-image-3b.htm">mask-image-3b</a></td>
|
||||
<td><a href="reference/mask-image-3-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-image-3c" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-image: interleave SVG mask with image mask">
|
||||
<a href="mask-image-3c.htm">mask-image-3c</a></td>
|
||||
<td><a href="reference/mask-image-3-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-image-3d" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-image: interleave SVG mask with image mask">
|
||||
<a href="mask-image-3d.htm">mask-image-3d</a></td>
|
||||
<td><a href="reference/mask-image-3-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-image-3e" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-image: interleave SVG mask with image mask">
|
||||
<a href="mask-image-3e.htm">mask-image-3e</a></td>
|
||||
<td><a href="reference/mask-image-3-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-image-3f" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-image: SVG masks apply on border area">
|
||||
<a href="mask-image-3f.htm">mask-image-3f</a></td>
|
||||
<td><a href="reference/mask-image-3-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-image-3g" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-image: SVG masks apply on border area">
|
||||
<a href="mask-image-3g.htm">mask-image-3g</a></td>
|
||||
<td><a href="reference/mask-image-3-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-image-3h" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: clip-path in SVG mask">
|
||||
<a href="mask-image-3h.htm">mask-image-3h</a></td>
|
||||
<td><a href="reference/mask-image-3-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-image-3i" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-image: interleave SVG mask with image mask">
|
||||
<a href="mask-image-3i.htm">mask-image-3i</a></td>
|
||||
<td><a href="reference/mask-image-3-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-image-4a" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-image: unresovlable mask url">
|
||||
<a href="mask-image-4a.htm">mask-image-4a</a></td>
|
||||
<td><a href="blank.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-image-4b" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-image: unresovlable mask url">
|
||||
<a href="mask-image-4b.htm">mask-image-4b</a></td>
|
||||
<td><a href="blank.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-image-5" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-image: data url mask">
|
||||
<a href="mask-image-5.htm">mask-image-5</a></td>
|
||||
<td><a href="reference/mask-image-5-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-image-6" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask on inline element">
|
||||
<a href="mask-image-6.htm">mask-image-6</a></td>
|
||||
<td><a href="reference/mask-image-6-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-mode-a" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-mode with vector image">
|
||||
|
|
@ -568,6 +856,54 @@
|
|||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-mode-to-mask-type" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-mode with vector image">
|
||||
<a href="mask-mode-to-mask-type.htm">mask-mode-to-mask-type</a></td>
|
||||
<td><a href="reference/mask-mode-to-mask-type-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-opacity-1a" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-image: mask with filter and opacity">
|
||||
<a href="mask-opacity-1a.htm">mask-opacity-1a</a></td>
|
||||
<td><a href="reference/mask-opacity-1-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-opacity-1b" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-image: mask with opacity">
|
||||
<a href="mask-opacity-1b.htm">mask-opacity-1b</a></td>
|
||||
<td><a href="reference/mask-opacity-1-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-opacity-1c" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-image: filter with opacity">
|
||||
<a href="mask-opacity-1c.htm">mask-opacity-1c</a></td>
|
||||
<td><a href="reference/mask-opacity-1-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-opacity-1d" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-image: mask with opacity">
|
||||
<a href="mask-opacity-1d.htm">mask-opacity-1d</a></td>
|
||||
<td><a href="reference/mask-opacity-1-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-opacity-1e" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-image: mask with opacity">
|
||||
<a href="mask-opacity-1e.htm">mask-opacity-1e</a></td>
|
||||
<td><a href="reference/mask-opacity-1-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-origin-1" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-origin: mask positioning area">
|
||||
|
|
@ -584,6 +920,14 @@
|
|||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-origin-3" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-origin: mask positioning area">
|
||||
<a href="mask-origin-3.htm">mask-origin-3</a></td>
|
||||
<td><a href="reference/mask-origin-3-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-position-1a" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-position: mask positioning">
|
||||
|
|
|
|||
|
|
@ -11,6 +11,9 @@ clip-not-absolute-positioned-001.htm == reference/clip-no-clipping-ref.htm
|
|||
clip-not-absolute-positioned-002.htm == reference/clip-no-clipping-ref.htm
|
||||
clip-not-absolute-positioned-003.htm == reference/clip-no-clipping-ref.htm
|
||||
clip-not-absolute-positioned-004.htm == reference/clip-no-clipping-ref.htm
|
||||
clip-path-borderBox-1a.htm == reference/clip-path-geometryBox-1-ref.htm
|
||||
clip-path-borderBox-1b.htm == reference/clip-path-geometryBox-1-ref.htm
|
||||
clip-path-borderBox-1c.htm == reference/clip-path-geometryBox-1-ref.htm
|
||||
clip-path-circle-001.htm == reference/clip-path-circle-ref.htm
|
||||
clip-path-circle-002.htm == reference/clip-path-circle-ref.htm
|
||||
clip-path-circle-003.htm == reference/clip-path-circle-ref.htm
|
||||
|
|
@ -19,6 +22,9 @@ clip-path-circle-005.htm == reference/clip-path-circle-ref.htm
|
|||
clip-path-circle-006.htm == reference/clip-path-circle-ref.htm
|
||||
clip-path-circle-007.htm == reference/clip-path-circle-2-ref.htm
|
||||
clip-path-circle-008.htm == reference/clip-path-circle-3-ref.htm
|
||||
clip-path-contentBox-1a.htm == reference/clip-path-geometryBox-1-ref.htm
|
||||
clip-path-contentBox-1b.htm == reference/clip-path-geometryBox-1-ref.htm
|
||||
clip-path-contentBox-1c.htm == reference/clip-path-geometryBox-1-ref.htm
|
||||
clip-path-element-userSpaceOnUse-001.htm == reference/clip-path-rectangle-ref.htm
|
||||
clip-path-element-userSpaceOnUse-002.htm == reference/clip-path-rectangle-ref.htm
|
||||
clip-path-element-userSpaceOnUse-003.htm == reference/clip-path-ref-right-green-ref.htm
|
||||
|
|
@ -31,6 +37,14 @@ clip-path-ellipse-005.htm == reference/clip-path-ellipse-ref.htm
|
|||
clip-path-ellipse-006.htm == reference/clip-path-circle-ref.htm
|
||||
clip-path-ellipse-007.htm == reference/clip-path-ellipse-ref.htm
|
||||
clip-path-ellipse-008.htm == reference/clip-path-ellipse-ref.htm
|
||||
clip-path-fillBox-1a.htm == reference/clip-path-geometryBox-1-ref.htm
|
||||
clip-path-geometryBox-2.htm == reference/clip-path-geometryBox-2-ref.htm
|
||||
clip-path-localRef-1.htm == reference/clip-path-localRef-1-ref.htm
|
||||
clip-path-marginBox-1a.htm == reference/clip-path-geometryBox-1-ref.htm
|
||||
clip-path-mix-blend-mode-1.htm == reference/clip-path-mix-blend-mode-1-ref.htm
|
||||
clip-path-paddingBox-1a.htm == reference/clip-path-geometryBox-1-ref.htm
|
||||
clip-path-paddingBox-1b.htm == reference/clip-path-geometryBox-1-ref.htm
|
||||
clip-path-paddingBox-1c.htm == reference/clip-path-geometryBox-1-ref.htm
|
||||
clip-path-polygon-001.htm == reference/clip-path-rectangle-ref.htm
|
||||
clip-path-polygon-002.htm == reference/clip-path-rectangle-ref.htm
|
||||
clip-path-polygon-003.htm == reference/clip-path-rectangle-ref.htm
|
||||
|
|
@ -44,6 +58,11 @@ clip-path-polygon-010.htm == reference/clip-path-stripes-001-ref.htm
|
|||
clip-path-polygon-011.htm == reference/clip-path-stripes-001-ref.htm
|
||||
clip-path-polygon-012.htm == reference/clip-path-stripes-001-ref.htm
|
||||
clip-path-polygon-013.htm == reference/clip-path-stripes-003-ref.htm
|
||||
clip-path-strokeBox-1a.htm == reference/clip-path-geometryBox-1-ref.htm
|
||||
clip-path-strokeBox-1b.htm == reference/clip-path-geometryBox-1-ref.htm
|
||||
clip-path-viewBox-1a.htm == reference/clip-path-geometryBox-1-ref.htm
|
||||
clip-path-viewBox-1b.htm == reference/clip-path-geometryBox-1-ref.htm
|
||||
clip-path-viewBox-1c.htm == reference/clip-path-geometryBox-1-ref.htm
|
||||
clip-rect-auto-001.htm == reference/clip-overflow-hidden-ref.htm
|
||||
clip-rect-auto-002.htm == reference/clip-no-clipping-ref.htm
|
||||
clip-rect-auto-003.htm == reference/clip-rect-top-ref.htm
|
||||
|
|
@ -57,18 +76,42 @@ clip-rect-comma-004.htm == reference/clip-no-clipping-ref.htm
|
|||
clip-rule-001.htm == reference/clip-rule-rectangle-border-ref.htm
|
||||
clip-rule-002.htm == reference/clip-rule-rectangle-border-ref.htm
|
||||
mask-clip-1.htm == reference/mask-clip-1-ref.htm
|
||||
mask-clip-2.htm == reference/mask-clip-2-ref.htm
|
||||
mask-composite-1a.htm == reference/mask-composite-1-ref.htm
|
||||
mask-composite-1b.htm == reference/mask-composite-1-ref.htm
|
||||
mask-composite-1c.htm == reference/mask-composite-1-ref.htm
|
||||
mask-composite-2a.htm == reference/mask-composite-2-ref.htm
|
||||
mask-composite-2b.htm == reference/mask-composite-2-ref.htm
|
||||
mask-composite-2c.htm == reference/mask-composite-2-ref.htm
|
||||
mask-image-1a.htm == reference/mask-image-1-ref.htm
|
||||
mask-image-1b.htm == reference/mask-image-1-ref.htm
|
||||
mask-image-1c.htm == reference/mask-image-1-ref.htm
|
||||
mask-image-1d.htm == reference/mask-image-1-ref.htm
|
||||
mask-image-2.htm == reference/mask-image-2-ref.htm
|
||||
mask-image-3a.htm == reference/mask-image-3-ref.htm
|
||||
mask-image-3b.htm == reference/mask-image-3-ref.htm
|
||||
mask-image-3c.htm == reference/mask-image-3-ref.htm
|
||||
mask-image-3d.htm == reference/mask-image-3-ref.htm
|
||||
mask-image-3e.htm == reference/mask-image-3-ref.htm
|
||||
mask-image-3f.htm == reference/mask-image-3-ref.htm
|
||||
mask-image-3g.htm == reference/mask-image-3-ref.htm
|
||||
mask-image-3h.htm == reference/mask-image-3-ref.htm
|
||||
mask-image-3i.htm == reference/mask-image-3-ref.htm
|
||||
mask-image-4a.htm == blank.htm
|
||||
mask-image-4b.htm == blank.htm
|
||||
mask-image-5.htm == reference/mask-image-5-ref.htm
|
||||
mask-image-6.htm == reference/mask-image-6-ref.htm
|
||||
mask-mode-a.htm == reference/mask-mode-ref.htm
|
||||
mask-mode-b.htm == reference/mask-mode-ref.htm
|
||||
mask-mode-to-mask-type.htm == reference/mask-mode-to-mask-type-ref.htm
|
||||
mask-opacity-1a.htm == reference/mask-opacity-1-ref.htm
|
||||
mask-opacity-1b.htm == reference/mask-opacity-1-ref.htm
|
||||
mask-opacity-1c.htm == reference/mask-opacity-1-ref.htm
|
||||
mask-opacity-1d.htm == reference/mask-opacity-1-ref.htm
|
||||
mask-opacity-1e.htm == reference/mask-opacity-1-ref.htm
|
||||
mask-origin-1.htm == reference/mask-origin-1-ref.htm
|
||||
mask-origin-2.htm == reference/mask-origin-2-ref.htm
|
||||
mask-origin-3.htm == reference/mask-origin-3-ref.htm
|
||||
mask-position-1a.htm == reference/mask-position-1-ref.htm
|
||||
mask-position-1b.htm == reference/mask-position-1-ref.htm
|
||||
mask-position-1c.htm == reference/mask-position-1-ref.htm
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
<tbody id="s5">
|
||||
<tr><th><a href="chapter-5.htm">Chapter 5 -
|
||||
Clipping Paths</a></th>
|
||||
<td>(53 Tests)</td></tr>
|
||||
<td>(72 Tests)</td></tr>
|
||||
</tbody>
|
||||
<tbody id="s6">
|
||||
<tr><th><a href="chapter-6.htm">Chapter 6 -
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
<tbody id="s7">
|
||||
<tr><th><a href="chapter-7.htm">Chapter 7 -
|
||||
Positioned Masks</a></th>
|
||||
<td>(49 Tests)</td></tr>
|
||||
<td>(73 Tests)</td></tr>
|
||||
</tbody>
|
||||
<tbody id="s8">
|
||||
<tr><th><a href="chapter-8.htm">Chapter 8 -
|
||||
|
|
|
|||
|
|
@ -27,6 +27,12 @@ html/clip-not-absolute-positioned-003.htm 80b26530bb6e33ba2315e02ad4917fd3f4ddb5
|
|||
xhtml1/clip-not-absolute-positioned-003.xht 80b26530bb6e33ba2315e02ad4917fd3f4ddb5b6 ?
|
||||
html/clip-not-absolute-positioned-004.htm 7f2d07caa51146f7f6fe33880a518a5cfeed73a3 ?
|
||||
xhtml1/clip-not-absolute-positioned-004.xht 7f2d07caa51146f7f6fe33880a518a5cfeed73a3 ?
|
||||
html/clip-path-borderbox-1a.htm ba08d526edf9fdfcf690470542b02b466cccae86 ?
|
||||
xhtml1/clip-path-borderbox-1a.xht ba08d526edf9fdfcf690470542b02b466cccae86 ?
|
||||
html/clip-path-borderbox-1b.htm 123937933639bc46471132ba671822a2107314e8 ?
|
||||
xhtml1/clip-path-borderbox-1b.xht 123937933639bc46471132ba671822a2107314e8 ?
|
||||
html/clip-path-borderbox-1c.htm d2037fce1599ab9f19b27d4f1b31414f82a4d9c8 ?
|
||||
xhtml1/clip-path-borderbox-1c.xht d2037fce1599ab9f19b27d4f1b31414f82a4d9c8 ?
|
||||
html/clip-path-circle-001.htm 6551513b2e9c688ba790a5034cf56375b251c2c8 ?
|
||||
xhtml1/clip-path-circle-001.xht 6551513b2e9c688ba790a5034cf56375b251c2c8 ?
|
||||
html/clip-path-circle-002.htm 5f834cbdfb22a1b7ead2a6601aa031c9b6e1b74b ?
|
||||
|
|
@ -43,6 +49,12 @@ html/clip-path-circle-007.htm 84a1adff0763b0c5793d4a7910f66481747b961b ?
|
|||
xhtml1/clip-path-circle-007.xht 84a1adff0763b0c5793d4a7910f66481747b961b ?
|
||||
html/clip-path-circle-008.htm 1e853c7eb2dd8220110fd26fa80e079587244fd9 ?
|
||||
xhtml1/clip-path-circle-008.xht 1e853c7eb2dd8220110fd26fa80e079587244fd9 ?
|
||||
html/clip-path-contentbox-1a.htm f54065cc3c55ab5479083639a4c662b886a7f464 ?
|
||||
xhtml1/clip-path-contentbox-1a.xht f54065cc3c55ab5479083639a4c662b886a7f464 ?
|
||||
html/clip-path-contentbox-1b.htm 8fac3d852ea251af25d779e44baf2303f5ac6e62 ?
|
||||
xhtml1/clip-path-contentbox-1b.xht 8fac3d852ea251af25d779e44baf2303f5ac6e62 ?
|
||||
html/clip-path-contentbox-1c.htm c29a8067ffd7c08de6c4b955ca0bf517b7fe71e3 ?
|
||||
xhtml1/clip-path-contentbox-1c.xht c29a8067ffd7c08de6c4b955ca0bf517b7fe71e3 ?
|
||||
html/clip-path-element-userspaceonuse-001.htm 675bc45a4da73f355ae54d1b371bc680e4d2e72e ?
|
||||
xhtml1/clip-path-element-userspaceonuse-001.xht 675bc45a4da73f355ae54d1b371bc680e4d2e72e ?
|
||||
html/clip-path-element-userspaceonuse-002.htm 26e3cc0e8acd806489c4731cf5a284621884efe6 ?
|
||||
|
|
@ -67,6 +79,22 @@ html/clip-path-ellipse-007.htm b36748b51ddf5bdcb7d74b184c0c4160485e44cc ?
|
|||
xhtml1/clip-path-ellipse-007.xht b36748b51ddf5bdcb7d74b184c0c4160485e44cc ?
|
||||
html/clip-path-ellipse-008.htm e1bc5feb5b0e8a7234ef94a33d8521d8e60ad245 ?
|
||||
xhtml1/clip-path-ellipse-008.xht e1bc5feb5b0e8a7234ef94a33d8521d8e60ad245 ?
|
||||
html/clip-path-fillbox-1a.htm 0c09b0b096ce8684fefb957bb677e6439b924af0 ?
|
||||
xhtml1/clip-path-fillbox-1a.xht 0c09b0b096ce8684fefb957bb677e6439b924af0 ?
|
||||
html/clip-path-geometrybox-2.htm ba4c300840508e50ed00d8c61a13288f3c33f140 ?
|
||||
xhtml1/clip-path-geometrybox-2.xht ba4c300840508e50ed00d8c61a13288f3c33f140 ?
|
||||
html/clip-path-localref-1.htm 343133882e568359dec92a66681d2a845888f514 ?
|
||||
xhtml1/clip-path-localref-1.xht 343133882e568359dec92a66681d2a845888f514 ?
|
||||
html/clip-path-marginbox-1a.htm a7860985e875cf159e5dfbd3f197d874868a28b5 ?
|
||||
xhtml1/clip-path-marginbox-1a.xht a7860985e875cf159e5dfbd3f197d874868a28b5 ?
|
||||
html/clip-path-mix-blend-mode-1.htm 10ba39a159c6833550608890f06baed0e80022b7 ?
|
||||
xhtml1/clip-path-mix-blend-mode-1.xht 10ba39a159c6833550608890f06baed0e80022b7 ?
|
||||
html/clip-path-paddingbox-1a.htm 26cd49a5e7fbb4d4fe76415552ae5e9b8be97731 ?
|
||||
xhtml1/clip-path-paddingbox-1a.xht 26cd49a5e7fbb4d4fe76415552ae5e9b8be97731 ?
|
||||
html/clip-path-paddingbox-1b.htm 758ad16a7da34ed436194871bda34b2be3dc7320 ?
|
||||
xhtml1/clip-path-paddingbox-1b.xht 758ad16a7da34ed436194871bda34b2be3dc7320 ?
|
||||
html/clip-path-paddingbox-1c.htm 6b08640764db0639ef97664672571129374f84b0 ?
|
||||
xhtml1/clip-path-paddingbox-1c.xht 6b08640764db0639ef97664672571129374f84b0 ?
|
||||
html/clip-path-polygon-001.htm ce40772a228f478895d17f511ede902285b20c9e ?
|
||||
xhtml1/clip-path-polygon-001.xht ce40772a228f478895d17f511ede902285b20c9e ?
|
||||
html/clip-path-polygon-002.htm a26883e8648b91eb54278dc34910fd08fd768066 ?
|
||||
|
|
@ -93,6 +121,16 @@ html/clip-path-polygon-012.htm 618f339a009ce4209c17b1199aee514292a5e4ce ?
|
|||
xhtml1/clip-path-polygon-012.xht 618f339a009ce4209c17b1199aee514292a5e4ce ?
|
||||
html/clip-path-polygon-013.htm 3371a1258a8d2ddbbf18dd93ea937a86c3d06f6f ?
|
||||
xhtml1/clip-path-polygon-013.xht 3371a1258a8d2ddbbf18dd93ea937a86c3d06f6f ?
|
||||
html/clip-path-strokebox-1a.htm 38ae41c1b592454de41cad4e1329e0f1137219a8 ?
|
||||
xhtml1/clip-path-strokebox-1a.xht 38ae41c1b592454de41cad4e1329e0f1137219a8 ?
|
||||
html/clip-path-strokebox-1b.htm a1f7977e65ef013c740dc2f6ee83042e8ad484ee ?
|
||||
xhtml1/clip-path-strokebox-1b.xht a1f7977e65ef013c740dc2f6ee83042e8ad484ee ?
|
||||
html/clip-path-viewbox-1a.htm c13755dd266053cd88452ff5a9cdbeb0b7811861 ?
|
||||
xhtml1/clip-path-viewbox-1a.xht c13755dd266053cd88452ff5a9cdbeb0b7811861 ?
|
||||
html/clip-path-viewbox-1b.htm e737de9cf58fe03bccd08992acc8bf4dfdbf5d0d ?
|
||||
xhtml1/clip-path-viewbox-1b.xht e737de9cf58fe03bccd08992acc8bf4dfdbf5d0d ?
|
||||
html/clip-path-viewbox-1c.htm 84f5f23946cc401977a1311b5bd73bdb6692fca2 ?
|
||||
xhtml1/clip-path-viewbox-1c.xht 84f5f23946cc401977a1311b5bd73bdb6692fca2 ?
|
||||
html/clip-rect-auto-001.htm 0845a592f963c525c4169d8b66eb69d7ae8db937 ?
|
||||
xhtml1/clip-rect-auto-001.xht 0845a592f963c525c4169d8b66eb69d7ae8db937 ?
|
||||
html/clip-rect-auto-002.htm eb938b4e7c5f4edb9bbb50eacc26a21f829be761 ?
|
||||
|
|
@ -117,32 +155,80 @@ html/clip-rule-001.htm 685b1c6b98405699db11621e3739893d03bb287f ?
|
|||
xhtml1/clip-rule-001.xht 685b1c6b98405699db11621e3739893d03bb287f ?
|
||||
html/clip-rule-002.htm 060477805299dce5079f7940f4140876d0d2d33e ?
|
||||
xhtml1/clip-rule-002.xht 060477805299dce5079f7940f4140876d0d2d33e ?
|
||||
html/mask-clip-1.htm ab17761a9fea47931e59ef59248f25abd6791108 ?
|
||||
xhtml1/mask-clip-1.xht ab17761a9fea47931e59ef59248f25abd6791108 ?
|
||||
html/mask-composite-1a.htm 74dbc9500f92eb0a5a1bfe501a5a800f86ab65c3 ?
|
||||
xhtml1/mask-composite-1a.xht 74dbc9500f92eb0a5a1bfe501a5a800f86ab65c3 ?
|
||||
html/mask-composite-1b.htm eb991ca37e25232a0345ddc51d97205951f49ce6 ?
|
||||
xhtml1/mask-composite-1b.xht eb991ca37e25232a0345ddc51d97205951f49ce6 ?
|
||||
html/mask-composite-2a.htm 26f6311f7ed2e3302adef9ef7918f2e88eaa2a3d ?
|
||||
xhtml1/mask-composite-2a.xht 26f6311f7ed2e3302adef9ef7918f2e88eaa2a3d ?
|
||||
html/mask-composite-2b.htm b9d66fde9152a2bda5f60db59a64b816f2f1b7ca ?
|
||||
xhtml1/mask-composite-2b.xht b9d66fde9152a2bda5f60db59a64b816f2f1b7ca ?
|
||||
html/mask-clip-1.htm 5a754aa2ad92ab071e20dc470a652aae1456e44e ?
|
||||
xhtml1/mask-clip-1.xht 5a754aa2ad92ab071e20dc470a652aae1456e44e ?
|
||||
html/mask-clip-2.htm 3d5c489b56c3210538e8d4fd1a26d93cc740e9bd ?
|
||||
xhtml1/mask-clip-2.xht 3d5c489b56c3210538e8d4fd1a26d93cc740e9bd ?
|
||||
html/mask-composite-1a.htm 7b1c3669ee5863c7b55615282f09823784176af6 ?
|
||||
xhtml1/mask-composite-1a.xht 7b1c3669ee5863c7b55615282f09823784176af6 ?
|
||||
html/mask-composite-1b.htm 8ad93e1885cc960ea03bb40f2c0f9685c143e73a ?
|
||||
xhtml1/mask-composite-1b.xht 8ad93e1885cc960ea03bb40f2c0f9685c143e73a ?
|
||||
html/mask-composite-1c.htm 87fc19def0bd4de5d6e14d76b4b5a96b455f1f25 ?
|
||||
xhtml1/mask-composite-1c.xht 87fc19def0bd4de5d6e14d76b4b5a96b455f1f25 ?
|
||||
html/mask-composite-2a.htm 1b01a3cea9aeced80ca215b76de8fabdf1a840b2 ?
|
||||
xhtml1/mask-composite-2a.xht 1b01a3cea9aeced80ca215b76de8fabdf1a840b2 ?
|
||||
html/mask-composite-2b.htm ab6d67ec154e94de712444e4b9809f722def1bcb ?
|
||||
xhtml1/mask-composite-2b.xht ab6d67ec154e94de712444e4b9809f722def1bcb ?
|
||||
html/mask-composite-2c.htm 549b2229a71b7d4e501e84ba5257837ee701b3fd ?
|
||||
xhtml1/mask-composite-2c.xht 549b2229a71b7d4e501e84ba5257837ee701b3fd ?
|
||||
html/mask-image-1a.htm 9dcbd4b3ff1098164640ba8e6381243a6c165c68 ?
|
||||
xhtml1/mask-image-1a.xht 9dcbd4b3ff1098164640ba8e6381243a6c165c68 ?
|
||||
html/mask-image-1b.htm 5c3b7f570678ab052a9fb7cf5cb5ea2238d9ffa9 ?
|
||||
xhtml1/mask-image-1b.xht 5c3b7f570678ab052a9fb7cf5cb5ea2238d9ffa9 ?
|
||||
html/mask-image-1c.htm 67a05342df5dad237e53b40a181554db612da086 ?
|
||||
xhtml1/mask-image-1c.xht 67a05342df5dad237e53b40a181554db612da086 ?
|
||||
html/mask-image-1d.htm 49fccadb7069ed618d2669f52f025a54e896b4e9 ?
|
||||
xhtml1/mask-image-1d.xht 49fccadb7069ed618d2669f52f025a54e896b4e9 ?
|
||||
html/mask-image-2.htm 5369c24eb94bfe4899442f789cc0d988fe6d2aeb ?
|
||||
xhtml1/mask-image-2.xht 5369c24eb94bfe4899442f789cc0d988fe6d2aeb ?
|
||||
html/mask-image-3a.htm 96f1c1b9a73389fd63064dd5f80dbe7a1d6dfe4c ?
|
||||
xhtml1/mask-image-3a.xht 96f1c1b9a73389fd63064dd5f80dbe7a1d6dfe4c ?
|
||||
html/mask-image-3b.htm f18003d8263b264ac3ec52b6a7cc1e9a6c8e2e33 ?
|
||||
xhtml1/mask-image-3b.xht f18003d8263b264ac3ec52b6a7cc1e9a6c8e2e33 ?
|
||||
html/mask-image-3c.htm 50b3d878dfee9cc8c231ddfe8d33c3f91ad723aa ?
|
||||
xhtml1/mask-image-3c.xht 50b3d878dfee9cc8c231ddfe8d33c3f91ad723aa ?
|
||||
html/mask-image-3d.htm 4ffb8fa60d4f44a5de1bd42c33722ee6e5a156b6 ?
|
||||
xhtml1/mask-image-3d.xht 4ffb8fa60d4f44a5de1bd42c33722ee6e5a156b6 ?
|
||||
html/mask-image-3e.htm b5bc0f8bae78ede4722a0dda87e7e5b054d63c8a ?
|
||||
xhtml1/mask-image-3e.xht b5bc0f8bae78ede4722a0dda87e7e5b054d63c8a ?
|
||||
html/mask-image-3f.htm 6b2c882c1b896c8cdc09eefbafde65ee5d7c9c1f ?
|
||||
xhtml1/mask-image-3f.xht 6b2c882c1b896c8cdc09eefbafde65ee5d7c9c1f ?
|
||||
html/mask-image-3g.htm 56d7ed069a583a243a45d6e541a712610628eeaa ?
|
||||
xhtml1/mask-image-3g.xht 56d7ed069a583a243a45d6e541a712610628eeaa ?
|
||||
html/mask-image-3h.htm 0a3ccd82ca915a513adb1e3fe1c4c432d6faa97f ?
|
||||
xhtml1/mask-image-3h.xht 0a3ccd82ca915a513adb1e3fe1c4c432d6faa97f ?
|
||||
html/mask-image-3i.htm 777f590c7b0644367f8dfe0ddb4411fff6f0ff72 ?
|
||||
xhtml1/mask-image-3i.xht 777f590c7b0644367f8dfe0ddb4411fff6f0ff72 ?
|
||||
html/mask-image-4a.htm d747e753b9896a6b800279cdeff604c8eed08648 ?
|
||||
xhtml1/mask-image-4a.xht d747e753b9896a6b800279cdeff604c8eed08648 ?
|
||||
html/mask-image-4b.htm 3273c91a87452523cfd06b912481fd15984f95c8 ?
|
||||
xhtml1/mask-image-4b.xht 3273c91a87452523cfd06b912481fd15984f95c8 ?
|
||||
html/mask-image-5.htm d4a6beedd7e0bd4ac2c46af0fc04cc4a70ee504e ?
|
||||
xhtml1/mask-image-5.xht d4a6beedd7e0bd4ac2c46af0fc04cc4a70ee504e ?
|
||||
html/mask-image-6.htm 51c8921fa07d70e4fb4a66b74bd3b890ed7c83b5 ?
|
||||
xhtml1/mask-image-6.xht 51c8921fa07d70e4fb4a66b74bd3b890ed7c83b5 ?
|
||||
html/mask-mode-a.htm a64455fb83c162922ddfb6d45497b79f77b50ef3 ?
|
||||
xhtml1/mask-mode-a.xht a64455fb83c162922ddfb6d45497b79f77b50ef3 ?
|
||||
html/mask-mode-b.htm 61737e162df85c4362c54ffabd1f086f6d387506 ?
|
||||
xhtml1/mask-mode-b.xht 61737e162df85c4362c54ffabd1f086f6d387506 ?
|
||||
html/mask-mode-to-mask-type.htm 1d21eb363997a793bcf628f13ae1e4223b73893b ?
|
||||
xhtml1/mask-mode-to-mask-type.xht 1d21eb363997a793bcf628f13ae1e4223b73893b ?
|
||||
html/mask-opacity-1a.htm 5b9e0610e4dfa2646672372d8b4b997559627065 ?
|
||||
xhtml1/mask-opacity-1a.xht 5b9e0610e4dfa2646672372d8b4b997559627065 ?
|
||||
html/mask-opacity-1b.htm 69cb377773ee9f6959454896c459fba373b13b68 ?
|
||||
xhtml1/mask-opacity-1b.xht 69cb377773ee9f6959454896c459fba373b13b68 ?
|
||||
html/mask-opacity-1c.htm 0de6f541da54b9a6293f6525ea608a4e938b7659 ?
|
||||
xhtml1/mask-opacity-1c.xht 0de6f541da54b9a6293f6525ea608a4e938b7659 ?
|
||||
html/mask-opacity-1d.htm 9a89cf5fbdb863b9278eec1a9e2107e3747ef56e ?
|
||||
xhtml1/mask-opacity-1d.xht 9a89cf5fbdb863b9278eec1a9e2107e3747ef56e ?
|
||||
html/mask-opacity-1e.htm 5a7a3313943ebd4f33c845cab5b6810f1f2856d2 ?
|
||||
xhtml1/mask-opacity-1e.xht 5a7a3313943ebd4f33c845cab5b6810f1f2856d2 ?
|
||||
html/mask-origin-1.htm 5ba2e66ad99e92e67b9a3b9c04f249d41c16d517 ?
|
||||
xhtml1/mask-origin-1.xht 5ba2e66ad99e92e67b9a3b9c04f249d41c16d517 ?
|
||||
html/mask-origin-2.htm 66dea1e4283a718f62e2ea23616ebba929179c7e ?
|
||||
xhtml1/mask-origin-2.xht 66dea1e4283a718f62e2ea23616ebba929179c7e ?
|
||||
html/mask-origin-3.htm e5185b16768d2f82f4336c30c2de5ec734b42720 ?
|
||||
xhtml1/mask-origin-3.xht e5185b16768d2f82f4336c30c2de5ec734b42720 ?
|
||||
html/mask-position-1a.htm 2335ff1467039590c16bb12ebc78046fec611646 ?
|
||||
xhtml1/mask-position-1a.xht 2335ff1467039590c16bb12ebc78046fec611646 ?
|
||||
html/mask-position-1b.htm ae0e1a39aa966e45b66460a567690b4163f61a3b ?
|
||||
|
|
@ -171,47 +257,47 @@ html/mask-position-6.htm cf0739b65e8cadf1b6584cdfd5d0d080eb5db37f ?
|
|||
xhtml1/mask-position-6.xht cf0739b65e8cadf1b6584cdfd5d0d080eb5db37f ?
|
||||
html/mask-position-7.htm 170b41b3839dd4eeef13317d5bc3abde0ac5fac5 ?
|
||||
xhtml1/mask-position-7.xht 170b41b3839dd4eeef13317d5bc3abde0ac5fac5 ?
|
||||
html/mask-repeat-1.htm 7aa5abafcb59758e49ed8c93eedc453352c4ecfa ?
|
||||
xhtml1/mask-repeat-1.xht 7aa5abafcb59758e49ed8c93eedc453352c4ecfa ?
|
||||
html/mask-repeat-2.htm 6f053417e4a91fe62f6f117d71ac7d3755a09731 ?
|
||||
xhtml1/mask-repeat-2.xht 6f053417e4a91fe62f6f117d71ac7d3755a09731 ?
|
||||
html/mask-repeat-3.htm 287d3b829e337e127ac50ce317d3dfa1ea70cf4c ?
|
||||
xhtml1/mask-repeat-3.xht 287d3b829e337e127ac50ce317d3dfa1ea70cf4c ?
|
||||
html/mask-size-auto-auto.htm e95cdc294474c9f816c0b484b67625970fa74404 ?
|
||||
xhtml1/mask-size-auto-auto.xht e95cdc294474c9f816c0b484b67625970fa74404 ?
|
||||
html/mask-size-auto-length.htm 1f052e9710dd860ce5682cdcd67a3def4c799eab ?
|
||||
xhtml1/mask-size-auto-length.xht 1f052e9710dd860ce5682cdcd67a3def4c799eab ?
|
||||
html/mask-size-auto-percent.htm 0a30cf915fa1b4c839e64804b80274d6eaf69a47 ?
|
||||
xhtml1/mask-size-auto-percent.xht 0a30cf915fa1b4c839e64804b80274d6eaf69a47 ?
|
||||
html/mask-size-auto.htm 0a2fa5214c192bd1a3ddb2d57ccde814470a8390 ?
|
||||
xhtml1/mask-size-auto.xht 0a2fa5214c192bd1a3ddb2d57ccde814470a8390 ?
|
||||
html/mask-size-contain-clip-border.htm aa4a17de4f0d7f5fd54382e359391b1b42663aba ?
|
||||
xhtml1/mask-size-contain-clip-border.xht aa4a17de4f0d7f5fd54382e359391b1b42663aba ?
|
||||
html/mask-size-contain-clip-padding.htm de2b62b736281554d3a1a572b7933a6bf3fb0261 ?
|
||||
xhtml1/mask-size-contain-clip-padding.xht de2b62b736281554d3a1a572b7933a6bf3fb0261 ?
|
||||
html/mask-size-contain-position-fifty-fifty.htm 18f4d823525760a32479bfdc1960a3f79848f05e ?
|
||||
xhtml1/mask-size-contain-position-fifty-fifty.xht 18f4d823525760a32479bfdc1960a3f79848f05e ?
|
||||
html/mask-size-contain.htm 986a82cf8b954a2f04c8f444e6bac443b7502ce2 ?
|
||||
xhtml1/mask-size-contain.xht 986a82cf8b954a2f04c8f444e6bac443b7502ce2 ?
|
||||
html/mask-size-cover.htm 45930d72d1b48cd5333465233c3970c459e75262 ?
|
||||
xhtml1/mask-size-cover.xht 45930d72d1b48cd5333465233c3970c459e75262 ?
|
||||
html/mask-size-length-auto.htm 28403cc5c4c8a6e58bd2ab0821ff78eac60cc058 ?
|
||||
xhtml1/mask-size-length-auto.xht 28403cc5c4c8a6e58bd2ab0821ff78eac60cc058 ?
|
||||
html/mask-size-length-length.htm aed9c4ca10b440457c970be7b6a4945508dc2d92 ?
|
||||
xhtml1/mask-size-length-length.xht aed9c4ca10b440457c970be7b6a4945508dc2d92 ?
|
||||
html/mask-size-length-percent.htm 65bb0e6875c0534743e6aeb4dfe43c1bf2146b17 ?
|
||||
xhtml1/mask-size-length-percent.xht 65bb0e6875c0534743e6aeb4dfe43c1bf2146b17 ?
|
||||
html/mask-size-length.htm 4defd24447eb46cfd5ad227c703996c885dd996a ?
|
||||
xhtml1/mask-size-length.xht 4defd24447eb46cfd5ad227c703996c885dd996a ?
|
||||
html/mask-size-percent-auto.htm 8baa71d4d2b7d41a425e827c92d5a2a078f18124 ?
|
||||
xhtml1/mask-size-percent-auto.xht 8baa71d4d2b7d41a425e827c92d5a2a078f18124 ?
|
||||
html/mask-size-percent-length.htm a8a7d1ef5b2b7d2e05730ff635da2e52febea06a ?
|
||||
xhtml1/mask-size-percent-length.xht a8a7d1ef5b2b7d2e05730ff635da2e52febea06a ?
|
||||
html/mask-size-percent-percent-stretch.htm 9df34563dc65ae4b0a1247137af3e5a7e2cae099 ?
|
||||
xhtml1/mask-size-percent-percent-stretch.xht 9df34563dc65ae4b0a1247137af3e5a7e2cae099 ?
|
||||
html/mask-size-percent-percent.htm 3af6f431c0ac9d53fd4194503030f5188753ad43 ?
|
||||
xhtml1/mask-size-percent-percent.xht 3af6f431c0ac9d53fd4194503030f5188753ad43 ?
|
||||
html/mask-size-percent.htm 222fd7b0d5f7e5a5fa1c9ce93838d7a768c47a76 ?
|
||||
xhtml1/mask-size-percent.xht 222fd7b0d5f7e5a5fa1c9ce93838d7a768c47a76 ?
|
||||
html/mask-repeat-1.htm 3c4d7ec0065bf30b929dd04d268bface5c931844 ?
|
||||
xhtml1/mask-repeat-1.xht 3c4d7ec0065bf30b929dd04d268bface5c931844 ?
|
||||
html/mask-repeat-2.htm ef1e92061f0fee11eff242f7d8bb356d14400db2 ?
|
||||
xhtml1/mask-repeat-2.xht ef1e92061f0fee11eff242f7d8bb356d14400db2 ?
|
||||
html/mask-repeat-3.htm d8eb894cc3d3183a1136db5b5a88891c4693b3df ?
|
||||
xhtml1/mask-repeat-3.xht d8eb894cc3d3183a1136db5b5a88891c4693b3df ?
|
||||
html/mask-size-auto-auto.htm 62de97df8d464a7b76966701ca2e25a0e75c77ee ?
|
||||
xhtml1/mask-size-auto-auto.xht 62de97df8d464a7b76966701ca2e25a0e75c77ee ?
|
||||
html/mask-size-auto-length.htm 906b70a607727dc5d025983ea8922ab02d8b2ac3 ?
|
||||
xhtml1/mask-size-auto-length.xht 906b70a607727dc5d025983ea8922ab02d8b2ac3 ?
|
||||
html/mask-size-auto-percent.htm 06f83eb2a378769fda5f1a1c62340fb94268f1a3 ?
|
||||
xhtml1/mask-size-auto-percent.xht 06f83eb2a378769fda5f1a1c62340fb94268f1a3 ?
|
||||
html/mask-size-auto.htm e4fea94ca40cbb698bfd3af9611be16a75bb3157 ?
|
||||
xhtml1/mask-size-auto.xht e4fea94ca40cbb698bfd3af9611be16a75bb3157 ?
|
||||
html/mask-size-contain-clip-border.htm 9fc2fbc6bdae0de1d79d08dad713177b17c4166a ?
|
||||
xhtml1/mask-size-contain-clip-border.xht 9fc2fbc6bdae0de1d79d08dad713177b17c4166a ?
|
||||
html/mask-size-contain-clip-padding.htm d0dd9e68421e89ec49152aca685cfaff241dc973 ?
|
||||
xhtml1/mask-size-contain-clip-padding.xht d0dd9e68421e89ec49152aca685cfaff241dc973 ?
|
||||
html/mask-size-contain-position-fifty-fifty.htm 50e1b201cf19ccfae7b5df1e813cc5612b93bf84 ?
|
||||
xhtml1/mask-size-contain-position-fifty-fifty.xht 50e1b201cf19ccfae7b5df1e813cc5612b93bf84 ?
|
||||
html/mask-size-contain.htm 7101e3cfe23d5466c246ee1894ac738f8ab7814f ?
|
||||
xhtml1/mask-size-contain.xht 7101e3cfe23d5466c246ee1894ac738f8ab7814f ?
|
||||
html/mask-size-cover.htm c70410df67876b27db35b90c66d4a14445ee150b ?
|
||||
xhtml1/mask-size-cover.xht c70410df67876b27db35b90c66d4a14445ee150b ?
|
||||
html/mask-size-length-auto.htm c5bd356ac26183b11a2c292b0f87d1679053ec3e ?
|
||||
xhtml1/mask-size-length-auto.xht c5bd356ac26183b11a2c292b0f87d1679053ec3e ?
|
||||
html/mask-size-length-length.htm d32c00ed762d376145477fd345aa4b23ca12820b ?
|
||||
xhtml1/mask-size-length-length.xht d32c00ed762d376145477fd345aa4b23ca12820b ?
|
||||
html/mask-size-length-percent.htm bebbc73ea2c71758217f71dace09929e6cc0fe1f ?
|
||||
xhtml1/mask-size-length-percent.xht bebbc73ea2c71758217f71dace09929e6cc0fe1f ?
|
||||
html/mask-size-length.htm 374a109fa6106415e9b7a17aff240f92db394890 ?
|
||||
xhtml1/mask-size-length.xht 374a109fa6106415e9b7a17aff240f92db394890 ?
|
||||
html/mask-size-percent-auto.htm c01896d8050ebc0033ec1ab58f2faa3d09f72b1a ?
|
||||
xhtml1/mask-size-percent-auto.xht c01896d8050ebc0033ec1ab58f2faa3d09f72b1a ?
|
||||
html/mask-size-percent-length.htm 6c2ded16cb5344f1a0cb1d1cd3001935ef3a9d94 ?
|
||||
xhtml1/mask-size-percent-length.xht 6c2ded16cb5344f1a0cb1d1cd3001935ef3a9d94 ?
|
||||
html/mask-size-percent-percent-stretch.htm 7d0949f5378ca0a2c6b635713569e0ac53dbadf9 ?
|
||||
xhtml1/mask-size-percent-percent-stretch.xht 7d0949f5378ca0a2c6b635713569e0ac53dbadf9 ?
|
||||
html/mask-size-percent-percent.htm 8c1b082b4a8b70eb2c1ac5820337294ddb83b0a1 ?
|
||||
xhtml1/mask-size-percent-percent.xht 8c1b082b4a8b70eb2c1ac5820337294ddb83b0a1 ?
|
||||
html/mask-size-percent.htm 8c4bd036de832041b3a0c0438b437497ab807a7a ?
|
||||
xhtml1/mask-size-percent.xht 8c4bd036de832041b3a0c0438b437497ab807a7a ?
|
||||
html/test-mask.htm d958a4c5495e1038da67e6f0a88ada4dbb3f9c1d ?
|
||||
xhtml1/test-mask.xht d958a4c5495e1038da67e6f0a88ada4dbb3f9c1d ?
|
||||
|
|
|
|||
|
|
@ -11,6 +11,9 @@ clip-not-absolute-positioned-001 reference/clip-no-clipping-ref CSS Masking: Tes
|
|||
clip-not-absolute-positioned-002 reference/clip-no-clipping-ref CSS Masking: Test clip property and rect function on not absolutely positioned div - 2 http://www.w3.org/TR/css-masking-1/#clipping-paths,http://www.w3.org/TR/css-masking-1/#clip-property a6f6d6754d24efc6c66a83e4cac2f4375c7f12c2 `Dirk Schulze`<mailto:dschulze@adobe.com> 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.
|
||||
clip-not-absolute-positioned-003 reference/clip-no-clipping-ref CSS Masking: Test clip property and rect function on not absolutely positioned div - 3 http://www.w3.org/TR/css-masking-1/#clipping-paths,http://www.w3.org/TR/css-masking-1/#clip-property 80b26530bb6e33ba2315e02ad4917fd3f4ddb5b6 `Dirk Schulze`<mailto:dschulze@adobe.com> 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.
|
||||
clip-not-absolute-positioned-004 reference/clip-no-clipping-ref CSS Masking: Test clip property and rect function on not absolutely positioned div - 4 http://www.w3.org/TR/css-masking-1/#clipping-paths,http://www.w3.org/TR/css-masking-1/#clip-property 7f2d07caa51146f7f6fe33880a518a5cfeed73a3 `Dirk Schulze`<mailto:dschulze@adobe.com> 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.
|
||||
clip-path-borderBox-1a reference/clip-path-geometryBox-1-ref CSS Masking: clip-path: clip path border-box https://www.w3.org/TR/css-masking-1/#the-clip-path ba08d526edf9fdfcf690470542b02b466cccae86 `CJ Ku`<mailto:cku@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether clip-path border-box works correctly or not. This test is for clip-path applied to an HTML element.
|
||||
clip-path-borderBox-1b reference/clip-path-geometryBox-1-ref CSS Masking: clip-path: clip path border-box https://www.w3.org/TR/css-masking-1/#the-clip-path 123937933639bc46471132ba671822a2107314e8 `CJ Ku`<mailto:cku@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether clip-path border-box works correctly or not. This test is for clip-path applied to an SVG element.
|
||||
clip-path-borderBox-1c reference/clip-path-geometryBox-1-ref CSS Masking: clip-path: clip path border-box https://www.w3.org/TR/css-masking-1/#the-clip-path d2037fce1599ab9f19b27d4f1b31414f82a4d9c8 `CJ Ku`<mailto:cku@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether clip-path border-box works correctly or not. This test is for clip-path applied to an SVG SVG element.
|
||||
clip-path-circle-001 reference/clip-path-circle-ref CSS Masking: Test clip-path property and circle function with absolute values http://www.w3.org/TR/css-masking-1/#clipping-paths,http://www.w3.org/TR/css-masking-1/#the-clip-path 6551513b2e9c688ba790a5034cf56375b251c2c8 `Dirk Schulze`<mailto:dschulze@adobe.com>,`Denise White`<mailto:denisegwhite@outlook.com>,`Laury Kenton`<mailto:webshiva@mac.com> 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.
|
||||
clip-path-circle-002 reference/clip-path-circle-ref CSS Masking: Test clip-path property and circle function with percentage values http://www.w3.org/TR/css-masking-1/#clipping-paths,http://www.w3.org/TR/css-masking-1/#the-clip-path 5f834cbdfb22a1b7ead2a6601aa031c9b6e1b74b `Dirk Schulze`<mailto:dschulze@adobe.com> 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.
|
||||
clip-path-circle-003 reference/clip-path-circle-ref CSS Masking: Test clip-path property and circle function with percentage radius http://www.w3.org/TR/css-masking-1/#clipping-paths,http://www.w3.org/TR/css-masking-1/#the-clip-path 9e5bd98775ead8fe688f521be1e25ff899e98672 `Dirk Schulze`<mailto:dschulze@adobe.com> 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.
|
||||
|
|
@ -19,6 +22,9 @@ clip-path-circle-005 reference/clip-path-circle-ref CSS Masking: Test clip-path
|
|||
clip-path-circle-006 reference/clip-path-circle-ref CSS Masking: Test clip-path property and circle function with farthest-side http://www.w3.org/TR/css-masking-1/#clipping-paths,http://www.w3.org/TR/css-masking-1/#the-clip-path ad47ecb4deda995ea69dec7ade4eeaec7f66651f `Dirk Schulze`<mailto:dschulze@adobe.com> 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.
|
||||
clip-path-circle-007 reference/clip-path-circle-2-ref CSS Masking: Test clip-path property and circle with closest-side on rectangular div 1 http://www.w3.org/TR/css-masking-1/#clipping-paths,http://www.w3.org/TR/css-masking-1/#the-clip-path 84a1adff0763b0c5793d4a7910f66481747b961b `Dirk Schulze`<mailto:dschulze@adobe.com> 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.
|
||||
clip-path-circle-008 reference/clip-path-circle-3-ref CSS Masking: Test clip-path property and circle with closest-side on rectangular div 2 http://www.w3.org/TR/css-masking-1/#clipping-paths,http://www.w3.org/TR/css-masking-1/#the-clip-path 1e853c7eb2dd8220110fd26fa80e079587244fd9 `Dirk Schulze`<mailto:dschulze@adobe.com> 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.
|
||||
clip-path-contentBox-1a reference/clip-path-geometryBox-1-ref CSS Masking: clip-path: clip path content-box https://www.w3.org/TR/css-masking-1/#the-clip-path f54065cc3c55ab5479083639a4c662b886a7f464 `CJ Ku`<mailto:cku@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether clip-path content-box works correctly or not. This test is for clip-path applied to an HTML element.
|
||||
clip-path-contentBox-1b reference/clip-path-geometryBox-1-ref CSS Masking: clip-path: clip path content-box https://www.w3.org/TR/css-masking-1/#the-clip-path 8fac3d852ea251af25d779e44baf2303f5ac6e62 `CJ Ku`<mailto:cku@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether clip-path content-box works correctly or not. This test is for clip-path applied to an SVG element.
|
||||
clip-path-contentBox-1c reference/clip-path-geometryBox-1-ref CSS Masking: clip-path: clip path content-box https://www.w3.org/TR/css-masking-1/#the-clip-path c29a8067ffd7c08de6c4b955ca0bf517b7fe71e3 `CJ Ku`<mailto:cku@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether clip-path content-box works correctly or not.
|
||||
clip-path-element-userSpaceOnUse-001 reference/clip-path-rectangle-ref CSS Masking: Test clip-path property and external clipPath reference with userSpaceOnUse - 1 http://www.w3.org/TR/css-masking-1/#clipping-paths,http://www.w3.org/TR/css-masking-1/#propdef-clip-path,http://www.w3.org/TR/css-masking-1/#ClipPathElement 675bc45a4da73f355ae54d1b371bc680e4d2e72e `Dirk Schulze`<mailto:dschulze@adobe.com> The clip-path property takes an external reference to a clipPath element for clipping. On pass you should see a green box.
|
||||
clip-path-element-userSpaceOnUse-002 reference/clip-path-rectangle-ref CSS Masking: Test clip-path property and external clipPath reference with userSpaceOnUse - 2 http://www.w3.org/TR/css-masking-1/#clipping-paths,http://www.w3.org/TR/css-masking-1/#propdef-clip-path,http://www.w3.org/TR/css-masking-1/#ClipPathElement 26e3cc0e8acd806489c4731cf5a284621884efe6 `Dirk Schulze`<mailto:dschulze@adobe.com> The clip-path property takes an reference to a clipPath element for clipping. On pass you should see a green with a blue border.
|
||||
clip-path-element-userSpaceOnUse-003 reference/clip-path-ref-right-green-ref CSS Masking: Test clip-path property and external clipPath reference with userSpaceOnUse with percentage - 1 http://www.w3.org/TR/css-masking-1/#clipping-paths,http://www.w3.org/TR/css-masking-1/#propdef-clip-path,http://www.w3.org/TR/css-masking-1/#ClipPathElement 2f3f54dc854f6446db4f32e5feb72d3cefe04efb `Dirk Schulze`<mailto:dschulze@adobe.com> 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.
|
||||
|
|
@ -31,6 +37,14 @@ clip-path-ellipse-005 reference/clip-path-ellipse-ref CSS Masking: Test clip-pat
|
|||
clip-path-ellipse-006 reference/clip-path-circle-ref CSS Masking: Test clip-path property and ellipse function with absolute values http://www.w3.org/TR/css-masking-1/#clipping-paths,http://www.w3.org/TR/css-masking-1/#propdef-clip-path e9f87ec9c0074f594df20b97307f7606927bdb15 `Dirk Schulze`<mailto:dschulze@adobe.com> 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.
|
||||
clip-path-ellipse-007 reference/clip-path-ellipse-ref CSS Masking: Test clip-path property and ellipse function with no arguments http://www.w3.org/TR/css-masking-1/#clipping-paths,http://www.w3.org/TR/css-masking-1/#propdef-clip-path b36748b51ddf5bdcb7d74b184c0c4160485e44cc `Dirk Schulze`<mailto:dschulze@adobe.com> 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.
|
||||
clip-path-ellipse-008 reference/clip-path-ellipse-ref CSS Masking: Test clip-path property and ellipse function with 50% 50% http://www.w3.org/TR/css-masking-1/#clipping-paths,http://www.w3.org/TR/css-masking-1/#propdef-clip-path e1bc5feb5b0e8a7234ef94a33d8521d8e60ad245 `Dirk Schulze`<mailto:dschulze@adobe.com> 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.
|
||||
clip-path-fillBox-1a reference/clip-path-geometryBox-1-ref CSS Masking: clip-path: clip path fill-box https://www.w3.org/TR/css-masking-1/#the-clip-path 0c09b0b096ce8684fefb957bb677e6439b924af0 `CJ Ku`<mailto:cku@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether clip-path fill-box works correctly or not. This test is for clip-path applied to an SVG SVG element.
|
||||
clip-path-geometryBox-2 reference/clip-path-geometryBox-2-ref CSS Masking: clip-path: clip path margin-box https://www.w3.org/TR/css-masking-1/#the-clip-path ba4c300840508e50ed00d8c61a13288f3c33f140 `CJ Ku`<mailto:cku@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether clip-path margin-box works correctly or not.
|
||||
clip-path-localRef-1 reference/clip-path-localRef-1-ref Testcase for clip-path linked to local-ref URL https://www.w3.org/TR/css-masking-1/#the-clip-path 343133882e568359dec92a66681d2a845888f514 `CJ Ku`<mailto:cku@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks after changing base URL, whether fragment URLs works correctly or not.
|
||||
clip-path-marginBox-1a reference/clip-path-geometryBox-1-ref CSS Masking: clip-path: clip path margin-box https://www.w3.org/TR/css-masking-1/#the-clip-path a7860985e875cf159e5dfbd3f197d874868a28b5 `CJ Ku`<mailto:cku@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether clip-path margin-box works correctly or not. This test is for clip-path applied to an SVG element.
|
||||
clip-path-mix-blend-mode-1 reference/clip-path-mix-blend-mode-1-ref CSS Masking: clip-path with mix-blend-mode https://www.w3.org/TR/css-masking-1/#the-clip-path 10ba39a159c6833550608890f06baed0e80022b7 `CJ Ku`<mailto:cku@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether clip-path works with mix-blend-mode correctly or not.
|
||||
clip-path-paddingBox-1a reference/clip-path-geometryBox-1-ref CSS Masking: clip-path: clip path padding-box https://www.w3.org/TR/css-masking-1/#the-clip-path 26cd49a5e7fbb4d4fe76415552ae5e9b8be97731 `CJ Ku`<mailto:cku@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether clip-path padding-box works correctly or not. This test is for clip-path applied to an HTML element.
|
||||
clip-path-paddingBox-1b reference/clip-path-geometryBox-1-ref CSS Masking: clip-path: clip path padding-box https://www.w3.org/TR/css-masking-1/#the-clip-path 758ad16a7da34ed436194871bda34b2be3dc7320 `CJ Ku`<mailto:cku@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether clip-path padding-box works correctly or not. This test is for clip-path applied to an SVG element.
|
||||
clip-path-paddingBox-1c reference/clip-path-geometryBox-1-ref CSS Masking: clip-path: clip path padding-box https://www.w3.org/TR/css-masking-1/#the-clip-path 6b08640764db0639ef97664672571129374f84b0 `CJ Ku`<mailto:cku@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether clip-path padding-box works correctly or not. This test is for clip-path applied to an SVG SVG element.
|
||||
clip-path-polygon-001 reference/clip-path-rectangle-ref CSS Masking: Test clip-path property and polygon function with absolute values http://www.w3.org/TR/css-masking-1/#clipping-paths,http://www.w3.org/TR/css-masking-1/#propdef-clip-path ce40772a228f478895d17f511ede902285b20c9e `Dirk Schulze`<mailto:dschulze@adobe.com> 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.
|
||||
clip-path-polygon-002 reference/clip-path-rectangle-ref CSS Masking: Test clip-path property and polygon function with percentage values http://www.w3.org/TR/css-masking-1/#clipping-paths,http://www.w3.org/TR/css-masking-1/#propdef-clip-path a26883e8648b91eb54278dc34910fd08fd768066 `Dirk Schulze`<mailto:dschulze@adobe.com> 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.
|
||||
clip-path-polygon-003 reference/clip-path-rectangle-ref CSS Masking: Test clip-path property and polygon function with absolute and percentage values http://www.w3.org/TR/css-masking-1/#clipping-paths,http://www.w3.org/TR/css-masking-1/#propdef-clip-path fccf23845d5ec85f017a3e9785363549f51c6d4b `Dirk Schulze`<mailto:dschulze@adobe.com> 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.
|
||||
|
|
@ -44,6 +58,11 @@ clip-path-polygon-010 reference/clip-path-stripes-001-ref CSS Masking: Test clip
|
|||
clip-path-polygon-011 reference/clip-path-stripes-001-ref CSS Masking: Test clip-path and polygon with stroke-box http://www.w3.org/TR/css-masking-1/#clipping-paths,http://www.w3.org/TR/css-masking-1/#propdef-clip-path f2b7330ea6d4bb428d6c5e630e0c42ec523a7223 `Dirk Schulze`<mailto:dschulze@adobe.com> 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.
|
||||
clip-path-polygon-012 reference/clip-path-stripes-001-ref CSS Masking: Test clip-path and polygon with view-box http://www.w3.org/TR/css-masking-1/#clipping-paths,http://www.w3.org/TR/css-masking-1/#propdef-clip-path 618f339a009ce4209c17b1199aee514292a5e4ce `Dirk Schulze`<mailto:dschulze@adobe.com> 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.
|
||||
clip-path-polygon-013 reference/clip-path-stripes-003-ref CSS Masking: Test clip-path and polygon different units http://www.w3.org/TR/css-masking-1/#clipping-paths,http://www.w3.org/TR/css-masking-1/#propdef-clip-path 3371a1258a8d2ddbbf18dd93ea937a86c3d06f6f `Dirk Schulze`<mailto:dschulze@adobe.com> 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.
|
||||
clip-path-strokeBox-1a reference/clip-path-geometryBox-1-ref CSS Masking: clip-path: clip path stroke-box https://www.w3.org/TR/css-masking-1/#the-clip-path 38ae41c1b592454de41cad4e1329e0f1137219a8 `CJ Ku`<mailto:cku@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether clip-path stroke-box works correctly or not. This test is for clip-path applied to an SVG SVG element.
|
||||
clip-path-strokeBox-1b reference/clip-path-geometryBox-1-ref CSS Masking: clip-path: clip path stroke-box https://www.w3.org/TR/css-masking-1/#the-clip-path a1f7977e65ef013c740dc2f6ee83042e8ad484ee `CJ Ku`<mailto:cku@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether clip-path stroke-box works correctly or not.
|
||||
clip-path-viewBox-1a reference/clip-path-geometryBox-1-ref CSS Masking: clip-path: clip path view-box https://www.w3.org/TR/css-masking-1/#the-clip-path c13755dd266053cd88452ff5a9cdbeb0b7811861 `CJ Ku`<mailto:cku@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether clip-path view-box works correctly or not.
|
||||
clip-path-viewBox-1b reference/clip-path-geometryBox-1-ref CSS Masking: clip-path: clip path view-box with viewbox https://www.w3.org/TR/css-masking-1/#the-clip-path e737de9cf58fe03bccd08992acc8bf4dfdbf5d0d `CJ Ku`<mailto:cku@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether clip-path view-box with viewbox works correctly or not.
|
||||
clip-path-viewBox-1c reference/clip-path-geometryBox-1-ref CSS Masking: clip-path: clip path view-box https://www.w3.org/TR/css-masking-1/#the-clip-path 84f5f23946cc401977a1311b5bd73bdb6692fca2 `CJ Ku`<mailto:cku@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether clip-path view-box works correctly or not. This test is for clip-path applied to an SVG SVG element.
|
||||
clip-rect-auto-001 reference/clip-overflow-hidden-ref CSS Masking: Test clip property with rect function and auto values clip to border box - 1 http://www.w3.org/TR/css-masking-1/#clipping-paths,http://www.w3.org/TR/css-masking-1/#clip-property 0845a592f963c525c4169d8b66eb69d7ae8db937 `Dirk Schulze`<mailto:dschulze@adobe.com> 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.
|
||||
clip-rect-auto-002 reference/clip-no-clipping-ref CSS Masking: Test clip property with rect function and auto values clip to border box - 2 http://www.w3.org/TR/css-masking-1/#clipping-paths,http://www.w3.org/TR/css-masking-1/#clip-property eb938b4e7c5f4edb9bbb50eacc26a21f829be761 `Dirk Schulze`<mailto:dschulze@adobe.com> 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.
|
||||
clip-rect-auto-003 reference/clip-rect-top-ref CSS Masking: Test clip property with rect function and auto value for top value http://www.w3.org/TR/css-masking-1/#clipping-paths,http://www.w3.org/TR/css-masking-1/#clip-property 0ba846e7e0e584887b770c790a2016d7e40278cf `Dirk Schulze`<mailto:dschulze@adobe.com> 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.
|
||||
|
|
@ -56,19 +75,43 @@ clip-rect-comma-003 reference/clip-no-clipping-ref CSS Masking: Test comma separ
|
|||
clip-rect-comma-004 reference/clip-no-clipping-ref CSS Masking: Test comma separation of rect function on clip - no comma between 3rd and 4th value http://www.w3.org/TR/css-masking-1/#clip-property 38b542cefdad3a69bbb2c9161784112bfdbb0565 `Dirk Schulze`<mailto:dschulze@adobe.com> 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.
|
||||
clip-rule-001 reference/clip-rule-rectangle-border-ref CSS Masking: Test clip-rule property on polygon clip rule evenodd http://www.w3.org/TR/css-masking-1/#clipping-paths,http://www.w3.org/TR/css-masking-1/#propdef-clip-path,http://www.w3.org/TR/css-masking-1/#ClipPathElement 685b1c6b98405699db11621e3739893d03bb287f `Dirk Schulze`<mailto:dschulze@adobe.com> 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.
|
||||
clip-rule-002 reference/clip-rule-rectangle-border-ref CSS Masking: Test clip-rule property on polygon clip rule nonzero http://www.w3.org/TR/css-masking-1/#clipping-paths,http://www.w3.org/TR/css-masking-1/#propdef-clip-path,http://www.w3.org/TR/css-masking-1/#ClipPathElement 060477805299dce5079f7940f4140876d0d2d33e `Dirk Schulze`<mailto:dschulze@adobe.com> 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.
|
||||
mask-clip-1 reference/mask-clip-1-ref CSS Masking: mask-clip: clip mask image http://www.w3.org/TR/css-masking-1/#the-mask-clip ab17761a9fea47931e59ef59248f25abd6791108 `Astley Chen`<mailto:aschen@mozilla.com>,`Mozilla`<https://www.mozilla.org> border-box, padding-box, and content-box values of mask-clip should clip to the appropriate boxes.
|
||||
mask-composite-1a reference/mask-composite-1-ref CSS Masking: mask-composite: compose vector image http://www.w3.org/TR/css-masking-1/#the-mask-composite 74dbc9500f92eb0a5a1bfe501a5a800f86ab65c3 `CJ Ku`<mailto:cku@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks that vector-mask-image can be composed correctly by different mask-composite value.
|
||||
mask-composite-1b reference/mask-composite-1-ref CSS Masking: mask-composite: compose raster image http://www.w3.org/TR/css-masking-1/#the-mask-composite eb991ca37e25232a0345ddc51d97205951f49ce6 `CJ Ku`<mailto:cku@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks that raster-mask-image can be composed correctly by different mask-composite value.
|
||||
mask-composite-2a reference/mask-composite-2-ref CSS Masking: mask-composite: compose vector image http://www.w3.org/TR/css-masking-1/#the-mask-composite 26f6311f7ed2e3302adef9ef7918f2e88eaa2a3d `CJ Ku`<mailto:cku@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks that vector-mask-image can be composed correctly by different mask-composite value.
|
||||
mask-composite-2b reference/mask-composite-2-ref CSS Masking: mask-composite: compose raster image http://www.w3.org/TR/css-masking-1/#the-mask-composite b9d66fde9152a2bda5f60db59a64b816f2f1b7ca `CJ Ku`<mailto:cku@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks that raster-mask-image can be composed correctly by different mask-composite value.
|
||||
mask-clip-1 reference/mask-clip-1-ref CSS Masking: mask-clip: clip mask image http://www.w3.org/TR/css-masking-1/#the-mask-clip 5a754aa2ad92ab071e20dc470a652aae1456e44e `Astley Chen`<mailto:aschen@mozilla.com>,`Mozilla`<https://www.mozilla.org> border-box, padding-box, content-box and no-clip values of mask-clip should clip to the appropriate boxes.
|
||||
mask-clip-2 reference/mask-clip-2-ref CSS Masking: mask-clip: clip mask image http://www.w3.org/TR/css-masking-1/#the-mask-clip 3d5c489b56c3210538e8d4fd1a26d93cc740e9bd `CJ Ku`<mailto:cku@mozilla.com>,`Mozilla`<https://www.mozilla.org> fill-box, stroke-box and view-box values of mask-clip should clip to the appropriate boxes.
|
||||
mask-composite-1a reference/mask-composite-1-ref CSS Masking: mask-composite: compose vector image http://www.w3.org/TR/css-masking-1/#the-mask-composite 7b1c3669ee5863c7b55615282f09823784176af6 `CJ Ku`<mailto:cku@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks that vector-mask-image can be composed correctly by different mask-composite value.
|
||||
mask-composite-1b reference/mask-composite-1-ref CSS Masking: mask-composite: compose raster image http://www.w3.org/TR/css-masking-1/#the-mask-composite 8ad93e1885cc960ea03bb40f2c0f9685c143e73a `CJ Ku`<mailto:cku@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks that raster-mask-image can be composed correctly by different mask-composite value.
|
||||
mask-composite-1c reference/mask-composite-1-ref CSS Masking: mask-composite: compose svg mask http://www.w3.org/TR/css-masking-1/#the-mask-composite 87fc19def0bd4de5d6e14d76b4b5a96b455f1f25 `CJ Ku`<mailto:cku@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks that vector-mask-image can be composed correctly by different mask-composite value.
|
||||
mask-composite-2a reference/mask-composite-2-ref CSS Masking: mask-composite: compose vector image http://www.w3.org/TR/css-masking-1/#the-mask-composite 1b01a3cea9aeced80ca215b76de8fabdf1a840b2 `CJ Ku`<mailto:cku@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks that vector-mask-image can be composed correctly by different mask-composite value.
|
||||
mask-composite-2b reference/mask-composite-2-ref CSS Masking: mask-composite: compose raster image http://www.w3.org/TR/css-masking-1/#the-mask-composite ab6d67ec154e94de712444e4b9809f722def1bcb `CJ Ku`<mailto:cku@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks that raster-mask-image can be composed correctly by different mask-composite value.
|
||||
mask-composite-2c reference/mask-composite-2-ref CSS Masking: mask-composite: compose SVG mask http://www.w3.org/TR/css-masking-1/#the-mask-composite 549b2229a71b7d4e501e84ba5257837ee701b3fd `CJ Ku`<mailto:cku@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks that svg-mask can be composed correctly by different mask-composite value.
|
||||
mask-image-1a reference/mask-image-1-ref CSS Masking: mask-image: mask layer image https://www.w3.org/TR/css-masking-1/#the-mask-image 9dcbd4b3ff1098164640ba8e6381243a6c165c68 `Astley Chen`<mailto:aschen@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether image as mask layer works correctly or not.
|
||||
mask-image-1b reference/mask-image-1-ref CSS Masking: mask-image: mask layer image https://www.w3.org/TR/css-masking-1/#the-mask-image 5c3b7f570678ab052a9fb7cf5cb5ea2238d9ffa9 `Astley Chen`<mailto:aschen@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether SVG image as mask layer works correctly or not.
|
||||
mask-image-1c reference/mask-image-1-ref CSS Masking: mask-image: mask layer image https://www.w3.org/TR/css-masking-1/#the-mask-image 67a05342df5dad237e53b40a181554db612da086 `Astley Chen`<mailto:aschen@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether SVG mask element as mask layer works correctly or not.
|
||||
mask-image-1d reference/mask-image-1-ref CSS Masking: mask-image: mask layer image https://www.w3.org/TR/css-masking-1/#the-mask-image 49fccadb7069ed618d2669f52f025a54e896b4e9 `CJ Ku`<mailto:cku@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether treat unresolvable mask as no-mask for a SVG element embedded in HTML document.
|
||||
mask-image-2 reference/mask-image-2-ref CSS Masking: mask-image: mask layer image https://www.w3.org/TR/css-masking-1/#the-mask-image 5369c24eb94bfe4899442f789cc0d988fe6d2aeb `Astley Chen`<mailto:aschen@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether gradient CSS image as mask layer works correctly or not.
|
||||
mask-image-3a reference/mask-image-3-ref CSS Masking: mask-image: multiple SVG masks https://www.w3.org/TR/css-masking-1/#the-mask-image 96f1c1b9a73389fd63064dd5f80dbe7a1d6dfe4c `CJ Ku`<mailto:cku@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether SVG mask as mask layer works correctly or not.
|
||||
mask-image-3b reference/mask-image-3-ref CSS Masking: mask-image: interleave SVG mask with image mask https://www.w3.org/TR/css-masking-1/#the-mask-image f18003d8263b264ac3ec52b6a7cc1e9a6c8e2e33 `CJ Ku`<mailto:cku@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether SVG mask and image as mask layer works correctly or not.
|
||||
mask-image-3c reference/mask-image-3-ref CSS Masking: mask-image: interleave SVG mask with image mask https://www.w3.org/TR/css-masking-1/#the-mask-image 50b3d878dfee9cc8c231ddfe8d33c3f91ad723aa `CJ Ku`<mailto:cku@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether SVG mask and image as mask layer works correctly or not.
|
||||
mask-image-3d reference/mask-image-3-ref CSS Masking: mask-image: interleave SVG mask with image mask https://www.w3.org/TR/css-masking-1/#the-mask-image 4ffb8fa60d4f44a5de1bd42c33722ee6e5a156b6 `CJ Ku`<mailto:cku@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether SVG mask and image as mask layer works correctly or not.
|
||||
mask-image-3e reference/mask-image-3-ref CSS Masking: mask-image: interleave SVG mask with image mask https://www.w3.org/TR/css-masking-1/#the-mask-image b5bc0f8bae78ede4722a0dda87e7e5b054d63c8a `CJ Ku`<mailto:cku@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether SVG mask and image as mask layer works correctly or not.
|
||||
mask-image-3f reference/mask-image-3-ref CSS Masking: mask-image: SVG masks apply on border area https://www.w3.org/TR/css-masking-1/#the-mask-image 6b2c882c1b896c8cdc09eefbafde65ee5d7c9c1f `CJ Ku`<mailto:cku@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether SVG mask layer can be positioned on box-shadow area correctly or not.
|
||||
mask-image-3g reference/mask-image-3-ref CSS Masking: mask-image: SVG masks apply on border area https://www.w3.org/TR/css-masking-1/#the-mask-image 56d7ed069a583a243a45d6e541a712610628eeaa `CJ Ku`<mailto:cku@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether apply transfrom to a SVG mask layer works correctly or not.
|
||||
mask-image-3h reference/mask-image-3-ref CSS Masking: clip-path in SVG mask https://www.w3.org/TR/css-masking-1/#the-mask-image 0a3ccd82ca915a513adb1e3fe1c4c432d6faa97f `CJ Ku`<mailto:cku@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether clip-path in SVG mask works correctly or not.
|
||||
mask-image-3i reference/mask-image-3-ref CSS Masking: mask-image: interleave SVG mask with image mask https://www.w3.org/TR/css-masking-1/#the-mask-image 777f590c7b0644367f8dfe0ddb4411fff6f0ff72 `CJ Ku`<mailto:cku@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether SVG mask and image as mask layer works correctly or not.
|
||||
mask-image-4a blank CSS Masking: mask-image: unresovlable mask url https://www.w3.org/TR/css-masking-1/#the-mask-image d747e753b9896a6b800279cdeff604c8eed08648 `CJ Ku`<mailto:cku@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks non-existent url should be counted as an image layer of transparent black.
|
||||
mask-image-4b blank CSS Masking: mask-image: unresovlable mask url https://www.w3.org/TR/css-masking-1/#the-mask-image 3273c91a87452523cfd06b912481fd15984f95c8 `CJ Ku`<mailto:cku@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks a mask reference to a none-mask SVG element should be counted as an image layer of transparent black.
|
||||
mask-image-5 reference/mask-image-5-ref CSS Masking: mask-image: data url mask https://www.w3.org/TR/css-masking-1/#the-mask-image d4a6beedd7e0bd4ac2c46af0fc04cc4a70ee504e `CJ Ku`<mailto:cku@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks handling data url mask correctly.
|
||||
mask-image-6 reference/mask-image-6-ref CSS Masking: mask on inline element https://www.w3.org/TR/css-masking-1/#the-mask-image 51c8921fa07d70e4fb4a66b74bd3b890ed7c83b5 `CJ Ku`<mailto:cku@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether mask on inline elemnt works correctly or not.
|
||||
mask-mode-a reference/mask-mode-ref CSS Masking: mask-mode with vector image https://www.w3.org/TR/css-masking-1/#propdef-mask-mode a64455fb83c162922ddfb6d45497b79f77b50ef3 `Ethan Lin`<mailto:ethlin@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks that mask an SVG image referenced by mask-image is correct with different mask mode.
|
||||
mask-mode-b reference/mask-mode-ref CSS Masking: mask-mode with raster image https://www.w3.org/TR/css-masking-1/#propdef-mask-mode 61737e162df85c4362c54ffabd1f086f6d387506 `Ethan Lin`<mailto:ethlin@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks that mask a PNG image referenced by mask-image is correct with different mask mode.
|
||||
mask-mode-to-mask-type reference/mask-mode-to-mask-type-ref CSS Masking: mask-mode with vector image https://www.w3.org/TR/css-masking-1/#propdef-mask-mode 1d21eb363997a793bcf628f13ae1e4223b73893b `Ethan Lin`<mailto:ethlin@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks the fallback logic between mask-mode and mask-type.
|
||||
mask-opacity-1a reference/mask-opacity-1-ref CSS Masking: mask-image: mask with filter and opacity https://www.w3.org/TR/css-masking-1/#the-mask-image 5b9e0610e4dfa2646672372d8b4b997559627065 `CJ Ku`<mailto:cku@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether apply opacity to masked element correctly or not.
|
||||
mask-opacity-1b reference/mask-opacity-1-ref CSS Masking: mask-image: mask with opacity https://www.w3.org/TR/css-masking-1/#the-mask-image 69cb377773ee9f6959454896c459fba373b13b68 `CJ Ku`<mailto:cku@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether apply opacity to masked element correctly or not.
|
||||
mask-opacity-1c reference/mask-opacity-1-ref CSS Masking: mask-image: filter with opacity https://www.w3.org/TR/css-masking-1/#the-mask-image 0de6f541da54b9a6293f6525ea608a4e938b7659 `CJ Ku`<mailto:cku@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether apply opacity to masked element correctly or not.
|
||||
mask-opacity-1d reference/mask-opacity-1-ref CSS Masking: mask-image: mask with opacity https://www.w3.org/TR/css-masking-1/#the-mask-image 9a89cf5fbdb863b9278eec1a9e2107e3747ef56e `CJ Ku`<mailto:cku@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether apply opacity to masked element correctly or not.
|
||||
mask-opacity-1e reference/mask-opacity-1-ref CSS Masking: mask-image: mask with opacity https://www.w3.org/TR/css-masking-1/#the-mask-image 5a7a3313943ebd4f33c845cab5b6810f1f2856d2 `CJ Ku`<mailto:cku@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether apply opacity to masked element correctly or not.
|
||||
mask-origin-1 reference/mask-origin-1-ref CSS Masking: mask-origin: mask positioning area https://www.w3.org/TR/css-masking-1/#the-mask-origin 5ba2e66ad99e92e67b9a3b9c04f249d41c16d517 `Astley Chen`<mailto:aschen@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether setting mask position area works correctly or not.
|
||||
mask-origin-2 reference/mask-origin-2-ref CSS Masking: mask-origin: mask positioning area https://www.w3.org/TR/css-masking-1/#the-mask-origin 66dea1e4283a718f62e2ea23616ebba929179c7e `Astley Chen`<mailto:aschen@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether setting mask origin to margin-box works correctly or not.
|
||||
mask-origin-3 reference/mask-origin-3-ref CSS Masking: mask-origin: mask positioning area https://www.w3.org/TR/css-masking-1/#the-mask-origin e5185b16768d2f82f4336c30c2de5ec734b42720 `CJ Ku`<mailto:cku@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether setting mask position area works correctly or not.
|
||||
mask-position-1a reference/mask-position-1-ref CSS Masking: mask-position: mask positioning https://www.w3.org/TR/css-masking-1/#the-mask-position 2335ff1467039590c16bb12ebc78046fec611646 `Astley Chen`<mailto:aschen@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether positioning mask layer works correctly or not.
|
||||
mask-position-1b reference/mask-position-1-ref CSS Masking: mask-position: mask positioning https://www.w3.org/TR/css-masking-1/#the-mask-position ae0e1a39aa966e45b66460a567690b4163f61a3b `Astley Chen`<mailto:aschen@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether positioning mask layer works correctly or not.
|
||||
mask-position-1c reference/mask-position-1-ref CSS Masking: mask-position: mask positioning https://www.w3.org/TR/css-masking-1/#the-mask-position 8748ccea63d9e702eabc4ac653787d062b67baa4 `Astley Chen`<mailto:aschen@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether positioning mask layer works correctly or not.
|
||||
|
|
@ -83,25 +126,25 @@ mask-position-4d reference/mask-position-4-ref CSS Masking: mask-position: mask
|
|||
mask-position-5 reference/mask-position-5-ref CSS Masking: mask-position: mask positioning https://www.w3.org/TR/css-masking-1/#the-mask-position 7dd089a99722b3c52e507713b4205d202c1d95bc `Astley Chen`<mailto:aschen@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether positioning mask layer works correctly or not.
|
||||
mask-position-6 reference/mask-position-6-ref CSS Masking: mask-position: mask positioning https://www.w3.org/TR/css-masking-1/#the-mask-position cf0739b65e8cadf1b6584cdfd5d0d080eb5db37f `Astley Chen`<mailto:aschen@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether positioning mask layer works correctly or not.
|
||||
mask-position-7 reference/mask-position-7-ref CSS Masking: mask-position: mask positioning https://www.w3.org/TR/css-masking-1/#the-mask-position 170b41b3839dd4eeef13317d5bc3abde0ac5fac5 `Astley Chen`<mailto:aschen@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether positioning mask layer works correctly or not.
|
||||
mask-repeat-1 reference/mask-repeat-1-ref CSS Masking: mask-repeat: repeated mask layer image https://www.w3.org/TR/css-masking-1/#the-mask-repeat 7aa5abafcb59758e49ed8c93eedc453352c4ecfa `Astley Chen`<mailto:aschen@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether repeated mask layer works correctly or not.
|
||||
mask-repeat-2 reference/mask-repeat-2-ref CSS Masking: mask-repeat: repeated mask layer image https://www.w3.org/TR/css-masking-1/#the-mask-repeat 6f053417e4a91fe62f6f117d71ac7d3755a09731 `Astley Chen`<mailto:aschen@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether repeated mask layer works correctly or not.
|
||||
mask-repeat-3 reference/mask-repeat-3-ref CSS Masking: mask-repeat: repeated mask layer image https://www.w3.org/TR/css-masking-1/#the-mask-repeat 287d3b829e337e127ac50ce317d3dfa1ea70cf4c `Astley Chen`<mailto:aschen@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether repeated mask layer works correctly or not.
|
||||
mask-size-auto reference/mask-size-auto-ref CSS Masking: mask-size: mask layer size https://www.w3.org/TR/css-masking-1/#the-mask-size 0a2fa5214c192bd1a3ddb2d57ccde814470a8390 `Astley Chen`<mailto:aschen@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether sizing mask layer works correctly or not.
|
||||
mask-size-auto-auto reference/mask-size-auto-ref CSS Masking: mask-size: mask layer size https://www.w3.org/TR/css-masking-1/#the-mask-size e95cdc294474c9f816c0b484b67625970fa74404 `Astley Chen`<mailto:aschen@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether sizing mask layer works correctly or not.
|
||||
mask-size-auto-length reference/mask-size-auto-length-ref CSS Masking: mask-size: mask layer size https://www.w3.org/TR/css-masking-1/#the-mask-size 1f052e9710dd860ce5682cdcd67a3def4c799eab `Astley Chen`<mailto:aschen@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether sizing mask layer works correctly or not.
|
||||
mask-size-auto-percent reference/mask-size-auto-length-ref CSS Masking: mask-size: mask layer size https://www.w3.org/TR/css-masking-1/#the-mask-size 0a30cf915fa1b4c839e64804b80274d6eaf69a47 `Astley Chen`<mailto:aschen@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether sizing mask layer works correctly or not.
|
||||
mask-size-contain reference/mask-size-contain-ref CSS Masking: mask-size: mask layer size https://www.w3.org/TR/css-masking-1/#the-mask-size 986a82cf8b954a2f04c8f444e6bac443b7502ce2 `Astley Chen`<mailto:aschen@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether sizing mask layer works correctly or not.
|
||||
mask-size-contain-clip-border reference/mask-size-contain-clip-border-ref CSS Masking: mask-size: mask layer size https://www.w3.org/TR/css-masking-1/#the-mask-size aa4a17de4f0d7f5fd54382e359391b1b42663aba `Astley Chen`<mailto:aschen@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether sizing mask layer works correctly or not.
|
||||
mask-size-contain-clip-padding reference/mask-size-contain-clip-padding-ref CSS Masking: mask-size: mask layer size https://www.w3.org/TR/css-masking-1/#the-mask-size de2b62b736281554d3a1a572b7933a6bf3fb0261 `Astley Chen`<mailto:aschen@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether sizing mask layer works correctly or not.
|
||||
mask-size-contain-position-fifty-fifty reference/mask-size-contain-position-fifty-fifty-ref CSS Masking: mask-size: mask layer size https://www.w3.org/TR/css-masking-1/#the-mask-size 18f4d823525760a32479bfdc1960a3f79848f05e `Astley Chen`<mailto:aschen@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether sizing mask layer works correctly or not.
|
||||
mask-size-cover reference/mask-size-cover-ref CSS Masking: mask-size: mask layer size https://www.w3.org/TR/css-masking-1/#the-mask-size 45930d72d1b48cd5333465233c3970c459e75262 `Astley Chen`<mailto:aschen@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether sizing mask layer works correctly or not.
|
||||
mask-size-length reference/mask-size-length-length-ref CSS Masking: mask-size: mask layer size https://www.w3.org/TR/css-masking-1/#the-mask-size 4defd24447eb46cfd5ad227c703996c885dd996a `Astley Chen`<mailto:aschen@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether sizing mask layer works correctly or not.
|
||||
mask-size-length-auto reference/mask-size-length-length-ref CSS Masking: mask-size: mask layer size https://www.w3.org/TR/css-masking-1/#the-mask-size 28403cc5c4c8a6e58bd2ab0821ff78eac60cc058 `Astley Chen`<mailto:aschen@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether sizing mask layer works correctly or not.
|
||||
mask-size-length-length reference/mask-size-length-length-ref CSS Masking: mask-size: mask layer size https://www.w3.org/TR/css-masking-1/#the-mask-size aed9c4ca10b440457c970be7b6a4945508dc2d92 `Astley Chen`<mailto:aschen@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether sizing mask layer works correctly or not.
|
||||
mask-size-length-percent reference/mask-size-length-percent-ref CSS Masking: mask-size: mask layer size https://www.w3.org/TR/css-masking-1/#the-mask-size 65bb0e6875c0534743e6aeb4dfe43c1bf2146b17 `Astley Chen`<mailto:aschen@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether sizing mask layer works correctly or not.
|
||||
mask-size-percent reference/mask-size-percent-percent-ref CSS Masking: mask-size: mask layer size https://www.w3.org/TR/css-masking-1/#the-mask-size 222fd7b0d5f7e5a5fa1c9ce93838d7a768c47a76 `Astley Chen`<mailto:aschen@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether sizing mask layer works correctly or not.
|
||||
mask-size-percent-auto reference/mask-size-percent-percent-ref CSS Masking: mask-size: mask layer size https://www.w3.org/TR/css-masking-1/#the-mask-size 8baa71d4d2b7d41a425e827c92d5a2a078f18124 `Astley Chen`<mailto:aschen@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether sizing mask layer works correctly or not.
|
||||
mask-size-percent-length reference/mask-size-percent-percent-ref CSS Masking: mask-size: mask layer size https://www.w3.org/TR/css-masking-1/#the-mask-size a8a7d1ef5b2b7d2e05730ff635da2e52febea06a `Astley Chen`<mailto:aschen@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether sizing mask layer works correctly or not.
|
||||
mask-size-percent-percent reference/mask-size-percent-percent-ref CSS Masking: mask-size: mask layer size https://www.w3.org/TR/css-masking-1/#the-mask-size 3af6f431c0ac9d53fd4194503030f5188753ad43 `Astley Chen`<mailto:aschen@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether sizing mask layer works correctly or not.
|
||||
mask-size-percent-percent-stretch reference/mask-size-percent-percent-stretch-ref CSS Masking: mask-size: mask layer size https://www.w3.org/TR/css-masking-1/#the-mask-size 9df34563dc65ae4b0a1247137af3e5a7e2cae099 `Astley Chen`<mailto:aschen@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether sizing mask layer works correctly or not.
|
||||
mask-repeat-1 reference/mask-repeat-1-ref CSS Masking: mask-repeat: repeated mask layer image https://www.w3.org/TR/css-masking-1/#the-mask-repeat 3c4d7ec0065bf30b929dd04d268bface5c931844 `Astley Chen`<mailto:aschen@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether repeated mask layer works correctly or not.
|
||||
mask-repeat-2 reference/mask-repeat-2-ref CSS Masking: mask-repeat: repeated mask layer image https://www.w3.org/TR/css-masking-1/#the-mask-repeat ef1e92061f0fee11eff242f7d8bb356d14400db2 `Astley Chen`<mailto:aschen@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether repeated mask layer works correctly or not.
|
||||
mask-repeat-3 reference/mask-repeat-3-ref CSS Masking: mask-repeat: repeated mask layer image https://www.w3.org/TR/css-masking-1/#the-mask-repeat d8eb894cc3d3183a1136db5b5a88891c4693b3df `Astley Chen`<mailto:aschen@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether repeated mask layer works correctly or not.
|
||||
mask-size-auto reference/mask-size-auto-ref CSS Masking: mask-size: mask layer size https://www.w3.org/TR/css-masking-1/#the-mask-size e4fea94ca40cbb698bfd3af9611be16a75bb3157 `Astley Chen`<mailto:aschen@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether sizing mask layer works correctly or not.
|
||||
mask-size-auto-auto reference/mask-size-auto-ref CSS Masking: mask-size: mask layer size https://www.w3.org/TR/css-masking-1/#the-mask-size 62de97df8d464a7b76966701ca2e25a0e75c77ee `Astley Chen`<mailto:aschen@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether sizing mask layer works correctly or not.
|
||||
mask-size-auto-length reference/mask-size-auto-length-ref CSS Masking: mask-size: mask layer size https://www.w3.org/TR/css-masking-1/#the-mask-size 906b70a607727dc5d025983ea8922ab02d8b2ac3 `Astley Chen`<mailto:aschen@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether sizing mask layer works correctly or not.
|
||||
mask-size-auto-percent reference/mask-size-auto-length-ref CSS Masking: mask-size: mask layer size https://www.w3.org/TR/css-masking-1/#the-mask-size 06f83eb2a378769fda5f1a1c62340fb94268f1a3 `Astley Chen`<mailto:aschen@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether sizing mask layer works correctly or not.
|
||||
mask-size-contain reference/mask-size-contain-ref CSS Masking: mask-size: mask layer size https://www.w3.org/TR/css-masking-1/#the-mask-size 7101e3cfe23d5466c246ee1894ac738f8ab7814f `Astley Chen`<mailto:aschen@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether sizing mask layer works correctly or not.
|
||||
mask-size-contain-clip-border reference/mask-size-contain-clip-border-ref CSS Masking: mask-size: mask layer size https://www.w3.org/TR/css-masking-1/#the-mask-size 9fc2fbc6bdae0de1d79d08dad713177b17c4166a `Astley Chen`<mailto:aschen@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether sizing mask layer works correctly or not.
|
||||
mask-size-contain-clip-padding reference/mask-size-contain-clip-padding-ref CSS Masking: mask-size: mask layer size https://www.w3.org/TR/css-masking-1/#the-mask-size d0dd9e68421e89ec49152aca685cfaff241dc973 `Astley Chen`<mailto:aschen@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether sizing mask layer works correctly or not.
|
||||
mask-size-contain-position-fifty-fifty reference/mask-size-contain-position-fifty-fifty-ref CSS Masking: mask-size: mask layer size https://www.w3.org/TR/css-masking-1/#the-mask-size 50e1b201cf19ccfae7b5df1e813cc5612b93bf84 `Astley Chen`<mailto:aschen@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether sizing mask layer works correctly or not.
|
||||
mask-size-cover reference/mask-size-cover-ref CSS Masking: mask-size: mask layer size https://www.w3.org/TR/css-masking-1/#the-mask-size c70410df67876b27db35b90c66d4a14445ee150b `Astley Chen`<mailto:aschen@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether sizing mask layer works correctly or not.
|
||||
mask-size-length reference/mask-size-length-length-ref CSS Masking: mask-size: mask layer size https://www.w3.org/TR/css-masking-1/#the-mask-size 374a109fa6106415e9b7a17aff240f92db394890 `Astley Chen`<mailto:aschen@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether sizing mask layer works correctly or not.
|
||||
mask-size-length-auto reference/mask-size-length-length-ref CSS Masking: mask-size: mask layer size https://www.w3.org/TR/css-masking-1/#the-mask-size c5bd356ac26183b11a2c292b0f87d1679053ec3e `Astley Chen`<mailto:aschen@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether sizing mask layer works correctly or not.
|
||||
mask-size-length-length reference/mask-size-length-length-ref CSS Masking: mask-size: mask layer size https://www.w3.org/TR/css-masking-1/#the-mask-size d32c00ed762d376145477fd345aa4b23ca12820b `Astley Chen`<mailto:aschen@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether sizing mask layer works correctly or not.
|
||||
mask-size-length-percent reference/mask-size-length-percent-ref CSS Masking: mask-size: mask layer size https://www.w3.org/TR/css-masking-1/#the-mask-size bebbc73ea2c71758217f71dace09929e6cc0fe1f `Astley Chen`<mailto:aschen@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether sizing mask layer works correctly or not.
|
||||
mask-size-percent reference/mask-size-percent-percent-ref CSS Masking: mask-size: mask layer size https://www.w3.org/TR/css-masking-1/#the-mask-size 8c4bd036de832041b3a0c0438b437497ab807a7a `Astley Chen`<mailto:aschen@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether sizing mask layer works correctly or not.
|
||||
mask-size-percent-auto reference/mask-size-percent-percent-ref CSS Masking: mask-size: mask layer size https://www.w3.org/TR/css-masking-1/#the-mask-size c01896d8050ebc0033ec1ab58f2faa3d09f72b1a `Astley Chen`<mailto:aschen@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether sizing mask layer works correctly or not.
|
||||
mask-size-percent-length reference/mask-size-percent-percent-ref CSS Masking: mask-size: mask layer size https://www.w3.org/TR/css-masking-1/#the-mask-size 6c2ded16cb5344f1a0cb1d1cd3001935ef3a9d94 `Astley Chen`<mailto:aschen@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether sizing mask layer works correctly or not.
|
||||
mask-size-percent-percent reference/mask-size-percent-percent-ref CSS Masking: mask-size: mask layer size https://www.w3.org/TR/css-masking-1/#the-mask-size 8c1b082b4a8b70eb2c1ac5820337294ddb83b0a1 `Astley Chen`<mailto:aschen@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether sizing mask layer works correctly or not.
|
||||
mask-size-percent-percent-stretch reference/mask-size-percent-percent-stretch-ref CSS Masking: mask-size: mask layer size https://www.w3.org/TR/css-masking-1/#the-mask-size 7d0949f5378ca0a2c6b635713569e0ac53dbadf9 `Astley Chen`<mailto:aschen@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether sizing mask layer works correctly or not.
|
||||
test-mask reference/test-mask-ref CSS Masking: mask-repeat:round repeat; http://www.w3.org/TR/css-masking-1/#the-mask-repeat d958a4c5495e1038da67e6f0a88ada4dbb3f9c1d `Li Jun`<mailto:64835173@qq.com> Test checks that the mask-repeart value
|
||||
|
|
|
|||
8
tests/wpt/css-tests/css-masking-1_dev/xhtml1/blank.xht
Normal file
8
tests/wpt/css-tests/css-masking-1_dev/xhtml1/blank.xht
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<!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><meta charset="utf-8" />
|
||||
<title>Blank document</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
</head><body>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
<body>
|
||||
|
||||
<h1>CSS Masking Level 1 CR Test Suite</h1>
|
||||
<h2>Clipping Paths (53 tests)</h2>
|
||||
<h2>Clipping Paths (72 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column"></col>
|
||||
<col id="refs-column"></col>
|
||||
|
|
@ -623,7 +623,40 @@
|
|||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s5.1">+</a>
|
||||
<a href="https://www.w3.org/TR/css-masking-1/#the-clip-path">5.1 Clipping Shape: the clip-path property</a></th></tr>
|
||||
<!-- 8 tests -->
|
||||
<!-- 27 tests -->
|
||||
<tr id="clip-path-borderbox-1a-5.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="clip-path-borderBox-1a.xht">clip-path-borderbox-1a</a></strong></td>
|
||||
<td><a href="reference/clip-path-geometryBox-1-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: clip-path: clip path border-box
|
||||
<ul class="assert">
|
||||
<li>Test checks whether clip-path border-box works correctly or not. This test is for clip-path applied to an HTML element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-path-borderbox-1b-5.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="clip-path-borderBox-1b.xht">clip-path-borderbox-1b</a></strong></td>
|
||||
<td><a href="reference/clip-path-geometryBox-1-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: clip-path: clip path border-box
|
||||
<ul class="assert">
|
||||
<li>Test checks whether clip-path border-box works correctly or not. This test is for clip-path applied to an SVG element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-path-borderbox-1c-5.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="clip-path-borderBox-1c.xht">clip-path-borderbox-1c</a></strong></td>
|
||||
<td><a href="reference/clip-path-geometryBox-1-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: clip-path: clip path border-box
|
||||
<ul class="assert">
|
||||
<li>Test checks whether clip-path border-box works correctly or not. This test is for clip-path applied to an SVG SVG element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-path-circle-001-5.1" class="">
|
||||
<td>
|
||||
<a href="clip-path-circle-001.xht">clip-path-circle-001</a></td>
|
||||
|
|
@ -712,6 +745,182 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-path-contentbox-1a-5.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="clip-path-contentBox-1a.xht">clip-path-contentbox-1a</a></strong></td>
|
||||
<td><a href="reference/clip-path-geometryBox-1-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: clip-path: clip path content-box
|
||||
<ul class="assert">
|
||||
<li>Test checks whether clip-path content-box works correctly or not. This test is for clip-path applied to an HTML element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-path-contentbox-1b-5.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="clip-path-contentBox-1b.xht">clip-path-contentbox-1b</a></strong></td>
|
||||
<td><a href="reference/clip-path-geometryBox-1-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: clip-path: clip path content-box
|
||||
<ul class="assert">
|
||||
<li>Test checks whether clip-path content-box works correctly or not. This test is for clip-path applied to an SVG element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-path-contentbox-1c-5.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="clip-path-contentBox-1c.xht">clip-path-contentbox-1c</a></strong></td>
|
||||
<td><a href="reference/clip-path-geometryBox-1-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: clip-path: clip path content-box
|
||||
<ul class="assert">
|
||||
<li>Test checks whether clip-path content-box works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-path-fillbox-1a-5.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="clip-path-fillBox-1a.xht">clip-path-fillbox-1a</a></strong></td>
|
||||
<td><a href="reference/clip-path-geometryBox-1-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: clip-path: clip path fill-box
|
||||
<ul class="assert">
|
||||
<li>Test checks whether clip-path fill-box works correctly or not. This test is for clip-path applied to an SVG SVG element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-path-geometrybox-2-5.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="clip-path-geometryBox-2.xht">clip-path-geometrybox-2</a></strong></td>
|
||||
<td><a href="reference/clip-path-geometryBox-2-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: clip-path: clip path margin-box
|
||||
<ul class="assert">
|
||||
<li>Test checks whether clip-path margin-box works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-path-localref-1-5.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="clip-path-localRef-1.xht">clip-path-localref-1</a></strong></td>
|
||||
<td><a href="reference/clip-path-localRef-1-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>Testcase for clip-path linked to local-ref URL
|
||||
<ul class="assert">
|
||||
<li>Test checks after changing base URL, whether fragment URLs works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-path-marginbox-1a-5.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="clip-path-marginBox-1a.xht">clip-path-marginbox-1a</a></strong></td>
|
||||
<td><a href="reference/clip-path-geometryBox-1-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: clip-path: clip path margin-box
|
||||
<ul class="assert">
|
||||
<li>Test checks whether clip-path margin-box works correctly or not. This test is for clip-path applied to an SVG element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-path-mix-blend-mode-1-5.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="clip-path-mix-blend-mode-1.xht">clip-path-mix-blend-mode-1</a></strong></td>
|
||||
<td><a href="reference/clip-path-mix-blend-mode-1-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: clip-path with mix-blend-mode
|
||||
<ul class="assert">
|
||||
<li>Test checks whether clip-path works with mix-blend-mode correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-path-paddingbox-1a-5.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="clip-path-paddingBox-1a.xht">clip-path-paddingbox-1a</a></strong></td>
|
||||
<td><a href="reference/clip-path-geometryBox-1-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: clip-path: clip path padding-box
|
||||
<ul class="assert">
|
||||
<li>Test checks whether clip-path padding-box works correctly or not. This test is for clip-path applied to an HTML element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-path-paddingbox-1b-5.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="clip-path-paddingBox-1b.xht">clip-path-paddingbox-1b</a></strong></td>
|
||||
<td><a href="reference/clip-path-geometryBox-1-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: clip-path: clip path padding-box
|
||||
<ul class="assert">
|
||||
<li>Test checks whether clip-path padding-box works correctly or not. This test is for clip-path applied to an SVG element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-path-paddingbox-1c-5.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="clip-path-paddingBox-1c.xht">clip-path-paddingbox-1c</a></strong></td>
|
||||
<td><a href="reference/clip-path-geometryBox-1-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: clip-path: clip path padding-box
|
||||
<ul class="assert">
|
||||
<li>Test checks whether clip-path padding-box works correctly or not. This test is for clip-path applied to an SVG SVG element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-path-strokebox-1a-5.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="clip-path-strokeBox-1a.xht">clip-path-strokebox-1a</a></strong></td>
|
||||
<td><a href="reference/clip-path-geometryBox-1-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: clip-path: clip path stroke-box
|
||||
<ul class="assert">
|
||||
<li>Test checks whether clip-path stroke-box works correctly or not. This test is for clip-path applied to an SVG SVG element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-path-strokebox-1b-5.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="clip-path-strokeBox-1b.xht">clip-path-strokebox-1b</a></strong></td>
|
||||
<td><a href="reference/clip-path-geometryBox-1-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: clip-path: clip path stroke-box
|
||||
<ul class="assert">
|
||||
<li>Test checks whether clip-path stroke-box works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-path-viewbox-1a-5.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="clip-path-viewBox-1a.xht">clip-path-viewbox-1a</a></strong></td>
|
||||
<td><a href="reference/clip-path-geometryBox-1-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: clip-path: clip path view-box
|
||||
<ul class="assert">
|
||||
<li>Test checks whether clip-path view-box works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-path-viewbox-1b-5.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="clip-path-viewBox-1b.xht">clip-path-viewbox-1b</a></strong></td>
|
||||
<td><a href="reference/clip-path-geometryBox-1-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: clip-path: clip path view-box with viewbox
|
||||
<ul class="assert">
|
||||
<li>Test checks whether clip-path view-box with viewbox works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="clip-path-viewbox-1c-5.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="clip-path-viewBox-1c.xht">clip-path-viewbox-1c</a></strong></td>
|
||||
<td><a href="reference/clip-path-geometryBox-1-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: clip-path: clip path view-box
|
||||
<ul class="assert">
|
||||
<li>Test checks whether clip-path view-box works correctly or not. This test is for clip-path applied to an SVG SVG element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s5.1.#propdef-clip-path">
|
||||
<!-- 27 tests -->
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
<body>
|
||||
|
||||
<h1>CSS Masking Level 1 CR Test Suite</h1>
|
||||
<h2>Positioned Masks (49 tests)</h2>
|
||||
<h2>Positioned Masks (73 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column"></col>
|
||||
<col id="refs-column"></col>
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s7.1">+</a>
|
||||
<a href="https://www.w3.org/TR/css-masking-1/#the-mask-image">7.1 Mask Image Source: the mask-image property</a></th></tr>
|
||||
<!-- 4 tests -->
|
||||
<!-- 23 tests -->
|
||||
<tr id="mask-image-1a-7.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-image-1a.xht">mask-image-1a</a></strong></td>
|
||||
|
|
@ -71,6 +71,17 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-image-1d-7.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-image-1d.xht">mask-image-1d</a></strong></td>
|
||||
<td><a href="reference/mask-image-1-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-image: mask layer image
|
||||
<ul class="assert">
|
||||
<li>Test checks whether treat unresolvable mask as no-mask for a SVG element embedded in HTML document.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-image-2-7.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-image-2.xht">mask-image-2</a></strong></td>
|
||||
|
|
@ -82,6 +93,204 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-image-3a-7.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-image-3a.xht">mask-image-3a</a></strong></td>
|
||||
<td><a href="reference/mask-image-3-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-image: multiple SVG masks
|
||||
<ul class="assert">
|
||||
<li>Test checks whether SVG mask as mask layer works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-image-3b-7.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-image-3b.xht">mask-image-3b</a></strong></td>
|
||||
<td><a href="reference/mask-image-3-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-image: interleave SVG mask with image mask
|
||||
<ul class="assert">
|
||||
<li>Test checks whether SVG mask and image as mask layer works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-image-3c-7.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-image-3c.xht">mask-image-3c</a></strong></td>
|
||||
<td><a href="reference/mask-image-3-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-image: interleave SVG mask with image mask
|
||||
<ul class="assert">
|
||||
<li>Test checks whether SVG mask and image as mask layer works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-image-3d-7.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-image-3d.xht">mask-image-3d</a></strong></td>
|
||||
<td><a href="reference/mask-image-3-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-image: interleave SVG mask with image mask
|
||||
<ul class="assert">
|
||||
<li>Test checks whether SVG mask and image as mask layer works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-image-3e-7.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-image-3e.xht">mask-image-3e</a></strong></td>
|
||||
<td><a href="reference/mask-image-3-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-image: interleave SVG mask with image mask
|
||||
<ul class="assert">
|
||||
<li>Test checks whether SVG mask and image as mask layer works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-image-3f-7.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-image-3f.xht">mask-image-3f</a></strong></td>
|
||||
<td><a href="reference/mask-image-3-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-image: SVG masks apply on border area
|
||||
<ul class="assert">
|
||||
<li>Test checks whether SVG mask layer can be positioned on box-shadow area correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-image-3g-7.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-image-3g.xht">mask-image-3g</a></strong></td>
|
||||
<td><a href="reference/mask-image-3-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-image: SVG masks apply on border area
|
||||
<ul class="assert">
|
||||
<li>Test checks whether apply transfrom to a SVG mask layer works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-image-3h-7.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-image-3h.xht">mask-image-3h</a></strong></td>
|
||||
<td><a href="reference/mask-image-3-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: clip-path in SVG mask
|
||||
<ul class="assert">
|
||||
<li>Test checks whether clip-path in SVG mask works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-image-3i-7.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-image-3i.xht">mask-image-3i</a></strong></td>
|
||||
<td><a href="reference/mask-image-3-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-image: interleave SVG mask with image mask
|
||||
<ul class="assert">
|
||||
<li>Test checks whether SVG mask and image as mask layer works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-image-4a-7.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-image-4a.xht">mask-image-4a</a></strong></td>
|
||||
<td><a href="blank.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-image: unresovlable mask url
|
||||
<ul class="assert">
|
||||
<li>Test checks non-existent url should be counted as an image layer of transparent black.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-image-4b-7.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-image-4b.xht">mask-image-4b</a></strong></td>
|
||||
<td><a href="blank.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-image: unresovlable mask url
|
||||
<ul class="assert">
|
||||
<li>Test checks a mask reference to a none-mask SVG element should be counted as an image layer of transparent black.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-image-5-7.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-image-5.xht">mask-image-5</a></strong></td>
|
||||
<td><a href="reference/mask-image-5-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-image: data url mask
|
||||
<ul class="assert">
|
||||
<li>Test checks handling data url mask correctly.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-image-6-7.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-image-6.xht">mask-image-6</a></strong></td>
|
||||
<td><a href="reference/mask-image-6-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask on inline element
|
||||
<ul class="assert">
|
||||
<li>Test checks whether mask on inline elemnt works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-opacity-1a-7.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-opacity-1a.xht">mask-opacity-1a</a></strong></td>
|
||||
<td><a href="reference/mask-opacity-1-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-image: mask with filter and opacity
|
||||
<ul class="assert">
|
||||
<li>Test checks whether apply opacity to masked element correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-opacity-1b-7.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-opacity-1b.xht">mask-opacity-1b</a></strong></td>
|
||||
<td><a href="reference/mask-opacity-1-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-image: mask with opacity
|
||||
<ul class="assert">
|
||||
<li>Test checks whether apply opacity to masked element correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-opacity-1c-7.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-opacity-1c.xht">mask-opacity-1c</a></strong></td>
|
||||
<td><a href="reference/mask-opacity-1-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-image: filter with opacity
|
||||
<ul class="assert">
|
||||
<li>Test checks whether apply opacity to masked element correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-opacity-1d-7.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-opacity-1d.xht">mask-opacity-1d</a></strong></td>
|
||||
<td><a href="reference/mask-opacity-1-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-image: mask with opacity
|
||||
<ul class="assert">
|
||||
<li>Test checks whether apply opacity to masked element correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-opacity-1e-7.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-opacity-1e.xht">mask-opacity-1e</a></strong></td>
|
||||
<td><a href="reference/mask-opacity-1-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-image: mask with opacity
|
||||
<ul class="assert">
|
||||
<li>Test checks whether apply opacity to masked element correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s7.1.#mask-layer-image">
|
||||
<!-- 0 tests -->
|
||||
|
|
@ -105,7 +314,7 @@
|
|||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.2.#propdef-mask-mode">
|
||||
<!-- 2 tests -->
|
||||
<!-- 3 tests -->
|
||||
<tr id="mask-mode-a-7.2.#propdef-mask-mode" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-mode-a.xht">mask-mode-a</a></strong></td>
|
||||
|
|
@ -128,6 +337,17 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-mode-to-mask-type-7.2.#propdef-mask-mode" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-mode-to-mask-type.xht">mask-mode-to-mask-type</a></strong></td>
|
||||
<td><a href="reference/mask-mode-to-mask-type-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-mode with vector image
|
||||
<ul class="assert">
|
||||
<li>Test checks the fallback logic between mask-mode and mask-type.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s7.2.#typedef-masking-mode">
|
||||
<!-- 0 tests -->
|
||||
|
|
@ -361,7 +581,7 @@
|
|||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s7.5">+</a>
|
||||
<a href="https://www.w3.org/TR/css-masking-1/#the-mask-clip">7.5 Masking Area: the mask-clip property</a></th></tr>
|
||||
<!-- 1 tests -->
|
||||
<!-- 2 tests -->
|
||||
<tr id="mask-clip-1-7.5" class="">
|
||||
<td>
|
||||
<a href="mask-clip-1.xht">mask-clip-1</a></td>
|
||||
|
|
@ -369,7 +589,18 @@
|
|||
<td></td>
|
||||
<td>CSS Masking: mask-clip: clip mask image
|
||||
<ul class="assert">
|
||||
<li>border-box, padding-box, and content-box values of mask-clip should clip to the appropriate boxes.</li>
|
||||
<li>border-box, padding-box, content-box and no-clip values of mask-clip should clip to the appropriate boxes.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-clip-2-7.5" class="">
|
||||
<td>
|
||||
<a href="mask-clip-2.xht">mask-clip-2</a></td>
|
||||
<td><a href="reference/mask-clip-2-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-clip: clip mask image
|
||||
<ul class="assert">
|
||||
<li>fill-box, stroke-box and view-box values of mask-clip should clip to the appropriate boxes.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -408,7 +639,7 @@
|
|||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s7.6">+</a>
|
||||
<a href="https://www.w3.org/TR/css-masking-1/#the-mask-origin">7.6 Positioning Area: the mask-origin property</a></th></tr>
|
||||
<!-- 2 tests -->
|
||||
<!-- 3 tests -->
|
||||
<tr id="mask-origin-1-7.6" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-origin-1.xht">mask-origin-1</a></strong></td>
|
||||
|
|
@ -431,6 +662,17 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-origin-3-7.6" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-origin-3.xht">mask-origin-3</a></strong></td>
|
||||
<td><a href="reference/mask-origin-3-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-origin: mask positioning area
|
||||
<ul class="assert">
|
||||
<li>Test checks whether setting mask position area works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s7.6.#mask-positioning-area">
|
||||
<!-- 0 tests -->
|
||||
|
|
@ -670,7 +912,7 @@
|
|||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s7.8">+</a>
|
||||
<a href="https://www.w3.org/TR/css-masking-1/#the-mask-composite">7.8 Compositing mask layers: the mask-composite property</a></th></tr>
|
||||
<!-- 4 tests -->
|
||||
<!-- 6 tests -->
|
||||
<tr id="mask-composite-1a-7.8" class="">
|
||||
<td>
|
||||
<a href="mask-composite-1a.xht">mask-composite-1a</a></td>
|
||||
|
|
@ -693,6 +935,17 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-composite-1c-7.8" class="">
|
||||
<td>
|
||||
<a href="mask-composite-1c.xht">mask-composite-1c</a></td>
|
||||
<td><a href="reference/mask-composite-1-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-composite: compose svg mask
|
||||
<ul class="assert">
|
||||
<li>Test checks that vector-mask-image can be composed correctly by different mask-composite value.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-composite-2a-7.8" class="">
|
||||
<td>
|
||||
<a href="mask-composite-2a.xht">mask-composite-2a</a></td>
|
||||
|
|
@ -715,6 +968,17 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-composite-2c-7.8" class="">
|
||||
<td>
|
||||
<a href="mask-composite-2c.xht">mask-composite-2c</a></td>
|
||||
<td><a href="reference/mask-composite-2-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-composite: compose SVG mask
|
||||
<ul class="assert">
|
||||
<li>Test checks that svg-mask can be composed correctly by different mask-composite value.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s7.8.#destination">
|
||||
<!-- 0 tests -->
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: clip-path: clip path border-box</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-clip-path" rel="help" />
|
||||
<link href="reference/clip-path-geometryBox-1-ref.xht" rel="match" />
|
||||
<meta content="Test checks whether clip-path border-box works correctly or not. This test is for clip-path applied to an HTML element." name="assert" />
|
||||
<style type="text/css">
|
||||
div {
|
||||
position: absolute;
|
||||
left: 50px;
|
||||
top: 50px;
|
||||
background-color: blue;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
padding: 10px;
|
||||
border: solid blue 25px;
|
||||
clip-path: circle(farthest-side) border-box;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: clip-path: clip path border-box</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-clip-path" rel="help" />
|
||||
<link href="reference/clip-path-geometryBox-1-ref.xht" rel="match" />
|
||||
<meta content="Test checks whether clip-path border-box works correctly or not. This test is for clip-path applied to an SVG element." name="assert" />
|
||||
</head>
|
||||
<body>
|
||||
<svg width="200" style="position: absolute; left: 15px; top: 10px;" height="200" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="100" clip-path="circle(50%) border-box" y="40" x="35" fill="blue" height="100"></rect>
|
||||
</svg>
|
||||
|
||||
|
||||
</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>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: clip-path: clip path border-box</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-clip-path" rel="help" />
|
||||
<link href="reference/clip-path-geometryBox-1-ref.xht" rel="match" />
|
||||
<meta content="Test checks whether clip-path border-box works correctly or not. This test is for clip-path applied to an SVG SVG element." name="assert" />
|
||||
<style type="text/css">
|
||||
svg {
|
||||
position: absolute;
|
||||
left: 50px;
|
||||
top: 50px;
|
||||
background-color: blue;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
padding: 10px;
|
||||
border: solid blue 25px;
|
||||
clip-path: circle(farthest-side) border-box;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect y="0" width="200" fill="blue" x="0" height="200"></rect>
|
||||
</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>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: clip-path: clip path content-box</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-clip-path" rel="help" />
|
||||
<link href="reference/clip-path-geometryBox-1-ref.xht" rel="match" />
|
||||
<meta content="Test checks whether clip-path content-box works correctly or not. This test is for clip-path applied to an HTML element." name="assert" />
|
||||
<style type="text/css">
|
||||
div {
|
||||
background-color: blue;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 40px;
|
||||
clip-path: circle(farthest-side) content-box;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: clip-path: clip path content-box</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-clip-path" rel="help" />
|
||||
<link href="reference/clip-path-geometryBox-1-ref.xht" rel="match" />
|
||||
<meta content="Test checks whether clip-path content-box works correctly or not. This test is for clip-path applied to an SVG element." name="assert" />
|
||||
</head>
|
||||
<body>
|
||||
<svg width="200" style="position: absolute; left: 0px; top: 0px;" height="200" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="100" clip-path="circle(50%) content-box" y="50" x="50" fill="blue" height="100"></rect>
|
||||
</svg>
|
||||
|
||||
|
||||
</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>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: clip-path: clip path content-box</title>
|
||||
<link href="mailto:cku@mozilla.com" rel="author" title="CJ Ku" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-clip-path" rel="help" />
|
||||
<link href="reference/clip-path-geometryBox-1-ref.xht" rel="match" />
|
||||
<meta content="Test checks whether clip-path content-box works correctly or not." name="assert" />
|
||||
<style type="text/css">
|
||||
svg {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 40px;
|
||||
clip-path: circle(farthest-side) content-box;
|
||||
}
|
||||
</style></head>
|
||||
|
||||
<body>
|
||||
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect y="0" width="200" fill="blue" x="0" height="200"></rect>
|
||||
</svg>
|
||||
|
||||
|
||||
</body></html>
|
||||
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