Bug 1769522 [wpt PR 34071] - [@container] Support container-relative units in media queries, a=testonly
authorAnders Hartvoll Ruud <andruud@chromium.org>
Mon, 23 May 2022 10:00:50 +0000
changeset 618659 a82ac90230c7425017e9b8c9ec64586425751aab
parent 618658 43d1d8a322274e6af9b2d2e7142b196c75ae1acd
child 618660 661e97a5caa67f596169e0a99d979b2dcb90130f
push id163376
push userwptsync@mozilla.com
push dateTue, 24 May 2022 10:19:51 +0000
treeherderautoland@2ef7c238533c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1769522, 34071, 1223030, 3649669, 1004690
milestone102.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1769522 [wpt PR 34071] - [@container] Support container-relative units in media queries, a=testonly Automatic update from web-platform-tests [@container] Support container-relative units in media queries Bug: 1223030 Change-Id: I6dd3035be682e35e8ec163315926b9a262f62e78 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3649669 Reviewed-by: Rune Lillesveen <futhark@chromium.org> Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org> Cr-Commit-Position: refs/heads/main@{#1004690} -- wpt-commits: 01e527f1a05fb574348c65ad24c9d3892fa1534a wpt-pr: 34071
testing/web-platform/tests/css/css-contain/container-queries/container-units-media-queries.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/container-units-media-queries.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<title>Container-relative units in @media</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-lengths">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+
+<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>