Diff
Modified: trunk/LayoutTests/TestExpectations (295085 => 295086)
--- trunk/LayoutTests/TestExpectations 2022-06-01 11:05:08 UTC (rev 295085)
+++ trunk/LayoutTests/TestExpectations 2022-06-01 11:29:56 UTC (rev 295086)
@@ -4780,6 +4780,8 @@
# Container queries
webkit.org/b/229659 imported/w3c/web-platform-tests/css/css-contain/container-queries/custom-layout-container-001.https.html [ ImageOnlyFailure ]
webkit.org/b/229659 imported/w3c/web-platform-tests/css/css-contain/container-queries/svg-foreignobject-no-size-container.html [ Skip ]
+webkit.org/b/229659 imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-gradient-invalidation.html [ ImageOnlyFailure ]
+webkit.org/b/229659 imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-gradient.html [ ImageOnlyFailure ]
# Flaky css-contain test
imported/w3c/web-platform-tests/css/css-contain/content-visibility/animation-display-lock.html [ Failure Pass ]
Modified: trunk/LayoutTests/imported/w3c/resources/resource-files.json (295085 => 295086)
--- trunk/LayoutTests/imported/w3c/resources/resource-files.json 2022-06-01 11:05:08 UTC (rev 295085)
+++ trunk/LayoutTests/imported/w3c/resources/resource-files.json 2022-06-01 11:29:56 UTC (rev 295086)
@@ -658,13 +658,18 @@
"web-platform-tests/css/css-contain/container-queries/chrome-bug-1289718-000-crash.html",
"web-platform-tests/css/css-contain/container-queries/chrome-bug-1289718-001-crash.html",
"web-platform-tests/css/css-contain/container-queries/columns-in-table-001-crash.html",
+ "web-platform-tests/css/css-contain/container-queries/container-for-cue-ref.html",
"web-platform-tests/css/css-contain/container-queries/container-type-change-chrome-legacy-crash.html",
+ "web-platform-tests/css/css-contain/container-queries/container-units-gradient-ref.html",
"web-platform-tests/css/css-contain/container-queries/counters-ref.html",
+ "web-platform-tests/css/css-contain/container-queries/crashtests/br-crash.html",
"web-platform-tests/css/css-contain/container-queries/crashtests/canvas-as-container-crash.html",
"web-platform-tests/css/css-contain/container-queries/crashtests/chrome-bug-1289718-000-crash.html",
"web-platform-tests/css/css-contain/container-queries/crashtests/chrome-bug-1289718-001-crash.html",
"web-platform-tests/css/css-contain/container-queries/crashtests/chrome-quotes-crash.html",
"web-platform-tests/css/css-contain/container-queries/crashtests/columns-in-table-001-crash.html",
+ "web-platform-tests/css/css-contain/container-queries/crashtests/columns-in-table-002-crash.html",
+ "web-platform-tests/css/css-contain/container-queries/crashtests/container-in-canvas-crash.html",
"web-platform-tests/css/css-contain/container-queries/crashtests/container-type-change-chrome-legacy-crash.html",
"web-platform-tests/css/css-contain/container-queries/crashtests/flex-in-columns-000-crash.html",
"web-platform-tests/css/css-contain/container-queries/crashtests/flex-in-columns-001-crash.html",
@@ -682,6 +687,7 @@
"web-platform-tests/css/css-contain/container-queries/crashtests/input-column-group-container-crash.html",
"web-platform-tests/css/css-contain/container-queries/crashtests/input-placeholder-inline-size-crash.html",
"web-platform-tests/css/css-contain/container-queries/crashtests/math-block-container-child-crash.html",
+ "web-platform-tests/css/css-contain/container-queries/crashtests/orthogonal-replaced-crash.html",
"web-platform-tests/css/css-contain/container-queries/crashtests/pseudo-container-crash.html",
"web-platform-tests/css/css-contain/container-queries/crashtests/svg-layout-root-crash.html",
"web-platform-tests/css/css-contain/container-queries/crashtests/svg-text-crash.html",
@@ -704,6 +710,7 @@
"web-platform-tests/css/css-contain/container-queries/inline-size-bfc-floats-ref.html",
"web-platform-tests/css/css-contain/container-queries/inline-with-columns-000-crash.html",
"web-platform-tests/css/css-contain/container-queries/inline-with-columns-001-crash.html",
+ "web-platform-tests/css/css-contain/container-queries/inner-first-line-non-matching-ref.html",
"web-platform-tests/css/css-contain/container-queries/input-column-group-container-crash.html",
"web-platform-tests/css/css-contain/container-queries/input-placeholder-inline-size-crash.html",
"web-platform-tests/css/css-contain/container-queries/math-block-container-child-crash.html",
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/canvas-as-container-001-expected.html (0 => 295086)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/canvas-as-container-001-expected.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/canvas-as-container-001-expected.html 2022-06-01 11:29:56 UTC (rev 295086)
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href=""
+<p>Test passes if there is a filled green square.</p>
+<div style="width:100px; height:100px; background:green;"></div>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/canvas-as-container-001.html (0 => 295086)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/canvas-as-container-001.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/canvas-as-container-001.html 2022-06-01 11:29:56 UTC (rev 295086)
@@ -0,0 +1,25 @@
+<!doctype html>
+<title>CSS Container Queries Test: Canvas as size container for focusable child</title>
+<link rel="help" href=""
+<link rel="match" href=""
+<style>
+ @supports (container-type: size) {
+ canvas:focus-within {
+ border: 50px solid green;
+ }
+ canvas {
+ display: block;
+ width: 100px;
+ height: 100px;
+ box-sizing: border-box;
+ container-type: size;
+ }
+ }
+</style>
+<p>Test passes if there is a filled green square.</p>
+<canvas>
+ <div id="target" tabIndex="1"></div>
+</canvas>
+<script>
+ target.focus();
+</script>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/canvas-as-container-002-expected.html (0 => 295086)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/canvas-as-container-002-expected.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/canvas-as-container-002-expected.html 2022-06-01 11:29:56 UTC (rev 295086)
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href=""
+<p>Test passes if there is a filled green square.</p>
+<div style="width:100px; height:100px; background:green;"></div>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/canvas-as-container-002.html (0 => 295086)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/canvas-as-container-002.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/canvas-as-container-002.html 2022-06-01 11:29:56 UTC (rev 295086)
@@ -0,0 +1,26 @@
+<!doctype html>
+<title>CSS Container Queries Test: Absolute positioned canvas as size container for focusable child</title>
+<link rel="help" href=""
+<link rel="match" href=""
+<style>
+ @supports (container-type: size) {
+ canvas:focus-within {
+ border: 50px solid green;
+ }
+ canvas {
+ display: block;
+ position: absolute;
+ width: 100px;
+ height: 100px;
+ box-sizing: border-box;
+ container-type: size;
+ }
+ }
+</style>
+<p>Test passes if there is a filled green square.</p>
+<canvas>
+ <div id="target" tabIndex="1"></div>
+</canvas>
+<script>
+ target.focus();
+</script>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/canvas-as-container-003-expected.html (0 => 295086)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/canvas-as-container-003-expected.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/canvas-as-container-003-expected.html 2022-06-01 11:29:56 UTC (rev 295086)
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href=""
+<p>Test passes if there is a filled green square.</p>
+<div style="width:100px; height:100px; background:green;"></div>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/canvas-as-container-003.html (0 => 295086)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/canvas-as-container-003.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/canvas-as-container-003.html 2022-06-01 11:29:56 UTC (rev 295086)
@@ -0,0 +1,28 @@
+<!doctype html>
+<title>CSS Container Queries Test: Canvas as size container for focusable child with display</title>
+<link rel="help" href=""
+<link rel="match" href=""
+<style>
+ @supports (container-type: size) {
+ canvas:focus-within {
+ background-color: green;
+ }
+ canvas {
+ display: block;
+ width: 100px;
+ height: 100px;
+ container-type: size;
+ }
+ #target { display: none; }
+ @container (width = 100px) {
+ #target { display: block; }
+ }
+ }
+</style>
+<p>Test passes if there is a filled green square.</p>
+<canvas>
+ <div id="target" tabIndex="1"></div>
+</canvas>
+<script>
+ target.focus();
+</script>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/canvas-as-container-004-expected.html (0 => 295086)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/canvas-as-container-004-expected.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/canvas-as-container-004-expected.html 2022-06-01 11:29:56 UTC (rev 295086)
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href=""
+<p>Test passes if there is a filled green square.</p>
+<div style="width:100px; height:100px; background:green;"></div>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/canvas-as-container-004.html (0 => 295086)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/canvas-as-container-004.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/canvas-as-container-004.html 2022-06-01 11:29:56 UTC (rev 295086)
@@ -0,0 +1,29 @@
+<!doctype html>
+<title>CSS Container Queries Test: Absolute positioned canvas as size container for focusable child with display</title>
+<link rel="help" href=""
+<link rel="match" href=""
+<style>
+ @supports (container-type: size) {
+ canvas:focus-within {
+ background-color: green;
+ }
+ canvas {
+ display: block;
+ position: absolute;
+ width: 100px;
+ height: 100px;
+ container-type: size;
+ }
+ #target { display: none; }
+ @container (width = 100px) {
+ #target { display: block; }
+ }
+ }
+</style>
+<p>Test passes if there is a filled green square.</p>
+<canvas>
+ <div id="target" tabIndex="1"></div>
+</canvas>
+<script>
+ target.focus();
+</script>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-for-cue-expected.html (0 => 295086)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-for-cue-expected.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-for-cue-expected.html 2022-06-01 11:29:56 UTC (rev 295086)
@@ -0,0 +1,23 @@
+<!doctype html>
+<html class="reftest-wait">
+<head>
+ <title>CSS Test Reference</title>
+ <script src=""
+ <style>
+ video {
+ contain: size;
+ width: 200px;
+ height: 200px;
+ }
+ video::cue { background-color: green }
+ video::cue(b) { color: lime }
+ </style>
+</head>
+<body>
+ <video autoplay _onplaying_="this._onplaying_ = null; this.pause(); takeScreenshot();">
+ <track default src=""
+ <source src="" type="video/webm">
+ <source src="" type="video/mp4">
+ </video>
+</body>
+</html>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-for-cue-ref.html (0 => 295086)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-for-cue-ref.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-for-cue-ref.html 2022-06-01 11:29:56 UTC (rev 295086)
@@ -0,0 +1,23 @@
+<!doctype html>
+<html class="reftest-wait">
+<head>
+ <title>CSS Test Reference</title>
+ <script src=""
+ <style>
+ video {
+ contain: size;
+ width: 200px;
+ height: 200px;
+ }
+ video::cue { background-color: green }
+ video::cue(b) { color: lime }
+ </style>
+</head>
+<body>
+ <video autoplay _onplaying_="this._onplaying_ = null; this.pause(); takeScreenshot();">
+ <track default src=""
+ <source src="" type="video/webm">
+ <source src="" type="video/mp4">
+ </video>
+</body>
+</html>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-for-cue.html (0 => 295086)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-for-cue.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-for-cue.html 2022-06-01 11:29:56 UTC (rev 295086)
@@ -0,0 +1,27 @@
+<!doctype html>
+<html class="reftest-wait">
+<head>
+ <title>CSS Container Queries Test: Container for pseudo elements</title>
+ <link rel="help" href=""
+ <link rel="match" href=""
+ <script src=""
+ <style>
+ video {
+ container-type: size;
+ width: 200px;
+ height: 200px;
+ }
+ @container (width = 200px) {
+ video::cue { background-color: green }
+ video::cue(b) { color: lime }
+ }
+ </style>
+</head>
+<body>
+ <video autoplay _onplaying_="this._onplaying_ = null; this.pause(); takeScreenshot();">
+ <source src="" type="video/webm">
+ <source src="" type="video/mp4">
+ <track default src=""
+ </video>
+</body>
+</html>
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-for-shadow-dom.html (295085 => 295086)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-for-shadow-dom.html 2022-06-01 11:05:08 UTC (rev 295085)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-for-shadow-dom.html 2022-06-01 11:29:56 UTC (rev 295086)
@@ -1,7 +1,6 @@
<!doctype html>
<meta charset="utf-8">
<title>CSS Container Queries Test: query container for Shadow DOM</title>
-<link rel="help" href=""
<link rel="help" href=""
<script src=""
<script src=""
@@ -229,20 +228,11 @@
</div>
<script>
- setup(() => assert_implements_container_queries());
+ setup(() => {
+ assert_implements_container_queries();
+ polyfill_declarative_shadow_dom(document);
+ });
- function attachShadowRoots(root) {
- root.querySelectorAll("template[shadowroot]").forEach(template => {
- const mode = template.getAttribute("shadowroot");
- const shadowRoot = template.parentNode.attachShadow({ mode });
- shadowRoot.appendChild(template.content);
- template.remove();
- attachShadowRoots(shadowRoot);
- });
- }
- if (!document.querySelector("template[shadowroot]").parentNode.shadowRoot)
- attachShadowRoots(document);
-
const green = "rgb(0, 128, 0)";
test(() => {
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-longhand-animation-type-expected.txt (0 => 295086)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-longhand-animation-type-expected.txt (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-longhand-animation-type-expected.txt 2022-06-01 11:29:56 UTC (rev 295086)
@@ -0,0 +1,5 @@
+
+FAIL Reference variable is applied assert_equals: expected "PASS" but got "FAIL"
+PASS container-name is not animatable
+PASS container-type is not animatable
+
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-longhand-animation-type.html (0 => 295086)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-longhand-animation-type.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-longhand-animation-type.html 2022-06-01 11:29:56 UTC (rev 295086)
@@ -0,0 +1,45 @@
+<!doctype html>
+<title>Container Queries - The container longhands are not animatable</title>
+<link rel="help" href=""
+<link rel="help" href=""
+<script src=""
+<script src=""
+<script src=""
+<style>
+ @keyframes anim {
+ from {
+ --ref:PASS;
+ container-name: FAIL;
+ container-type: size;
+ }
+ to {
+ --ref:PASS;
+ container-name: FAIL;
+ container-type: size;
+ }
+ }
+ #container {
+ --ref:FAIL;
+ container-name: PASS;
+ container-type: inline-size;
+ animation: anim 1s linear paused;
+ }
+</style>
+<div id=container>
+</div>
+<script>
+ setup(() => assert_implements_container_queries());
+
+ test(() => {
+ assert_equals(getComputedStyle(container).getPropertyValue('--ref'), 'PASS');
+ }, 'Reference variable is applied');
+
+ test(() => {
+ assert_equals(getComputedStyle(container).getPropertyValue('container-name'), 'PASS');
+ }, 'container-name is not animatable');
+
+ test(() => {
+ assert_equals(getComputedStyle(container).getPropertyValue('container-type'), 'inline-size');
+ }, 'container-type is not animatable');
+
+</script>
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-name-computed-expected.txt (295085 => 295086)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-name-computed-expected.txt 2022-06-01 11:05:08 UTC (rev 295085)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-name-computed-expected.txt 2022-06-01 11:29:56 UTC (rev 295086)
@@ -5,8 +5,8 @@
PASS Property container-name value 'FoO'
PASS Property container-name value 'foo bar'
PASS Property container-name value 'bar foo'
-FAIL Property container-name value 'foo foo bar' assert_equals: expected "foo bar" but got "foo foo bar"
-FAIL Property container-name value 'foo bar foo' assert_equals: expected "foo bar" but got "foo bar foo"
-FAIL Property container-name value 'bar foo foo' assert_equals: expected "bar foo" but got "bar foo foo"
+PASS Property container-name value 'foo foo bar'
+PASS Property container-name value 'foo bar foo'
+PASS Property container-name value 'bar foo foo'
PASS Property container-name value '\!escaped'
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-name-computed.html (295085 => 295086)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-name-computed.html 2022-06-01 11:05:08 UTC (rev 295085)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-name-computed.html 2022-06-01 11:29:56 UTC (rev 295086)
@@ -16,8 +16,8 @@
test_computed_value('container-name', 'FoO');
test_computed_value('container-name', 'foo bar');
test_computed_value('container-name', 'bar foo');
-test_computed_value('container-name', 'foo foo bar', 'foo bar');
-test_computed_value('container-name', 'foo bar foo', 'foo bar');
-test_computed_value('container-name', 'bar foo foo', 'bar foo');
+test_computed_value('container-name', 'foo foo bar');
+test_computed_value('container-name', 'foo bar foo');
+test_computed_value('container-name', 'bar foo foo');
test_computed_value('container-name', '\\!escaped');
</script>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-size-invalidation-after-load-expected.txt (0 => 295086)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-size-invalidation-after-load-expected.txt (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-size-invalidation-after-load-expected.txt 2022-06-01 11:29:56 UTC (rev 295086)
@@ -0,0 +1,4 @@
+Green
+
+PASS @container: invalidation of container size after load event
+
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-size-invalidation-after-load.html (0 => 295086)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-size-invalidation-after-load.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-size-invalidation-after-load.html 2022-06-01 11:29:56 UTC (rev 295086)
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<title>@container: invalidation of container size after load event</title>
+<link rel="help" href=""
+<script src=""
+<script src=""
+<script src=""
+<style>
+ #container {
+ container-type: size;
+ width: 200px;
+ height: 4em;
+ border: 1px solid black;
+ }
+ @container (width > 300px) {
+ #child { color: green; }
+ }
+</style>
+<div id=container>
+ <div id=child>
+ Green
+ </div>
+</div>
+<script>
+ setup(() => assert_implements_container_queries());
+
+ function waitForLoad(w) {
+ return new Promise(resolve => w.addEventListener('load', resolve));
+ }
+
+ promise_test(async () => {
+ await waitForLoad(window);
+ container.offsetTop;
+
+ container.style.width = '400px';
+ container.style.setProperty('--x', 'x'); // crbug.com/1321010
+
+ assert_equals(getComputedStyle(child).color, 'rgb(0, 128, 0)');
+ });
+</script>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-gradient-expected.html (0 => 295086)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-gradient-expected.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-gradient-expected.html 2022-06-01 11:29:56 UTC (rev 295086)
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<style>
+ .container {
+ width: 400px;
+ height: 300px;
+ display: flex;
+ flex-wrap: wrap;
+ }
+ .box {
+ width: 100px;
+ height: 100px;
+ margin: 5px;
+ }
+</style>
+<div class=container>
+ <div class=box style="background:linear-gradient(green 20px, blue 30px)"></div>
+ <div class=box style="background:linear-gradient(green 20px, blue 30px)"></div>
+ <div class=box style="background:linear-gradient(green 15px, blue 40px)"></div>
+ <div class=box style="background:radial-gradient(green 20px, blue 30px)"></div>
+ <div class=box style="background:conic-gradient(from 180deg at 30px, green, blue);"></div>
+</div>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-gradient-invalidation-expected.html (0 => 295086)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-gradient-invalidation-expected.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-gradient-invalidation-expected.html 2022-06-01 11:29:56 UTC (rev 295086)
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<style>
+ .container {
+ width: 400px;
+ height: 300px;
+ display: flex;
+ flex-wrap: wrap;
+ }
+ .box {
+ width: 100px;
+ height: 100px;
+ margin: 5px;
+ }
+</style>
+<div class=container>
+ <div class=box style="background:linear-gradient(green 20px, blue 30px)"></div>
+ <div class=box style="background:linear-gradient(green 20px, blue 30px)"></div>
+ <div class=box style="background:linear-gradient(green 15px, blue 40px)"></div>
+ <div class=box style="background:radial-gradient(green 20px, blue 30px)"></div>
+ <div class=box style="background:conic-gradient(from 180deg at 30px, green, blue);"></div>
+</div>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-gradient-invalidation.html (0 => 295086)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-gradient-invalidation.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-gradient-invalidation.html 2022-06-01 11:29:56 UTC (rev 295086)
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>Container Relative Units in gradients</title>
+<link rel="help" href=""
+<link rel="match" href=""
+<script src=""
+<script src=""
+<style>
+ .container {
+ container-type: size;
+ width: 500px;
+ height: 400px;
+ display: flex;
+ flex-wrap: wrap;
+ }
+ .smaller {
+ width: 400px;
+ height: 300px;
+ }
+ .box {
+ width: 100px;
+ height: 100px;
+ margin: 5px;
+ }
+</style>
+<div class=container>
+ <div class=box style="background:linear-gradient(green 5cqw, blue 10cqh)"></div>
+ <div class=box style="background:linear-gradient(green 5cqi, blue 10cqb)"></div>
+ <div class=box style="background:linear-gradient(green 5cqmin, blue 10cqmax)"></div>
+ <div class=box style="background:radial-gradient(green 5cqw, blue 10cqh)"></div>
+ <div class=box style="background:conic-gradient(from 180deg at 10cqh, green, blue)"></div>
+</div>
+<script>
+ document.body.offsetTop;
+ document.querySelector('.container').classList.add('smaller');
+ waitForAtLeastOneFrame().then(takeScreenshot);
+</script>
+</html>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-gradient-ref.html (0 => 295086)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-gradient-ref.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-gradient-ref.html 2022-06-01 11:29:56 UTC (rev 295086)
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<style>
+ .container {
+ width: 400px;
+ height: 300px;
+ display: flex;
+ flex-wrap: wrap;
+ }
+ .box {
+ width: 100px;
+ height: 100px;
+ margin: 5px;
+ }
+</style>
+<div class=container>
+ <div class=box style="background:linear-gradient(green 20px, blue 30px)"></div>
+ <div class=box style="background:linear-gradient(green 20px, blue 30px)"></div>
+ <div class=box style="background:linear-gradient(green 15px, blue 40px)"></div>
+ <div class=box style="background:radial-gradient(green 20px, blue 30px)"></div>
+ <div class=box style="background:conic-gradient(from 180deg at 30px, green, blue);"></div>
+</div>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-gradient.html (0 => 295086)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-gradient.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-gradient.html 2022-06-01 11:29:56 UTC (rev 295086)
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<title>Container Relative Units in gradients</title>
+<link rel="help" href=""
+<link rel="match" href=""
+<style>
+ .container {
+ container-type: size;
+ width: 400px;
+ height: 300px;
+ display: flex;
+ flex-wrap: wrap;
+ }
+ .box {
+ width: 100px;
+ height: 100px;
+ margin: 5px;
+ }
+</style>
+<div class=container>
+ <div class=box style="background:linear-gradient(green 5cqw, blue 10cqh)"></div>
+ <div class=box style="background:linear-gradient(green 5cqi, blue 10cqb)"></div>
+ <div class=box style="background:linear-gradient(green 5cqmin, blue 10cqmax)"></div>
+ <div class=box style="background:radial-gradient(green 5cqw, blue 10cqh)"></div>
+ <div class=box style="background:conic-gradient(from 180deg at 10cqh, green, blue);"></div>
+</div>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-media-queries-expected.txt (0 => 295086)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-media-queries-expected.txt (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-media-queries-expected.txt 2022-06-01 11:29:56 UTC (rev 295086)
@@ -0,0 +1,11 @@
+
+
+PASS @media(width:100cqw) applies
+PASS @media(width:100cqi) applies
+PASS @media(width:100cqmax) applies
+PASS @media(height:100cqh) applies
+PASS @media(height:100cqb) applies
+PASS @media(height:100cqmin) applies
+PASS @media(width:90cqw) does not apply
+PASS @media(height:90cqh) does not apply
+
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-media-queries.html (0 => 295086)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-media-queries.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-media-queries.html 2022-06-01 11:29:56 UTC (rev 295086)
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<title>Container-relative units in @media</title>
+<link rel="help" href=""
+<script src=""
+<script src=""
+<script src=""
+
+<style>
+ iframe {
+ width: 200px;
+ height: 100px;
+ }
+</style>
+
+<iframe id=iframe></iframe>
+
+<script>
+setup(() => assert_implements_container_queries());
+
+const doc = iframe.contentDocument;
+const win = iframe.contentWindow;
+
+function test_media_query(feature, result, description) {
+ test((t) => {
+ t.add_cleanup(() => { doc.body.innerHTML = ''; })
+ doc.body.innerHTML = `
+ <style>
+ body {
+ color: red;
+ }
+ @media (${feature}) {
+ body {
+ color: green;
+ }
+ }
+ </style>
+ `;
+ assert_equals(win.getComputedStyle(doc.body).color, result);
+ }, description);
+}
+
+function test_media_query_applies(feature) {
+ test_media_query(feature, 'rgb(0, 128, 0)', `@media(${feature}) applies`);
+}
+
+function test_media_query_does_not_apply(feature) {
+ test_media_query(feature, 'rgb(255, 0, 0)', `@media(${feature}) does not apply`);
+}
+
+// Container-relative units resolve against the "small viewport size" for
+// media queries.
+test_media_query_applies('width:100cqw');
+test_media_query_applies('width:100cqi');
+test_media_query_applies('width:100cqmax');
+test_media_query_applies('height:100cqh');
+test_media_query_applies('height:100cqb');
+test_media_query_applies('height:100cqmin');
+test_media_query_does_not_apply('width:90cqw');
+test_media_query_does_not_apply('height:90cqh');
+
+</script>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-shadow-expected.txt (0 => 295086)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-shadow-expected.txt (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-shadow-expected.txt 2022-06-01 11:29:56 UTC (rev 295086)
@@ -0,0 +1,4 @@
+
+PASS Direct slotted child queries shadow-including ancestors
+PASS Nondirect slotted child queries shadow-including ancestors
+
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-shadow.html (0 => 295086)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-shadow.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-shadow.html 2022-06-01 11:29:56 UTC (rev 295086)
@@ -0,0 +1,64 @@
+<!doctype html>
+<title>Container Relative Units: Shadow DOM</title>
+<link rel="help" href=""
+<link rel="help" href=""
+<script src=""
+<script src=""
+<script src=""
+<style>
+ #outer {
+ container-type: size;
+ width: 200px;
+ height: 200px;
+ }
+ #direct {
+ container-type: inline-size;
+ width: 50cqw;
+ height: 50cqh;
+ }
+ #nondirect {
+ width: 10cqw;
+ height: 10cqh;
+ background: green;
+ }
+</style>
+<div id=outer>
+ <div>
+ <template shadowroot="open">
+ <style>
+ #inner {
+ container-type: size;
+ width: 30px;
+ height: 30px;
+ }
+ </style>
+ <div id=inner>
+ <slot></slot>
+ </div>
+ </template>
+ <div>
+ <div id=direct>
+ <div id=nondirect>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+<script>
+ setup(() => {
+ assert_implements_container_queries();
+ polyfill_declarative_shadow_dom(document);
+ });
+
+ test(() => {
+ let cs = getComputedStyle(direct);
+ assert_equals(cs.width, '100px');
+ assert_equals(cs.height, '100px');
+ }, 'Direct slotted child queries shadow-including ancestors');
+
+ test(() => {
+ let cs = getComputedStyle(nondirect);
+ assert_equals(cs.width, '10px'); // #direct
+ assert_equals(cs.height, '20px'); // #outer
+ }, 'Nondirect slotted child queries shadow-including ancestors');
+</script>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-svglength-expected.txt (0 => 295086)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-svglength-expected.txt (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-svglength-expected.txt 2022-06-01 11:29:56 UTC (rev 295086)
@@ -0,0 +1,19 @@
+CONSOLE MESSAGE: Error: Invalid value for <rect> attribute width="10cqw"
+CONSOLE MESSAGE: Error: Invalid value for <rect> attribute height="10cqh"
+CONSOLE MESSAGE: Error: Invalid value for <rect> attribute width="10cqi"
+CONSOLE MESSAGE: Error: Invalid value for <rect> attribute height="10cqb"
+CONSOLE MESSAGE: Error: Invalid value for <rect> attribute width="10cqmin"
+CONSOLE MESSAGE: Error: Invalid value for <rect> attribute height="10cqmax"
+CONSOLE MESSAGE: Error: Invalid value for <rect> attribute width="calc(10cqmin + 10cqmax)"
+CONSOLE MESSAGE: Error: Invalid value for <rect> attribute height="calc(10cqw + 3px)"
+CONSOLE MESSAGE: Error: Invalid value for <rect> attribute width="20cqw"
+CONSOLE MESSAGE: Error: Invalid value for <rect> attribute height="20cqh"
+
+FAIL unitType with container-relative units assert_equals: expected 0 but got 1
+FAIL cqw,cqh can be resolved assert_equals: expected 20 but got 0
+FAIL cqi,cqb can be resolved assert_equals: expected 20 but got 0
+FAIL cqmin,cqmax can be resolved assert_equals: expected 15 but got 0
+FAIL calc() with container-relative units can be resolved assert_equals: expected 35 but got 0
+FAIL Can modify value with container-relative units assert_equals: expected 40 but got 0
+FAIL CSS Container Queries Test: container-relative units in SVGLength assert_approx_equals: expected 15 +/- 1 but got 0
+
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-svglength.html (0 => 295086)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-svglength.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-svglength.html 2022-06-01 11:29:56 UTC (rev 295086)
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<title>CSS Container Queries Test: container-relative units in SVGLength</title>
+<link rel="help" href=""
+<link rel="help" href=""
+<script src=""
+<script src=""
+<script src=""
+<script src=""
+<style>
+ #container {
+ container-type: size;
+ width: 200px;
+ height: 150px;
+ }
+</style>
+<div id=container>
+ <svg id=rootSVGElement>
+ <rect id="rect1" width="10cqw" height="10cqh"/>
+ <rect id="rect2" width="10cqi" height="10cqb"/>
+ <rect id="rect3" width="10cqmin" height="10cqmax"/>
+ <rect id="rect4" width="calc(10cqmin + 10cqmax)" height="calc(10cqw + 3px)"/>
+ <rect id="rect_dynamic"/>
+ <rect id="rect_animated" width="42px" height="42px" fill="green">
+ <animate id=animation attributeName=width from="5cqw" to="10cqw" begin="0s" dur="4s"/>
+ </rect>
+ </svg>
+</div>
+<script>
+ setup(() => {
+ assert_implements_container_queries();
+ container.offsetTop;
+ });
+
+ function cleanup() {
+ rect_dynamic.removeAttribute('width');
+ rect_dynamic.removeAttribute('height');
+ }
+
+ test(() => {
+ assert_equals(rect1.width.baseVal.unitType, SVGLength.SVG_LENGTHTYPE_UNKNOWN);
+ }, 'unitType with container-relative units');
+
+ test(() => {
+ assert_equals(rect1.width.baseVal.value, 20);
+ assert_equals(rect1.height.baseVal.value, 15);
+ }, 'cqw,cqh can be resolved');
+
+ test(() => {
+ assert_equals(rect2.width.baseVal.value, 20);
+ assert_equals(rect2.height.baseVal.value, 15);
+ }, 'cqi,cqb can be resolved');
+
+ test(() => {
+ assert_equals(rect3.width.baseVal.value, 15);
+ assert_equals(rect3.height.baseVal.value, 20);
+ }, 'cqmin,cqmax can be resolved');
+
+ test(() => {
+ assert_equals(rect4.width.baseVal.value, 35);
+ assert_equals(rect4.height.baseVal.value, 23);
+ }, 'calc() with container-relative units can be resolved');
+
+ test((t) => {
+ t.add_cleanup(cleanup);
+ rect_dynamic.setAttribute('width', '20cqw');
+ rect_dynamic.setAttribute('height', '20cqh');
+ assert_equals(rect_dynamic.width.baseVal.value, 40);
+ assert_equals(rect_dynamic.height.baseVal.value, 30);
+
+ rect_dynamic.width.baseVal.value = 80;
+ rect_dynamic.height.baseVal.value = 45;
+ assert_equals(rect_dynamic.getAttribute('width'), '80');
+ assert_equals(rect_dynamic.getAttribute('height'), '45');
+ }, 'Can modify value with container-relative units');
+
+ smil_async_test((t) => {
+ t.add_cleanup(cleanup);
+ let assert_width = (expected) => {
+ let epsilon = 1.0;
+ return () => {
+ assert_approx_equals(rect_animated.width.animVal.value, expected, epsilon);
+ };
+ };
+ const expectedValues = [
+ // [animationId, time, sampleCallback]
+ ["animation", 0.0, assert_width(10)],
+ ["animation", 2.0, assert_width(15)],
+ ["animation", 3.999, assert_width(20)],
+ ["animation", 4, assert_width(42)],
+ ];
+
+ runAnimationTest(t, expectedValues);
+ });
+
+</script>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/crashtests/br-crash.html (0 => 295086)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/crashtests/br-crash.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/crashtests/br-crash.html 2022-06-01 11:29:56 UTC (rev 295086)
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<title>Don't crash for blocky <br> (etc) with inline-size containment</title>
+<link rel="help" href=""
+<link rel="help" href=""
+<br style="container-type:inline-size; display:block;">
+<wbr style="container-type:inline-size; display:block;">
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/crashtests/columns-in-table-002-crash.html (0 => 295086)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/crashtests/columns-in-table-002-crash.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/crashtests/columns-in-table-002-crash.html 2022-06-01 11:29:56 UTC (rev 295086)
@@ -0,0 +1,9 @@
+<!doctype html>
+<title>CSS Container Queries Test: container with multicol table-header-group crashes Chrome</title>
+<link rel="help" href=""
+<link rel="help" href=""
+<p>Pass if test does not crash.</p>
+<div style="container-type:inline-size">
+ <span style="display:table-header-group;columns:1"></span>
+ <span style="display:table-header-group;"></span>
+</div>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/crashtests/container-in-canvas-crash.html (0 => 295086)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/crashtests/container-in-canvas-crash.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/crashtests/container-in-canvas-crash.html 2022-06-01 11:29:56 UTC (rev 295086)
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<title>Don't crash with a container query container inside canvas</title>
+<link rel="help" href=""
+<link rel="help" href=""
+<canvas>
+ <div>
+ <div style="container-type: size">
+ <div>Test</div>
+ </div>
+ </div>
+</canvas>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/crashtests/orthogonal-replaced-crash.html (0 => 295086)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/crashtests/orthogonal-replaced-crash.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/crashtests/orthogonal-replaced-crash.html 2022-06-01 11:29:56 UTC (rev 295086)
@@ -0,0 +1,11 @@
+<!doctype html>
+<title>Chrome crash for replaced in orthogonal flow query container</title>
+<link rel="help" href=""
+<p>Pass if no crash.</p>
+<iframe></iframe>
+<style>
+ body {
+ container-type: size;
+ writing-mode: vertical-rl;
+ }
+</style>
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/crashtests/w3c-import.log (295085 => 295086)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/crashtests/w3c-import.log 2022-06-01 11:05:08 UTC (rev 295085)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/crashtests/w3c-import.log 2022-06-01 11:29:56 UTC (rev 295086)
@@ -14,11 +14,14 @@
None
------------------------------------------------------------------------
List of files:
+/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/crashtests/br-crash.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/crashtests/canvas-as-container-crash.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/crashtests/chrome-bug-1289718-000-crash.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/crashtests/chrome-bug-1289718-001-crash.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/crashtests/chrome-quotes-crash.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/crashtests/columns-in-table-001-crash.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/crashtests/columns-in-table-002-crash.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/crashtests/container-in-canvas-crash.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/crashtests/container-type-change-chrome-legacy-crash.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/crashtests/flex-in-columns-000-crash.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/crashtests/flex-in-columns-001-crash.html
@@ -36,6 +39,7 @@
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/crashtests/input-column-group-container-crash.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/crashtests/input-placeholder-inline-size-crash.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/crashtests/math-block-container-child-crash.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/crashtests/orthogonal-replaced-crash.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/crashtests/pseudo-container-crash.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/crashtests/svg-layout-root-crash.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/crashtests/svg-text-crash.html
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/deep-nested-inline-size-containers.html (295085 => 295086)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/deep-nested-inline-size-containers.html 2022-06-01 11:05:08 UTC (rev 295085)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/deep-nested-inline-size-containers.html 2022-06-01 11:29:56 UTC (rev 295086)
@@ -13,11 +13,11 @@
setup(() => {
assert_implements_container_queries();
- // Create 100 nested inline-size containers where a child container is 1px
+ // Create 50 nested inline-size containers where a child container is 1px
// narrower than its parent
let sheet = test_style.sheet;
let container = outer;
- for (let width = 200; width > 100; --width) {
+ for (let width = 200; width > 150; --width) {
sheet.insertRule(`
@container (width = ${width}px) {
.container { max-width: ${width-1}px; }
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/iframe-in-container-invalidation-expected.txt (0 => 295086)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/iframe-in-container-invalidation-expected.txt (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/iframe-in-container-invalidation-expected.txt 2022-06-01 11:29:56 UTC (rev 295086)
@@ -0,0 +1,4 @@
+
+
+FAIL @container-dependent elements respond to size changes of an @container-dependent iframe assert_equals: expected "rgb(0, 128, 0)" but got "rgb(255, 0, 0)"
+
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/iframe-in-container-invalidation.html (0 => 295086)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/iframe-in-container-invalidation.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/iframe-in-container-invalidation.html 2022-06-01 11:29:56 UTC (rev 295086)
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<title>@container-dependent elements respond to size changes of an @container-dependent iframe</title>
+<link rel="help" href=""
+<script src=""
+<script src=""
+<script src=""
+<style>
+ #container {
+ container-type: size;
+ width: 200px;
+ height: 200px;
+ }
+ iframe {
+ width: 200px;
+ height: 40px;
+ }
+ @container (width > 300px) {
+ iframe { width: 400px; }
+ }
+</style>
+<div id=container>
+ <iframe id=iframe srcdoc="
+ <style>
+ div#container {
+ container-type: size;
+ height: 20px;
+ }
+ div#child { color: red; }
+ @container (width > 300px) {
+ div#child { color: green; }
+ }
+ </style>
+ <div id=container>
+ <div id=child>Test</div>
+ </div>
+ "></iframe>
+</div>
+<script>
+ setup(() => assert_implements_container_queries());
+
+ function waitForLoad(w) {
+ return new Promise(resolve => w.addEventListener('load', resolve));
+ }
+
+ promise_test(async () => {
+ await waitForLoad(window);
+ let inner_div = iframe.contentDocument.querySelector('div#child');
+ assert_equals(getComputedStyle(inner_div).color, 'rgb(255, 0, 0)');
+
+ // Changing the size of the outer container changes the size of the iframe,
+ // which in turn should change the size of the inner container (inside that
+ // iframe).
+ container.style.width = '400px';
+ container.style.setProperty('--x', 'x'); // crbug.com/1312940
+
+ assert_equals(getComputedStyle(inner_div).color, 'rgb(0, 128, 0)');
+ });
+</script>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/inner-first-line-non-matching-expected.html (0 => 295086)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/inner-first-line-non-matching-expected.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/inner-first-line-non-matching-expected.html 2022-06-01 11:29:56 UTC (rev 295086)
@@ -0,0 +1,3 @@
+<!doctype html>
+<title>CSS Test Reference</title>
+<div style="color:green">This text should be green.</div>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/inner-first-line-non-matching-ref.html (0 => 295086)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/inner-first-line-non-matching-ref.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/inner-first-line-non-matching-ref.html 2022-06-01 11:29:56 UTC (rev 295086)
@@ -0,0 +1,3 @@
+<!doctype html>
+<title>CSS Test Reference</title>
+<div style="color:green">This text should be green.</div>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/inner-first-line-non-matching.html (0 => 295086)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/inner-first-line-non-matching.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/inner-first-line-non-matching.html 2022-06-01 11:29:56 UTC (rev 295086)
@@ -0,0 +1,13 @@
+<!doctype html>
+<title>CSS Container Queries Test: Non-matching ::first-line in @container</title>
+<link rel="help" href=""
+<link rel="match" href=""
+<style>
+ #outer::first-line { color: green }
+ @container (width > 99999px) {
+ #inner::first-line { color: red }
+ }
+</style>
+<div id="outer">
+ <div id="inner">This text should be green.</div>
+</div>
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/pseudo-elements-002-expected.html (295085 => 295086)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/pseudo-elements-002-expected.html 2022-06-01 11:05:08 UTC (rev 295085)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/pseudo-elements-002-expected.html 2022-06-01 11:29:56 UTC (rev 295086)
@@ -12,3 +12,5 @@
<div style="color:green">PASS if text is green.</div>
<div style="color:green">PASS if text is green.</div>
<div style="color:green">PASS if text is green.</div>
+<div style="color:green">PASS if text is green.</div>
+<div style="color:green">PASS if text is green.</div>
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/pseudo-elements-002-ref.html (295085 => 295086)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/pseudo-elements-002-ref.html 2022-06-01 11:05:08 UTC (rev 295085)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/pseudo-elements-002-ref.html 2022-06-01 11:29:56 UTC (rev 295086)
@@ -12,3 +12,5 @@
<div style="color:green">PASS if text is green.</div>
<div style="color:green">PASS if text is green.</div>
<div style="color:green">PASS if text is green.</div>
+<div style="color:green">PASS if text is green.</div>
+<div style="color:green">PASS if text is green.</div>
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/pseudo-elements-002.html (295085 => 295086)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/pseudo-elements-002.html 2022-06-01 11:05:08 UTC (rev 295085)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/pseudo-elements-002.html 2022-06-01 11:29:56 UTC (rev 295086)
@@ -1,6 +1,6 @@
<!DOCTYPE html>
<title>CSS Container Queries Test: Container for pseudo elements</title>
-<link rel="help" href=""
+<link rel="help" href=""
<link rel="match" href=""
<style>
.container { container-type: inline-size; }
@@ -28,6 +28,10 @@
@container (min-width: 400px) { #c11::first-line { color: green } }
@container (min-width: 400px) { #c12::first-line { color: green } }
+
+ #c13::first-line { color: red }
+ @container (min-width: 400px) { #c13::first-line { color: green } }
+ @container (min-width: 400px) { #c14::first-line { color: green } }
</style>
<div id="c1" class="container" style="width:100px"></div>
<div id="c2" class="container" style="width:200px"></div>
@@ -57,6 +61,8 @@
<div id="c12" class="container" style="width:300px">
<div class="container" style="width:300px">PASS if text is green.</div>
</div>
+<div id="c13" class="container" style="width:300px">PASS if text is green.</div>
+<div id="c14" class="container" style="width:300px">PASS if text is green.</div>
<script>
document.body.offsetTop;
c2.style.width = "100px";
@@ -65,4 +71,6 @@
c8.style.width = "400px";
c10.style.width = "300px";
c12.style.width = "400px";
+ c13.style.width = "400px";
+ c14.style.width = "400px";
</script>
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/pseudo-elements-003.html (295085 => 295086)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/pseudo-elements-003.html 2022-06-01 11:05:08 UTC (rev 295085)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/pseudo-elements-003.html 2022-06-01 11:29:56 UTC (rev 295086)
@@ -1,6 +1,6 @@
<!doctype html>
<title>@container: originating element container for pseudo elements</title>
-<link rel="help" href=""
+<link rel="help" href=""
<script src=""
<script src=""
<script src=""
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/pseudo-elements-004-expected.txt (0 => 295086)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/pseudo-elements-004-expected.txt (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/pseudo-elements-004-expected.txt 2022-06-01 11:29:56 UTC (rev 295086)
@@ -0,0 +1,14 @@
+
+PASS Initial color for ::before
+PASS Initial color for ::after
+PASS Initial color for ::marker
+PASS Initial color for ::first-line
+PASS Initial color for ::first-letter
+PASS Initial color for ::backdrop
+FAIL Color for ::before depending on container assert_equals: expected "rgb(0, 128, 0)" but got "rgb(255, 0, 0)"
+FAIL Color for ::after depending on container assert_equals: expected "rgb(0, 128, 0)" but got "rgb(255, 0, 0)"
+FAIL Color for ::marker depending on container assert_equals: expected "rgb(0, 128, 0)" but got "rgb(255, 0, 0)"
+FAIL Color for ::first-line depending on container assert_equals: expected "rgb(0, 128, 0)" but got "rgb(255, 0, 0)"
+FAIL Color for ::first-letter depending on container assert_equals: expected "rgb(0, 128, 0)" but got "rgb(255, 0, 0)"
+FAIL Color for ::backdrop depending on container assert_equals: expected "rgb(0, 128, 0)" but got "rgb(255, 0, 0)"
+
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/pseudo-elements-004.html (0 => 295086)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/pseudo-elements-004.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/pseudo-elements-004.html 2022-06-01 11:29:56 UTC (rev 295086)
@@ -0,0 +1,52 @@
+<!doctype html>
+<title>@container: originating element container for pseudo elements</title>
+<link rel="help" href=""
+<script src=""
+<script src=""
+<script src=""
+<style>
+ #target { container-type: inline-size; }
+ #target::before,
+ #target::after,
+ #target::marker,
+ #target::first-line,
+ #target::first-letter,
+ #target::backdrop {
+ color: red;
+ }
+ @container (width >= 300px) {
+ #target::before,
+ #target::after,
+ #target::marker,
+ #target::first-line,
+ #target::first-letter,
+ #target::backdrop {
+ color: green;
+ }
+ }
+</style>
+<div id="outer" style="width: 200px">
+ <div id="target"></div>
+</div>
+<script>
+ setup(() => assert_implements_container_queries());
+
+ const green = "rgb(0, 128, 0)";
+ const red = "rgb(255, 0, 0)";
+
+ const pseudo_elements = ["::before", "::after", "::marker", "::first-line", "::first-letter", "::backdrop"];
+
+ pseudo_elements.forEach((pseudo_element) => {
+ test(() => {
+ assert_equals(getComputedStyle(target, pseudo_element).color, red);
+ }, `Initial color for ${pseudo_element}`);
+ });
+
+ outer.style.width = "300px";
+
+ pseudo_elements.forEach((pseudo_element) => {
+ test(() => {
+ assert_equals(getComputedStyle(target, pseudo_element).color, green);
+ }, `Color for ${pseudo_element} depending on container`);
+ });
+</script>
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/style-change-in-container.html (295085 => 295086)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/style-change-in-container.html 2022-06-01 11:05:08 UTC (rev 295085)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/style-change-in-container.html 2022-06-01 11:29:56 UTC (rev 295086)
@@ -16,6 +16,8 @@
<script>
setup(() => assert_implements_container_queries());
+ let content = document.getElementById("content");
+
test(() => {
assert_equals(getComputedStyle(content).color, "rgb(0, 128, 0)");
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/support/cq-testcommon.js (295085 => 295086)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/support/cq-testcommon.js 2022-06-01 11:05:08 UTC (rev 295085)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/support/cq-testcommon.js 2022-06-01 11:29:56 UTC (rev 295086)
@@ -1,3 +1,13 @@
function assert_implements_container_queries() {
assert_implements(CSS.supports("container-type:size"), "Basic support for container queries required");
}
+
+function polyfill_declarative_shadow_dom(root) {
+ root.querySelectorAll("template[shadowroot]").forEach(template => {
+ const mode = template.getAttribute("shadowroot");
+ const shadowRoot = template.parentNode.attachShadow({ mode });
+ shadowRoot.appendChild(template.content);
+ template.remove();
+ polyfill_declarative_shadow_dom(shadowRoot);
+ });
+}
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/support/test.vtt (0 => 295086)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/support/test.vtt (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/support/test.vtt 2022-06-01 11:29:56 UTC (rev 295086)
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:10.000
+Sub-<b>title</b>
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/support/w3c-import.log (295085 => 295086)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/support/w3c-import.log 2022-06-01 11:05:08 UTC (rev 295085)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/support/w3c-import.log 2022-06-01 11:29:56 UTC (rev 295086)
@@ -15,3 +15,4 @@
------------------------------------------------------------------------
List of files:
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/support/cq-testcommon.js
+/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/support/test.vtt
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/svg-foreignobject-child-container-expected.txt (0 => 295086)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/svg-foreignobject-child-container-expected.txt (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/svg-foreignobject-child-container-expected.txt 2022-06-01 11:29:56 UTC (rev 295086)
@@ -0,0 +1,4 @@
+Green
+
+PASS #inner querying #container inside foreignObject
+
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/svg-foreignobject-child-container.html (0 => 295086)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/svg-foreignobject-child-container.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/svg-foreignobject-child-container.html 2022-06-01 11:29:56 UTC (rev 295086)
@@ -0,0 +1,38 @@
+<!doctype html>
+<title>CSS Container Queries Test: size query container inside foreignObject</title>
+<link rel="help" href=""
+<script src=""
+<script src=""
+<script src=""
+<style>
+ svg {
+ display: block;
+ width: 200px;
+ height: 200px;
+ container-type: size;
+ }
+ #container {
+ width: 100px;
+ height: 100px;
+ container-type: size;
+ }
+ @container (width = 100px) {
+ #inner { color: green; }
+ }
+</style>
+<svg>
+ <foreignObject>
+ <div id="container">
+ <div id="inner">Green</div>
+ </div>
+ </foreignobject>
+</svg>
+<script>
+ setup(() => assert_implements_container_queries());
+
+ const green = "rgb(0, 128, 0)";
+
+ test(() => {
+ assert_equals(getComputedStyle(inner).color, green);
+ }, "#inner querying #container inside foreignObject");
+</script>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/svg-g-no-size-container-expected.html (0 => 295086)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/svg-g-no-size-container-expected.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/svg-g-no-size-container-expected.html 2022-06-01 11:29:56 UTC (rev 295086)
@@ -0,0 +1,4 @@
+<!doctype html>
+<title>CSS Test Reference</title>
+<p>You should see the word PASS below and no red.</p>
+<svg><text x="0" y="20" id="text">PASS</text></svg>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/svg-g-no-size-container-ref.html (0 => 295086)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/svg-g-no-size-container-ref.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/svg-g-no-size-container-ref.html 2022-06-01 11:29:56 UTC (rev 295086)
@@ -0,0 +1,4 @@
+<!doctype html>
+<title>CSS Test Reference</title>
+<p>You should see the word PASS below and no red.</p>
+<svg><text x="0" y="20" id="text">PASS</text></svg>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/svg-g-no-size-container.html (0 => 295086)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/svg-g-no-size-container.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/svg-g-no-size-container.html 2022-06-01 11:29:56 UTC (rev 295086)
@@ -0,0 +1,23 @@
+<!doctype html>
+<title>CSS Container Queries Test: SVG <g> element not a size query container</title>
+<link rel="help" href=""
+<link rel="match" href=""
+<style>
+ g {
+ display: block;
+ width: 100px;
+ height: 100px;
+ container-type: size;
+ }
+
+ @supports not (container-type: size) {
+ text { fill: red; }
+ }
+ @container (width = 100px) {
+ text { fill: red; }
+ }
+</style>
+<p>You should see the word PASS below and no red.</p>
+<svg>
+ <g><text x="0" y="20" id="text">PASS</text></g>
+</svg>
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/w3c-import.log (295085 => 295086)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/w3c-import.log 2022-06-01 11:05:08 UTC (rev 295085)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/w3c-import.log 2022-06-01 11:29:56 UTC (rev 295086)
@@ -40,6 +40,9 @@
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/chrome-legacy-skip-recalc.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/conditional-container-status.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-computed.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-for-cue-expected.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-for-cue-ref.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-for-cue.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-for-shadow-dom.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-inheritance.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-inner-at-rules.html
@@ -50,6 +53,7 @@
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-nested.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-parsing.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-selection.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-size-invalidation-after-load.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-size-invalidation.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-type-computed.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-type-containment.html
@@ -59,9 +63,17 @@
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-animation.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-basic.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-computational-independence.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-gradient-expected.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-gradient-invalidation-expected.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-gradient-invalidation.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-gradient-ref.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-gradient.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-invalidation.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-media-queries.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-selection.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-shadow.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-small-viewport-fallback.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-svglength.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-typed-om.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/counters-flex-circular.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/counters-in-container-dynamic-expected.html
@@ -85,6 +97,7 @@
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/fragmented-container-001.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/get-animations.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/idlharness.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/iframe-in-container-invalidation.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/iframe-invalidation.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/ineligible-containment.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/inline-size-and-min-width.html
@@ -93,6 +106,9 @@
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/inline-size-bfc-floats.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/inline-size-containment-vertical-rl.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/inline-size-containment.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/inner-first-line-non-matching-expected.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/inner-first-line-non-matching-ref.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/inner-first-line-non-matching.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/layout-dependent-focus.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/multicol-container-001.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/multicol-inside-container-expected.html
@@ -105,6 +121,7 @@
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/pseudo-elements-002-ref.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/pseudo-elements-002.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/pseudo-elements-003.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/pseudo-elements-004.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/query-content-box.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/query-evaluation.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/reattach-container-with-dirty-child.html
@@ -115,6 +132,7 @@
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/size-container-no-principal-box.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/size-feature-evaluation.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/style-change-in-container.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/svg-foreignobject-child-container.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/svg-foreignobject-no-size-container-expected.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/svg-foreignobject-no-size-container-ref.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/svg-foreignobject-no-size-container.html
