DL: Convert sizing tests to use rendersubtree and content-size
Note there are some changes (contain-size* references)
and some weird results in get-bounding-client-rect-block-layout.html
Bug: 1000702
Change-Id: I028a00de6c9e6700c1ce1a2e3f05c6037958777b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1792221
Reviewed-by: vmpstr <[email protected]>
Commit-Queue: Rakina Zata Amni <[email protected]>
Cr-Commit-Position: refs/heads/master@{#695902}
diff --git a/third_party/blink/web_tests/TestExpectations b/third_party/blink/web_tests/TestExpectations
index f137c3c..98a7e1e 100644
--- a/third_party/blink/web_tests/TestExpectations
+++ b/third_party/blink/web_tests/TestExpectations
@@ -244,8 +244,7 @@
# Display locking failures
crbug.com/955533 wpt_internal/display-lock/sizing/overflow-auto-with-overflow.html [ Failure ]
-# Skip some tests for rendersubtree
-crbug.com/991095 wpt_internal/display-lock/rendersubtree/sizing [ Skip ]
+crbug.com/1000702 wpt_internal/display-lock/rendersubtree/sizing/get-bounding-client-rect-block-layout.html [ Failure ]
# MSAN failure
crbug.com/996625 inspector-protocol/accessibility/accessibility-getFullAXTree-display-locked.js [ Skip ]
diff --git a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/selection-ref.html b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/selection-ref.html
index 7f0fd4c..4095552 100644
--- a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/selection-ref.html
+++ b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/selection-ref.html
@@ -15,11 +15,8 @@
width: 30px; height: 30px;
}
</style>
-<div id="neighbor">
- neighbor
-</div>
<div id="container">
- <div>
+ <div id="notLocked">
not locked!
</div>
<div id="nonActivatable">
@@ -33,7 +30,7 @@
<script>
window.getSelection().removeAllRanges();
const selectionRange = document.createRange();
- selectionRange.setStart(neighbor.firstChild, 4);
+ selectionRange.setStart(notLocked.firstChild, 4);
selectionRange.setEnd(nested.firstChild, 7);
window.getSelection().addRange(selectionRange);
</script>
diff --git a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/selection-shadow.html b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/selection-shadow.html
index 0e5f387..f2aafec 100644
--- a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/selection-shadow.html
+++ b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/selection-shadow.html
@@ -6,11 +6,7 @@
<link rel="help" href="https://github.com/WICG/display-locking">
<link rel="match" href="selection-shadow-ref.html">
<script src="/common/reftest-wait.js"></script>
-<style>
- div {
- contain: style layout;
- }
-</style>
+<script src="resources/utils.js"></script>
<div id="host">
<div id="slottedToFirst" slot="first">
@@ -39,8 +35,6 @@
async function runTest() {
const shadowRoot = host.attachShadow({ mode: "open" });
- shadowRoot.innerHTML = "<style> div { contain: style layout; } </style>";
-
const firstSlot = document.createElement("slot");
firstSlot.name = "first";
shadowRoot.appendChild(firstSlot);
@@ -52,10 +46,13 @@
secondSlot.name = "second";
shadowRoot.appendChild(secondSlot);
- // TODO(rakina): make this use rendersubtree once sizing is implemented.
- await host.displayLock.acquire({ timeout: Infinity, activatable: true, size: [100, 100] });
- await nonActivatable.displayLock.acquire({ timeout: Infinity, activatable: false, size: [20, 20] });
- await slottedToFirst.displayLock.acquire({ timeout: Infinity, activatable: true, size: [40, 40] });
+ host.style = "content-size: 100px 100px;"
+ nonActivatable.style = "content-size: 20px 20px;"
+ slottedToFirst.style = "content-size: 40px 40px;"
+ await setInvisibleActivatable(host);
+ await setInvisible(nonActivatable);
+ await setInvisibleActivatable(slottedToFirst);
+
window.getSelection().removeAllRanges();
const selectionRange = document.createRange();
selectionRange.setStart(slottedToFirst.firstChild, 8);
diff --git a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/selection.html b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/selection.html
index f06f7e4a..b1b68b0 100644
--- a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/selection.html
+++ b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/selection.html
@@ -6,19 +6,15 @@
<link rel="help" href="https://github.com/WICG/display-locking">
<link rel="match" href="selection-ref.html">
<script src="/common/reftest-wait.js"></script>
+<script src="resources/utils.js"></script>
+
<style>
- div {
- contain: style layout;
- }
#userSelectNone {
user-select: none;
}
</style>
-<div id="neighbor">
- neighbor
-</div>
<div id="container">
- <div>
+ <div id="notLocked">
not locked!
</div>
<div id="nonActivatable">
@@ -33,14 +29,18 @@
</div>
<script>
async function runTest() {
- // TODO(rakina): make this use rendersubtree once sizing is implemented.
- await container.displayLock.acquire({ timeout: Infinity, activatable: true, size: [100, 100] });
- await nonActivatable.displayLock.acquire({ timeout: Infinity, activatable: false, size: [20, 20] });
- await userSelectNone.displayLock.acquire({ timeout: Infinity, activatable: true, size: [30, 30] });
- await nested.displayLock.acquire({ timeout: Infinity, activatable: true, size: [40, 40] });
+ container.style = "content-size: 100px 100px;"
+ nonActivatable.style = "content-size: 20px 20px;"
+ userSelectNone.style = "content-size: 30px 30px;"
+ nested.style = "content-size: 40px 40px;"
+ await setInvisibleActivatable(container);
+ await setInvisible(nonActivatable);
+ await setInvisibleActivatable(userSelectNone);
+ await setInvisibleActivatable(nested);
+
window.getSelection().removeAllRanges();
const selectionRange = document.createRange();
- selectionRange.setStart(neighbor.firstChild, 4);
+ selectionRange.setStart(notLocked.firstChild, 4);
selectionRange.setEnd(nested.firstChild, 7);
window.getSelection().addRange(selectionRange);
requestAnimationFrame(takeScreenshot);
diff --git a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/acquire-after-resize.html b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/acquire-after-resize.html
index 04d5dab4..fceb7b6b3 100644
--- a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/acquire-after-resize.html
+++ b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/acquire-after-resize.html
@@ -6,16 +6,17 @@
<link rel="help" href="https://github.com/WICG/display-locking">
<link rel="match" href="acquire-after-resize-ref.html">
<script src="/common/reftest-wait.js"></script>
+<script src="../resources/utils.js"></script>
<style>
-.contained {
- contain: style layout;
-}
#spacer {
width: 50px;
height: 50px;
background: lightgreen;
}
+#small {
+ content-size: 150px 150px;
+}
</style>
<div id="log"></div>
@@ -31,7 +32,7 @@
function runTest() {
const container = document.getElementById("small");
- container.displayLock.acquire({ timeout: Infinity, size: [150, 150] }).then(
+ setInvisible(container).then(
() => { finishTest("PASS"); },
(e) => { finishTest("FAIL " + e.message); });
}
diff --git a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/acquire-size-used-when-auto-size-border-and-scrollbars.html b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/acquire-size-used-when-auto-size-border-and-scrollbars.html
index c87084b..ecb03a4 100644
--- a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/acquire-size-used-when-auto-size-border-and-scrollbars.html
+++ b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/acquire-size-used-when-auto-size-border-and-scrollbars.html
@@ -6,6 +6,7 @@
<link rel="help" href="https://github.com/WICG/display-locking">
<link rel="match" href="acquire-size-used-when-auto-size-border-and-scrollbars-ref.html">
<script src="/common/reftest-wait.js"></script>
+<script src="../resources/utils.js"></script>
<style>
#border {
@@ -13,10 +14,10 @@
border: 1px solid green;
}
#container {
- contain: style layout;
background: lightblue;
overflow: scroll;
border: 10px solid black;
+ content-size: 123px 456px;
}
#child {
width: 500px;
@@ -35,7 +36,7 @@
<script>
async function runTest() {
const container = document.getElementById("container");
- await container.displayLock.acquire({ timeout: Infinity, size: [123, 456] });
+ await setInvisible(container);
takeScreenshot();
}
diff --git a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/acquire-size-used-when-auto-size-border-min-content.html b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/acquire-size-used-when-auto-size-border-min-content.html
index 22c76246..fbad481 100644
--- a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/acquire-size-used-when-auto-size-border-min-content.html
+++ b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/acquire-size-used-when-auto-size-border-min-content.html
@@ -6,6 +6,7 @@
<link rel="help" href="https://github.com/WICG/display-locking">
<link rel="match" href="acquire-size-used-when-auto-size-border-ref.html">
<script src="/common/reftest-wait.js"></script>
+<script src="../resources/utils.js"></script>
<style>
#border {
@@ -13,8 +14,8 @@
border: 1px solid green;
}
#container {
- contain: style layout;
border: 10px solid black;
+ content-size: 123px 456px;
}
#child {
width: 500px;
@@ -40,7 +41,7 @@
function runTest() {
let container = document.getElementById("container");
- container.displayLock.acquire({ timeout: Infinity, size: [123, 456] }).then(finishTest);
+ setInvisible(container).then(finishTest);
}
window.onload = runTest;
diff --git a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/acquire-size-used-when-auto-size-border.html b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/acquire-size-used-when-auto-size-border.html
index 9d83a769..05ba535a 100644
--- a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/acquire-size-used-when-auto-size-border.html
+++ b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/acquire-size-used-when-auto-size-border.html
@@ -6,6 +6,7 @@
<link rel="help" href="https://github.com/WICG/display-locking">
<link rel="match" href="acquire-size-used-when-auto-size-border-ref.html">
<script src="/common/reftest-wait.js"></script>
+<script src="../resources/utils.js"></script>
<style>
#border {
@@ -13,8 +14,8 @@
border: 1px solid green;
}
#container {
- contain: style layout;
border: 10px solid black;
+ content-size: 123px 456px;
}
#child {
width: 500px;
@@ -32,7 +33,7 @@
<script>
async function runTest() {
const container = document.getElementById("container");
- await container.displayLock.acquire({ timeout: Infinity, size: [123, 456] });
+ await setInvisible(container);
takeScreenshot();
}
diff --git a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/acquire-size-used-when-auto-size-scrollbars.html b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/acquire-size-used-when-auto-size-scrollbars.html
index 5463e13..661f28e1 100644
--- a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/acquire-size-used-when-auto-size-scrollbars.html
+++ b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/acquire-size-used-when-auto-size-scrollbars.html
@@ -6,6 +6,7 @@
<link rel="help" href="https://github.com/WICG/display-locking">
<link rel="match" href="acquire-size-used-when-auto-size-scrollbars-ref.html">
<script src="/common/reftest-wait.js"></script>
+<script src="../resources/utils.js"></script>
<style>
#border {
@@ -13,8 +14,8 @@
border: 1px solid green;
}
#container {
- contain: style layout;
overflow: scroll;
+ content-size: 123px 456px;
}
#child {
width: 500px;
@@ -32,7 +33,7 @@
<script>
async function runTest() {
const container = document.getElementById("container");
- await container.displayLock.acquire({ timeout: Infinity, size: [123, 456] });
+ await setInvisible(container);
takeScreenshot();
}
diff --git a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/acquire-size-used-when-auto-size.html b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/acquire-size-used-when-auto-size.html
index 15a460be..266e2a1 100644
--- a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/acquire-size-used-when-auto-size.html
+++ b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/acquire-size-used-when-auto-size.html
@@ -6,6 +6,7 @@
<link rel="help" href="https://github.com/WICG/display-locking">
<link rel="match" href="acquire-size-used-when-auto-size-ref.html">
<script src="/common/reftest-wait.js"></script>
+<script src="../resources/utils.js"></script>
<style>
#border {
@@ -13,7 +14,7 @@
border: 1px solid green;
}
#container {
- contain: style layout;
+ content-size: 123px 456px;
}
#child {
width: 500px;
@@ -31,7 +32,7 @@
<script>
async function runTest() {
const container = document.getElementById("container");
- await container.displayLock.acquire({ timeout: Infinity, size: [123, 456] });
+ await setInvisible(container);
takeScreenshot();
}
diff --git a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/reacquire-different-size.html b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/change-content-size.html
similarity index 68%
rename from third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/reacquire-different-size.html
rename to third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/change-content-size.html
index e95a8b2..5e8a83be 100644
--- a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/reacquire-different-size.html
+++ b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/change-content-size.html
@@ -6,10 +6,11 @@
<link rel="help" href="https://github.com/WICG/display-locking">
<link rel="match" href="acquire-after-resize-ref.html">
<script src="/common/reftest-wait.js"></script>
+<script src="../resources/utils.js"></script>
<style>
.contained {
- contain: style layout;
+ content-size: 123px 456px;
}
#spacer {
width: 50px;
@@ -31,17 +32,13 @@
function runTest() {
const container = document.getElementById("small");
- container.displayLock.acquire({ timeout: Infinity, size: [123, 456] }).then(
- () => {
- // Re-acquire with a different size.
- container.displayLock.acquire({ timeout: Infinity, size: [150, 150] }).then(
- () => { finishTest("PASS"); },
- (e) => { finishTest("FAIL " + e.message); });
- },
- (e) => { finishTest("FAIL " + e.message); }
- );
+ setInvisible(container).then(() => {
+ container.style = "content-size: 150px 150px";
+ requestAnimationFrame(() => finishTest("PASS"));
+ });
}
window.onload = runTest;
</script>
</html>
+
diff --git a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/contain-size-block-ref.html b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/contain-size-block-ref.html
index 31998cb..0f74b4b 100644
--- a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/contain-size-block-ref.html
+++ b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/contain-size-block-ref.html
@@ -11,5 +11,6 @@
width: min-content;
}
</style>
-<div id="border"></div>
+<div id="border">
+</div>
</html>
diff --git a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/contain-size-block.html b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/contain-size-block.html
index d5d6562..0c0fe70 100644
--- a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/contain-size-block.html
+++ b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/contain-size-block.html
@@ -6,6 +6,7 @@
<link rel="help" href="https://github.com/WICG/display-locking">
<link rel="match" href="contain-size-block-ref.html">
<script src="/common/reftest-wait.js"></script>
+<script src="../resources/utils.js"></script>
<style>
#border {
@@ -14,6 +15,7 @@
}
#container {
contain: style layout size;
+ content-size: none;
}
</style>
@@ -24,7 +26,7 @@
<script>
function runTest() {
const container = document.getElementById("container");
- container.displayLock.acquire({ timeout: Infinity, size: [123, 345] }).then(() => {
+ setInvisible(container).then(() => {
takeScreenshot();
});
}
diff --git a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/contain-size-fieldset-ref.html b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/contain-size-fieldset-ref.html
new file mode 100644
index 0000000..8867824
--- /dev/null
+++ b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/contain-size-fieldset-ref.html
@@ -0,0 +1,24 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>Display Locking: fieldset with legend and size containment, sized by display lock</title>
+<link rel="author" title="Vladimir Levin" href="mailto:[email protected]">
+<link rel="help" href="https://github.com/WICG/display-locking">
+
+<style>
+#border {
+ border: 1px solid black;
+ width: min-content;
+}
+#container {
+ width: 123px;
+ height: 234px;
+}
+</style>
+
+<div id="border">
+ <fieldset id="container">
+ </fieldset>
+</div>
+
+</html>
diff --git a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/contain-size-fieldset.html b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/contain-size-fieldset.html
index 2d653cc7..58bd9dd 100644
--- a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/contain-size-fieldset.html
+++ b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/contain-size-fieldset.html
@@ -4,8 +4,9 @@
<title>Display Locking: fieldset with legend and size containment, sized by display lock</title>
<link rel="author" title="Vladimir Levin" href="mailto:[email protected]">
<link rel="help" href="https://github.com/WICG/display-locking">
-<link rel="match" href="fieldset-empty-ref.html">
+<link rel="match" href="contain-size-fieldset-ref.html">
<script src="/common/reftest-wait.js"></script>
+<script src="../resources/utils.js"></script>
<style>
#border {
@@ -13,7 +14,7 @@
width: min-content;
}
#container {
- contain: style layout size;
+ content-size: 123px 234px;
}
</style>
@@ -27,7 +28,7 @@
<script>
async function runTest() {
const container = document.getElementById("container");
- await container.displayLock.acquire({ timeout: Infinity, size: [123, 234] });
+ await setInvisible(container);
takeScreenshot();
}
diff --git a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/contain-size-flex-ref.html b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/contain-size-flex-ref.html
index 4b5ac45..0a421444 100644
--- a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/contain-size-flex-ref.html
+++ b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/contain-size-flex-ref.html
@@ -16,6 +16,8 @@
}
#container {
contain: style layout size;
+ width: 12px;
+ height: 34px;
}
.item {
width: 50px;
diff --git a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/contain-size-flex.html b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/contain-size-flex.html
index d8d9076d..5220b2e 100644
--- a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/contain-size-flex.html
+++ b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/contain-size-flex.html
@@ -6,6 +6,8 @@
<link rel="help" href="https://github.com/WICG/display-locking">
<link rel="match" href="contain-size-flex-ref.html">
<script src="/common/reftest-wait.js"></script>
+<script src="../resources/utils.js"></script>
+
<style>
#flexer {
@@ -17,7 +19,7 @@
background: lightgreen;
}
#container {
- contain: style layout size;
+ content-size: 12px 34px;
}
.item {
width: 50px;
@@ -35,7 +37,7 @@
<script>
async function runTest() {
const container = document.getElementById("container");
- await container.displayLock.acquire({ timeout: Infinity, size: [12, 34] });
+ await setInvisible(container);
takeScreenshot();
}
diff --git a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/contain-size-replaced.html b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/contain-size-replaced.html
index 66645358..91bbcef 100644
--- a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/contain-size-replaced.html
+++ b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/contain-size-replaced.html
@@ -6,6 +6,7 @@
<link rel="help" href="https://github.com/WICG/display-locking">
<link rel="match" href="contain-size-replaced-ref.html">
<script src="/common/reftest-wait.js"></script>
+<script src="../resources/utils.js"></script>
<style>
#border {
@@ -13,7 +14,7 @@
width: max-content;
}
img {
- contain: style layout size;
+ content-size: none;
}
</style>
@@ -24,7 +25,7 @@
<script>
async function runTest() {
const element = document.getElementById("element");
- await element.displayLock.acquire({ timeout: Infinity, size: [12, 34] });
+ await setInvisible(element);
takeScreenshot();
}
diff --git a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/fieldset-empty.html b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/fieldset-empty.html
index a2edd61..edb09522 100644
--- a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/fieldset-empty.html
+++ b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/fieldset-empty.html
@@ -6,6 +6,7 @@
<link rel="help" href="https://github.com/WICG/display-locking">
<link rel="match" href="fieldset-empty-ref.html">
<script src="/common/reftest-wait.js"></script>
+<script src="../resources/utils.js"></script>
<style>
#border {
@@ -13,7 +14,7 @@
width: min-content;
}
#container {
- contain: style layout;
+ content-size: 0px 0px;
}
</style>
@@ -24,7 +25,7 @@
<script>
async function runTest() {
const container = document.getElementById("container");
- await container.displayLock.acquire({ timeout: Infinity, size: [0, 0] });
+ await setInvisible(container);
takeScreenshot();
}
diff --git a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/fieldset-with-legend-sized.html b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/fieldset-with-legend-sized.html
index 9b28cb7..622ad4cbf 100644
--- a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/fieldset-with-legend-sized.html
+++ b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/fieldset-with-legend-sized.html
@@ -6,6 +6,7 @@
<link rel="help" href="https://github.com/WICG/display-locking">
<link rel="match" href="fieldset-with-legend-sized-ref.html">
<script src="/common/reftest-wait.js"></script>
+<script src="../resources/utils.js"></script>
<style>
#border {
@@ -13,7 +14,7 @@
width: min-content;
}
#container {
- contain: style layout;
+ content-size: 123px 234px;
}
</style>
@@ -27,7 +28,7 @@
<script>
async function runTest() {
const container = document.getElementById("container");
- await container.displayLock.acquire({ timeout: Infinity, size: [123, 234] });
+ await setInvisible(container);
takeScreenshot();
}
diff --git a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/fieldset-with-legend.html b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/fieldset-with-legend.html
index b0faa5ae..d1f40f9 100644
--- a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/fieldset-with-legend.html
+++ b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/fieldset-with-legend.html
@@ -6,6 +6,7 @@
<link rel="help" href="https://github.com/WICG/display-locking">
<link rel="match" href="fieldset-empty-ref.html">
<script src="/common/reftest-wait.js"></script>
+<script src="../resources/utils.js"></script>
<style>
#border {
@@ -13,7 +14,7 @@
width: min-content;
}
#container {
- contain: style layout;
+ content-size: 0px 0px;
}
</style>
@@ -26,7 +27,7 @@
<script>
async function runTest() {
const container = document.getElementById("container");
- await container.displayLock.acquire({ timeout: Infinity, size: [0, 0] });
+ await setInvisible(container);
takeScreenshot();
}
diff --git a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/flex-column-horizontal-with-grow.html b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/flex-column-horizontal-with-grow.html
index 90413e994..8e34ec7 100644
--- a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/flex-column-horizontal-with-grow.html
+++ b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/flex-column-horizontal-with-grow.html
@@ -6,6 +6,7 @@
<link rel="help" href="https://github.com/WICG/display-locking">
<link rel="match" href="flex-column-horizontal-with-grow-ref.html">
<script src="/common/reftest-wait.js"></script>
+<script src="../resources/utils.js"></script>
<style>
#flexer {
@@ -18,7 +19,7 @@
writing-mode: horizontal-tb;
}
#container {
- contain: style layout;
+ content-size: 12px 34px;
flex-grow: 3;
}
.item {
@@ -38,7 +39,7 @@
<script>
async function runTest() {
const container = document.getElementById("container");
- await container.displayLock.acquire({ timeout: Infinity, size: [12, 34] });
+ await setInvisible(container);
takeScreenshot();
}
diff --git a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/flex-column-horizontal.html b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/flex-column-horizontal.html
index bea81a8..0fda2de 100644
--- a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/flex-column-horizontal.html
+++ b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/flex-column-horizontal.html
@@ -6,6 +6,7 @@
<link rel="help" href="https://github.com/WICG/display-locking">
<link rel="match" href="flex-column-horizontal-ref.html">
<script src="/common/reftest-wait.js"></script>
+<script src="../resources/utils.js"></script>
<style>
#flexer {
@@ -18,7 +19,7 @@
writing-mode: horizontal-tb;
}
#container {
- contain: style layout;
+ content-size: 12px 34px;
}
.item {
width: 50px;
@@ -36,7 +37,7 @@
<script>
async function runTest() {
const container = document.getElementById("container");
- await container.displayLock.acquire({ timeout: Infinity, size: [12, 34] });
+ await setInvisible(container);
takeScreenshot();
}
diff --git a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/flex-column-vertical-with-grow.html b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/flex-column-vertical-with-grow.html
index 35a481b..ee6409a 100644
--- a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/flex-column-vertical-with-grow.html
+++ b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/flex-column-vertical-with-grow.html
@@ -6,6 +6,7 @@
<link rel="help" href="https://github.com/WICG/display-locking">
<link rel="match" href="flex-column-vertical-with-grow-ref.html">
<script src="/common/reftest-wait.js"></script>
+<script src="../resources/utils.js"></script>
<style>
#flexer {
@@ -18,7 +19,7 @@
writing-mode: vertical-rl;
}
#container {
- contain: style layout;
+ content-size: 12px 34px;
flex-grow: 3;
}
.item {
@@ -38,7 +39,7 @@
<script>
async function runTest() {
const container = document.getElementById("container");
- await container.displayLock.acquire({ timeout: Infinity, size: [12, 34] });
+ await setInvisible(container);
takeScreenshot();
}
diff --git a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/flex-column-vertical.html b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/flex-column-vertical.html
index 3269fde..7d4ea745 100644
--- a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/flex-column-vertical.html
+++ b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/flex-column-vertical.html
@@ -6,6 +6,7 @@
<link rel="help" href="https://github.com/WICG/display-locking">
<link rel="match" href="flex-column-vertical-ref.html">
<script src="/common/reftest-wait.js"></script>
+<script src="../resources/utils.js"></script>
<style>
#flexer {
@@ -18,6 +19,7 @@
writing-mode: vertical-rl;
}
#container {
+ content-size: 12px 34px;
contain: style layout;
}
.item {
@@ -36,7 +38,7 @@
<script>
async function runTest() {
const container = document.getElementById("container");
- await container.displayLock.acquire({ timeout: Infinity, size: [12, 34] });
+ await setInvisible(container);
takeScreenshot();
}
diff --git a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/flex-row-horizontal-with-grow.html b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/flex-row-horizontal-with-grow.html
index 42a0ebe..2983948 100644
--- a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/flex-row-horizontal-with-grow.html
+++ b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/flex-row-horizontal-with-grow.html
@@ -6,6 +6,7 @@
<link rel="help" href="https://github.com/WICG/display-locking">
<link rel="match" href="flex-row-horizontal-with-grow-ref.html">
<script src="/common/reftest-wait.js"></script>
+<script src="../resources/utils.js"></script>
<style>
#flexer {
@@ -18,7 +19,7 @@
writing-mode: horizontal-tb;
}
#container {
- contain: style layout;
+ content-size: 12px 34px;
flex-grow: 3;
}
.item {
@@ -38,7 +39,7 @@
<script>
async function runTest() {
const container = document.getElementById("container");
- await container.displayLock.acquire({ timeout: Infinity, size: [12, 34] });
+ await setInvisible(container);
takeScreenshot();
}
diff --git a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/flex-row-horizontal.html b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/flex-row-horizontal.html
index ca328918..028ab10 100644
--- a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/flex-row-horizontal.html
+++ b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/flex-row-horizontal.html
@@ -6,6 +6,7 @@
<link rel="help" href="https://github.com/WICG/display-locking">
<link rel="match" href="flex-row-horizontal-ref.html">
<script src="/common/reftest-wait.js"></script>
+<script src="../resources/utils.js"></script>
<style>
#flexer {
@@ -18,7 +19,7 @@
writing-mode: horizontal-tb;
}
#container {
- contain: style layout;
+ content-size: 12px 34px;
}
.item {
width: 50px;
@@ -36,7 +37,7 @@
<script>
async function runTest() {
const container = document.getElementById("container");
- await container.displayLock.acquire({ timeout: Infinity, size: [12, 34] });
+ await setInvisible(container);
takeScreenshot();
}
diff --git a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/flex-row-vertical-with-grow.html b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/flex-row-vertical-with-grow.html
index a886c57..700fa523 100644
--- a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/flex-row-vertical-with-grow.html
+++ b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/flex-row-vertical-with-grow.html
@@ -6,6 +6,7 @@
<link rel="help" href="https://github.com/WICG/display-locking">
<link rel="match" href="flex-row-vertical-with-grow-ref.html">
<script src="/common/reftest-wait.js"></script>
+<script src="../resources/utils.js"></script>
<style>
#flexer {
@@ -18,7 +19,7 @@
writing-mode: vertical-rl;
}
#container {
- contain: style layout;
+ content-size: 12px 34px;
flex-grow: 3;
}
.item {
@@ -38,7 +39,7 @@
<script>
async function runTest() {
const container = document.getElementById("container");
- await container.displayLock.acquire({ timeout: Infinity, size: [12, 34] });
+ await setInvisible(container);
takeScreenshot();
}
diff --git a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/flex-row-vertical.html b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/flex-row-vertical.html
index 3080430e..cac60d88 100644
--- a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/flex-row-vertical.html
+++ b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/flex-row-vertical.html
@@ -6,6 +6,7 @@
<link rel="help" href="https://github.com/WICG/display-locking">
<link rel="match" href="flex-row-vertical-ref.html">
<script src="/common/reftest-wait.js"></script>
+<script src="../resources/utils.js"></script>
<style>
#flexer {
@@ -18,7 +19,7 @@
writing-mode: vertical-rl;
}
#container {
- contain: style layout;
+ content-size: 12px 34px;
}
.item {
width: 50px;
@@ -36,7 +37,7 @@
<script>
async function runTest() {
const container = document.getElementById("container");
- await container.displayLock.acquire({ timeout: Infinity, size: [12, 34] });
+ await setInvisible(container);
takeScreenshot();
}
diff --git a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/flex-with-child-lock.html b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/flex-with-child-lock.html
index 0a9af37..dd12ec2 100644
--- a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/flex-with-child-lock.html
+++ b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/flex-with-child-lock.html
@@ -6,6 +6,7 @@
<link rel="help" href="https://github.com/WICG/display-locking">
<link rel="match" href="flex-with-child-lock-ref.html">
<script src="/common/reftest-wait.js"></script>
+<script src="../resources/utils.js"></script>
<style>
#flexer {
@@ -15,7 +16,7 @@
background: lightgreen;
}
#container {
- contain: style layout;
+ content-size: 123px 234px;
background: lightblue;
}
</style>
@@ -29,7 +30,7 @@
<script>
async function runTest() {
const container = document.getElementById("container");
- await container.displayLock.acquire({ timeout: Infinity, size: [123, 234] });
+ await setInvisible(container);
takeScreenshot();
}
diff --git a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/flex-with-descendant-lock.html b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/flex-with-descendant-lock.html
index 471d9df..96801ffc 100644
--- a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/flex-with-descendant-lock.html
+++ b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/flex-with-descendant-lock.html
@@ -6,6 +6,7 @@
<link rel="help" href="https://github.com/WICG/display-locking">
<link rel="match" href="flex-with-descendant-lock-ref.html">
<script src="/common/reftest-wait.js"></script>
+<script src="../resources/utils.js"></script>
<style>
#flexer {
@@ -15,7 +16,7 @@
background: lightgreen;
}
#container {
- contain: style layout;
+ content-size: 123px 234px;
background: lightblue;
}
</style>
@@ -31,7 +32,7 @@
<script>
async function runTest() {
const container = document.getElementById("container");
- await container.displayLock.acquire({ timeout: Infinity, size: [123, 234] });
+ await setInvisible(container);
takeScreenshot();
}
diff --git a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/float-left.html b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/float-left.html
index 884ac89..4a46f137 100644
--- a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/float-left.html
+++ b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/float-left.html
@@ -6,6 +6,7 @@
<link rel="help" href="https://github.com/WICG/display-locking">
<link rel="match" href="float-left-ref.html">
<script src="/common/reftest-wait.js"></script>
+<script src="../resources/utils.js"></script>
<style>
#border {
@@ -13,8 +14,8 @@
border: 1px solid green;
}
#container {
- contain: style layout;
float: left;
+ content-size: 123px 456px;
}
#child {
width: 500px;
@@ -33,7 +34,7 @@
<script>
async function runTest() {
const container = document.getElementById("container");
- await container.displayLock.acquire({ timeout: Infinity, size: [123, 456] });
+ await setInvisible(container);
takeScreenshot();
}
diff --git a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/get-bounding-client-rect-block-layout-in-iframe.html b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/get-bounding-client-rect-block-layout-in-iframe.html
index bdab4eb..770e62e2 100644
--- a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/get-bounding-client-rect-block-layout-in-iframe.html
+++ b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/get-bounding-client-rect-block-layout-in-iframe.html
@@ -7,12 +7,11 @@
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
<style>
#container {
- contain: style layout;
- width: 123px;
- height: 234px;
+ content-size: 123px 234px;
}
#frame {
padding: 0;
@@ -48,7 +47,7 @@
await load_promise;
const container = document.getElementById("container");
- await container.displayLock.acquire({ timeout: Infinity });
+ await setInvisible(container);
const frame = document.getElementById("frame");
frame.style.width = "224px";
diff --git a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/get-bounding-client-rect-block-layout.html b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/get-bounding-client-rect-block-layout.html
index bbe152d5..e389b0e 100644
--- a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/get-bounding-client-rect-block-layout.html
+++ b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/get-bounding-client-rect-block-layout.html
@@ -7,44 +7,75 @@
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/utils.js"></script>
-<style>
-div {
- contain: style layout;
-}
-</style>
<body>
<script>
const BODY_WIDTH = document.body.getBoundingClientRect().width;
-const ACQUIRE_WIDTH = 33;
-const ACQUIRE_HEIGHT = 44;
+const CONTENT_WIDTH = 33;
+const CONTENT_HEIGHT = 44;
async_test(async(t) => {
let container = document.createElement("div");
- container.style = "width: min-content;";
let child = document.createElement("div");
container.appendChild(child);
document.body.appendChild(container);
- await container.displayLock.acquire({ timeout: Infinity, size: [ACQUIRE_WIDTH, ACQUIRE_HEIGHT] });
+ container.style = "content-size: ${CONTENT_WIDTH}px ${CONTENT_HEIGHT}px;";
+ await setInvisible(container);
let rect = container.getBoundingClientRect();
- t.step(() => assert_equals(rect.width, ACQUIRE_WIDTH,
- "Locked element with min-content uses width from acquire()"));
- t.step(() => assert_equals(rect.height, ACQUIRE_HEIGHT,
- "Locked element with min-content uses height from acquire()"));
+ t.step(() => assert_equals(rect.width, CONTENT_WIDTH,
+ "Locked element uses width from content-size"));
+ t.step(() => assert_equals(rect.height, CONTENT_HEIGHT,
+ "Locked element uses height from content-size"));
rect = child.getBoundingClientRect();
- t.step(() => assert_equals(rect.width, ACQUIRE_WIDTH,
- "Child of locked element with min-content uses width from acquire()"));
+ t.step(() => assert_equals(rect.width, CONTENT_WIDTH,
+ "Child of locked element with no content uses width from content-size"));
+ t.step(() => assert_equals(rect.height, 0,
+ "Child of locked element with no content has zero height"));
+
+ child.style = "width: 100px; height: 200px;";
+ rect = container.getBoundingClientRect();
+ t.step(() => assert_equals(rect.width, CONTENT_WIDTH,
+ "Locked element with sized child uses width from content-size"));
+ t.step(() => assert_equals(rect.height, CONTENT_HEIGHT,
+ "Locked element with sized child uses height from content-size"));
+ rect = child.getBoundingClientRect();
+ t.step(() => assert_equals(rect.width, 100,
+ "Child of locked element uses width from style"));
+ t.step(() => assert_equals(rect.height, 200,
+ "Child of locked element uses height from style"));
+
+ t.done();
+}, "getBoundingClientRect");
+
+async_test(async(t) => {
+ let container = document.createElement("div");
+ let child = document.createElement("div");
+ container.appendChild(child);
+ document.body.appendChild(container);
+ container.style = "width: min-content; content-size: ${CONTENT_WIDTH}px ${CONTENT_HEIGHT}px;";
+ await setInvisible(container);
+
+ let rect = container.getBoundingClientRect();
+ t.step(() => assert_equals(rect.width, CONTENT_WIDTH,
+ "Locked element with min-content uses width from content-size"));
+ t.step(() => assert_equals(rect.height, CONTENT_HEIGHT,
+ "Locked element with min-content uses height from content-size"));
+
+ rect = child.getBoundingClientRect();
+ t.step(() => assert_equals(rect.width, CONTENT_WIDTH,
+ "Child of locked element with min-content & no content uses width from content-size"));
t.step(() => assert_equals(rect.height, 0,
"Child of locked element with min-content & no content has zero height"));
child.style = "width: 100px; height: 200px;";
rect = container.getBoundingClientRect();
- t.step(() => assert_equals(rect.width, ACQUIRE_WIDTH,
- "Locked element with min-content and sized child uses width from acquire()"));
- t.step(() => assert_equals(rect.height, ACQUIRE_HEIGHT,
- "Locked element with min-content and sized child uses height from acquire()"));
+ t.step(() => assert_equals(rect.width, CONTENT_WIDTH,
+ "Locked element with min-content and sized child uses width from content-size"));
+ t.step(() => assert_equals(rect.height, CONTENT_HEIGHT,
+ "Locked element with min-content and sized child uses height from content-size"));
rect = child.getBoundingClientRect();
t.step(() => assert_equals(rect.width, 100,
"Child of locked element with min-content uses width from style"));
@@ -56,58 +87,40 @@
async_test(async(t) => {
let container = document.createElement("div");
- document.body.appendChild(container);
- await container.displayLock.acquire({ timeout: Infinity, size: [ACQUIRE_WIDTH, ACQUIRE_HEIGHT] });
- let rect = container.getBoundingClientRect();
-
- t.step(() => assert_equals(rect.width, BODY_WIDTH,
- "Locked element uses width from body"));
- t.step(() => assert_equals(rect.height, ACQUIRE_HEIGHT,
- "Locked element uses height from acquire()"));
-
- await container.displayLock.acquire({ timeout: Infinity, size: [55, 66] });
- rect = container.getBoundingClientRect();
- t.step(() => assert_equals(rect.width, BODY_WIDTH,
- "After re-acquire, locked element still uses width from body"));
- t.step(() => assert_equals(rect.height, 66,
- "After re-acquire, locked element uses height from the last acquire()"));
- t.done();
-}, "getBoundingClientRect with re-acquire");
-
-async_test(async (t) => {
- let container = document.createElement("div");
- container.style = "width: 11px; height: 22px;";
let child = document.createElement("div");
container.appendChild(child);
document.body.appendChild(container);
-
- await container.displayLock.acquire({ timeout: Infinity, size: [ACQUIRE_WIDTH, ACQUIRE_HEIGHT] });
-
+ container.style = "content-size: ${CONTENT_WIDTH}px ${CONTENT_HEIGHT}px;";
+ await setInvisible(container);
let rect = container.getBoundingClientRect();
- t.step(() => assert_equals(rect.width, 11,
- "Styled locked element uses width from style"));
- t.step(() => assert_equals(rect.height, 22,
- "Styled locked element uses height from style"));
- rect = child.getBoundingClientRect();
- t.step(() => assert_equals(rect.width, 11,
- "Child of styled locked element uses width from locked element's style"));
- t.step(() => assert_equals(rect.height, 0,
- "Child of styled locked element with no content has zero height"));
- container.style = "";
+ t.step(() => assert_equals(rect.width, CONTENT_WIDTH,
+ "Locked element uses width from content-size"));
+ t.step(() => assert_equals(rect.height, CONTENT_HEIGHT,
+ "Locked element uses height from content-size"));
+
+ rect = child.getBoundingClientRect();
+ t.step(() => assert_equals(rect.width, CONTENT_WIDTH,
+ "Child of locked element with no content uses width from content-size"));
+ t.step(() => assert_equals(rect.height, 0,
+ "Child of locked element with no content has zero height"));
+
+ container.style = "content-size: 55px 66px;";
rect = container.getBoundingClientRect();
- t.step(() => assert_equals(rect.width, BODY_WIDTH,
- "Unstyled locked element uses width from body"));
- t.step(() => assert_equals(rect.height, ACQUIRE_HEIGHT,
- "Unstyled locked element uses height given in acquire()"));
+ t.step(() => assert_equals(rect.width, 55,
+ "After content-size change, locked element usese width from newest content-size"));
+ t.step(() => assert_equals(rect.height, 66,
+ "After content-sizechange , locked element uses height from newest content-size"));
rect = child.getBoundingClientRect();
- t.step(() => assert_equals(rect.width, BODY_WIDTH,
- "Child of unstyled locked element uses width from locked element's width"));
+ t.step(() => assert_equals(rect.width, 55,
+ "Child of locked element with no content uses width from neweest content-size"));
t.step(() => assert_equals(rect.height, 0,
- "Child of unstyled locked element with no content has zero height"));
+ "Child of locked element with no content has zero height"));
+
+
t.done();
-}, "getBoundingClientRect with styled width & height");
+}, "getBoundingClientRect with changed content-size");
</script>
</body>
</html>
diff --git a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/layout-replaced.html b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/layout-replaced.html
index c2ef7627..90b1c76 100644
--- a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/layout-replaced.html
+++ b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/layout-replaced.html
@@ -6,14 +6,15 @@
<link rel="help" href="https://github.com/WICG/display-locking">
<link rel="match" href="layout-replaced-ref.html">
<script src="/common/reftest-wait.js"></script>
+<script src="../resources/utils.js"></script>
<style>
#border {
border: 1px solid blue;
width: max-content;
}
-img {
- contain: style layout;
+#element {
+ content-size: 12px 34px;
}
</style>
@@ -24,7 +25,7 @@
<script>
async function runTest() {
const element = document.getElementById("element");
- await element.displayLock.acquire({ timeout: Infinity, size: [12, 34] });
+ await setInvisible(element);
takeScreenshot();
}
diff --git a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/max-content-size-ignored.html b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/max-content-size-ignored.html
index 4e05a42..1a1ee282 100644
--- a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/max-content-size-ignored.html
+++ b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/max-content-size-ignored.html
@@ -6,6 +6,8 @@
<link rel="help" href="https://github.com/WICG/display-locking">
<link rel="match" href="max-content-size-ignored-ref.html">
<script src="/common/reftest-wait.js"></script>
+<script src="../resources/utils.js"></script>
+
<style>
#border {
@@ -13,8 +15,8 @@
border: 1px solid green;
}
#container {
- contain: style layout;
width: max-content;
+ content-size: 123px 456px;
}
#child {
width: 500px;
@@ -32,7 +34,7 @@
<script>
async function runTest() {
const container = document.getElementById("container");
- await container.displayLock.acquire({ timeout: Infinity, size: [123, 456] });
+ await setInvisible(container);
takeScreenshot();
}
diff --git a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/measure-forced-layout-after-commit.html b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/measure-forced-layout-after-commit.html
index 0cb1d21..512d346 100644
--- a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/measure-forced-layout-after-commit.html
+++ b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/measure-forced-layout-after-commit.html
@@ -4,10 +4,11 @@
<title>Display Locking: measure forced layout after commit</title>
<link rel="author" title="Vladimir Levin" href="mailto:[email protected]">
<link rel="help" href="https://github.com/WICG/display-locking">
+<script src="../resources/utils.js"></script>
<style>
.contained {
- contain: style layout;
+ content-size: 100px 100px;
background: lightgreen;
}
#large {
@@ -73,12 +74,12 @@
async function runTest() {
const container = document.getElementById("small");
- await container.displayLock.acquire({ timeout: Infinity, size: [100, 100] });
+ await setInvisible(container);
construct(document.getElementById("large"));
measureForced();
- container.displayLock.commit();
+ await setVisible(container);
forcedMeasureAfterCommit();
t.done();
}
diff --git a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/measure-forced-layout.html b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/measure-forced-layout.html
index ef16011..0b44fba 100644
--- a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/measure-forced-layout.html
+++ b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/measure-forced-layout.html
@@ -4,10 +4,11 @@
<title>Display Locking: measure forced layout</title>
<link rel="author" title="Vladimir Levin" href="mailto:[email protected]">
<link rel="help" href="https://github.com/WICG/display-locking">
+<script src="../resources/utils.js"></script>
<style>
.contained {
- contain: style layout;
+ content-size: 100px 100px;
background: lightgreen;
}
#large {
@@ -73,12 +74,12 @@
async function runTest() {
const container = document.getElementById("small");
- await container.displayLock.acquire({ timeout: Infinity, size: [100, 100] });
+ await setInvisible(container);
construct(document.getElementById("large"));
measureForced();
- container.displayLock.commit().then(() => {
+ setVisible(container).then(() => {
measureInCommit();
t.done();
});
diff --git a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/measure-updated-layout.html b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/measure-updated-layout.html
index 3d2d94a..47ab110 100644
--- a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/measure-updated-layout.html
+++ b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/measure-updated-layout.html
@@ -4,10 +4,11 @@
<title>Display Locking: measure updated layout</title>
<link rel="author" title="Vladimir Levin" href="mailto:[email protected]">
<link rel="help" href="https://github.com/WICG/display-locking">
+<script src="../resources/utils.js"></script>
<style>
.contained {
- contain: style layout;
+ content-size: 100px 100px;
background: lightgreen;
}
#large {
@@ -73,13 +74,13 @@
async function runTest() {
const container = document.getElementById("small");
- await container.displayLock.acquire({ timeout: Infinity, size: [100, 100] });
+ await setInvisible(container);
construct(document.getElementById("large"));
container.displayLock.update().then(() => {
measureInUpdate();
- container.displayLock.commit().then(() => {
+ setVisible(container).then(() => {
measureInCommit();
t.done();
});
diff --git a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/min-width-respected.html b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/min-width-respected.html
index 1b5f869..8581848 100644
--- a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/min-width-respected.html
+++ b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/min-width-respected.html
@@ -6,6 +6,7 @@
<link rel="help" href="https://github.com/WICG/display-locking">
<link rel="match" href="min-width-respected-ref.html">
<script src="/common/reftest-wait.js"></script>
+<script src="../resources/utils.js"></script>
<style>
#border {
@@ -13,7 +14,7 @@
border: 1px solid green;
}
#container {
- contain: style layout;
+ content-size: 123px 456px;
min-width: 157px;
}
#child {
@@ -32,7 +33,7 @@
<script>
async function runTest() {
const container = document.getElementById("container");
- await container.displayLock.acquire({ timeout: Infinity, size: [123, 456] });
+ await setInvisible(container);
takeScreenshot();
}
diff --git a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/overflow-auto-with-overflow.html b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/overflow-auto-with-overflow.html
index d98b251..3356927 100644
--- a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/overflow-auto-with-overflow.html
+++ b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/overflow-auto-with-overflow.html
@@ -6,6 +6,7 @@
<link rel="help" href="https://github.com/WICG/display-locking">
<link rel="match" href="overflow-auto-with-overflow-ref.html">
<script src="/common/reftest-wait.js"></script>
+<script src="../resources/utils.js"></script>
<style>
#border {
@@ -13,7 +14,7 @@
width: max-content;
}
#container {
- contain: style layout;
+ content-size: 12px 34px;
height: 100px;
overflow: auto;
}
@@ -37,7 +38,7 @@
<script>
async function runTest() {
const container = document.getElementById("container");
- await container.displayLock.acquire({ timeout: Infinity, size: [12, 34] });
+ await setInvisible(container);
takeScreenshot();
}
diff --git a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/writing-modes-inherited-after-append.html b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/writing-modes-inherited-after-append.html
index d2f87276..99a4ac5aa 100644
--- a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/writing-modes-inherited-after-append.html
+++ b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/writing-modes-inherited-after-append.html
@@ -6,6 +6,7 @@
<link rel="help" href="https://github.com/WICG/display-locking">
<link rel="match" href="writing-modes-ref.html">
<script src="/common/reftest-wait.js"></script>
+<script src="../resources/utils.js"></script>
<style>
.verticalrl {
@@ -23,7 +24,7 @@
}
.box {
background: lightblue;
- contain: style layout;
+ content-size: 12px 34px;
border-color: blue;
border-style: solid;
border-width: 1px 2px 3px 4px;
@@ -57,7 +58,7 @@
let promises = []
for (let i = 0; i < items.length; ++i) {
let clone = template_element.cloneNode(true);
- promises.push(clone.displayLock.acquire({ timeout: Infinity, size: [12, 34] }));
+ promises.push(setInvisible(clone));
items[i].appendChild(clone);
}
await Promise.all(promises);
diff --git a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/writing-modes-switch.html b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/writing-modes-switch.html
index 57a0657..9de07503 100644
--- a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/writing-modes-switch.html
+++ b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/writing-modes-switch.html
@@ -6,6 +6,7 @@
<link rel="help" href="https://github.com/WICG/display-locking">
<link rel="match" href="writing-modes-ref.html">
<script src="/common/reftest-wait.js"></script>
+<script src="../resources/utils.js"></script>
<style>
.verticalrl {
@@ -23,7 +24,7 @@
}
.box {
background: lightblue;
- contain: style layout;
+ content-size: 12px 34px;
border-color: blue;
border-style: solid;
border-width: 1px 2px 3px 4px;
@@ -67,7 +68,7 @@
let items = document.getElementsByClassName("box");
let promises = []
for (let i = 0; i < items.length; ++i) {
- promises.push(items[i].displayLock.acquire({ timeout: Infinity, size: [12, 34] }));
+ promises.push(setInvisible(items[i]));
}
await Promise.all(promises);
diff --git a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/writing-modes.html b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/writing-modes.html
index 69ce11d..18586a6 100644
--- a/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/writing-modes.html
+++ b/third_party/blink/web_tests/wpt_internal/display-lock/rendersubtree/sizing/writing-modes.html
@@ -6,6 +6,7 @@
<link rel="help" href="https://github.com/WICG/display-locking">
<link rel="match" href="writing-modes-ref.html">
<script src="/common/reftest-wait.js"></script>
+<script src="../resources/utils.js"></script>
<style>
.verticalrl {
@@ -23,7 +24,7 @@
}
.box {
background: lightblue;
- contain: style layout;
+ content-size: 12px 34px;
border-color: blue;
border-style: solid;
border-width: 1px 2px 3px 4px;
@@ -67,7 +68,7 @@
const items = document.getElementsByClassName("box");
const promises = []
for (let i = 0; i < items.length; ++i) {
- promises.push(items[i].displayLock.acquire({ timeout: Infinity, size: [12, 34] }));
+ promises.push(setInvisible(items[i]));
}
await Promise.all(promises);
takeScreenshot();
