mirror of
https://github.com/servo/servo.git
synced 2025-08-06 14:10:11 +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 -
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue