Bug 1740402 [wpt PR 31576] - [css-conditional-3] @media applies immed…

…iately after change in condition, a=testonly Automatic update from web-platform-tests [css-conditional-3] @media applies immediately after change in condition -- wpt-commits: 8989bf77747f174a99157edfa493b73a293233c4 wpt-pr: 31576
dothq · Nov 15, 2021 · f6d98fa · f6d98fa
1 parent d887d8f
commit f6d98fa
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 0 deletions.
diff --git a/testing/web-platform/tests/css/css-conditional/at-media-dynamic-001.html b/testing/web-platform/tests/css/css-conditional/at-media-dynamic-001.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html class="reftest-wait">
+<title>CSS Test (Conditional Rules): Rule application is immediate on condition change</title>
+<meta name="assert"
+    content="Test passes if rules within @media are applied when its condition changes to match.">
+<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+<link rel="help" href="https://www.w3.org/TR/css-conditional-3/#processing">
+<link rel="match" href="at-supports-001-ref.html">
+
+<style>
+iframe {
+  border: none;
+  width: 200px;
+  height: 100px;
+}
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<iframe id=frame src="support/at-media-dynamic-001-inner.html"></iframe>
+
+<script>
+  var handler = function () {
+    document.getElementById("frame").style.width = "100px";
+    document.documentElement.classList = "";
+  };
+  document.addEventListener("TestRendered", handler);
+</script>
diff --git a/testing/web-platform/tests/css/css-conditional/support/at-media-dynamic-001-inner.html b/testing/web-platform/tests/css/css-conditional/support/at-media-dynamic-001-inner.html
@@ -0,0 +1,8 @@
+<!doctype html>
+<title>Reftest Reference</title>
+<style>
+  html { background: red; overflow: hidden; }
+  @media (max-width: 100px) {
+    html { background: green; }
+  }
+</style>