mirror of
https://github.com/servo/servo.git
synced 2025-08-06 22:15:33 +01:00
Update CSS tests to revision b9c63d615a65c4d96f26969bcd504d4e1c3cdab8
This commit is contained in:
Ms2ger
parent
0e0e902edd
commit
4d13f9f5d5
641 changed files with 24127 additions and 11370 deletions
|
|
@ -39,72 +39,18 @@
|
|||
<tbody id="s.#acknowledgments">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-compositing-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-css-shapes">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-css21">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-css3-transforms">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-css3bg">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-css3color">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-css3val">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-filter-effects">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-html5">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-rfc2119">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-svg11">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#changes">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#conformance">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#conformance-classes">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#contents">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#conventions">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#cr-exit-criteria">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#experimental">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#index">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#informative">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#normative">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#partial">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#property-index">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
|
|
@ -117,9 +63,6 @@
|
|||
<tbody id="s.#subtitle">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#testing">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#title">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
<body>
|
||||
|
||||
<h1>CSS Masking Level 1 CR Test Suite</h1>
|
||||
<h2>Positioned Masks (5 tests)</h2>
|
||||
<h2>Positioned Masks (49 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column"></col>
|
||||
<col id="refs-column"></col>
|
||||
|
|
@ -37,7 +37,51 @@
|
|||
<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>
|
||||
<!-- 0 tests -->
|
||||
<!-- 4 tests -->
|
||||
<tr id="mask-image-1a-7.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-image-1a.xht">mask-image-1a</a></strong></td>
|
||||
<td><a href="reference/mask-image-1-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-image: mask layer image
|
||||
<ul class="assert">
|
||||
<li>Test checks whether image as mask layer works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-image-1b-7.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-image-1b.xht">mask-image-1b</a></strong></td>
|
||||
<td><a href="reference/mask-image-1-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-image: mask layer image
|
||||
<ul class="assert">
|
||||
<li>Test checks whether SVG image as mask layer works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-image-1c-7.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-image-1c.xht">mask-image-1c</a></strong></td>
|
||||
<td><a href="reference/mask-image-1-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-image: mask layer image
|
||||
<ul class="assert">
|
||||
<li>Test checks whether SVG mask element as mask layer works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-image-2-7.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-image-2.xht">mask-image-2</a></strong></td>
|
||||
<td><a href="reference/mask-image-2-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-image: mask layer image
|
||||
<ul class="assert">
|
||||
<li>Test checks whether gradient CSS image as mask layer works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s7.1.#mask-layer-image">
|
||||
<!-- 0 tests -->
|
||||
|
|
@ -61,7 +105,29 @@
|
|||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.2.#propdef-mask-mode">
|
||||
<!-- 0 tests -->
|
||||
<!-- 2 tests -->
|
||||
<tr id="mask-mode-a-7.2.#propdef-mask-mode" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-mode-a.xht">mask-mode-a</a></strong></td>
|
||||
<td><a href="reference/mask-mode-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-mode with vector image
|
||||
<ul class="assert">
|
||||
<li>Test checks that mask an SVG image referenced by mask-image is correct with different mask mode.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-mode-b-7.2.#propdef-mask-mode" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-mode-b.xht">mask-mode-b</a></strong></td>
|
||||
<td><a href="reference/mask-mode-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-mode with raster image
|
||||
<ul class="assert">
|
||||
<li>Test checks that mask a PNG image referenced by mask-image is correct with different mask mode.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s7.2.#typedef-masking-mode">
|
||||
<!-- 0 tests -->
|
||||
|
|
@ -79,7 +145,40 @@
|
|||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s7.3">+</a>
|
||||
<a href="https://www.w3.org/TR/css-masking-1/#the-mask-repeat">7.3 Tiling Mask Images: The mask-repeat property</a></th></tr>
|
||||
<!-- 1 tests -->
|
||||
<!-- 4 tests -->
|
||||
<tr id="mask-repeat-1-7.3" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-repeat-1.xht">mask-repeat-1</a></strong></td>
|
||||
<td><a href="reference/mask-repeat-1-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-repeat: repeated mask layer image
|
||||
<ul class="assert">
|
||||
<li>Test checks whether repeated mask layer works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-repeat-2-7.3" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-repeat-2.xht">mask-repeat-2</a></strong></td>
|
||||
<td><a href="reference/mask-repeat-2-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-repeat: repeated mask layer image
|
||||
<ul class="assert">
|
||||
<li>Test checks whether repeated mask layer works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-repeat-3-7.3" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-repeat-3.xht">mask-repeat-3</a></strong></td>
|
||||
<td><a href="reference/mask-repeat-3-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-repeat: repeated mask layer image
|
||||
<ul class="assert">
|
||||
<li>Test checks whether repeated mask layer works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="test-mask-7.3" class="">
|
||||
<td>
|
||||
<a href="test-mask.xht">test-mask</a></td>
|
||||
|
|
@ -99,7 +198,161 @@
|
|||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s7.4">+</a>
|
||||
<a href="https://www.w3.org/TR/css-masking-1/#the-mask-position">7.4 Positioning Mask Images: the mask-position property</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
<!-- 14 tests -->
|
||||
<tr id="mask-position-1a-7.4" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-position-1a.xht">mask-position-1a</a></strong></td>
|
||||
<td><a href="reference/mask-position-1-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-position: mask positioning
|
||||
<ul class="assert">
|
||||
<li>Test checks whether positioning mask layer works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-position-1b-7.4" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-position-1b.xht">mask-position-1b</a></strong></td>
|
||||
<td><a href="reference/mask-position-1-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-position: mask positioning
|
||||
<ul class="assert">
|
||||
<li>Test checks whether positioning mask layer works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-position-1c-7.4" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-position-1c.xht">mask-position-1c</a></strong></td>
|
||||
<td><a href="reference/mask-position-1-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-position: mask positioning
|
||||
<ul class="assert">
|
||||
<li>Test checks whether positioning mask layer works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-position-2a-7.4" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-position-2a.xht">mask-position-2a</a></strong></td>
|
||||
<td><a href="reference/mask-position-2-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-position: mask positioning
|
||||
<ul class="assert">
|
||||
<li>Test checks whether positioning mask layer works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-position-2b-7.4" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-position-2b.xht">mask-position-2b</a></strong></td>
|
||||
<td><a href="reference/mask-position-2-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-position: mask positioning
|
||||
<ul class="assert">
|
||||
<li>Test checks whether positioning mask layer works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-position-3a-7.4" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-position-3a.xht">mask-position-3a</a></strong></td>
|
||||
<td><a href="reference/mask-position-3-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-position: mask positioning
|
||||
<ul class="assert">
|
||||
<li>Test checks whether positioning mask layer works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-position-3b-7.4" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-position-3b.xht">mask-position-3b</a></strong></td>
|
||||
<td><a href="reference/mask-position-3-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-position: mask positioning
|
||||
<ul class="assert">
|
||||
<li>Test checks whether positioning mask layer works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-position-4a-7.4" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-position-4a.xht">mask-position-4a</a></strong></td>
|
||||
<td><a href="reference/mask-position-4-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-position: mask positioning
|
||||
<ul class="assert">
|
||||
<li>Test checks whether positioning mask layer works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-position-4b-7.4" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-position-4b.xht">mask-position-4b</a></strong></td>
|
||||
<td><a href="reference/mask-position-4-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-position: mask positioning
|
||||
<ul class="assert">
|
||||
<li>Test checks whether positioning mask layer works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-position-4c-7.4" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-position-4c.xht">mask-position-4c</a></strong></td>
|
||||
<td><a href="reference/mask-position-4-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-position: mask positioning
|
||||
<ul class="assert">
|
||||
<li>Test checks whether positioning mask layer works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-position-4d-7.4" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-position-4d.xht">mask-position-4d</a></strong></td>
|
||||
<td><a href="reference/mask-position-4-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-position: mask positioning
|
||||
<ul class="assert">
|
||||
<li>Test checks whether positioning mask layer works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-position-5-7.4" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-position-5.xht">mask-position-5</a></strong></td>
|
||||
<td><a href="reference/mask-position-5-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-position: mask positioning
|
||||
<ul class="assert">
|
||||
<li>Test checks whether positioning mask layer works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-position-6-7.4" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-position-6.xht">mask-position-6</a></strong></td>
|
||||
<td><a href="reference/mask-position-6-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-position: mask positioning
|
||||
<ul class="assert">
|
||||
<li>Test checks whether positioning mask layer works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-position-7-7.4" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-position-7.xht">mask-position-7</a></strong></td>
|
||||
<td><a href="reference/mask-position-7-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-position: mask positioning
|
||||
<ul class="assert">
|
||||
<li>Test checks whether positioning mask layer works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s7.4.#propdef-mask-position">
|
||||
<!-- 0 tests -->
|
||||
|
|
@ -108,7 +361,18 @@
|
|||
<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>
|
||||
<!-- 0 tests -->
|
||||
<!-- 1 tests -->
|
||||
<tr id="mask-clip-1-7.5" class="">
|
||||
<td>
|
||||
<a href="mask-clip-1.xht">mask-clip-1</a></td>
|
||||
<td><a href="reference/mask-clip-1-ref.xht">=</a> </td>
|
||||
<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>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s7.5.#mask-painting-area">
|
||||
<!-- 0 tests -->
|
||||
|
|
@ -144,7 +408,29 @@
|
|||
<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>
|
||||
<!-- 0 tests -->
|
||||
<!-- 2 tests -->
|
||||
<tr id="mask-origin-1-7.6" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-origin-1.xht">mask-origin-1</a></strong></td>
|
||||
<td><a href="reference/mask-origin-1-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-origin: mask positioning area
|
||||
<ul class="assert">
|
||||
<li>Test checks whether setting mask position area works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-origin-2-7.6" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-origin-2.xht">mask-origin-2</a></strong></td>
|
||||
<td><a href="reference/mask-origin-2-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-origin: mask positioning area
|
||||
<ul class="assert">
|
||||
<li>Test checks whether setting mask origin to margin-box works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s7.6.#mask-positioning-area">
|
||||
<!-- 0 tests -->
|
||||
|
|
@ -177,7 +463,205 @@
|
|||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s7.7">+</a>
|
||||
<a href="https://www.w3.org/TR/css-masking-1/#the-mask-size">7.7 Sizing Mask Images: the mask-size property</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
<!-- 18 tests -->
|
||||
<tr id="mask-size-auto-7.7" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-size-auto.xht">mask-size-auto</a></strong></td>
|
||||
<td><a href="reference/mask-size-auto-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-size: mask layer size
|
||||
<ul class="assert">
|
||||
<li>Test checks whether sizing mask layer works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-size-auto-auto-7.7" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-size-auto-auto.xht">mask-size-auto-auto</a></strong></td>
|
||||
<td><a href="reference/mask-size-auto-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-size: mask layer size
|
||||
<ul class="assert">
|
||||
<li>Test checks whether sizing mask layer works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-size-auto-length-7.7" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-size-auto-length.xht">mask-size-auto-length</a></strong></td>
|
||||
<td><a href="reference/mask-size-auto-length-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-size: mask layer size
|
||||
<ul class="assert">
|
||||
<li>Test checks whether sizing mask layer works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-size-auto-percent-7.7" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-size-auto-percent.xht">mask-size-auto-percent</a></strong></td>
|
||||
<td><a href="reference/mask-size-auto-length-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-size: mask layer size
|
||||
<ul class="assert">
|
||||
<li>Test checks whether sizing mask layer works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-size-contain-7.7" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-size-contain.xht">mask-size-contain</a></strong></td>
|
||||
<td><a href="reference/mask-size-contain-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-size: mask layer size
|
||||
<ul class="assert">
|
||||
<li>Test checks whether sizing mask layer works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-size-contain-clip-border-7.7" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-size-contain-clip-border.xht">mask-size-contain-clip-border</a></strong></td>
|
||||
<td><a href="reference/mask-size-contain-clip-border-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-size: mask layer size
|
||||
<ul class="assert">
|
||||
<li>Test checks whether sizing mask layer works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-size-contain-clip-padding-7.7" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-size-contain-clip-padding.xht">mask-size-contain-clip-padding</a></strong></td>
|
||||
<td><a href="reference/mask-size-contain-clip-padding-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-size: mask layer size
|
||||
<ul class="assert">
|
||||
<li>Test checks whether sizing mask layer works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-size-contain-position-fifty-fifty-7.7" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-size-contain-position-fifty-fifty.xht">mask-size-contain-position-fifty-fifty</a></strong></td>
|
||||
<td><a href="reference/mask-size-contain-position-fifty-fifty-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-size: mask layer size
|
||||
<ul class="assert">
|
||||
<li>Test checks whether sizing mask layer works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-size-cover-7.7" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-size-cover.xht">mask-size-cover</a></strong></td>
|
||||
<td><a href="reference/mask-size-cover-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-size: mask layer size
|
||||
<ul class="assert">
|
||||
<li>Test checks whether sizing mask layer works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-size-length-7.7" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-size-length.xht">mask-size-length</a></strong></td>
|
||||
<td><a href="reference/mask-size-length-length-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-size: mask layer size
|
||||
<ul class="assert">
|
||||
<li>Test checks whether sizing mask layer works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-size-length-auto-7.7" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-size-length-auto.xht">mask-size-length-auto</a></strong></td>
|
||||
<td><a href="reference/mask-size-length-length-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-size: mask layer size
|
||||
<ul class="assert">
|
||||
<li>Test checks whether sizing mask layer works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-size-length-length-7.7" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-size-length-length.xht">mask-size-length-length</a></strong></td>
|
||||
<td><a href="reference/mask-size-length-length-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-size: mask layer size
|
||||
<ul class="assert">
|
||||
<li>Test checks whether sizing mask layer works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-size-length-percent-7.7" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-size-length-percent.xht">mask-size-length-percent</a></strong></td>
|
||||
<td><a href="reference/mask-size-length-percent-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-size: mask layer size
|
||||
<ul class="assert">
|
||||
<li>Test checks whether sizing mask layer works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-size-percent-7.7" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-size-percent.xht">mask-size-percent</a></strong></td>
|
||||
<td><a href="reference/mask-size-percent-percent-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-size: mask layer size
|
||||
<ul class="assert">
|
||||
<li>Test checks whether sizing mask layer works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-size-percent-auto-7.7" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-size-percent-auto.xht">mask-size-percent-auto</a></strong></td>
|
||||
<td><a href="reference/mask-size-percent-percent-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-size: mask layer size
|
||||
<ul class="assert">
|
||||
<li>Test checks whether sizing mask layer works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-size-percent-length-7.7" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-size-percent-length.xht">mask-size-percent-length</a></strong></td>
|
||||
<td><a href="reference/mask-size-percent-percent-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-size: mask layer size
|
||||
<ul class="assert">
|
||||
<li>Test checks whether sizing mask layer works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-size-percent-percent-7.7" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-size-percent-percent.xht">mask-size-percent-percent</a></strong></td>
|
||||
<td><a href="reference/mask-size-percent-percent-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-size: mask layer size
|
||||
<ul class="assert">
|
||||
<li>Test checks whether sizing mask layer works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask-size-percent-percent-stretch-7.7" class="primary">
|
||||
<td><strong>
|
||||
<a href="mask-size-percent-percent-stretch.xht">mask-size-percent-percent-stretch</a></strong></td>
|
||||
<td><a href="reference/mask-size-percent-percent-stretch-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Masking: mask-size: mask layer size
|
||||
<ul class="assert">
|
||||
<li>Test checks whether sizing mask layer works correctly or not.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s7.7.#propdef-mask-size">
|
||||
<!-- 0 tests -->
|
||||
|
|
|
|||
|
|
@ -39,28 +39,85 @@
|
|||
<tbody id="sC.#InterfaceSVGMaskElement">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sC.#SVGClipPathElement__clipPathUnits">
|
||||
<tbody id="sInterfaceSVGClipPathElement.#SVGClipPathElement__clipPathUnits">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sC.#SVGClipPathElement__transform">
|
||||
<tbody id="sInterfaceSVGClipPathElement.#SVGClipPathElement__transform">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sC.#SVGMaskElement__height">
|
||||
<tbody id="sInterfaceSVGMaskElement.#SVGMaskElement__height">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sC.#SVGMaskElement__maskContentUnits">
|
||||
<tbody id="sInterfaceSVGMaskElement.#SVGMaskElement__maskContentUnits">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sC.#SVGMaskElement__maskUnits">
|
||||
<tbody id="sInterfaceSVGMaskElement.#SVGMaskElement__maskUnits">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sC.#SVGMaskElement__width">
|
||||
<tbody id="sInterfaceSVGMaskElement.#SVGMaskElement__width">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sC.#SVGMaskElement__x">
|
||||
<tbody id="sInterfaceSVGMaskElement.#SVGMaskElement__x">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sC.#SVGMaskElement__y">
|
||||
<tbody id="sInterfaceSVGMaskElement.#SVGMaskElement__y">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sconformance.#conformance-classes">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sconformance.#conventions">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sconformance.#cr-exit-criteria">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sconformance.#experimental">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sconformance.#partial">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sconformance.#testing">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sinformative.#biblio-css3color">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sinformative.#biblio-filter-effects">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="snormative.#biblio-compositing-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="snormative.#biblio-css-shapes">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="snormative.#biblio-css21">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="snormative.#biblio-css3-transforms">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="snormative.#biblio-css3bg">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="snormative.#biblio-css3val">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="snormative.#biblio-html5">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="snormative.#biblio-rfc2119">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="snormative.#biblio-svg11">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sreferences.#informative">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sreferences.#normative">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,57 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-clip: clip mask image</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<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.xht" rel="match" />
|
||||
<meta content="border-box, padding-box, and content-box values of mask-clip should clip to the appropriate boxes." name="assert" />
|
||||
<style type="text/css">
|
||||
div {
|
||||
/*
|
||||
* content box: 40 x 20
|
||||
* padding box: 52 x 38
|
||||
* border box: 60 x 50
|
||||
* margin box: 66 x 54
|
||||
*/
|
||||
background-color: purple;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
margin: 1px 2px 3px 4px;
|
||||
border: solid transparent;
|
||||
border-width: 8px 2px 4px 6px;
|
||||
padding: 6px 9px 12px 3px;
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
div.mask {
|
||||
mask-size: 100% 100%;
|
||||
mask-origin: border-box;
|
||||
mask-image: url(support/transparent-100x50-blue-100x50.svg);
|
||||
}
|
||||
|
||||
div.border {
|
||||
left: 10px;
|
||||
mask-clip: border-box;
|
||||
}
|
||||
|
||||
div.padding {
|
||||
left: 110px;
|
||||
mask-clip: padding-box;
|
||||
}
|
||||
|
||||
div.content {
|
||||
left: 210px;
|
||||
mask-clip: content-box;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer mask border"></div>
|
||||
<div class="outer mask padding"></div>
|
||||
<div class="outer mask content"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-image: mask layer image</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<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.xht" rel="match" />
|
||||
<meta content="Test checks whether image as mask layer works correctly or not." name="assert" />
|
||||
<style type="text/css">
|
||||
div {
|
||||
background-color: purple;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
div.mask-by-png {
|
||||
mask-image: url(support/transparent-100x50-blue-100x50.png);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="mask-by-png"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-image: mask layer image</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<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.xht" rel="match" />
|
||||
<meta content="Test checks whether SVG image as mask layer works correctly or not." name="assert" />
|
||||
<style type="text/css">
|
||||
div {
|
||||
background-color: purple;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
div.mask-by-svg {
|
||||
mask-image: url(support/transparent-100x50-blue-100x50.svg);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="mask-by-svg"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-image: mask layer image</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<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.xht" rel="match" />
|
||||
<meta content="Test checks whether SVG mask element as mask layer works correctly or not." name="assert" />
|
||||
<style type="text/css">
|
||||
div {
|
||||
background-color: purple;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
div.mask-by-svg-mask {
|
||||
mask-image: url(support/mask-half-transparent-100x100.svg#mask);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="mask-by-svg-mask"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-image: mask layer image</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<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-2-ref.xht" rel="match" />
|
||||
<meta content="Test checks whether gradient CSS image as mask layer works correctly or not." name="assert" />
|
||||
<style type="text/css">
|
||||
div {
|
||||
background-color: purple;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
div.mask-by-gradient-1 {
|
||||
mask-image: linear-gradient(rgba(0,0,255,0), rgba(0,0,255,1)); /* blue gradient mask */
|
||||
}
|
||||
|
||||
div.mask-by-gradient-2 {
|
||||
mask-image: linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); /* red gradient mask */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="mask-by-gradient-1"></div>
|
||||
<div class="mask-by-gradient-2"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: 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-ref.xht" rel="match" />
|
||||
<meta content="Test checks that mask an SVG image referenced by mask-image is correct with different mask mode." name="assert" />
|
||||
<style type="text/css">
|
||||
div {
|
||||
background-color: blue;
|
||||
position: absolute;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
div.auto {
|
||||
left: 10px;
|
||||
mask-mode: match-source;
|
||||
mask-image: url(support/blue-100x100.svg);
|
||||
}
|
||||
|
||||
div.alpha {
|
||||
left: 120px;
|
||||
mask-mode: alpha;
|
||||
mask-image: url(support/blue-100x100.svg);
|
||||
}
|
||||
|
||||
div.luminance1 {
|
||||
left: 230px;
|
||||
mask-mode: luminance;
|
||||
mask-image: url(support/blue-100x100.svg);
|
||||
}
|
||||
|
||||
div.luminance2 {
|
||||
left: 340px;
|
||||
mask-mode: luminance;
|
||||
mask-image: url(support/red-100x100.svg);
|
||||
}
|
||||
|
||||
div.luminance3 {
|
||||
left: 450px;
|
||||
mask-mode: luminance;
|
||||
mask-image: url(support/green-100x100.svg);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="auto"></div>
|
||||
<div class="alpha"></div>
|
||||
<div class="luminance1"></div>
|
||||
<div class="luminance2"></div>
|
||||
<div class="luminance3"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-mode with raster 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-ref.xht" rel="match" />
|
||||
<meta content="Test checks that mask a PNG image referenced by mask-image is correct with different mask mode." name="assert" />
|
||||
<style type="text/css">
|
||||
div {
|
||||
background-color: blue;
|
||||
position: absolute;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
div.auto {
|
||||
left: 10px;
|
||||
mask-mode: match-source;
|
||||
mask-image: url(support/blue-100x100.png);
|
||||
}
|
||||
|
||||
div.alpha {
|
||||
left: 120px;
|
||||
mask-mode: alpha;
|
||||
mask-image: url(support/blue-100x100.png);
|
||||
}
|
||||
|
||||
div.luminance1 {
|
||||
left: 230px;
|
||||
mask-mode: luminance;
|
||||
mask-image: url(support/blue-100x100.png);
|
||||
}
|
||||
|
||||
div.luminance2 {
|
||||
left: 340px;
|
||||
mask-mode: luminance;
|
||||
mask-image: url(support/red-100x100.png);
|
||||
}
|
||||
|
||||
div.luminance3 {
|
||||
left: 450px;
|
||||
mask-mode: luminance;
|
||||
mask-image: url(support/green-100x100.png);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="auto"></div>
|
||||
<div class="alpha"></div>
|
||||
<div class="luminance1"></div>
|
||||
<div class="luminance2"></div>
|
||||
<div class="luminance3"></div>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-origin: mask positioning area</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<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-1-ref.xht" rel="match" />
|
||||
<meta content="Test checks whether setting mask position area works correctly or not." name="assert" />
|
||||
<style type="text/css">
|
||||
div.outer {
|
||||
border: 1px solid black;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
div.inner {
|
||||
/*
|
||||
* content box: 60 x 60
|
||||
* padding box: 72 x 78
|
||||
* border box: 80 x 90
|
||||
* margin box: 86 x 94
|
||||
*/
|
||||
margin: 1px 2px 3px 4px;
|
||||
border: solid transparent;
|
||||
border-width: 8px 2px 4px 6px;
|
||||
padding: 6px 9px 12px 3px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background-color: purple;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: left top;
|
||||
}
|
||||
|
||||
#border { mask-origin: border-box; }
|
||||
#padding { mask-origin: padding-box; }
|
||||
#content { mask-origin: content-box; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer"><div class="inner"></div></div>
|
||||
<div class="outer"><div id="border" class="inner"></div></div>
|
||||
<div class="outer"><div id="padding" class="inner"></div></div>
|
||||
<div class="outer"><div id="content" class="inner"></div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-origin: mask positioning area</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<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-2-ref.xht" rel="match" />
|
||||
<meta content="Test checks whether setting mask origin to margin-box works correctly or not." name="assert" />
|
||||
<style type="text/css">
|
||||
div.outer {
|
||||
border: 1px solid black;
|
||||
width: 125px;
|
||||
height: 125px;
|
||||
}
|
||||
|
||||
div.inner {
|
||||
/*
|
||||
* content box: 60 x 60
|
||||
* padding box: 72 x 78
|
||||
* border box: 80 x 90
|
||||
* margin box: 86 x 94
|
||||
*/
|
||||
margin: 1px 2px 3px 4px;
|
||||
border: solid red;
|
||||
border-width: 8px 2px 4px 6px;
|
||||
padding: 6px 9px 12px 3px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
position: relative;
|
||||
background-color: blue;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-origin: margin-box;
|
||||
}
|
||||
|
||||
div.overflow {
|
||||
position: absolute;
|
||||
left: -10px;
|
||||
top: -9px;
|
||||
border: solid transparent;
|
||||
border-width: 15px 13px 19px 13px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background-color: purple;
|
||||
}
|
||||
|
||||
#pos-left-auto { mask-position: left; }
|
||||
#pos-left-bottom { mask-position: left bottom; }
|
||||
#pos-right-top { mask-position: right top; }
|
||||
#pos-right-bottom { mask-position: right bottom; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer">
|
||||
<div id="pos-left-auto" class="inner">
|
||||
<div class="overflow"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outer">
|
||||
<div id="pos-left-bottom" class="inner">
|
||||
<div class="overflow"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outer">
|
||||
<div id="pos-right-top" class="inner">
|
||||
<div class="overflow"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outer">
|
||||
<div id="pos-right-bottom" class="inner">
|
||||
<div class="overflow"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-position: mask positioning</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-mask-position" rel="help" />
|
||||
<link href="reference/mask-position-1-ref.xht" rel="match" />
|
||||
<meta content="Test checks whether positioning mask layer works correctly or not." name="assert" />
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
div.outer {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
div.inner {
|
||||
background-color: purple;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
}
|
||||
|
||||
#inner1 { mask-position: right 20% bottom 70%; }
|
||||
#inner2 { mask-position: bottom 70% right 20%; }
|
||||
#inner3 { mask-position: right 30px bottom 25px; }
|
||||
#inner4 { mask-position: bottom 25px right 30px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer"><div id="inner1" class="inner"></div></div>
|
||||
<div class="outer"><div id="inner2" class="inner"></div></div>
|
||||
<div class="outer"><div id="inner3" class="inner"></div></div>
|
||||
<div class="outer"><div id="inner4" class="inner"></div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-position: mask positioning</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-mask-position" rel="help" />
|
||||
<link href="reference/mask-position-1-ref.xht" rel="match" />
|
||||
<meta content="Test checks whether positioning mask layer works correctly or not." name="assert" />
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
div.outer {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
div.inner {
|
||||
background-color: purple;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
}
|
||||
|
||||
#inner1 { mask-position: left 40px top 15px; }
|
||||
#inner2 { mask-position: top 30% left 80%; }
|
||||
#inner3 { mask-position: left 20px top 25px }
|
||||
#inner4 { mask-position: top 25px left 20px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer"><div id="inner1" class="inner"></div></div>
|
||||
<div class="outer"><div id="inner2" class="inner"></div></div>
|
||||
<div class="outer"><div id="inner3" class="inner"></div></div>
|
||||
<div class="outer"><div id="inner4" class="inner"></div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-position: mask positioning</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-mask-position" rel="help" />
|
||||
<link href="reference/mask-position-1-ref.xht" rel="match" />
|
||||
<meta content="Test checks whether positioning mask layer works correctly or not." name="assert" />
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
div.outer {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
div.inner {
|
||||
background-color: purple;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
}
|
||||
|
||||
#inner1 { mask-position: left 80% bottom 70%; }
|
||||
#inner2 { mask-position: right 20% top 30%; }
|
||||
#inner3 { mask-position: bottom 50% left 40%; }
|
||||
#inner4 { mask-position: right 60% top 50%; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer"><div id="inner1" class="inner"></div></div>
|
||||
<div class="outer"><div id="inner2" class="inner"></div></div>
|
||||
<div class="outer"><div id="inner3" class="inner"></div></div>
|
||||
<div class="outer"><div id="inner4" class="inner"></div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-position: mask positioning</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-mask-position" rel="help" />
|
||||
<link href="reference/mask-position-2-ref.xht" rel="match" />
|
||||
<meta content="Test checks whether positioning mask layer works correctly or not." name="assert" />
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
#inner {
|
||||
background-color: purple;
|
||||
mask-position: left 40% bottom 60%;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-position: mask positioning</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-mask-position" rel="help" />
|
||||
<link href="reference/mask-position-2-ref.xht" rel="match" />
|
||||
<meta content="Test checks whether positioning mask layer works correctly or not." name="assert" />
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
#inner {
|
||||
background-color: purple;
|
||||
mask-position: 40% 40%;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-position: mask positioning</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-mask-position" rel="help" />
|
||||
<link href="reference/mask-position-3-ref.xht" rel="match" />
|
||||
<meta content="Test checks whether positioning mask layer works correctly or not." name="assert" />
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
#inner {
|
||||
background-color: purple;
|
||||
mask-position: center bottom 80%;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-position: mask positioning</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-mask-position" rel="help" />
|
||||
<link href="reference/mask-position-3-ref.xht" rel="match" />
|
||||
<meta content="Test checks whether positioning mask layer works correctly or not." name="assert" />
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
#inner {
|
||||
background-color: purple;
|
||||
mask-position: center 20%;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-position: mask positioning</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-mask-position" rel="help" />
|
||||
<link href="reference/mask-position-4-ref.xht" rel="match" />
|
||||
<meta content="Test checks whether positioning mask layer works correctly or not." name="assert" />
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
#inner {
|
||||
background-color: purple;
|
||||
mask-position: left center;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-position: mask positioning</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-mask-position" rel="help" />
|
||||
<link href="reference/mask-position-4-ref.xht" rel="match" />
|
||||
<meta content="Test checks whether positioning mask layer works correctly or not." name="assert" />
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
#inner {
|
||||
background-color: purple;
|
||||
mask-position: left;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-position: mask positioning</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-mask-position" rel="help" />
|
||||
<link href="reference/mask-position-4-ref.xht" rel="match" />
|
||||
<meta content="Test checks whether positioning mask layer works correctly or not." name="assert" />
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
#inner {
|
||||
background-color: purple;
|
||||
mask-position: left bottom 50%;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-position: mask positioning</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-mask-position" rel="help" />
|
||||
<link href="reference/mask-position-4-ref.xht" rel="match" />
|
||||
<meta content="Test checks whether positioning mask layer works correctly or not." name="assert" />
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
#inner {
|
||||
background-color: purple;
|
||||
mask: url(support/50x50-opaque-blue.svg) left no-repeat;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-position: mask positioning</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-mask-position" rel="help" />
|
||||
<link href="reference/mask-position-5-ref.xht" rel="match" />
|
||||
<meta content="Test checks whether positioning mask layer works correctly or not." name="assert" />
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
#inner {
|
||||
background-color: purple;
|
||||
mask-position: top, bottom;
|
||||
mask-repeat: no-repeat, no-repeat;
|
||||
mask-image: url(support/50x50-opaque-blue.svg),
|
||||
url(support/50x50-opaque-blue.svg);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-position: mask positioning</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-mask-position" rel="help" />
|
||||
<link href="reference/mask-position-6-ref.xht" rel="match" />
|
||||
<meta content="Test checks whether positioning mask layer works correctly or not." name="assert" />
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.outer {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.outer > div {
|
||||
background-color: purple;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
}
|
||||
|
||||
#inner1 {
|
||||
mask-position: left 20px bottom;
|
||||
}
|
||||
|
||||
#inner2 {
|
||||
mask-position: left 40% bottom;
|
||||
}
|
||||
|
||||
#inner3 {
|
||||
mask-position: right 60% bottom;
|
||||
}
|
||||
|
||||
#inner4 {
|
||||
mask-position: right 30px bottom;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer"><div id="inner1"></div></div>
|
||||
<div class="outer"><div id="inner2"></div></div>
|
||||
<div class="outer"><div id="inner3"></div></div>
|
||||
<div class="outer"><div id="inner4"></div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-position: mask positioning</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-mask-position" rel="help" />
|
||||
<link href="reference/mask-position-7-ref.xht" rel="match" />
|
||||
<meta content="Test checks whether positioning mask layer works correctly or not." name="assert" />
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.outer {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.outer > div {
|
||||
background-color: purple;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
}
|
||||
|
||||
#inner1 {
|
||||
mask-position: right top 40%;
|
||||
}
|
||||
|
||||
#inner2 {
|
||||
mask-position: right top 20px;
|
||||
}
|
||||
|
||||
#inner3 {
|
||||
mask-position: right bottom 60%;
|
||||
}
|
||||
|
||||
#inner4 {
|
||||
mask-position: right bottom 30px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer"><div id="inner1"></div></div>
|
||||
<div class="outer"><div id="inner2"></div></div>
|
||||
<div class="outer"><div id="inner3"></div></div>
|
||||
<div class="outer"><div id="inner4"></div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-repeat: repeated mask layer image</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-mask-repeat" rel="help" />
|
||||
<link href="reference/mask-repeat-1-ref.xht" rel="match" />
|
||||
<meta content="Test checks whether repeated mask layer works correctly or not." name="assert" />
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
div.outer {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
div.inner {
|
||||
background-color: purple;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
}
|
||||
|
||||
#no-repeat {
|
||||
mask-repeat: no-repeat no-repeat;
|
||||
}
|
||||
#repeat {
|
||||
mask-repeat: repeat repeat;
|
||||
}
|
||||
#repeat-x {
|
||||
mask-repeat: repeat no-repeat;
|
||||
}
|
||||
#repeat-y {
|
||||
mask-repeat: no-repeat repeat;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer"><div class="inner"></div></div>
|
||||
<div class="outer"><div id="no-repeat" class="inner"></div></div>
|
||||
<div class="outer"><div id="repeat" class="inner"></div></div>
|
||||
<div class="outer"><div id="repeat-x" class="inner"></div></div>
|
||||
<div class="outer"><div id="repeat-y" class="inner"></div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-repeat: repeated mask layer image</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-mask-repeat" rel="help" />
|
||||
<link href="reference/mask-repeat-2-ref.xht" rel="match" />
|
||||
<meta content="Test checks whether repeated mask layer works correctly or not." name="assert" />
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
div.outer {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
div.inner {
|
||||
background-color: purple;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
}
|
||||
|
||||
#space {
|
||||
mask-repeat: space;
|
||||
}
|
||||
#space-x {
|
||||
mask-repeat: space no-repeat;
|
||||
}
|
||||
#space-y {
|
||||
mask-repeat: no-repeat space;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer"><div id="space" class="inner"></div></div>
|
||||
<div class="outer"><div id="space-x" class="inner"></div></div>
|
||||
<div class="outer"><div id="space-y" class="inner"></div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-repeat: repeated mask layer image</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-mask-repeat" rel="help" />
|
||||
<link href="reference/mask-repeat-3-ref.xht" rel="match" />
|
||||
<meta content="Test checks whether repeated mask layer works correctly or not." name="assert" />
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
div.outer {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
div.inner {
|
||||
background-color: purple;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
}
|
||||
|
||||
#round {
|
||||
mask-repeat: round;
|
||||
}
|
||||
#round-x {
|
||||
mask-repeat: round no-repeat;
|
||||
}
|
||||
#round-y {
|
||||
mask-repeat: no-repeat round;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer"><div id="round" class="inner"></div></div>
|
||||
<div class="outer"><div id="round-x" class="inner"></div></div>
|
||||
<div class="outer"><div id="round-y" class="inner"></div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-size: mask layer size</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-mask-size" rel="help" />
|
||||
<link href="reference/mask-size-auto-ref.xht" rel="match" />
|
||||
<meta content="Test checks whether sizing mask layer works correctly or not." name="assert" />
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 64px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
#inner {
|
||||
background-color: purple;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: auto auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-size: mask layer size</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-mask-size" rel="help" />
|
||||
<link href="reference/mask-size-auto-length-ref.xht" rel="match" />
|
||||
<meta content="Test checks whether sizing mask layer works correctly or not." name="assert" />
|
||||
<style type="text/css">
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
width: 64px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
#inner {
|
||||
width: 64px;
|
||||
height: 128px;
|
||||
background-color: purple;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: auto 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-size: mask layer size</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-mask-size" rel="help" />
|
||||
<link href="reference/mask-size-auto-length-ref.xht" rel="match" />
|
||||
<meta content="Test checks whether sizing mask layer works correctly or not." name="assert" />
|
||||
<style type="text/css">
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
width: 64px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
#inner {
|
||||
width: 64px;
|
||||
height: 128px;
|
||||
background-color: purple;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: auto 15.625%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-size: mask layer size</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-mask-size" rel="help" />
|
||||
<link href="reference/mask-size-auto-ref.xht" rel="match" />
|
||||
<meta content="Test checks whether sizing mask layer works correctly or not." name="assert" />
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 64px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
#inner {
|
||||
background-color: purple;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-size: mask layer size</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-mask-size" rel="help" />
|
||||
<link href="reference/mask-size-contain-clip-border-ref.xht" rel="match" />
|
||||
<meta content="Test checks whether sizing mask layer works correctly or not." name="assert" />
|
||||
<style type="text/css">
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
width: 64px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
#inner {
|
||||
border: 20px solid transparent;
|
||||
width: 24px;
|
||||
height: 88px;
|
||||
background-color: purple;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-clip: border-box;
|
||||
mask-origin: border-box;
|
||||
mask-size: contain;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-size: mask layer size</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-mask-size" rel="help" />
|
||||
<link href="reference/mask-size-contain-clip-padding-ref.xht" rel="match" />
|
||||
<meta content="Test checks whether sizing mask layer works correctly or not." name="assert" />
|
||||
<style type="text/css">
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
width: 64px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
#inner {
|
||||
background-color: purple;
|
||||
border: 20px solid transparent;
|
||||
width: 24px;
|
||||
height: 88px;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-clip: padding-box;
|
||||
mask-origin: padding-box;
|
||||
mask-size: contain;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"></div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-size: mask layer size</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-mask-size" rel="help" />
|
||||
<link href="reference/mask-size-contain-position-fifty-fifty-ref.xht" rel="match" />
|
||||
<meta content="Test checks whether sizing mask layer works correctly or not." name="assert" />
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 64px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
#inner {
|
||||
background-color: purple;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
mask-position: 50% 50%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-size: mask layer size</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-mask-size" rel="help" />
|
||||
<link href="reference/mask-size-contain-ref.xht" rel="match" />
|
||||
<meta content="Test checks whether sizing mask layer works correctly or not." name="assert" />
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 64px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
#outer {
|
||||
border: 10px solid black;
|
||||
}
|
||||
|
||||
#inner {
|
||||
background-color: purple;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-size: mask layer size</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-mask-size" rel="help" />
|
||||
<link href="reference/mask-size-cover-ref.xht" rel="match" />
|
||||
<meta content="Test checks whether sizing mask layer works correctly or not." name="assert" />
|
||||
<style type="text/css">
|
||||
#outer {
|
||||
border: 10px solid black;
|
||||
width: 64px;
|
||||
height: 128px;
|
||||
background-color: purple;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-origin: content-box;
|
||||
mask-clip: content-box;
|
||||
mask-size: cover;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-size: mask layer size</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-mask-size" rel="help" />
|
||||
<link href="reference/mask-size-length-length-ref.xht" rel="match" />
|
||||
<meta content="Test checks whether sizing mask layer works correctly or not." name="assert" />
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 64px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
#inner {
|
||||
background-color: purple;
|
||||
mask-image: url(support/50x100-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: 32px auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-size: mask layer size</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-mask-size" rel="help" />
|
||||
<link href="reference/mask-size-length-length-ref.xht" rel="match" />
|
||||
<meta content="Test checks whether sizing mask layer works correctly or not." name="assert" />
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 64px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
#inner {
|
||||
background-color: purple;
|
||||
mask-image: url(support/50x100-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: 32px 64px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-size: mask layer size</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-mask-size" rel="help" />
|
||||
<link href="reference/mask-size-length-percent-ref.xht" rel="match" />
|
||||
<meta content="Test checks whether sizing mask layer works correctly or not." name="assert" />
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 64px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
#inner {
|
||||
background-color: purple;
|
||||
mask-image: url(support/50x100-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: 16px 25%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-size: mask layer size</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-mask-size" rel="help" />
|
||||
<link href="reference/mask-size-length-length-ref.xht" rel="match" />
|
||||
<meta content="Test checks whether sizing mask layer works correctly or not." name="assert" />
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 64px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
#inner {
|
||||
background-color: purple;
|
||||
mask-image: url(support/50x100-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: 32px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-size: mask layer size</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-mask-size" rel="help" />
|
||||
<link href="reference/mask-size-percent-percent-ref.xht" rel="match" />
|
||||
<meta content="Test checks whether sizing mask layer works correctly or not." name="assert" />
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 64px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
#inner {
|
||||
background-color: purple;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: 50% auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-size: mask layer size</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-mask-size" rel="help" />
|
||||
<link href="reference/mask-size-percent-percent-ref.xht" rel="match" />
|
||||
<meta content="Test checks whether sizing mask layer works correctly or not." name="assert" />
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 64px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
#inner {
|
||||
background-color: purple;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: 50% 32px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-size: mask layer size</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-mask-size" rel="help" />
|
||||
<link href="reference/mask-size-percent-percent-stretch-ref.xht" rel="match" />
|
||||
<meta content="Test checks whether sizing mask layer works correctly or not." name="assert" />
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 60px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
#outer {
|
||||
border: 10px solid black;
|
||||
}
|
||||
|
||||
#inner {
|
||||
background-color: purple;
|
||||
mask-image: url(support/transparent-100x50-blue-100x50.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: 100% 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-size: mask layer size</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-mask-size" rel="help" />
|
||||
<link href="reference/mask-size-percent-percent-ref.xht" rel="match" />
|
||||
<meta content="Test checks whether sizing mask layer works correctly or not." name="assert" />
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 64px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
#inner {
|
||||
background-color: purple;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: 50% 25%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-size: mask layer size</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<link href="https://www.w3.org/TR/css-masking-1/#the-mask-size" rel="help" />
|
||||
<link href="reference/mask-size-percent-percent-ref.xht" rel="match" />
|
||||
<meta content="Test checks whether sizing mask layer works correctly or not." name="assert" />
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 64px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
#inner {
|
||||
background-color: purple;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: 50%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS mask-clip reference</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<style type="text/css">
|
||||
div {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
background-color: purple;
|
||||
}
|
||||
|
||||
div.border {
|
||||
left: 10px;
|
||||
margin: 1px 4px;
|
||||
width: 60px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
div.padding {
|
||||
left: 110px;
|
||||
margin: 9px 10px;
|
||||
width: 52px;
|
||||
height: 17px;
|
||||
}
|
||||
|
||||
div.content {
|
||||
left: 210px;
|
||||
margin: 15px 13px;
|
||||
width: 40px;
|
||||
height: 11px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="color border"></div>
|
||||
<div class="color padding"></div>
|
||||
<div class="color content"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-image: mask layer image</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<style type="text/css">
|
||||
div {
|
||||
background-color: purple;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-image: mask layer image</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<style type="text/css">
|
||||
div {
|
||||
background-image: linear-gradient(rgba(128,0,128,0), rgba(128,0,128,1));
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div></div>
|
||||
<div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS 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: white;
|
||||
position: absolute;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
div.auto {
|
||||
left: 10px;
|
||||
background-image: url(support/blue-100x100.svg);
|
||||
}
|
||||
|
||||
div.alpha {
|
||||
left: 120px;
|
||||
background-image: url(support/blue-100x100.svg);
|
||||
}
|
||||
|
||||
div.luminance1 {
|
||||
left: 230px;
|
||||
background-image: url(support/blue-luminance-100x100.svg);
|
||||
}
|
||||
|
||||
div.luminance2 {
|
||||
left: 340px;
|
||||
background-image: url(support/red-luminance-100x100.svg);
|
||||
}
|
||||
|
||||
div.luminance3 {
|
||||
left: 450px;
|
||||
background-image: url(support/green-luminance-100x100.svg);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="auto"></div>
|
||||
<div class="alpha"></div>
|
||||
<div class="luminance1"></div>
|
||||
<div class="luminance2"></div>
|
||||
<div class="luminance3"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-origin: mask positioning area</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<style type="text/css">
|
||||
div.outer {
|
||||
border: 1px solid black;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
div.inner {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: purple;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#border { left: 4px; top: 1px; }
|
||||
#padding { left: 10px; top: 9px; }
|
||||
#content { left: 13px; top: 15px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer"><div id="border" class="inner"></div></div>
|
||||
<div class="outer"><div id="border" class="inner"></div></div>
|
||||
<div class="outer"><div id="padding" class="inner"></div></div>
|
||||
<div class="outer"><div id="content" class="inner"></div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-origin: mask positioning area</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<style type="text/css">
|
||||
div.outer {
|
||||
border: 1px solid black;
|
||||
width: 125px;
|
||||
height: 125px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
div.inner {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: purple;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#pos-left-auto { left: 0px; top: 22px; }
|
||||
#pos-left-bottom { left: 0px; top: 44px; }
|
||||
#pos-right-top { left: 36px; top: 0px; }
|
||||
#pos-right-bottom { left: 36px; top: 44px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer"><div id="pos-left-auto" class="inner"></div></div>
|
||||
<div class="outer"><div id="pos-left-bottom" class="inner"></div></div>
|
||||
<div class="outer"><div id="pos-right-top" class="inner"></div></div>
|
||||
<div class="outer"><div id="pos-right-bottom" class="inner"></div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-position: position mask layer image</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<style type="text/css">
|
||||
div.outer {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
div.inner {
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: purple;
|
||||
}
|
||||
|
||||
#inner1 { right: 10px; bottom: 35px; }
|
||||
#inner2 { right: 30px; bottom: 25px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer"><div id="inner1" class="inner"></div></div>
|
||||
<div class="outer"><div id="inner1" class="inner"></div></div>
|
||||
<div class="outer"><div id="inner2" class="inner"></div></div>
|
||||
<div class="outer"><div id="inner2" class="inner"></div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-position: position mask layer image</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<style type="text/css">
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#inner {
|
||||
margin-left: 20px;
|
||||
margin-top: 20px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: purple;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-position: position mask layer image</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<style type="text/css">
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#inner {
|
||||
margin-left: 25px;
|
||||
margin-top: 10px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: purple;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-position: position mask layer image</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<style type="text/css">
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#inner {
|
||||
margin-left: 0px;
|
||||
margin-top: 25px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: purple;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-position: position mask layer image</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<style type="text/css">
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
#inner1 {
|
||||
margin-left: 35px;
|
||||
margin-top: 0px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: purple;
|
||||
}
|
||||
|
||||
#inner2 {
|
||||
margin-left: 35px;
|
||||
margin-top: 20px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: purple;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner1"></div>
|
||||
<div id="inner2"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-position: position mask layer image</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<style type="text/css">
|
||||
.outer {
|
||||
border: 1px solid black;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.inner {
|
||||
margin-left: 20px;
|
||||
margin-top: 50px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: purple;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer"><div class="inner"></div></div>
|
||||
<div class="outer"><div class="inner"></div></div>
|
||||
<div class="outer"><div class="inner"></div></div>
|
||||
<div class="outer"><div class="inner"></div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-position: position mask layer image</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<style type="text/css">
|
||||
.outer {
|
||||
border: 1px solid black;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.inner {
|
||||
margin-left: 50px;
|
||||
margin-top: 20px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: purple;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer"><div class="inner"></div></div>
|
||||
<div class="outer"><div class="inner"></div></div>
|
||||
<div class="outer"><div class="inner"></div></div>
|
||||
<div class="outer"><div class="inner"></div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-repeat: repeated mask layer image</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<style type="text/css">
|
||||
div.outer {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
position: relative;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
div.inner {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
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; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-repeat: repeated mask layer image</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<style type="text/css">
|
||||
div.outer {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
position: relative;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
div.inner {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
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; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-repeat: repeated mask layer image</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<style type="text/css">
|
||||
div.outer {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.color {
|
||||
background-color: purple;
|
||||
}
|
||||
|
||||
#round {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
#round-x {
|
||||
width: 150px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
#round-y {
|
||||
width: 50px;
|
||||
height: 150px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer"><div id="round" class="color"></div></div>
|
||||
<div class="outer"><div id="round-x" class="color"></div></div>
|
||||
<div class="outer"><div id="round-y" class="color"></div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-size: mask layer size</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<style type="text/css">
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
width: 64px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
#inner {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: purple;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-size: mask layer size</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<style type="text/css">
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
width: 64px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
#inner {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: purple;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-size: mask layer size</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<style type="text/css">
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
width: 64px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
#inner {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background-color: purple;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-size: mask layer size</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<style type="text/css">
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
width: 64px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
#inner {
|
||||
border: 20px solid white;
|
||||
width: 24px;
|
||||
height: 88px;
|
||||
}
|
||||
|
||||
#innermost {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-color: purple;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner">
|
||||
<div id="innermost"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-size: mask layer size</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<style type="text/css">
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
width: 64px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
#inner1 {
|
||||
width: 64px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
#inner2 {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background-color: purple;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner1"></div>
|
||||
<div id="inner2"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-size: mask layer size</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<style type="text/css">
|
||||
#outer {
|
||||
border: 10px solid black;
|
||||
width: 64px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
#inner {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background-color: purple;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-size: mask layer size</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<style type="text/css">
|
||||
#outer {
|
||||
border: 10px solid transparent;
|
||||
width: 64px;
|
||||
height: 128px;
|
||||
background-clip: content-box;
|
||||
background-color: purple;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-size: mask layer size</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<style type="text/css">
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
width: 64px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
#inner {
|
||||
width: 32px;
|
||||
height: 64px;
|
||||
background-color: purple;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-size: mask layer size</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<style type="text/css">
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
width: 64px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
#inner {
|
||||
width: 16px;
|
||||
height: 32px;
|
||||
background-color: purple;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-size: mask layer size</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<style type="text/css">
|
||||
#outer {
|
||||
border: 1px solid black;
|
||||
width: 64px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
#inner {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-color: purple;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Masking: mask-size: mask layer size</title>
|
||||
<link href="mailto:aschen@mozilla.com" rel="author" title="Astley Chen" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 60px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
#outer {
|
||||
border: 10px solid black;
|
||||
}
|
||||
|
||||
#inner {
|
||||
height: 60px;
|
||||
background-color: purple;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="100">
|
||||
<rect x="0" y="0" width="50" height="100" fill="blue" fill-opacity="1"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 146 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">
|
||||
<rect x="0" y="0" width="50" height="50" fill="blue" fill-opacity="1"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 144 B |
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0" y="0" width="100%" height="100%" fill="blue" fill-opacity="1"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 125 B |
|
|
@ -1,4 +1,4 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
|
||||
<rect x="0" y="0" width="100%" height="50%" fill="blue" fill-opacity="0"/>
|
||||
<rect x="0" y="50" width="100%" height="50%" fill="blue" fill-opacity="1"/>
|
||||
<rect x="0" y="50%" width="100%" height="50%" fill="blue" fill-opacity="1"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 216 B After Width: | Height: | Size: 217 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0" y="0" width="100%" height="100%" fill="RGB(238,238,255)" fill-opacity="1"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 137 B |
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0" y="0" width="100%" height="100%" fill="lime" fill-opacity="1"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 125 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0" y="0" width="100%" height="100%" fill="RGB(73,73,255)" fill-opacity="1"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 135 B |
|
|
@ -0,0 +1,8 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
|
||||
<defs>
|
||||
<mask id="mask" mask-type="alpha">
|
||||
<rect x="0" y="0" width="100" height="50" fill-opacity="1"/>
|
||||
<rect x="0" y="50" width="100" height="50" fill-opacity="0"/>
|
||||
</mask>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 266 B |
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0" y="0" width="100%" height="100%" fill="red" fill-opacity="1"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 124 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0" y="0" width="100%" height="100%" fill="RGB(201,201,255)" fill-opacity="1"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 137 B |
|
|
@ -1,4 +1,4 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
|
||||
<rect x="0" y="0" width="100%" height="50%" fill="blue" fill-opacity="1"/>
|
||||
<rect x="0" y="50" width="100%" height="50%" fill="blue" fill-opacity="0"/>
|
||||
<rect x="0" y="50%" width="100%" height="50%" fill="blue" fill-opacity="0"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 216 B After Width: | Height: | Size: 217 B |
|
|
@ -480,6 +480,14 @@
|
|||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-clip-1" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-clip: clip mask image">
|
||||
<a href="mask-clip-1.xht">mask-clip-1</a></td>
|
||||
<td><a href="reference/mask-clip-1-ref.xht">=</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">
|
||||
|
|
@ -512,6 +520,350 @@
|
|||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-image-1a" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-image: mask layer image">
|
||||
<a href="mask-image-1a.xht">mask-image-1a</a></td>
|
||||
<td><a href="reference/mask-image-1-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-image-1b" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-image: mask layer image">
|
||||
<a href="mask-image-1b.xht">mask-image-1b</a></td>
|
||||
<td><a href="reference/mask-image-1-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-image-1c" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-image: mask layer image">
|
||||
<a href="mask-image-1c.xht">mask-image-1c</a></td>
|
||||
<td><a href="reference/mask-image-1-ref.xht">=</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">
|
||||
<a href="mask-image-2.xht">mask-image-2</a></td>
|
||||
<td><a href="reference/mask-image-2-ref.xht">=</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">
|
||||
<a href="mask-mode-a.xht">mask-mode-a</a></td>
|
||||
<td><a href="reference/mask-mode-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-mode-b" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-mode with raster image">
|
||||
<a href="mask-mode-b.xht">mask-mode-b</a></td>
|
||||
<td><a href="reference/mask-mode-ref.xht">=</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">
|
||||
<a href="mask-origin-1.xht">mask-origin-1</a></td>
|
||||
<td><a href="reference/mask-origin-1-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-origin-2" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-origin: mask positioning area">
|
||||
<a href="mask-origin-2.xht">mask-origin-2</a></td>
|
||||
<td><a href="reference/mask-origin-2-ref.xht">=</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">
|
||||
<a href="mask-position-1a.xht">mask-position-1a</a></td>
|
||||
<td><a href="reference/mask-position-1-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-position-1b" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-position: mask positioning">
|
||||
<a href="mask-position-1b.xht">mask-position-1b</a></td>
|
||||
<td><a href="reference/mask-position-1-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-position-1c" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-position: mask positioning">
|
||||
<a href="mask-position-1c.xht">mask-position-1c</a></td>
|
||||
<td><a href="reference/mask-position-1-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-position-2a" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-position: mask positioning">
|
||||
<a href="mask-position-2a.xht">mask-position-2a</a></td>
|
||||
<td><a href="reference/mask-position-2-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-position-2b" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-position: mask positioning">
|
||||
<a href="mask-position-2b.xht">mask-position-2b</a></td>
|
||||
<td><a href="reference/mask-position-2-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-position-3a" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-position: mask positioning">
|
||||
<a href="mask-position-3a.xht">mask-position-3a</a></td>
|
||||
<td><a href="reference/mask-position-3-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-position-3b" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-position: mask positioning">
|
||||
<a href="mask-position-3b.xht">mask-position-3b</a></td>
|
||||
<td><a href="reference/mask-position-3-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-position-4a" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-position: mask positioning">
|
||||
<a href="mask-position-4a.xht">mask-position-4a</a></td>
|
||||
<td><a href="reference/mask-position-4-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-position-4b" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-position: mask positioning">
|
||||
<a href="mask-position-4b.xht">mask-position-4b</a></td>
|
||||
<td><a href="reference/mask-position-4-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-position-4c" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-position: mask positioning">
|
||||
<a href="mask-position-4c.xht">mask-position-4c</a></td>
|
||||
<td><a href="reference/mask-position-4-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-position-4d" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-position: mask positioning">
|
||||
<a href="mask-position-4d.xht">mask-position-4d</a></td>
|
||||
<td><a href="reference/mask-position-4-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-position-5" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-position: mask positioning">
|
||||
<a href="mask-position-5.xht">mask-position-5</a></td>
|
||||
<td><a href="reference/mask-position-5-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-position-6" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-position: mask positioning">
|
||||
<a href="mask-position-6.xht">mask-position-6</a></td>
|
||||
<td><a href="reference/mask-position-6-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-position-7" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-position: mask positioning">
|
||||
<a href="mask-position-7.xht">mask-position-7</a></td>
|
||||
<td><a href="reference/mask-position-7-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-repeat-1" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-repeat: repeated mask layer image">
|
||||
<a href="mask-repeat-1.xht">mask-repeat-1</a></td>
|
||||
<td><a href="reference/mask-repeat-1-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-repeat-2" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-repeat: repeated mask layer image">
|
||||
<a href="mask-repeat-2.xht">mask-repeat-2</a></td>
|
||||
<td><a href="reference/mask-repeat-2-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-repeat-3" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-repeat: repeated mask layer image">
|
||||
<a href="mask-repeat-3.xht">mask-repeat-3</a></td>
|
||||
<td><a href="reference/mask-repeat-3-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-size-auto" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-size: mask layer size">
|
||||
<a href="mask-size-auto.xht">mask-size-auto</a></td>
|
||||
<td><a href="reference/mask-size-auto-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-size-auto-auto" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-size: mask layer size">
|
||||
<a href="mask-size-auto-auto.xht">mask-size-auto-auto</a></td>
|
||||
<td><a href="reference/mask-size-auto-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-size-auto-length" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-size: mask layer size">
|
||||
<a href="mask-size-auto-length.xht">mask-size-auto-length</a></td>
|
||||
<td><a href="reference/mask-size-auto-length-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-size-auto-percent" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-size: mask layer size">
|
||||
<a href="mask-size-auto-percent.xht">mask-size-auto-percent</a></td>
|
||||
<td><a href="reference/mask-size-auto-length-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-size-contain" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-size: mask layer size">
|
||||
<a href="mask-size-contain.xht">mask-size-contain</a></td>
|
||||
<td><a href="reference/mask-size-contain-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-size-contain-clip-border" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-size: mask layer size">
|
||||
<a href="mask-size-contain-clip-border.xht">mask-size-contain-clip-border</a></td>
|
||||
<td><a href="reference/mask-size-contain-clip-border-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-size-contain-clip-padding" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-size: mask layer size">
|
||||
<a href="mask-size-contain-clip-padding.xht">mask-size-contain-clip-padding</a></td>
|
||||
<td><a href="reference/mask-size-contain-clip-padding-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-size-contain-position-fifty-fifty" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-size: mask layer size">
|
||||
<a href="mask-size-contain-position-fifty-fifty.xht">mask-size-contain-position-fifty-fifty</a></td>
|
||||
<td><a href="reference/mask-size-contain-position-fifty-fifty-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-size-cover" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-size: mask layer size">
|
||||
<a href="mask-size-cover.xht">mask-size-cover</a></td>
|
||||
<td><a href="reference/mask-size-cover-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-size-length" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-size: mask layer size">
|
||||
<a href="mask-size-length.xht">mask-size-length</a></td>
|
||||
<td><a href="reference/mask-size-length-length-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-size-length-auto" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-size: mask layer size">
|
||||
<a href="mask-size-length-auto.xht">mask-size-length-auto</a></td>
|
||||
<td><a href="reference/mask-size-length-length-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-size-length-length" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-size: mask layer size">
|
||||
<a href="mask-size-length-length.xht">mask-size-length-length</a></td>
|
||||
<td><a href="reference/mask-size-length-length-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-size-length-percent" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-size: mask layer size">
|
||||
<a href="mask-size-length-percent.xht">mask-size-length-percent</a></td>
|
||||
<td><a href="reference/mask-size-length-percent-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-size-percent" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-size: mask layer size">
|
||||
<a href="mask-size-percent.xht">mask-size-percent</a></td>
|
||||
<td><a href="reference/mask-size-percent-percent-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-size-percent-auto" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-size: mask layer size">
|
||||
<a href="mask-size-percent-auto.xht">mask-size-percent-auto</a></td>
|
||||
<td><a href="reference/mask-size-percent-percent-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-size-percent-length" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-size: mask layer size">
|
||||
<a href="mask-size-percent-length.xht">mask-size-percent-length</a></td>
|
||||
<td><a href="reference/mask-size-percent-percent-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-size-percent-percent" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-size: mask layer size">
|
||||
<a href="mask-size-percent-percent.xht">mask-size-percent-percent</a></td>
|
||||
<td><a href="reference/mask-size-percent-percent-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mask-size-percent-percent-stretch" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-size: mask layer size">
|
||||
<a href="mask-size-percent-percent-stretch.xht">mask-size-percent-percent-stretch</a></td>
|
||||
<td><a href="reference/mask-size-percent-percent-stretch-ref.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="test-mask" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Masking: mask-repeat:round repeat;">
|
||||
|
|
|
|||
|
|
@ -56,8 +56,52 @@ clip-rect-comma-003.xht == reference/clip-no-clipping-ref.xht
|
|||
clip-rect-comma-004.xht == reference/clip-no-clipping-ref.xht
|
||||
clip-rule-001.xht == reference/clip-rule-rectangle-border-ref.xht
|
||||
clip-rule-002.xht == reference/clip-rule-rectangle-border-ref.xht
|
||||
mask-clip-1.xht == reference/mask-clip-1-ref.xht
|
||||
mask-composite-1a.xht == reference/mask-composite-1-ref.xht
|
||||
mask-composite-1b.xht == reference/mask-composite-1-ref.xht
|
||||
mask-composite-2a.xht == reference/mask-composite-2-ref.xht
|
||||
mask-composite-2b.xht == reference/mask-composite-2-ref.xht
|
||||
mask-image-1a.xht == reference/mask-image-1-ref.xht
|
||||
mask-image-1b.xht == reference/mask-image-1-ref.xht
|
||||
mask-image-1c.xht == reference/mask-image-1-ref.xht
|
||||
mask-image-2.xht == reference/mask-image-2-ref.xht
|
||||
mask-mode-a.xht == reference/mask-mode-ref.xht
|
||||
mask-mode-b.xht == reference/mask-mode-ref.xht
|
||||
mask-origin-1.xht == reference/mask-origin-1-ref.xht
|
||||
mask-origin-2.xht == reference/mask-origin-2-ref.xht
|
||||
mask-position-1a.xht == reference/mask-position-1-ref.xht
|
||||
mask-position-1b.xht == reference/mask-position-1-ref.xht
|
||||
mask-position-1c.xht == reference/mask-position-1-ref.xht
|
||||
mask-position-2a.xht == reference/mask-position-2-ref.xht
|
||||
mask-position-2b.xht == reference/mask-position-2-ref.xht
|
||||
mask-position-3a.xht == reference/mask-position-3-ref.xht
|
||||
mask-position-3b.xht == reference/mask-position-3-ref.xht
|
||||
mask-position-4a.xht == reference/mask-position-4-ref.xht
|
||||
mask-position-4b.xht == reference/mask-position-4-ref.xht
|
||||
mask-position-4c.xht == reference/mask-position-4-ref.xht
|
||||
mask-position-4d.xht == reference/mask-position-4-ref.xht
|
||||
mask-position-5.xht == reference/mask-position-5-ref.xht
|
||||
mask-position-6.xht == reference/mask-position-6-ref.xht
|
||||
mask-position-7.xht == reference/mask-position-7-ref.xht
|
||||
mask-repeat-1.xht == reference/mask-repeat-1-ref.xht
|
||||
mask-repeat-2.xht == reference/mask-repeat-2-ref.xht
|
||||
mask-repeat-3.xht == reference/mask-repeat-3-ref.xht
|
||||
mask-size-auto.xht == reference/mask-size-auto-ref.xht
|
||||
mask-size-auto-auto.xht == reference/mask-size-auto-ref.xht
|
||||
mask-size-auto-length.xht == reference/mask-size-auto-length-ref.xht
|
||||
mask-size-auto-percent.xht == reference/mask-size-auto-length-ref.xht
|
||||
mask-size-contain.xht == reference/mask-size-contain-ref.xht
|
||||
mask-size-contain-clip-border.xht == reference/mask-size-contain-clip-border-ref.xht
|
||||
mask-size-contain-clip-padding.xht == reference/mask-size-contain-clip-padding-ref.xht
|
||||
mask-size-contain-position-fifty-fifty.xht == reference/mask-size-contain-position-fifty-fifty-ref.xht
|
||||
mask-size-cover.xht == reference/mask-size-cover-ref.xht
|
||||
mask-size-length.xht == reference/mask-size-length-length-ref.xht
|
||||
mask-size-length-auto.xht == reference/mask-size-length-length-ref.xht
|
||||
mask-size-length-length.xht == reference/mask-size-length-length-ref.xht
|
||||
mask-size-length-percent.xht == reference/mask-size-length-percent-ref.xht
|
||||
mask-size-percent.xht == reference/mask-size-percent-percent-ref.xht
|
||||
mask-size-percent-auto.xht == reference/mask-size-percent-percent-ref.xht
|
||||
mask-size-percent-length.xht == reference/mask-size-percent-percent-ref.xht
|
||||
mask-size-percent-percent.xht == reference/mask-size-percent-percent-ref.xht
|
||||
mask-size-percent-percent-stretch.xht == reference/mask-size-percent-percent-stretch-ref.xht
|
||||
test-mask.xht == reference/test-mask-ref.xht
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="100">
|
||||
<rect x="0" y="0" width="50" height="100" fill="blue" fill-opacity="1"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 146 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">
|
||||
<rect x="0" y="0" width="50" height="50" fill="blue" fill-opacity="1"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 144 B |
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0" y="0" width="100%" height="100%" fill="blue" fill-opacity="1"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 125 B |
|
|
@ -1,4 +1,4 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
|
||||
<rect x="0" y="0" width="100%" height="50%" fill="blue" fill-opacity="0"/>
|
||||
<rect x="0" y="50" width="100%" height="50%" fill="blue" fill-opacity="1"/>
|
||||
<rect x="0" y="50%" width="100%" height="50%" fill="blue" fill-opacity="1"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 216 B After Width: | Height: | Size: 217 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0" y="0" width="100%" height="100%" fill="RGB(238,238,255)" fill-opacity="1"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 137 B |
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0" y="0" width="100%" height="100%" fill="lime" fill-opacity="1"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 125 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0" y="0" width="100%" height="100%" fill="RGB(73,73,255)" fill-opacity="1"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 135 B |
|
|
@ -0,0 +1,8 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
|
||||
<defs>
|
||||
<mask id="mask" mask-type="alpha">
|
||||
<rect x="0" y="0" width="100" height="50" fill-opacity="1"/>
|
||||
<rect x="0" y="50" width="100" height="50" fill-opacity="0"/>
|
||||
</mask>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 266 B |
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue