Adds test for checking media queries in stylesheets

servo · Jan 29, 2017 · c1eb6ae · c1eb6ae
1 parent b5c94ba
commit c1eb6ae
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 0 deletions.
diff --git a/tests/wpt/mozilla/meta/MANIFEST.json b/tests/wpt/mozilla/meta/MANIFEST.json
@@ -6788,6 +6788,12 @@
             "url": "/_mozilla/css/offset_properties_inline.html"
           }
         ],
+        "css/stylesheet_media_queries.html": [
+          {
+            "path": "css/stylesheet_media_queries.html",
+            "url": "/_mozilla/css/stylesheet_media_queries.html"
+          }
+        ],
         "css/test_font_family_parsing.html": [
           {
             "path": "css/test_font_family_parsing.html",

diff --git a/tests/wpt/mozilla/meta/css/stylesheet_media_queries.html.ini b/tests/wpt/mozilla/meta/css/stylesheet_media_queries.html.ini
@@ -0,0 +1,4 @@
+[stylesheet_media_queries.html.ini]
+  type: testharness
+  expected: FAIL
+  bug: https://github.com/servo/servo/issues/14719
diff --git a/tests/wpt/mozilla/tests/css/iframe_for_media_queries.html b/tests/wpt/mozilla/tests/css/iframe_for_media_queries.html
@@ -0,0 +1,17 @@
+<html>
+    <head>
+    <style media="(min-width: 400px)">
+    h1 {
+        background: rgb(255, 0, 0);
+    }
+    </style>
+    <style media="(max-width: 399px)">
+    h1 {
+        background: rgb(0, 255, 0);
+    }
+    </style>
+    </head>
+    <body>
+        <h1 id="testelement">Header</h1>
+    </body>
+</html>
diff --git a/tests/wpt/mozilla/tests/css/stylesheet_media_queries.html b/tests/wpt/mozilla/tests/css/stylesheet_media_queries.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Test: Media query correctly forces style invalidation</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<iframe id="myframe" src="iframe_for_media_queries.html" height="500" width="500">
+</iframe>
+<script>
+var test = async_test("Media queries within stylesheets");
+window.onload = test.step_func(function() {
+  var frame = document.getElementById("myframe");
+  var frameDoc = frame.contentWindow.document;
+  var element = frameDoc.getElementById("testelement");
+  assert_equals(frame.contentWindow.getComputedStyle(element).backgroundColor, "rgb(255, 0, 0)");
+  frame.width = "300";
+  frameDoc.documentElement.offsetWidth; // Force layout
+  window.requestAnimationFrame(test.step_func_done(function () {
+      assert_equals(frame.contentWindow.getComputedStyle(element).backgroundColor, "rgb(0, 255, 0)");
+  }));
+});
+</script>