mirror of
https://github.com/servo/servo.git
synced 2025-08-06 22:15:33 +01:00
Update web-platform-tests and CSS tests.
- Update CSS tests to revision e05bfd5e30ed662c2f8a353577003f8eed230180. - Update web-platform-tests to revision a052787dd5c069a340031011196b73affbd68cd9.
This commit is contained in:
parent
fb4f421c8b
commit
296fa2512b
21852 changed files with 2080936 additions and 892894 deletions
60
tests/wpt/css-tests/css-will-change-1_dev/html/chapter-1.htm
Normal file
60
tests/wpt/css-tests/css-will-change-1_dev/html/chapter-1.htm
Normal file
|
@ -0,0 +1,60 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Introduction - CSS Will Change Module Level 1 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>CSS Will Change Module Level 1 CR Test Suite</h1>
|
||||
<h2>Introduction (0 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s1">+</a>
|
||||
<a href="https://www.w3.org/TR/css-will-change-1/#intro">1 Introduction</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s1.#example-1a504618">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s1.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s1.1">+</a>
|
||||
<a href="https://www.w3.org/TR/css-will-change-1/#using">1.1 Using will-change Well</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s1.1.#css-sparingly">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s1.1.#dont-global">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s1.1.#dont-waste">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s1.1.#give-time">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
281
tests/wpt/css-tests/css-will-change-1_dev/html/chapter-2.htm
Normal file
281
tests/wpt/css-tests/css-will-change-1_dev/html/chapter-2.htm
Normal file
|
@ -0,0 +1,281 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Hinting at Future Behavior: the will-change property - CSS Will Change Module Level 1 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>CSS Will Change Module Level 1 CR Test Suite</h1>
|
||||
<h2>Hinting at Future Behavior: the will-change property (19 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s2">+</a>
|
||||
<a href="https://www.w3.org/TR/css-will-change-1/#will-change">2 Hinting at Future Behavior: the will-change property</a></th></tr>
|
||||
<!-- 19 tests -->
|
||||
<tr id="will-change-fixpos-cb-contain-1-2" class="primary">
|
||||
<td><strong>
|
||||
<a href="will-change-fixpos-cb-contain-1.htm">will-change-fixpos-cb-contain-1</a></strong></td>
|
||||
<td><a href="reference/green-square-100-by-100-offset-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS will-change: 'will-change: contain' creates a containing block for fixed positioned elements
|
||||
<ul class="assert">
|
||||
<li>If any non-initial value of a property would cause the element to generate a containing block for fixed-position elements, specifying that property in will-change must cause the element to generate a containing block for fixed-position elements.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="will-change-fixpos-cb-filter-1-2" class="primary">
|
||||
<td><strong>
|
||||
<a href="will-change-fixpos-cb-filter-1.htm">will-change-fixpos-cb-filter-1</a></strong></td>
|
||||
<td><a href="reference/green-square-100-by-100-offset-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS will-change: 'will-change: filter' creates a containing block for fixed positioned elements
|
||||
<ul class="assert">
|
||||
<li>If any non-initial value of a property would cause the element to generate a containing block for fixed-position elements, specifying that property in will-change must cause the element to generate a containing block for fixed-position elements.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="will-change-fixpos-cb-height-1-2" class="primary">
|
||||
<td><strong>
|
||||
<a href="will-change-fixpos-cb-height-1.htm">will-change-fixpos-cb-height-1</a></strong></td>
|
||||
<td><a href="reference/green-square-100-by-100-offset-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS will-change: 'will-change: height' does not create a containing block for fixed positioned elements
|
||||
<ul class="assert">
|
||||
<li>If any non-initial value of a property would cause the element to generate a containing block for fixed-position elements, specifying that property in will-change must cause the element to generate a containing block for fixed-position elements.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="will-change-fixpos-cb-perspective-1-2" class="primary">
|
||||
<td><strong>
|
||||
<a href="will-change-fixpos-cb-perspective-1.htm">will-change-fixpos-cb-perspective-1</a></strong></td>
|
||||
<td><a href="reference/green-square-100-by-100-offset-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS will-change: 'will-change: perspective' creates a containing block for fixed positioned elements
|
||||
<ul class="assert">
|
||||
<li>If any non-initial value of a property would cause the element to generate a containing block for fixed-position elements, specifying that property in will-change must cause the element to generate a containing block for fixed-position elements.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="will-change-fixpos-cb-position-1-2" class="primary">
|
||||
<td><strong>
|
||||
<a href="will-change-fixpos-cb-position-1.htm">will-change-fixpos-cb-position-1</a></strong></td>
|
||||
<td><a href="reference/green-square-100-by-100-offset-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS will-change: 'will-change: position' does not create a containing block for fixed positioned elements but does create a containing block for absolutely positioned elements
|
||||
<ul class="assert">
|
||||
<li>If any non-initial value of a property would cause the element to generate a containing block for fixed-position elements, specifying that property in will-change must cause the element to generate a containing block for fixed-position elements.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="will-change-fixpos-cb-transform-1-2" class="primary">
|
||||
<td><strong>
|
||||
<a href="will-change-fixpos-cb-transform-1.htm">will-change-fixpos-cb-transform-1</a></strong></td>
|
||||
<td><a href="reference/green-square-100-by-100-offset-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS will-change: 'will-change: transform' creates a containing block for fixed positioned elements
|
||||
<ul class="assert">
|
||||
<li>If any non-initial value of a property would cause the element to generate a containing block for fixed-position elements, specifying that property in will-change must cause the element to generate a containing block for fixed-position elements.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="will-change-fixpos-cb-transform-style-1-2" class="primary">
|
||||
<td><strong>
|
||||
<a href="will-change-fixpos-cb-transform-style-1.htm">will-change-fixpos-cb-transform-style-1</a></strong></td>
|
||||
<td><a href="reference/green-square-100-by-100-offset-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS will-change: 'will-change: transform-style' creates a containing block for fixed positioned elements
|
||||
<ul class="assert">
|
||||
<li>If any non-initial value of a property would cause the element to generate a containing block for fixed-position elements, specifying that property in will-change must cause the element to generate a containing block for fixed-position elements.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="will-change-stacking-context-clip-path-1-2" class="primary">
|
||||
<td><strong>
|
||||
<a href="will-change-stacking-context-clip-path-1.htm">will-change-stacking-context-clip-path-1</a></strong></td>
|
||||
<td><a href="reference/green-square-100-by-100-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS will-change: 'will-change: clip-path' creates a stacking context
|
||||
<ul class="assert">
|
||||
<li>If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="will-change-stacking-context-filter-1-2" class="primary">
|
||||
<td><strong>
|
||||
<a href="will-change-stacking-context-filter-1.htm">will-change-stacking-context-filter-1</a></strong></td>
|
||||
<td><a href="reference/green-square-100-by-100-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS will-change: 'will-change: filter' creates a stacking context
|
||||
<ul class="assert">
|
||||
<li>If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="will-change-stacking-context-height-1-2" class="primary">
|
||||
<td><strong>
|
||||
<a href="will-change-stacking-context-height-1.htm">will-change-stacking-context-height-1</a></strong></td>
|
||||
<td><a href="reference/green-square-100-by-100-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS will-change: 'will-change: height' does not create a stacking context
|
||||
<ul class="assert">
|
||||
<li>If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="will-change-stacking-context-isolation-1-2" class="primary">
|
||||
<td><strong>
|
||||
<a href="will-change-stacking-context-isolation-1.htm">will-change-stacking-context-isolation-1</a></strong></td>
|
||||
<td><a href="reference/green-square-100-by-100-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS will-change: 'will-change: isolation' creates a stacking context
|
||||
<ul class="assert">
|
||||
<li>If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="will-change-stacking-context-mask-1-2" class="primary">
|
||||
<td><strong>
|
||||
<a href="will-change-stacking-context-mask-1.htm">will-change-stacking-context-mask-1</a></strong></td>
|
||||
<td><a href="reference/green-square-100-by-100-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS will-change: 'will-change: mask' creates a stacking context
|
||||
<ul class="assert">
|
||||
<li>If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="will-change-stacking-context-mix-blend-mode-1-2" class="primary">
|
||||
<td><strong>
|
||||
<a href="will-change-stacking-context-mix-blend-mode-1.htm">will-change-stacking-context-mix-blend-mode-1</a></strong></td>
|
||||
<td><a href="reference/green-square-100-by-100-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS will-change: 'will-change: mix-blend-mode' creates a stacking context
|
||||
<ul class="assert">
|
||||
<li>If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="will-change-stacking-context-opacity-1-2" class="primary">
|
||||
<td><strong>
|
||||
<a href="will-change-stacking-context-opacity-1.htm">will-change-stacking-context-opacity-1</a></strong></td>
|
||||
<td><a href="reference/green-square-100-by-100-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS will-change: 'will-change: opacity' creates a stacking context
|
||||
<ul class="assert">
|
||||
<li>If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="will-change-stacking-context-perspective-1-2" class="primary">
|
||||
<td><strong>
|
||||
<a href="will-change-stacking-context-perspective-1.htm">will-change-stacking-context-perspective-1</a></strong></td>
|
||||
<td><a href="reference/green-square-100-by-100-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS will-change: 'will-change: perspective' creates a stacking context
|
||||
<ul class="assert">
|
||||
<li>If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="will-change-stacking-context-position-1-2" class="primary">
|
||||
<td><strong>
|
||||
<a href="will-change-stacking-context-position-1.htm">will-change-stacking-context-position-1</a></strong></td>
|
||||
<td><a href="reference/green-square-100-by-100-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS will-change: 'will-change: position' creates a stacking context
|
||||
<ul class="assert">
|
||||
<li>If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="will-change-stacking-context-transform-1-2" class="primary">
|
||||
<td><strong>
|
||||
<a href="will-change-stacking-context-transform-1.htm">will-change-stacking-context-transform-1</a></strong></td>
|
||||
<td><a href="reference/green-square-100-by-100-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS will-change: 'will-change: transform' creates a stacking context
|
||||
<ul class="assert">
|
||||
<li>If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="will-change-stacking-context-transform-style-1-2" class="primary">
|
||||
<td><strong>
|
||||
<a href="will-change-stacking-context-transform-style-1.htm">will-change-stacking-context-transform-style-1</a></strong></td>
|
||||
<td><a href="reference/green-square-100-by-100-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS will-change: 'will-change: transform-style' creates a stacking context
|
||||
<ul class="assert">
|
||||
<li>If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="will-change-stacking-context-z-index-1-2" class="primary">
|
||||
<td><strong>
|
||||
<a href="will-change-stacking-context-z-index-1.htm">will-change-stacking-context-z-index-1</a></strong></td>
|
||||
<td><a href="reference/green-square-100-by-100-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS will-change: 'will-change: z-index' creates a stacking context
|
||||
<ul class="assert">
|
||||
<li>If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s2.#example-0925a526">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.#example-11850f13">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.#example-3a61cc96">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.#example-cd991592">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.#example-f071a487">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.#propdef-will-change">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.#typedef-animateable-feature">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.#valdef-will-change-auto">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.#valdef-will-change-contents">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.#valdef-will-change-custom-ident">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.#valdef-will-change-scroll-position">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
39
tests/wpt/css-tests/css-will-change-1_dev/html/chapter-3.htm
Normal file
39
tests/wpt/css-tests/css-will-change-1_dev/html/chapter-3.htm
Normal file
|
@ -0,0 +1,39 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Acknowledgements - CSS Will Change Module Level 1 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>CSS Will Change Module Level 1 CR Test Suite</h1>
|
||||
<h2>Acknowledgements (0 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s3">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s3">+</a>
|
||||
<a href="https://www.w3.org/TR/css-will-change-1/#acks">3 Acknowledgements</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
126
tests/wpt/css-tests/css-will-change-1_dev/html/chapter-4.htm
Normal file
126
tests/wpt/css-tests/css-will-change-1_dev/html/chapter-4.htm
Normal file
|
@ -0,0 +1,126 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Changes since the April 29 2014 Working Draft - CSS Will Change Module Level 1 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>CSS Will Change Module Level 1 CR Test Suite</h1>
|
||||
<h2>Changes since the April 29 2014 Working Draft (0 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s4">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s4">+</a>
|
||||
<a href="https://www.w3.org/TR/css-will-change-1/#changes">4 Changes since the April 29 2014 Working Draft</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#abstract">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#conformance">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#contents">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#index">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#property-index">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#references">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#status">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#subtitle">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#title">
|
||||
<!-- 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="sconventions.#example-f839f6c8">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="scss-sparingly.#example-3634b91e">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="scss-sparingly.#example-8e05111e">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sgive-time.#example-ee344275">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sindex.#index-defined-elsewhere">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sindex.#index-defined-here">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sinformative.#biblio-css-backgrounds-3">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sinformative.#biblio-css-color-4">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sinformative.#biblio-css-transforms-1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="snormative.#biblio-css-values-3">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="snormative.#biblio-rfc2119">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sreferences.#informative">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sreferences.#normative">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sstatus.#w3c_process_revision">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS will-change reference</title>
|
||||
<link href="https://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla">
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; }
|
||||
div { width: 100px; height: 100px; margin: 100px 0 0 100px; background: green }
|
||||
</style>
|
||||
</head><body>
|
||||
<div></div>
|
||||
|
||||
</body></html>
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS will-change reference</title>
|
||||
<link href="https://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla">
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; }
|
||||
div { width: 100px; height: 100px; background: green }
|
||||
</style>
|
||||
</head><body>
|
||||
<div></div>
|
||||
|
||||
</body></html>
|
182
tests/wpt/css-tests/css-will-change-1_dev/html/reftest-toc.htm
Normal file
182
tests/wpt/css-tests/css-will-change-1_dev/html/reftest-toc.htm
Normal file
|
@ -0,0 +1,182 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Will Change Module Level 1 CR Test Suite Reftest Index</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>CSS Will Change Module Level 1 CR Test Suite Reftest Index</h1>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="ref-column">
|
||||
<col id="flags-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th>Reference</th>
|
||||
<th>Flags</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="will-change-fixpos-cb-contain-1" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS will-change: 'will-change: contain' creates a containing block for fixed positioned elements">
|
||||
<a href="will-change-fixpos-cb-contain-1.htm">will-change-fixpos-cb-contain-1</a></td>
|
||||
<td><a href="reference/green-square-100-by-100-offset-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="will-change-fixpos-cb-filter-1" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS will-change: 'will-change: filter' creates a containing block for fixed positioned elements">
|
||||
<a href="will-change-fixpos-cb-filter-1.htm">will-change-fixpos-cb-filter-1</a></td>
|
||||
<td><a href="reference/green-square-100-by-100-offset-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="will-change-fixpos-cb-height-1" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS will-change: 'will-change: height' does not create a containing block for fixed positioned elements">
|
||||
<a href="will-change-fixpos-cb-height-1.htm">will-change-fixpos-cb-height-1</a></td>
|
||||
<td><a href="reference/green-square-100-by-100-offset-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="will-change-fixpos-cb-perspective-1" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS will-change: 'will-change: perspective' creates a containing block for fixed positioned elements">
|
||||
<a href="will-change-fixpos-cb-perspective-1.htm">will-change-fixpos-cb-perspective-1</a></td>
|
||||
<td><a href="reference/green-square-100-by-100-offset-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="will-change-fixpos-cb-position-1" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS will-change: 'will-change: position' does not create a containing block for fixed positioned elements but does create a containing block for absolutely positioned elements">
|
||||
<a href="will-change-fixpos-cb-position-1.htm">will-change-fixpos-cb-position-1</a></td>
|
||||
<td><a href="reference/green-square-100-by-100-offset-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="will-change-fixpos-cb-transform-1" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS will-change: 'will-change: transform' creates a containing block for fixed positioned elements">
|
||||
<a href="will-change-fixpos-cb-transform-1.htm">will-change-fixpos-cb-transform-1</a></td>
|
||||
<td><a href="reference/green-square-100-by-100-offset-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="will-change-fixpos-cb-transform-style-1" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS will-change: 'will-change: transform-style' creates a containing block for fixed positioned elements">
|
||||
<a href="will-change-fixpos-cb-transform-style-1.htm">will-change-fixpos-cb-transform-style-1</a></td>
|
||||
<td><a href="reference/green-square-100-by-100-offset-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="will-change-stacking-context-clip-path-1" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS will-change: 'will-change: clip-path' creates a stacking context">
|
||||
<a href="will-change-stacking-context-clip-path-1.htm">will-change-stacking-context-clip-path-1</a></td>
|
||||
<td><a href="reference/green-square-100-by-100-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="will-change-stacking-context-filter-1" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS will-change: 'will-change: filter' creates a stacking context">
|
||||
<a href="will-change-stacking-context-filter-1.htm">will-change-stacking-context-filter-1</a></td>
|
||||
<td><a href="reference/green-square-100-by-100-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="will-change-stacking-context-height-1" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS will-change: 'will-change: height' does not create a stacking context">
|
||||
<a href="will-change-stacking-context-height-1.htm">will-change-stacking-context-height-1</a></td>
|
||||
<td><a href="reference/green-square-100-by-100-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="will-change-stacking-context-isolation-1" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS will-change: 'will-change: isolation' creates a stacking context">
|
||||
<a href="will-change-stacking-context-isolation-1.htm">will-change-stacking-context-isolation-1</a></td>
|
||||
<td><a href="reference/green-square-100-by-100-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="will-change-stacking-context-mask-1" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS will-change: 'will-change: mask' creates a stacking context">
|
||||
<a href="will-change-stacking-context-mask-1.htm">will-change-stacking-context-mask-1</a></td>
|
||||
<td><a href="reference/green-square-100-by-100-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="will-change-stacking-context-mix-blend-mode-1" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS will-change: 'will-change: mix-blend-mode' creates a stacking context">
|
||||
<a href="will-change-stacking-context-mix-blend-mode-1.htm">will-change-stacking-context-mix-blend-mode-1</a></td>
|
||||
<td><a href="reference/green-square-100-by-100-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="will-change-stacking-context-opacity-1" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS will-change: 'will-change: opacity' creates a stacking context">
|
||||
<a href="will-change-stacking-context-opacity-1.htm">will-change-stacking-context-opacity-1</a></td>
|
||||
<td><a href="reference/green-square-100-by-100-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="will-change-stacking-context-perspective-1" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS will-change: 'will-change: perspective' creates a stacking context">
|
||||
<a href="will-change-stacking-context-perspective-1.htm">will-change-stacking-context-perspective-1</a></td>
|
||||
<td><a href="reference/green-square-100-by-100-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="will-change-stacking-context-position-1" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS will-change: 'will-change: position' creates a stacking context">
|
||||
<a href="will-change-stacking-context-position-1.htm">will-change-stacking-context-position-1</a></td>
|
||||
<td><a href="reference/green-square-100-by-100-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="will-change-stacking-context-transform-1" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS will-change: 'will-change: transform' creates a stacking context">
|
||||
<a href="will-change-stacking-context-transform-1.htm">will-change-stacking-context-transform-1</a></td>
|
||||
<td><a href="reference/green-square-100-by-100-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="will-change-stacking-context-transform-style-1" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS will-change: 'will-change: transform-style' creates a stacking context">
|
||||
<a href="will-change-stacking-context-transform-style-1.htm">will-change-stacking-context-transform-style-1</a></td>
|
||||
<td><a href="reference/green-square-100-by-100-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="will-change-stacking-context-z-index-1" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS will-change: 'will-change: z-index' creates a stacking context">
|
||||
<a href="will-change-stacking-context-z-index-1.htm">will-change-stacking-context-z-index-1</a></td>
|
||||
<td><a href="reference/green-square-100-by-100-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
20
tests/wpt/css-tests/css-will-change-1_dev/html/reftest.list
Normal file
20
tests/wpt/css-tests/css-will-change-1_dev/html/reftest.list
Normal file
|
@ -0,0 +1,20 @@
|
|||
|
||||
will-change-fixpos-cb-contain-1.htm == reference/green-square-100-by-100-offset-ref.htm
|
||||
will-change-fixpos-cb-filter-1.htm == reference/green-square-100-by-100-offset-ref.htm
|
||||
will-change-fixpos-cb-height-1.htm == reference/green-square-100-by-100-offset-ref.htm
|
||||
will-change-fixpos-cb-perspective-1.htm == reference/green-square-100-by-100-offset-ref.htm
|
||||
will-change-fixpos-cb-position-1.htm == reference/green-square-100-by-100-offset-ref.htm
|
||||
will-change-fixpos-cb-transform-1.htm == reference/green-square-100-by-100-offset-ref.htm
|
||||
will-change-fixpos-cb-transform-style-1.htm == reference/green-square-100-by-100-offset-ref.htm
|
||||
will-change-stacking-context-clip-path-1.htm == reference/green-square-100-by-100-ref.htm
|
||||
will-change-stacking-context-filter-1.htm == reference/green-square-100-by-100-ref.htm
|
||||
will-change-stacking-context-height-1.htm == reference/green-square-100-by-100-ref.htm
|
||||
will-change-stacking-context-isolation-1.htm == reference/green-square-100-by-100-ref.htm
|
||||
will-change-stacking-context-mask-1.htm == reference/green-square-100-by-100-ref.htm
|
||||
will-change-stacking-context-mix-blend-mode-1.htm == reference/green-square-100-by-100-ref.htm
|
||||
will-change-stacking-context-opacity-1.htm == reference/green-square-100-by-100-ref.htm
|
||||
will-change-stacking-context-perspective-1.htm == reference/green-square-100-by-100-ref.htm
|
||||
will-change-stacking-context-position-1.htm == reference/green-square-100-by-100-ref.htm
|
||||
will-change-stacking-context-transform-1.htm == reference/green-square-100-by-100-ref.htm
|
||||
will-change-stacking-context-transform-style-1.htm == reference/green-square-100-by-100-ref.htm
|
||||
will-change-stacking-context-z-index-1.htm == reference/green-square-100-by-100-ref.htm
|
44
tests/wpt/css-tests/css-will-change-1_dev/html/toc.htm
Normal file
44
tests/wpt/css-tests/css-will-change-1_dev/html/toc.htm
Normal file
|
@ -0,0 +1,44 @@
|
|||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Will Change Module Level 1 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Will Change Module Level 1 CR Test Suite By Chapter</h1>
|
||||
|
||||
<p>This index contains both
|
||||
<a href="http://wiki.csswg.org/test/selftest">self-describing tests</a>
|
||||
and reftests.
|
||||
A separate <a href="reftest-toc.htm">alphabetical reftest index</a>
|
||||
is provided for tests in <a href="http://wiki.csswg.org/test/reftest">reftest
|
||||
format</a> along with the <a href="reftest.list">reftest manifest</a>.</p>
|
||||
|
||||
<table>
|
||||
<tbody id="s1">
|
||||
<tr><th><a href="chapter-1.htm">Chapter 1 -
|
||||
Introduction</a></th>
|
||||
<td>(0 Tests)</td></tr>
|
||||
</tbody>
|
||||
<tbody id="s2">
|
||||
<tr><th><a href="chapter-2.htm">Chapter 2 -
|
||||
Hinting at Future Behavior: the will-change property</a></th>
|
||||
<td>(19 Tests)</td></tr>
|
||||
</tbody>
|
||||
<tbody id="s3">
|
||||
<tr><th><a href="chapter-3.htm">Chapter 3 -
|
||||
Acknowledgements</a></th>
|
||||
<td>(0 Tests)</td></tr>
|
||||
</tbody>
|
||||
<tbody id="s4">
|
||||
<tr><th><a href="chapter-4.htm">Chapter 4 -
|
||||
Changes since the April 29 2014 Working Draft</a></th>
|
||||
<td>(0 Tests)</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS will-change: 'will-change: contain' creates a containing block for fixed positioned elements</title>
|
||||
<link href="https://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla">
|
||||
<link href="https://drafts.csswg.org/css-will-change-1/#will-change" rel="help">
|
||||
<link href="https://drafts.csswg.org/css-containment/#containment-paint" rel="help">
|
||||
<link href="reference/green-square-100-by-100-offset-ref.htm" rel="match">
|
||||
<meta content="If any non-initial value of a property would cause the element to generate a containing block for fixed-position elements, specifying that property in will-change must cause the element to generate a containing block for fixed-position elements." name="assert">
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; }
|
||||
div { width: 100px; height: 100px }
|
||||
#wc { will-change: contain; margin: 100px 0 0 100px; background: red }
|
||||
.child { top: 0; left: 0; width: 50px; background: green }
|
||||
#fixpos { position: fixed }
|
||||
#abspos { position: absolute; left: 50px }
|
||||
</style>
|
||||
</head><body>
|
||||
<div id="wc">
|
||||
<div id="fixpos" class="child">
|
||||
</div>
|
||||
<div id="abspos" class="child">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS will-change: 'will-change: filter' creates a containing block for fixed positioned elements</title>
|
||||
<link href="https://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla">
|
||||
<link href="https://drafts.csswg.org/css-will-change-1/#will-change" rel="help">
|
||||
<link href="http://www.w3.org/TR/filter-effects/#FilterProperty" rel="help">
|
||||
<link href="reference/green-square-100-by-100-offset-ref.htm" rel="match">
|
||||
<meta content="If any non-initial value of a property would cause the element to generate a containing block for fixed-position elements, specifying that property in will-change must cause the element to generate a containing block for fixed-position elements." name="assert">
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; }
|
||||
div { width: 100px; height: 100px }
|
||||
#wc { will-change: filter; margin: 100px 0 0 100px; background: red }
|
||||
.child { top: 0; left: 0; width: 50px; background: green }
|
||||
#fixpos { position: fixed }
|
||||
#abspos { position: absolute; left: 50px }
|
||||
</style>
|
||||
</head><body>
|
||||
<div id="wc">
|
||||
<div id="fixpos" class="child">
|
||||
</div>
|
||||
<div id="abspos" class="child">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS will-change: 'will-change: height' does not create a containing block for fixed positioned elements</title>
|
||||
<link href="https://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla">
|
||||
<link href="https://drafts.csswg.org/css-will-change-1/#will-change" rel="help">
|
||||
<link href="reference/green-square-100-by-100-offset-ref.htm" rel="match">
|
||||
<meta content="If any non-initial value of a property would cause the element to generate a containing block for fixed-position elements, specifying that property in will-change must cause the element to generate a containing block for fixed-position elements." name="assert">
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; }
|
||||
div { width: 100px; height: 100px }
|
||||
#wc { will-change: height; margin: 100px 0 0 100px; background: red }
|
||||
.child { top: 100px; left: 100px; width: 50px; background: green }
|
||||
#fixpos { position: fixed }
|
||||
#abspos { position: absolute; left: 150px }
|
||||
</style>
|
||||
</head><body>
|
||||
<div id="wc">
|
||||
<div id="fixpos" class="child">
|
||||
</div>
|
||||
<div id="abspos" class="child">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS will-change: 'will-change: perspective' creates a containing block for fixed positioned elements</title>
|
||||
<link href="https://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla">
|
||||
<link href="https://drafts.csswg.org/css-will-change-1/#will-change" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-transforms/#perspective-property" rel="help">
|
||||
<link href="reference/green-square-100-by-100-offset-ref.htm" rel="match">
|
||||
<meta content="If any non-initial value of a property would cause the element to generate a containing block for fixed-position elements, specifying that property in will-change must cause the element to generate a containing block for fixed-position elements." name="assert">
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; }
|
||||
div { width: 100px; height: 100px }
|
||||
#wc { will-change: perspective; margin: 100px 0 0 100px; background: red }
|
||||
.child { top: 0; left: 0; width: 50px; background: green }
|
||||
#fixpos { position: fixed }
|
||||
#abspos { position: absolute; left: 50px }
|
||||
</style>
|
||||
</head><body>
|
||||
<div id="wc">
|
||||
<div id="fixpos" class="child">
|
||||
</div>
|
||||
<div id="abspos" class="child">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS will-change: 'will-change: position' does not create a containing block for fixed positioned elements but does create a containing block for absolutely positioned elements</title>
|
||||
<link href="https://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla">
|
||||
<link href="https://drafts.csswg.org/css-will-change-1/#will-change" rel="help">
|
||||
<link href="reference/green-square-100-by-100-offset-ref.htm" rel="match">
|
||||
<meta content="If any non-initial value of a property would cause the element to generate a containing block for fixed-position elements, specifying that property in will-change must cause the element to generate a containing block for fixed-position elements." name="assert">
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; }
|
||||
div { width: 100px; height: 100px }
|
||||
#wc { will-change: position; margin: 100px 0 0 100px; background: red }
|
||||
.child { width: 50px; background: green }
|
||||
#fixpos { position: fixed; top: 100px; left: 100px }
|
||||
#abspos { position: absolute; top: 0; left: 50px }
|
||||
</style>
|
||||
</head><body>
|
||||
<div id="wc">
|
||||
<div id="fixpos" class="child">
|
||||
</div>
|
||||
<div id="abspos" class="child">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS will-change: 'will-change: transform' creates a containing block for fixed positioned elements</title>
|
||||
<link href="https://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla">
|
||||
<link href="https://drafts.csswg.org/css-will-change-1/#will-change" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-transforms/#transform-property" rel="help">
|
||||
<link href="reference/green-square-100-by-100-offset-ref.htm" rel="match">
|
||||
<meta content="If any non-initial value of a property would cause the element to generate a containing block for fixed-position elements, specifying that property in will-change must cause the element to generate a containing block for fixed-position elements." name="assert">
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; }
|
||||
div { width: 100px; height: 100px }
|
||||
#wc { will-change: transform; margin: 100px 0 0 100px; background: red }
|
||||
.child { top: 0; left: 0; width: 50px; background: green }
|
||||
#fixpos { position: fixed }
|
||||
#abspos { position: absolute; left: 50px }
|
||||
</style>
|
||||
</head><body>
|
||||
<div id="wc">
|
||||
<div id="fixpos" class="child">
|
||||
</div>
|
||||
<div id="abspos" class="child">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS will-change: 'will-change: transform-style' creates a containing block for fixed positioned elements</title>
|
||||
<link href="https://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla">
|
||||
<link href="https://drafts.csswg.org/css-will-change-1/#will-change" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-transforms/#transform-style-property" rel="help">
|
||||
<link href="reference/green-square-100-by-100-offset-ref.htm" rel="match">
|
||||
<meta content="If any non-initial value of a property would cause the element to generate a containing block for fixed-position elements, specifying that property in will-change must cause the element to generate a containing block for fixed-position elements." name="assert">
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; }
|
||||
div { width: 100px; height: 100px }
|
||||
#wc { will-change: transform-style; margin: 100px 0 0 100px; background: red }
|
||||
.child { top: 0; left: 0; width: 50px; background: green }
|
||||
#fixpos { position: fixed }
|
||||
#abspos { position: absolute; left: 50px }
|
||||
</style>
|
||||
</head><body>
|
||||
<div id="wc">
|
||||
<div id="fixpos" class="child">
|
||||
</div>
|
||||
<div id="abspos" class="child">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS will-change: 'will-change: clip-path' creates a stacking context</title>
|
||||
<link href="https://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla">
|
||||
<link href="https://drafts.csswg.org/css-will-change-1/#will-change" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-masking/#the-clip-path" rel="help">
|
||||
<link href="reference/green-square-100-by-100-ref.htm" rel="match">
|
||||
<meta content="If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element." name="assert">
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; }
|
||||
div { width: 100px; height: 100px }
|
||||
#wc { will-change: clip-path; background: red }
|
||||
#child { position: absolute; top: 0; left: 0; z-index: -1; background: green }
|
||||
</style>
|
||||
</head><body>
|
||||
<div id="wc">
|
||||
<div id="child">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS will-change: 'will-change: filter' creates a stacking context</title>
|
||||
<link href="https://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla">
|
||||
<link href="https://drafts.csswg.org/css-will-change-1/#will-change" rel="help">
|
||||
<link href="http://www.w3.org/TR/filter-effects/#FilterProperty" rel="help">
|
||||
<link href="reference/green-square-100-by-100-ref.htm" rel="match">
|
||||
<meta content="If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element." name="assert">
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; }
|
||||
div { width: 100px; height: 100px }
|
||||
#wc { will-change: filter; background: red }
|
||||
#child { position: absolute; top: 0; left: 0; z-index: -1; background: green }
|
||||
</style>
|
||||
</head><body>
|
||||
<div id="wc">
|
||||
<div id="child">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS will-change: 'will-change: height' does not create a stacking context</title>
|
||||
<link href="https://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla">
|
||||
<link href="https://drafts.csswg.org/css-will-change-1/#will-change" rel="help">
|
||||
<link href="reference/green-square-100-by-100-ref.htm" rel="match">
|
||||
<meta content="If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element." name="assert">
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; }
|
||||
div { width: 100px; height: 100px }
|
||||
#wc { will-change: height; background: green }
|
||||
#child { position: absolute; top: 0; left: 0; z-index: -1; background: red }
|
||||
</style>
|
||||
</head><body>
|
||||
<div id="wc">
|
||||
<div id="child">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS will-change: 'will-change: isolation' creates a stacking context</title>
|
||||
<link href="https://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla">
|
||||
<link href="https://drafts.csswg.org/css-will-change-1/#will-change" rel="help">
|
||||
<link href="http://www.w3.org/TR/compositing-1/#isolation" rel="help">
|
||||
<link href="reference/green-square-100-by-100-ref.htm" rel="match">
|
||||
<meta content="If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element." name="assert">
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; }
|
||||
div { width: 100px; height: 100px }
|
||||
#wc { will-change: isolation; background: red }
|
||||
#child { position: absolute; top: 0; left: 0; z-index: -1; background: green }
|
||||
</style>
|
||||
</head><body>
|
||||
<div id="wc">
|
||||
<div id="child">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS will-change: 'will-change: mask' creates a stacking context</title>
|
||||
<link href="https://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla">
|
||||
<link href="https://drafts.csswg.org/css-will-change-1/#will-change" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-masking/#the-mask-image" rel="help">
|
||||
<link href="reference/green-square-100-by-100-ref.htm" rel="match">
|
||||
<meta content="If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element." name="assert">
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; }
|
||||
div { width: 100px; height: 100px }
|
||||
#wc { will-change: mask; background: red }
|
||||
#child { position: absolute; top: 0; left: 0; z-index: -1; background: green }
|
||||
</style>
|
||||
</head><body>
|
||||
<div id="wc">
|
||||
<div id="child">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS will-change: 'will-change: mix-blend-mode' creates a stacking context</title>
|
||||
<link href="https://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla">
|
||||
<link href="https://drafts.csswg.org/css-will-change-1/#will-change" rel="help">
|
||||
<link href="http://www.w3.org/TR/compositing-1/#mix-blend-mode" rel="help">
|
||||
<link href="reference/green-square-100-by-100-ref.htm" rel="match">
|
||||
<meta content="If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element." name="assert">
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; }
|
||||
div { width: 100px; height: 100px }
|
||||
#wc { will-change: mix-blend-mode; background: red }
|
||||
#child { position: absolute; top: 0; left: 0; z-index: -1; background: green }
|
||||
</style>
|
||||
</head><body>
|
||||
<div id="wc">
|
||||
<div id="child">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS will-change: 'will-change: opacity' creates a stacking context</title>
|
||||
<link href="https://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla">
|
||||
<link href="https://drafts.csswg.org/css-will-change-1/#will-change" rel="help">
|
||||
<link href="https://drafts.csswg.org/css-color-3/#transparency" rel="help">
|
||||
<link href="reference/green-square-100-by-100-ref.htm" rel="match">
|
||||
<meta content="If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element." name="assert">
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; }
|
||||
div { width: 100px; height: 100px }
|
||||
#wc { will-change: opacity; background: red }
|
||||
#child { position: absolute; top: 0; left: 0; z-index: -1; background: green }
|
||||
</style>
|
||||
</head><body>
|
||||
<div id="wc">
|
||||
<div id="child">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS will-change: 'will-change: perspective' creates a stacking context</title>
|
||||
<link href="https://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla">
|
||||
<link href="https://drafts.csswg.org/css-will-change-1/#will-change" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-transforms/#perspective-property" rel="help">
|
||||
<link href="reference/green-square-100-by-100-ref.htm" rel="match">
|
||||
<meta content="If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element." name="assert">
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; }
|
||||
div { width: 100px; height: 100px }
|
||||
#wc { will-change: perspective; background: red }
|
||||
#child { position: absolute; top: 0; left: 0; z-index: -1; background: green }
|
||||
</style>
|
||||
</head><body>
|
||||
<div id="wc">
|
||||
<div id="child">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS will-change: 'will-change: position' creates a stacking context</title>
|
||||
<link href="https://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla">
|
||||
<link href="https://drafts.csswg.org/css-will-change-1/#will-change" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-positioning/#sticky-pos" rel="help">
|
||||
<link href="reference/green-square-100-by-100-ref.htm" rel="match">
|
||||
<meta content="If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element." name="assert">
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; }
|
||||
div { width: 100px; height: 100px }
|
||||
#wc { will-change: position; background: red }
|
||||
#child { position: absolute; top: 0; left: 0; z-index: -1; background: green }
|
||||
</style>
|
||||
</head><body>
|
||||
<div id="wc">
|
||||
<div id="child">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS will-change: 'will-change: transform' creates a stacking context</title>
|
||||
<link href="https://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla">
|
||||
<link href="https://drafts.csswg.org/css-will-change-1/#will-change" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-transforms/#transform-property" rel="help">
|
||||
<link href="reference/green-square-100-by-100-ref.htm" rel="match">
|
||||
<meta content="If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element." name="assert">
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; }
|
||||
div { width: 100px; height: 100px }
|
||||
#wc { will-change: transform; background: red }
|
||||
#child { position: absolute; top: 0; left: 0; z-index: -1; background: green }
|
||||
</style>
|
||||
</head><body>
|
||||
<div id="wc">
|
||||
<div id="child">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS will-change: 'will-change: transform-style' creates a stacking context</title>
|
||||
<link href="https://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla">
|
||||
<link href="https://drafts.csswg.org/css-will-change-1/#will-change" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-transforms/#transform-style-property" rel="help">
|
||||
<link href="reference/green-square-100-by-100-ref.htm" rel="match">
|
||||
<meta content="If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element." name="assert">
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; }
|
||||
div { width: 100px; height: 100px }
|
||||
#wc { will-change: transform-style; background: red }
|
||||
#child { position: absolute; top: 0; left: 0; z-index: -1; background: green }
|
||||
</style>
|
||||
</head><body>
|
||||
<div id="wc">
|
||||
<div id="child">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS will-change: 'will-change: z-index' creates a stacking context</title>
|
||||
<link href="https://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla">
|
||||
<link href="https://drafts.csswg.org/css-will-change-1/#will-change" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-positioning/#layered-presentation" rel="help">
|
||||
<link href="reference/green-square-100-by-100-ref.htm" rel="match">
|
||||
<meta content="If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element." name="assert">
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; }
|
||||
div { width: 100px; height: 100px }
|
||||
#wc { will-change: z-index; background: red }
|
||||
#child { position: absolute; top: 0; left: 0; z-index: -1; background: green }
|
||||
</style>
|
||||
</head><body>
|
||||
<div id="wc">
|
||||
<div id="child">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
Loading…
Add table
Add a link
Reference in a new issue