diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-will-change')
65 files changed, 1395 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-will-change/META.yml b/testing/web-platform/tests/css/css-will-change/META.yml new file mode 100644 index 0000000000..8d265f2498 --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/META.yml @@ -0,0 +1,4 @@ +spec: https://drafts.csswg.org/css-will-change/ +suggested_reviewers: + - dbaron + - tabatkins diff --git a/testing/web-platform/tests/css/css-will-change/green-square-100-by-100-offset-ref.html b/testing/web-platform/tests/css/css-will-change/green-square-100-by-100-offset-ref.html new file mode 100644 index 0000000000..fee7030b6d --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/green-square-100-by-100-offset-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS will-change reference</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<style> +html, body { margin: 0; padding: 0; } +div { width: 100px; height: 100px; margin: 100px 0 0 100px; background: green } +</style> +<body> + <div></div> +</body> diff --git a/testing/web-platform/tests/css/css-will-change/green-square-100-by-100-ref.html b/testing/web-platform/tests/css/css-will-change/green-square-100-by-100-ref.html new file mode 100644 index 0000000000..c49bf5a21d --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/green-square-100-by-100-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS will-change reference</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<style> +html, body { margin: 0; padding: 0; } +div { width: 100px; height: 100px; background: green } +</style> +<body> + <div></div> +</body> diff --git a/testing/web-platform/tests/css/css-will-change/inheritance.html b/testing/web-platform/tests/css/css-will-change/inheritance.html new file mode 100644 index 0000000000..6b4ed2aa54 --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/inheritance.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Inheritance of CSS will-change property</title> +<link rel="help" href="https://drafts.csswg.org/css-will-change/#property-index"> +<meta name="assert" content="will-change does not inherit."> +<meta name="assert" content="will-change has initial value auto."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/inheritance-testcommon.js"></script> +</head> +<body> +<div id="container"> +<div id="target"></div> +</div> +<script> +assert_not_inherited('will-change', 'auto', 'transform'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-will-change/parsing/will-change-computed.html b/testing/web-platform/tests/css/css-will-change/parsing/will-change-computed.html new file mode 100644 index 0000000000..667f084eab --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/parsing/will-change-computed.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Will Change Test: getComputedStyle().willChange</title> +<link rel="help" href="https://drafts.csswg.org/css-will-change/#propdef-will-change"> +<meta name="assert" content="will-change computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("will-change", "auto"); + +// <animateable-feature> = scroll-position | contents | <custom-ident> +test_computed_value("will-change", "scroll-position"); +test_computed_value("will-change", "contents"); +test_computed_value("will-change", "transform"); +test_computed_value("will-change", "background-color"); + +test_computed_value("will-change", "scroll-position, contents"); +test_computed_value("will-change", "scroll-position, transform"); +test_computed_value("will-change", "contents, transform"); +test_computed_value("will-change", "transform, background-color"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-will-change/parsing/will-change-invalid.html b/testing/web-platform/tests/css/css-will-change/parsing/will-change-invalid.html new file mode 100644 index 0000000000..e8b0b01973 --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/parsing/will-change-invalid.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Will Change Test: parsing will-change with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-will-change/#propdef-will-change"> +<meta name="assert" content="will-change only supports the grammar 'auto | <animateable-feature>#'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("will-change", "auto transform"); +test_invalid_value("will-change", "auto, transform"); +test_invalid_value("will-change", "contents auto"); +test_invalid_value("will-change", "contents, auto"); + +let excludedKeywords = [ + // CSS-wide keywords are excluded from <custom-ident> + // https://drafts.csswg.org/css-values-4/#identifier-value + "initial", + "inherit", + "unset", + "revert", + "revert-layer", + "default", + + // will-change additionally excludes the following from <custom-ident> + "will-change", + "none", + "all", +]; + +for (let keyword of excludedKeywords) { + test_invalid_value("will-change", `transform, ${keyword}`); + test_invalid_value("will-change", `${keyword}, transform`); + for (let k of excludedKeywords) { + test_invalid_value("will-change", `${keyword}, ${k}`); + } +} + +test_invalid_value("will-change", "will-change"); +test_invalid_value("will-change", "none"); +test_invalid_value("will-change", "all"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-will-change/parsing/will-change-valid.html b/testing/web-platform/tests/css/css-will-change/parsing/will-change-valid.html new file mode 100644 index 0000000000..b8a086b3e3 --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/parsing/will-change-valid.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Will Change Test: parsing will-change with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-will-change/#propdef-will-change"> +<meta name="assert" content="will-change supports the full grammar 'auto | <animateable-feature>#'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("will-change", "auto"); + +// <animateable-feature> = scroll-position | contents | <custom-ident> +test_valid_value("will-change", "scroll-position"); +test_valid_value("will-change", "contents"); +test_valid_value("will-change", "transform"); +test_valid_value("will-change", "background-color"); + +test_valid_value("will-change", "scroll-position, contents"); +test_valid_value("will-change", "scroll-position, transform"); +test_valid_value("will-change", "contents, transform"); +test_valid_value("will-change", "transform, background-color"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-will-change/will-change-abspos-cb-001-ref.html b/testing/web-platform/tests/css/css-will-change/will-change-abspos-cb-001-ref.html new file mode 100644 index 0000000000..f81b9d2a29 --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-abspos-cb-001-ref.html @@ -0,0 +1,24 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<style> + .container { + border: 1px solid green; + width: 100px; + height: 100px; + margin-top: 100px; + display: flex; + position: relative; + } + .abspos { + position: absolute; + top: 0; + left: 0; + background: orange; + height: 20px; + width: 20px; + } +</style> +<div class="container"> + <div class="abspos"></div> +</div> diff --git a/testing/web-platform/tests/css/css-will-change/will-change-abspos-cb-001.html b/testing/web-platform/tests/css/css-will-change/will-change-abspos-cb-001.html new file mode 100644 index 0000000000..d59e443310 --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-abspos-cb-001.html @@ -0,0 +1,30 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test: will-change: position turns an element in an abspos containing block.</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1498873"> +<link rel="help" href="https://drafts.csswg.org/css-will-change/#will-change"> +<link rel="match" href="will-change-abspos-cb-001-ref.html"> +<style> + .container { + border: 1px solid green; + width: 100px; + height: 100px; + margin-top: 100px; + display: flex; + will-change: position; + } + .abspos { + position: absolute; + top: 0; + left: 0; + background: orange; + height: 20px; + width: 20px; + } +</style> +<div class="container"> + <div class="abspos"></div> +</div> diff --git a/testing/web-platform/tests/css/css-will-change/will-change-abspos-cb-002-ref.html b/testing/web-platform/tests/css/css-will-change/will-change-abspos-cb-002-ref.html new file mode 100644 index 0000000000..9dfc24c526 --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-abspos-cb-002-ref.html @@ -0,0 +1,13 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<style> + div { + border: 1px solid green; + background: green; + margin-top: 100px; + width: 100px; + height: 100px; + } +</style> +<div></div> diff --git a/testing/web-platform/tests/css/css-will-change/will-change-abspos-cb-002.html b/testing/web-platform/tests/css/css-will-change/will-change-abspos-cb-002.html new file mode 100644 index 0000000000..537f671cdc --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-abspos-cb-002.html @@ -0,0 +1,29 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test: will-change: filter should generate a containing block for absolute positioned elements.</title> +<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=960953"> +<link rel="help" href="https://drafts.csswg.org/css-will-change/#will-change"> +<link rel="help" href="https://drafts.fxtf.org/filter-effects/#FilterProperty"> +<link rel="match" href="will-change-abspos-cb-002-ref.html"> +<style> + .container { + border: 1px solid green; + background: red; + width: 100px; + height: 100px; + margin-top: 100px; + will-change: filter; + } + .abspos { + position: absolute; + top: 0; + left: 0; + background: green; + height: 100px; + width: 100px; + } +</style> +<div class="container"> + <div class="abspos"></div> +</div> diff --git a/testing/web-platform/tests/css/css-will-change/will-change-abspos-cb-003-ref.html b/testing/web-platform/tests/css/css-will-change/will-change-abspos-cb-003-ref.html new file mode 100644 index 0000000000..9dfc24c526 --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-abspos-cb-003-ref.html @@ -0,0 +1,13 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<style> + div { + border: 1px solid green; + background: green; + margin-top: 100px; + width: 100px; + height: 100px; + } +</style> +<div></div> diff --git a/testing/web-platform/tests/css/css-will-change/will-change-abspos-cb-003.html b/testing/web-platform/tests/css/css-will-change/will-change-abspos-cb-003.html new file mode 100644 index 0000000000..d5da92db4f --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-abspos-cb-003.html @@ -0,0 +1,29 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test: will-change: backdrop-filter should generate a containing block for absolute positioned elements.</title> +<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=960953"> +<link rel="help" href="https://drafts.csswg.org/css-will-change/#will-change"> +<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty"> +<link rel="match" href="will-change-abspos-cb-003-ref.html"> +<style> + .container { + border: 1px solid green; + background: red; + width: 100px; + height: 100px; + margin-top: 100px; + will-change: backdrop-filter; + } + .abspos { + position: absolute; + top: 0; + left: 0; + background: green; + height: 100px; + width: 100px; + } +</style> +<div class="container"> + <div class="abspos"></div> +</div> diff --git a/testing/web-platform/tests/css/css-will-change/will-change-abspos-cb-dynamic-001.html b/testing/web-platform/tests/css/css-will-change/will-change-abspos-cb-dynamic-001.html new file mode 100644 index 0000000000..d2503256bc --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-abspos-cb-dynamic-001.html @@ -0,0 +1,34 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test: will-change: position turns an element in an abspos containing block when changed dynamically.</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1499863"> +<link rel="help" href="https://drafts.csswg.org/css-will-change/#will-change"> +<link rel="match" href="will-change-abspos-cb-001-ref.html"> +<style> + .container { + border: 1px solid green; + width: 100px; + height: 100px; + margin-top: 100px; + } + .abspos { + position: absolute; + top: 0; + left: 0; + background: orange; + height: 20px; + width: 20px; + } +</style> +<div class="container"> + <div class="abspos"></div> +</div> +<script> +onload = function() { + let container = document.querySelector(".container"); + container.offsetTop; + container.style.willChange = "position"; +} +</script> diff --git a/testing/web-platform/tests/css/css-will-change/will-change-contents-crash.html b/testing/web-platform/tests/css/css-will-change/will-change-contents-crash.html new file mode 100644 index 0000000000..b2a05dac86 --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-contents-crash.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<head> + <title>CSS will-change contents: Chrome crash with partial cache hit</title> + <link rel="author" href="mailto:sesse@chromium.org"> + <link rel="help" href="https://crbug.com/1469858"> +</head> +<body> + <div style="color: blue;"><div style="will-change: contents;">Test passes</div></div> + <div style="color: fuchsia;"><div style="will-change: contents;">if it does not crash.</div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-will-change/will-change-fixedpos-cb-001-ref.html b/testing/web-platform/tests/css/css-will-change/will-change-fixedpos-cb-001-ref.html new file mode 100644 index 0000000000..9dfc24c526 --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-fixedpos-cb-001-ref.html @@ -0,0 +1,13 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<style> + div { + border: 1px solid green; + background: green; + margin-top: 100px; + width: 100px; + height: 100px; + } +</style> +<div></div> diff --git a/testing/web-platform/tests/css/css-will-change/will-change-fixedpos-cb-001.html b/testing/web-platform/tests/css/css-will-change/will-change-fixedpos-cb-001.html new file mode 100644 index 0000000000..249413b6d7 --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-fixedpos-cb-001.html @@ -0,0 +1,29 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test: will-change: filter should generate a containing block for fixed positioned elements.</title> +<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=960953"> +<link rel="help" href="https://drafts.csswg.org/css-will-change/#will-change"> +<link rel="help" href="https://drafts.fxtf.org/filter-effects/#FilterProperty"> +<link rel="match" href="will-change-fixedpos-cb-001-ref.html"> +<style> + .container { + border: 1px solid green; + background: red; + width: 100px; + height: 100px; + margin-top: 100px; + will-change: filter; + } + .fixedpos { + position: fixed; + top: 0; + left: 0; + background: green; + height: 100px; + width: 100px; + } +</style> +<div class="container"> + <div class="fixedpos"></div> +</div> diff --git a/testing/web-platform/tests/css/css-will-change/will-change-fixedpos-cb-002-ref.html b/testing/web-platform/tests/css/css-will-change/will-change-fixedpos-cb-002-ref.html new file mode 100644 index 0000000000..7823c16075 --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-fixedpos-cb-002-ref.html @@ -0,0 +1,12 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<style> + div { + background: green; + margin-left: 100px; + width: 100px; + height: 100px; + } +</style> +<div></div> diff --git a/testing/web-platform/tests/css/css-will-change/will-change-fixedpos-cb-002.html b/testing/web-platform/tests/css/css-will-change/will-change-fixedpos-cb-002.html new file mode 100644 index 0000000000..00cba5ecf8 --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-fixedpos-cb-002.html @@ -0,0 +1,27 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test: will-change: filter on an inline should generate a containing block for fixed positioned elements.</title> +<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=960953"> +<link rel="help" href="https://drafts.csswg.org/css-will-change/#will-change"> +<link rel="help" href="https://drafts.fxtf.org/filter-effects/#FilterProperty"> +<link rel="match" href="will-change-fixedpos-cb-002-ref.html"> +<style> + .inline { + margin-left: 100px; + will-change: filter; + } + .fixedpos { + position: fixed; + top: 0; + left: 0; + background: green; + height: 100px; + width: 100px; + } +</style> +<span class="inline"> + <!-- "FAIL" should be hidden by the green box and should not be visible. --> + FAIL + <div class="fixedpos"></div> +</span> diff --git a/testing/web-platform/tests/css/css-will-change/will-change-fixedpos-cb-003-ref.html b/testing/web-platform/tests/css/css-will-change/will-change-fixedpos-cb-003-ref.html new file mode 100644 index 0000000000..05957327c3 --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-fixedpos-cb-003-ref.html @@ -0,0 +1,31 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<style> + body { + margin: 0; + } + .hidden { + width: 100px; + height: 100px; + margin-left: 100px; + margin-top: 200px; + } + .fixedpos { + position: fixed; + top: 100px; + left: 100px; + background: green; + height: 100px; + width: 100px; + } + .spacer { + height: 2000px; + } +</style> +<div class="hidden"></div> +<div class="fixedpos"></div> +<div class="spacer"></div> +<script> + window.onload = function() { window.scrollTo(0, 100); }; +</script> diff --git a/testing/web-platform/tests/css/css-will-change/will-change-fixedpos-cb-003.html b/testing/web-platform/tests/css/css-will-change/will-change-fixedpos-cb-003.html new file mode 100644 index 0000000000..e7dcf2c880 --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-fixedpos-cb-003.html @@ -0,0 +1,41 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test: will-change: filter on the root should not generate a containing block for fixed positioned elements.</title> +<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=960953"> +<link rel="help" href="https://drafts.csswg.org/css-will-change/#will-change"> +<link rel="help" href="https://drafts.fxtf.org/filter-effects/#FilterProperty"> +<link rel="match" href="will-change-fixedpos-cb-003-ref.html"> +<style> + html { + will-change: filter; + } + body { + margin: 0; + } + .hidden { + width: 100px; + height: 100px; + background: red; + margin-left: 100px; + margin-top: 200px; + } + .fixedpos { + position: fixed; + top: 100px; + left: 100px; + background: green; + height: 100px; + width: 100px; + } + .spacer { + height: 2000px; + } +</style> +<!-- This object should be fully hidden by the fixed position object. --> +<div class="hidden"></div> +<div class="fixedpos"></div> +<div class="spacer"></div> +<script> + window.onload = function() { window.scrollTo(0, 100); }; +</script> diff --git a/testing/web-platform/tests/css/css-will-change/will-change-fixedpos-cb-004-ref.html b/testing/web-platform/tests/css/css-will-change/will-change-fixedpos-cb-004-ref.html new file mode 100644 index 0000000000..9dfc24c526 --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-fixedpos-cb-004-ref.html @@ -0,0 +1,13 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<style> + div { + border: 1px solid green; + background: green; + margin-top: 100px; + width: 100px; + height: 100px; + } +</style> +<div></div> diff --git a/testing/web-platform/tests/css/css-will-change/will-change-fixedpos-cb-004.html b/testing/web-platform/tests/css/css-will-change/will-change-fixedpos-cb-004.html new file mode 100644 index 0000000000..7bc5d92336 --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-fixedpos-cb-004.html @@ -0,0 +1,29 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test: will-change: backdrop-filter should generate a containing block for fixed positioned elements.</title> +<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=960953"> +<link rel="help" href="https://drafts.csswg.org/css-will-change/#will-change"> +<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty"> +<link rel="match" href="will-change-fixedpos-cb-004-ref.html"> +<style> + .container { + border: 1px solid green; + background: red; + width: 100px; + height: 100px; + margin-top: 100px; + will-change: backdrop-filter; + } + .fixedpos { + position: fixed; + top: 0; + left: 0; + background: green; + height: 100px; + width: 100px; + } +</style> +<div class="container"> + <div class="fixedpos"></div> +</div> diff --git a/testing/web-platform/tests/css/css-will-change/will-change-fixedpos-cb-005-ref.html b/testing/web-platform/tests/css/css-will-change/will-change-fixedpos-cb-005-ref.html new file mode 100644 index 0000000000..7823c16075 --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-fixedpos-cb-005-ref.html @@ -0,0 +1,12 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<style> + div { + background: green; + margin-left: 100px; + width: 100px; + height: 100px; + } +</style> +<div></div> diff --git a/testing/web-platform/tests/css/css-will-change/will-change-fixedpos-cb-005.html b/testing/web-platform/tests/css/css-will-change/will-change-fixedpos-cb-005.html new file mode 100644 index 0000000000..7cd88bd377 --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-fixedpos-cb-005.html @@ -0,0 +1,27 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test: will-change: backdrop-filter on an inline should generate a containing block for fixed positioned elements.</title> +<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=960953"> +<link rel="help" href="https://drafts.csswg.org/css-will-change/#will-change"> +<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty"> +<link rel="match" href="will-change-fixedpos-cb-005-ref.html"> +<style> + .inline { + margin-left: 100px; + will-change: backdrop-filter; + } + .fixedpos { + position: fixed; + top: 0; + left: 0; + background: green; + height: 100px; + width: 100px; + } +</style> +<span class="inline"> + <!-- "FAIL" should be hidden by the green box and should not be visible. --> + FAIL + <div class="fixedpos"></div> +</span> diff --git a/testing/web-platform/tests/css/css-will-change/will-change-fixedpos-cb-006-ref.html b/testing/web-platform/tests/css/css-will-change/will-change-fixedpos-cb-006-ref.html new file mode 100644 index 0000000000..05957327c3 --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-fixedpos-cb-006-ref.html @@ -0,0 +1,31 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<style> + body { + margin: 0; + } + .hidden { + width: 100px; + height: 100px; + margin-left: 100px; + margin-top: 200px; + } + .fixedpos { + position: fixed; + top: 100px; + left: 100px; + background: green; + height: 100px; + width: 100px; + } + .spacer { + height: 2000px; + } +</style> +<div class="hidden"></div> +<div class="fixedpos"></div> +<div class="spacer"></div> +<script> + window.onload = function() { window.scrollTo(0, 100); }; +</script> diff --git a/testing/web-platform/tests/css/css-will-change/will-change-fixedpos-cb-006.html b/testing/web-platform/tests/css/css-will-change/will-change-fixedpos-cb-006.html new file mode 100644 index 0000000000..ec9eaa409f --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-fixedpos-cb-006.html @@ -0,0 +1,41 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test: will-change: backdrop-filter on the root should not generate a containing block for fixed positioned elements.</title> +<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=960953"> +<link rel="help" href="https://drafts.csswg.org/css-will-change/#will-change"> +<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty"> +<link rel="match" href="will-change-fixedpos-cb-006-ref.html"> +<style> + html { + will-change: backdrop-filter; + } + body { + margin: 0; + } + .hidden { + width: 100px; + height: 100px; + background: red; + margin-left: 100px; + margin-top: 200px; + } + .fixedpos { + position: fixed; + top: 100px; + left: 100px; + background: green; + height: 100px; + width: 100px; + } + .spacer { + height: 2000px; + } +</style> +<!-- This object should be fully hidden by the fixed position object. --> +<div class="hidden"></div> +<div class="fixedpos"></div> +<div class="spacer"></div> +<script> + window.onload = function() { window.scrollTo(0, 100); }; +</script> diff --git a/testing/web-platform/tests/css/css-will-change/will-change-fixpos-cb-contain-1.html b/testing/web-platform/tests/css/css-will-change/will-change-fixpos-cb-contain-1.html new file mode 100644 index 0000000000..3bb3afee3b --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-fixpos-cb-contain-1.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS will-change: 'will-change: contain' creates a containing block for fixed positioned elements</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change"> +<link rel="help" href="https://drafts.csswg.org/css-containment/#containment-paint"> +<link rel="match" href="green-square-100-by-100-offset-ref.html"> +<meta name="assert" 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."> +<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> +<body> + <div id="wc"> + <div class="child" id="fixpos"> + </div> + <div class="child" id="abspos"> + </div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-will-change/will-change-fixpos-cb-filter-1.html b/testing/web-platform/tests/css/css-will-change/will-change-fixpos-cb-filter-1.html new file mode 100644 index 0000000000..afb03e8bec --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-fixpos-cb-filter-1.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS will-change: 'will-change: filter' creates a containing block for fixed positioned elements</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change"> +<link rel="help" href="http://www.w3.org/TR/filter-effects/#FilterProperty"> +<link rel="match" href="green-square-100-by-100-offset-ref.html"> +<meta name="assert" 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."> +<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> +<body> + <div id="wc"> + <div class="child" id="fixpos"> + </div> + <div class="child" id="abspos"> + </div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-will-change/will-change-fixpos-cb-height-1.html b/testing/web-platform/tests/css/css-will-change/will-change-fixpos-cb-height-1.html new file mode 100644 index 0000000000..892e6d4541 --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-fixpos-cb-height-1.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS will-change: 'will-change: height' does not create a containing block for fixed positioned elements</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change"> +<link rel="match" href="green-square-100-by-100-offset-ref.html"> +<meta name="assert" 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."> +<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> +<body> + <div id="wc"> + <div class="child" id="fixpos"> + </div> + <div class="child" id="abspos"> + </div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-will-change/will-change-fixpos-cb-offset-path-1.html b/testing/web-platform/tests/css/css-will-change/will-change-fixpos-cb-offset-path-1.html new file mode 100644 index 0000000000..0fe1ec1da7 --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-fixpos-cb-offset-path-1.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS will-change: 'will-change: offset-path' creates a containing block for fixed positioned elements</title> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change"> +<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property"> +<link rel="match" href="green-square-100-by-100-offset-ref.html"> +<meta name="assert" 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."> +<style> +html, body { margin: 0; padding: 0; } +div { width: 100px; height: 100px } +#wc { will-change: offset-path; 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> +<body> + <div id="wc"> + <div class="child" id="fixpos"> + </div> + <div class="child" id="abspos"> + </div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-will-change/will-change-fixpos-cb-perspective-1.html b/testing/web-platform/tests/css/css-will-change/will-change-fixpos-cb-perspective-1.html new file mode 100644 index 0000000000..4a394f9958 --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-fixpos-cb-perspective-1.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS will-change: 'will-change: perspective' creates a containing block for fixed positioned elements</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change"> +<link rel="help" href="http://www.w3.org/TR/css3-transforms/#perspective-property"> +<link rel="match" href="green-square-100-by-100-offset-ref.html"> +<meta name="assert" 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."> +<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> +<body> + <div id="wc"> + <div class="child" id="fixpos"> + </div> + <div class="child" id="abspos"> + </div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-will-change/will-change-fixpos-cb-position-1.html b/testing/web-platform/tests/css/css-will-change/will-change-fixpos-cb-position-1.html new file mode 100644 index 0000000000..7e52ab4b03 --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-fixpos-cb-position-1.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<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 rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change"> +<link rel="match" href="green-square-100-by-100-offset-ref.html"> +<meta name="assert" 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."> +<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> +<body> + <div id="wc"> + <div class="child" id="fixpos"> + </div> + <div class="child" id="abspos"> + </div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-will-change/will-change-fixpos-cb-transform-1.html b/testing/web-platform/tests/css/css-will-change/will-change-fixpos-cb-transform-1.html new file mode 100644 index 0000000000..92632cd62d --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-fixpos-cb-transform-1.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS will-change: 'will-change: transform' creates a containing block for fixed positioned elements</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change"> +<link rel="help" href="http://www.w3.org/TR/css3-transforms/#transform-property"> +<link rel="match" href="green-square-100-by-100-offset-ref.html"> +<meta name="assert" 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."> +<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> +<body> + <div id="wc"> + <div class="child" id="fixpos"> + </div> + <div class="child" id="abspos"> + </div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-will-change/will-change-fixpos-cb-transform-style-1.html b/testing/web-platform/tests/css/css-will-change/will-change-fixpos-cb-transform-style-1.html new file mode 100644 index 0000000000..808f7d8cd0 --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-fixpos-cb-transform-style-1.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS will-change: 'will-change: transform-style' creates a containing block for fixed positioned elements</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change"> +<link rel="help" href="http://www.w3.org/TR/css3-transforms/#transform-style-property"> +<link rel="match" href="green-square-100-by-100-offset-ref.html"> +<meta name="assert" 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."> +<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> +<body> + <div id="wc"> + <div class="child" id="fixpos"> + </div> + <div class="child" id="abspos"> + </div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-will-change/will-change-fixpos-cb-translate-1.html b/testing/web-platform/tests/css/css-will-change/will-change-fixpos-cb-translate-1.html new file mode 100644 index 0000000000..7ff0dfe768 --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-fixpos-cb-translate-1.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS will-change: 'will-change: translate' creates a containing block for fixed positioned elements</title> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-translate"> +<link rel="match" href="green-square-100-by-100-offset-ref.html"> +<meta name="assert" 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."> +<style> +html, body { margin: 0; padding: 0; } +div { width: 100px; height: 100px } +#wc { will-change: translate; 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> +<body> + <div id="wc"> + <div class="child" id="fixpos"> + </div> + <div class="child" id="abspos"> + </div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-will-change/will-change-fixpos-cb-webkit-perspective-1.html b/testing/web-platform/tests/css/css-will-change/will-change-fixpos-cb-webkit-perspective-1.html new file mode 100644 index 0000000000..2438dcd975 --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-fixpos-cb-webkit-perspective-1.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS will-change: 'will-change: -webkit-perspective' creates a containing block for fixed positioned elements</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="author" title="Google" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change"> +<link rel="help" href="http://www.w3.org/TR/css3-transforms/#perspective-property"> +<link rel="help" href="https://compat.spec.whatwg.org/#css-simple-aliases"> +<link rel="match" href="green-square-100-by-100-offset-ref.html"> +<meta name="assert" 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."> +<style> +html, body { margin: 0; padding: 0; } +div { width: 100px; height: 100px } +#wc { will-change: -webkit-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> +<body> + <div id="wc"> + <div class="child" id="fixpos"> + </div> + <div class="child" id="abspos"> + </div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-will-change/will-change-inherit-dynamic.html b/testing/web-platform/tests/css/css-will-change/will-change-inherit-dynamic.html new file mode 100644 index 0000000000..b01844aea5 --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-inherit-dynamic.html @@ -0,0 +1,21 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test: will-change: style changes are properly propagated to children if needed</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1499991"> +<link rel="help" href="https://drafts.csswg.org/css-will-change/#will-change"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id="outer"> + <div id="inner" style="will-change: inherit"></div> +</div> +<script> + test(function() { + assert_equals(getComputedStyle(outer).willChange, "auto"); + assert_equals(getComputedStyle(inner).willChange, "auto"); + outer.style.willChange = "color"; + assert_equals(getComputedStyle(outer).willChange, "color"); + assert_equals(getComputedStyle(inner).willChange, "color"); + }, "will-change change is properly propagated to children if needed"); +</script> diff --git a/testing/web-platform/tests/css/css-will-change/will-change-stacking-context-backdrop-filter-1.html b/testing/web-platform/tests/css/css-will-change/will-change-stacking-context-backdrop-filter-1.html new file mode 100644 index 0000000000..0081e93c4f --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-stacking-context-backdrop-filter-1.html @@ -0,0 +1,37 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test: will-change: backdrop-filter should create a stacking context.</title> +<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=960953"> +<link rel="help" href="https://drafts.csswg.org/css-will-change/#will-change"> +<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty"> +<link rel="match" href="green-square-100-by-100-ref.html"> +<style> + html, body { margin: 0; } + .indicator { + position: absolute; + background-color: green; + z-index: 1; + } + .willchange { + will-change: backdrop-filter; + z-index: 0; + } + .child { + position: relative; + background-color: red; + z-index: 2; + } + .box { + width: 100px; + height: 100px; + } +</style> + +<div class="indicator box"></div> +<div class="willchange box"> + <!-- Because will-change: backdrop-filter creates a stacking context, this + child remains on bottom even though it has a higher z-index than the + indicator box. --> + <div class="child box"></div> +</div> diff --git a/testing/web-platform/tests/css/css-will-change/will-change-stacking-context-clip-path-1.html b/testing/web-platform/tests/css/css-will-change/will-change-stacking-context-clip-path-1.html new file mode 100644 index 0000000000..673d1a895b --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-stacking-context-clip-path-1.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS will-change: 'will-change: clip-path' creates a stacking context</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change"> +<link rel="help" href="http://www.w3.org/TR/css-masking/#the-clip-path"> +<link rel="match" href="green-square-100-by-100-ref.html"> +<meta name="assert" 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."> +<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> +<body> + <div id="wc"> + <div id="child"> + </div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-will-change/will-change-stacking-context-filter-1.html b/testing/web-platform/tests/css/css-will-change/will-change-stacking-context-filter-1.html new file mode 100644 index 0000000000..0f87768db1 --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-stacking-context-filter-1.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS will-change: 'will-change: filter' creates a stacking context</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change"> +<link rel="help" href="http://www.w3.org/TR/filter-effects/#FilterProperty"> +<link rel="match" href="green-square-100-by-100-ref.html"> +<meta name="assert" 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."> +<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> +<body> + <div id="wc"> + <div id="child"> + </div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-will-change/will-change-stacking-context-height-1.html b/testing/web-platform/tests/css/css-will-change/will-change-stacking-context-height-1.html new file mode 100644 index 0000000000..3ce0e61588 --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-stacking-context-height-1.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS will-change: 'will-change: height' does not create a stacking context</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change"> +<link rel="match" href="green-square-100-by-100-ref.html"> +<meta name="assert" 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."> +<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> +<body> + <div id="wc"> + <div id="child"> + </div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-will-change/will-change-stacking-context-isolation-1.html b/testing/web-platform/tests/css/css-will-change/will-change-stacking-context-isolation-1.html new file mode 100644 index 0000000000..9eaf812e93 --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-stacking-context-isolation-1.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS will-change: 'will-change: isolation' creates a stacking context</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change"> +<link rel="help" href="http://www.w3.org/TR/compositing-1/#isolation"> +<link rel="match" href="green-square-100-by-100-ref.html"> +<meta name="assert" 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."> +<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> +<body> + <div id="wc"> + <div id="child"> + </div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-will-change/will-change-stacking-context-mask-1.html b/testing/web-platform/tests/css/css-will-change/will-change-stacking-context-mask-1.html new file mode 100644 index 0000000000..77ec10caa9 --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-stacking-context-mask-1.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS will-change: 'will-change: mask' creates a stacking context</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change"> +<link rel="help" href="http://www.w3.org/TR/css-masking/#the-mask-image"> +<link rel="match" href="green-square-100-by-100-ref.html"> +<meta name="assert" 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."> +<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> +<body> + <div id="wc"> + <div id="child"> + </div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-will-change/will-change-stacking-context-mix-blend-mode-1.html b/testing/web-platform/tests/css/css-will-change/will-change-stacking-context-mix-blend-mode-1.html new file mode 100644 index 0000000000..ae13ac6b66 --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-stacking-context-mix-blend-mode-1.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS will-change: 'will-change: mix-blend-mode' creates a stacking context</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change"> +<link rel="help" href="http://www.w3.org/TR/compositing-1/#mix-blend-mode"> +<link rel="match" href="green-square-100-by-100-ref.html"> +<meta name="assert" 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."> +<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> +<body> + <div id="wc"> + <div id="child"> + </div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-will-change/will-change-stacking-context-offset-path-1.html b/testing/web-platform/tests/css/css-will-change/will-change-stacking-context-offset-path-1.html new file mode 100644 index 0000000000..07277b66d9 --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-stacking-context-offset-path-1.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS will-change: 'will-change: offset-path' creates a stacking context</title> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change"> +<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property"> +<link rel="match" href="green-square-100-by-100-ref.html"> +<meta name="assert" 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."> +<style> +html, body { margin: 0; padding: 0; } +div { width: 100px; height: 100px } +#wc { will-change: offset-path; background: red } +#child { position: absolute; top: 0; left: 0; z-index: -1; background: green } +</style> +<body> + <div id="wc"> + <div id="child"> + </div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-will-change/will-change-stacking-context-opacity-1.html b/testing/web-platform/tests/css/css-will-change/will-change-stacking-context-opacity-1.html new file mode 100644 index 0000000000..2bff6676a7 --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-stacking-context-opacity-1.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS will-change: 'will-change: opacity' creates a stacking context</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change"> +<link rel="help" href="https://drafts.csswg.org/css-color-3/#transparency"> +<link rel="match" href="green-square-100-by-100-ref.html"> +<meta name="assert" 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."> +<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> +<body> + <div id="wc"> + <div id="child"> + </div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-will-change/will-change-stacking-context-opacity-2.html b/testing/web-platform/tests/css/css-will-change/will-change-stacking-context-opacity-2.html new file mode 100644 index 0000000000..dfedbd2307 --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-stacking-context-opacity-2.html @@ -0,0 +1,37 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test: will-change: opacity should create a stacking context for inlines.</title> +<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1119651"> +<link rel="help" href="https://drafts.csswg.org/css-will-change/#will-change"> +<link rel="match" href="green-square-100-by-100-ref.html"> +<style> + html, body { margin: 0; } + .indicator { + position: absolute; + width: 100px; + height: 100px; + background: green; + z-index: 1; + } + .will-change-opacity { + will-change: opacity; + width: 100px; + height: 100px; + } + .top { + position: absolute; + width: 100px; + height: 100px; + background: red; + z-index: 3; + } +</style> + +<div class="indicator"></div> +<span class="will-change-opacity"> + <!-- Because will-change: opacity creates a stacking context, this child + remains on bottom even though it has a higher z-index than the indicator + box. --> + <div class="top"></div> +</span> diff --git a/testing/web-platform/tests/css/css-will-change/will-change-stacking-context-perspective-1.html b/testing/web-platform/tests/css/css-will-change/will-change-stacking-context-perspective-1.html new file mode 100644 index 0000000000..3a6863220f --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-stacking-context-perspective-1.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS will-change: 'will-change: perspective' creates a stacking context</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change"> +<link rel="help" href="http://www.w3.org/TR/css3-transforms/#perspective-property"> +<link rel="match" href="green-square-100-by-100-ref.html"> +<meta name="assert" 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."> +<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> +<body> + <div id="wc"> + <div id="child"> + </div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-will-change/will-change-stacking-context-position-1.html b/testing/web-platform/tests/css/css-will-change/will-change-stacking-context-position-1.html new file mode 100644 index 0000000000..a244b7c2c5 --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-stacking-context-position-1.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS will-change: 'will-change: position' creates a stacking context</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change"> +<link rel="help" href="http://www.w3.org/TR/css3-positioning/#sticky-pos"> +<link rel="match" href="green-square-100-by-100-ref.html"> +<meta name="assert" 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."> +<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> +<body> + <div id="wc"> + <div id="child"> + </div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-will-change/will-change-stacking-context-transform-1.html b/testing/web-platform/tests/css/css-will-change/will-change-stacking-context-transform-1.html new file mode 100644 index 0000000000..1b55d1f7aa --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-stacking-context-transform-1.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS will-change: 'will-change: transform' creates a stacking context</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change"> +<link rel="help" href="http://www.w3.org/TR/css3-transforms/#transform-property"> +<link rel="match" href="green-square-100-by-100-ref.html"> +<meta name="assert" 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."> +<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> +<body> + <div id="wc"> + <div id="child"> + </div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-will-change/will-change-stacking-context-transform-style-1.html b/testing/web-platform/tests/css/css-will-change/will-change-stacking-context-transform-style-1.html new file mode 100644 index 0000000000..f8e50c60c1 --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-stacking-context-transform-style-1.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS will-change: 'will-change: transform-style' creates a stacking context</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change"> +<link rel="help" href="http://www.w3.org/TR/css3-transforms/#transform-style-property"> +<link rel="match" href="green-square-100-by-100-ref.html"> +<meta name="assert" 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."> +<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> +<body> + <div id="wc"> + <div id="child"> + </div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-will-change/will-change-stacking-context-translate-1.html b/testing/web-platform/tests/css/css-will-change/will-change-stacking-context-translate-1.html new file mode 100644 index 0000000000..1e1e8355d6 --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-stacking-context-translate-1.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS will-change: 'will-change: translate' creates a stacking context</title> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-translate"> +<link rel="match" href="green-square-100-by-100-ref.html"> +<meta name="assert" 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."> +<style> +html, body { margin: 0; padding: 0; } +div { width: 100px; height: 100px } +#wc { will-change: translate; background: red } +#child { position: absolute; top: 0; left: 0; z-index: -1; background: green } +</style> +<body> + <div id="wc"> + <div id="child"> + </div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-will-change/will-change-stacking-context-z-index-1.html b/testing/web-platform/tests/css/css-will-change/will-change-stacking-context-z-index-1.html new file mode 100644 index 0000000000..b80338032c --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-stacking-context-z-index-1.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS will-change: 'will-change: z-index' creates a stacking context</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change"> +<link rel="help" href="http://www.w3.org/TR/css3-positioning/#layered-presentation"> +<link rel="match" href="green-square-100-by-100-ref.html"> +<meta name="assert" 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."> +<style> +html, body { margin: 0; padding: 0; } +div { width: 100px; height: 100px } +#wc { will-change: z-index; background: red; position: relative } +#child { position: absolute; top: 0; left: 0; z-index: -1; background: green } +</style> +<body> + <div id="wc"> + <div id="child"> + </div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-will-change/will-change-transform-add-content-ref.html b/testing/web-platform/tests/css/css-will-change/will-change-transform-add-content-ref.html new file mode 100644 index 0000000000..edbeaa7b69 --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-transform-add-content-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<div id="target" style="width: 200px; height: 100px; will-change: transform"> +This text should be visible. +</div> diff --git a/testing/web-platform/tests/css/css-will-change/will-change-transform-add-content.html b/testing/web-platform/tests/css/css-will-change/will-change-transform-add-content.html new file mode 100644 index 0000000000..1d8568ee62 --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-transform-add-content.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="help" href="https://drafts.csswg.org/css-will-change/#will-change"> +<link rel="match" href="will-change-transform-add-content-ref.html"> +<script src="/common/reftest-wait.js"></script> +<script src="/common/rendering-utils.js"></script> +<div id="target" style="width: 200px; height: 100px; will-change: transform"></div> +<script> +waitForAtLeastOneFrame().then(() => { + target.textContent = 'This text should be visible.'; + takeScreenshot(); +}); +</script> diff --git a/testing/web-platform/tests/css/css-will-change/will-change-transform-huge-offset-scrolled-ref.html b/testing/web-platform/tests/css/css-will-change/will-change-transform-huge-offset-scrolled-ref.html new file mode 100644 index 0000000000..c2af258e11 --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-transform-huge-offset-scrolled-ref.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<div style="width: 20px; height: 20px; margin-top: 10000px; background: green"></div> +<script>window.scrollTo(0, 10000);</script> diff --git a/testing/web-platform/tests/css/css-will-change/will-change-transform-huge-offset-scrolled.html b/testing/web-platform/tests/css/css-will-change/will-change-transform-huge-offset-scrolled.html new file mode 100644 index 0000000000..506ac67f0c --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-transform-huge-offset-scrolled.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="help" href="https://drafts.csswg.org/css-will-change/#will-change"> +<link rel="match" href="will-change-transform-huge-offset-scrolled-ref.html"> +<div style="width: 20px; height: 20px; margin-top: 10000px; background: green; will-change: transform"></div> +<script> +// Incrementally scroll to the bottom. +var lastScrollY = 0; +function scroll() { + window.scrollBy(0, 200); + if (window.scrollY > lastScrollY) { + lastScrollY = window.scrollY; + requestAnimationFrame(scroll); + } else { + document.documentElement.classList.remove('reftest-wait'); + } +} +requestAnimationFrame(scroll); +</script> diff --git a/testing/web-platform/tests/css/css-will-change/will-change-transform-image-ref.html b/testing/web-platform/tests/css/css-will-change/will-change-transform-image-ref.html new file mode 100644 index 0000000000..d42d5b7fea --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-transform-image-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<div style="padding: 100px"> + <div style="width: 256px; height: 256px; background: lime"></div> +</div> diff --git a/testing/web-platform/tests/css/css-will-change/will-change-transform-image.html b/testing/web-platform/tests/css/css-will-change/will-change-transform-image.html new file mode 100644 index 0000000000..edce6c1f9b --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-transform-image.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-will-change/#will-change"> +<link rel="match" href="will-change-transform-image-ref.html"> +<img style="padding: 100px; will-change: transform" src="../../images/green-256x256.png"> diff --git a/testing/web-platform/tests/css/css-will-change/will-change-transform-inline-ref.html b/testing/web-platform/tests/css/css-will-change/will-change-transform-inline-ref.html new file mode 100644 index 0000000000..b05c3c95ac --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-transform-inline-ref.html @@ -0,0 +1,18 @@ +<!doctype html> +<title>CSS Test Reference</title> +<style> + #child { + position: fixed; + top: 0; + left: 0; + width: 200px; + height: 200px; + background-color: blue; + } +</style> +<div style="height: 200px"></div> +<span id="container"> + Child should be positioned relative to the viewport, not relative to me. + + <div id="child"></div> +</span> diff --git a/testing/web-platform/tests/css/css-will-change/will-change-transform-inline.html b/testing/web-platform/tests/css/css-will-change/will-change-transform-inline.html new file mode 100644 index 0000000000..0df497ee45 --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-transform-inline.html @@ -0,0 +1,26 @@ +<!doctype html> +<title>will-change: transform shouldn't create a containing block if the box doesn't support transforms</title> +<link rel=author href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel=author href="https://mozilla.org" title="Mozilla"> +<link rel=help href="https://bugzilla.mozilla.org/show_bug.cgi?id=1707170"> +<link rel=help href="https://drafts.csswg.org/css-will-change/#will-change"> +<link rel=match href="will-change-transform-inline-ref.html"> +<style> + #container { + will-change: transform; + } + #child { + position: fixed; + top: 0; + left: 0; + width: 200px; + height: 200px; + background-color: blue; + } +</style> +<div style="height: 200px"></div> +<span id="container"> + Child should be positioned relative to the viewport, not relative to me. + + <div id="child"></div> +</span> diff --git a/testing/web-platform/tests/css/css-will-change/will-change-transform-zero-size-child-overflow-visible-ref.html b/testing/web-platform/tests/css/css-will-change/will-change-transform-zero-size-child-overflow-visible-ref.html new file mode 100644 index 0000000000..6eaf422d2f --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-transform-zero-size-child-overflow-visible-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +This should be visible diff --git a/testing/web-platform/tests/css/css-will-change/will-change-transform-zero-size-child-overflow-visible.html b/testing/web-platform/tests/css/css-will-change/will-change-transform-zero-size-child-overflow-visible.html new file mode 100644 index 0000000000..38ddf5ec37 --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-transform-zero-size-child-overflow-visible.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-will-change/#will-change"> +<link rel="match" href="will-change-transform-zero-size-child-overflow-visible-ref.html"> +<div style="will-change: transform"> + <div style="width: 0; height: 0; overflow: visible; white-space: nowrap">This should be visible</div> +</div> diff --git a/testing/web-platform/tests/css/css-will-change/will-change-will-change-1.html b/testing/web-platform/tests/css/css-will-change/will-change-will-change-1.html new file mode 100644 index 0000000000..812dc814a0 --- /dev/null +++ b/testing/web-platform/tests/css/css-will-change/will-change-will-change-1.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title>CSS Test: 'will-change: will-change' is invalid</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="'will-change: will-change' is invalid and thus will not induce a stacking context."> +<style> +div { position: absolute; } +div div { top: 0; left: 0; width: 100px; height: 100px; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div> + <div style="will-change: will-change;"> + <div style="background-color: green; z-index: 2;"></div> + </div> + <div style="background-color: red; z-index: 1;"></div> +</div> |