commit 3367870ccb36edce54cdeead361e8ae444be94bf
parent 6a30762be5889d738352d10d48347f53d77b69e2
Author: Sammy Gill <sammy.gill@apple.com>
Date: Fri, 31 Oct 2025 08:56:14 +0000
Bug 1996937 [wpt PR 55725] - WebKit export of https://bugs.webkit.org/show_bug.cgi?id=300066, a=testonly
Automatic update from web-platform-tests
WebKit export of https://bugs.webkit.org/show_bug.cgi?id=300066 (#55725)
--
wpt-commits: 73dab5cdc4167b6aab26d30c982cd167f2306614
wpt-pr: 55725
Diffstat:
6 files changed, 202 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-viewport/zoom/container-queries-block-size.html b/testing/web-platform/tests/css/css-viewport/zoom/container-queries-block-size.html
@@ -0,0 +1,36 @@
+<!doctype html>
+<link rel="help" href="https://drafts.csswg.org/css-viewport/">
+<link rel="match" href="reference/container-queries-block-size-ref.html">
+<style>
+ .container {
+ container-type: size;
+ width: 100px;
+ height: 200px;
+ writing-mode: vertical-lr;
+ }
+ .child {
+ background-color: green;
+ height: 50px;
+ width: 50px;
+ @container (block-size > 120px) {
+ background-color: red;
+ }
+ }
+</style>
+<p>All boxes below should be green.</p>
+<div class="container">
+ <div class="child"></div>
+</div>
+<div class="container" style="zoom: 2">
+ <div class="child"></div>
+</div>
+<div class="container" style="zoom: 2">
+ <div class="nested" style="zoom: 2">
+ <div class="child"></div>
+ </div>
+</div>
+<div class="outer" style="zoom: 2">
+ <div class="container">
+ <div class="child"></div>
+ </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-viewport/zoom/container-queries-height.html b/testing/web-platform/tests/css/css-viewport/zoom/container-queries-height.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<link rel="help" href="https://drafts.csswg.org/css-viewport/">
+<link rel="match" href="reference/container-queries-height-ref.html">
+<style>
+ .container {
+ container-type: size;
+ width: 100px;
+ height: 100px;
+ }
+ .child {
+ background-color: green;
+ height: 50px;
+ width: 50px;
+ @container (height > 120px) {
+ background-color: red;
+ }
+ }
+</style>
+<p>All boxes below should be green.</p>
+<div class="container">
+ <div class="child"></div>
+</div>
+<div class="container" style="zoom: 2">
+ <div class="child"></div>
+</div>
+<div class="container" style="zoom: 2">
+ <div class="nested" style="zoom: 2">
+ <div class="child"></div>
+ </div>
+</div>
+<div class="outer" style="zoom: 2">
+ <div class="container">
+ <div class="child"></div>
+ </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-viewport/zoom/container-queries-inline-size.html b/testing/web-platform/tests/css/css-viewport/zoom/container-queries-inline-size.html
@@ -0,0 +1,36 @@
+<!doctype html>
+<link rel="help" href="https://drafts.csswg.org/css-viewport/">
+<link rel="match" href="reference/container-queries-inline-size-ref.html">
+<style>
+ .container {
+ container-type: inline-size;
+ width: 200px;
+ height: 100px;
+ writing-mode: vertical-lr;
+ }
+ .child {
+ background-color: green;
+ height: 50px;
+ width: 50px;
+ @container (inline-size > 120px) {
+ background-color: red;
+ }
+ }
+</style>
+<p>All boxes below should be green.</p>
+<div class="container">
+ <div class="child"></div>
+</div>
+<div class="container" style="zoom: 2">
+ <div class="child"></div>
+</div>
+<div class="container" style="zoom: 2">
+ <div class="nested" style="zoom: 2">
+ <div class="child"></div>
+ </div>
+</div>
+<div class="outer" style="zoom: 2">
+ <div class="container">
+ <div class="child"></div>
+ </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-viewport/zoom/reference/container-queries-block-size-ref.html b/testing/web-platform/tests/css/css-viewport/zoom/reference/container-queries-block-size-ref.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<link rel="help" href="https://drafts.csswg.org/css-viewport/">
+<style>
+ .container {
+ container-type: size;
+ width: 100px;
+ height: 100px;
+ writing-mode: vertical-lr;
+ }
+ .child {
+ background-color: green;
+ height: 50px;
+ width: 50px;
+}
+</style>
+<p>All boxes below should be green.</p>
+<div class="container">
+ <div class="child"></div>
+</div>
+<div class="container" style="zoom: 2">
+ <div class="child"></div>
+</div>
+<div class="container" style="zoom: 2">
+ <div class="nested" style="zoom: 2">
+ <div class="child"></div>
+ </div>
+</div>
+<div class="outer" style="zoom: 2">
+ <div class="container">
+ <div class="child"></div>
+ </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-viewport/zoom/reference/container-queries-height-ref.html b/testing/web-platform/tests/css/css-viewport/zoom/reference/container-queries-height-ref.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<link rel="help" href="https://drafts.csswg.org/css-viewport/">
+<style>
+ .container {
+ container-type: size;
+ width: 100px;
+ height: 100px;
+ }
+ .child {
+ background-color: green;
+ height: 50px;
+ width: 50px;
+}
+</style>
+<p>All boxes below should be green.</p>
+<div class="container">
+ <div class="child"></div>
+</div>
+<div class="container" style="zoom: 2">
+ <div class="child"></div>
+</div>
+<div class="container" style="zoom: 2">
+ <div class="nested" style="zoom: 2">
+ <div class="child"></div>
+ </div>
+</div>
+<div class="outer" style="zoom: 2">
+ <div class="container">
+ <div class="child"></div>
+ </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-viewport/zoom/reference/container-queries-inline-size-ref.html b/testing/web-platform/tests/css/css-viewport/zoom/reference/container-queries-inline-size-ref.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<link rel="help" href="https://drafts.csswg.org/css-viewport/">
+<style>
+ .container {
+ container-type: inline-size;
+ width: 100px;
+ height: 100px;
+ writing-mode: vertical-lr;
+ }
+ .child {
+ background-color: green;
+ height: 50px;
+ width: 50px;
+}
+</style>
+<p>All boxes below should be green.</p>
+<div class="container">
+ <div class="child"></div>
+</div>
+<div class="container" style="zoom: 2">
+ <div class="child"></div>
+</div>
+<div class="container" style="zoom: 2">
+ <div class="nested" style="zoom: 2">
+ <div class="child"></div>
+ </div>
+</div>
+<div class="outer" style="zoom: 2">
+ <div class="container">
+ <div class="child"></div>
+ </div>
+</div>
