Update web-platform-tests and CSS tests.

- Update CSS tests to revision e05bfd5e30ed662c2f8a353577003f8eed230180.
- Update web-platform-tests to revision a052787dd5c069a340031011196b73affbd68cd9.
This commit is contained in:
Ms2ger 2017-02-06 11:06:12 +01:00
parent fb4f421c8b
commit 296fa2512b
21852 changed files with 2080936 additions and 892894 deletions

View 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>

View 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>

View 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>

View 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>

View file

@ -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>

View file

@ -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>

View 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>

View 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

View 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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>