diff --git a/components/style/stylist.rs b/components/style/stylist.rs
index 1f7c3cb913b..ab2a9fc14fe 100644
--- a/components/style/stylist.rs
+++ b/components/style/stylist.rs
@@ -458,6 +458,11 @@ impl Stylist {
             false
         }
         self.is_device_dirty |= stylesheets.iter().any(|stylesheet| {
+            let mq = stylesheet.media.read();
+            if mq.evaluate(&self.device) != mq.evaluate(&device) {
+                return true
+            }
+
             mq_eval_changed(&stylesheet.rules.read().0, &self.device, &device)
         });
 
diff --git a/tests/wpt/mozilla/meta/MANIFEST.json b/tests/wpt/mozilla/meta/MANIFEST.json
index 72182893cfc..3f703020e7c 100644
--- a/tests/wpt/mozilla/meta/MANIFEST.json
+++ b/tests/wpt/mozilla/meta/MANIFEST.json
@@ -6812,6 +6812,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
new file mode 100644
index 00000000000..04f59b1c1a8
--- /dev/null
+++ 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
new file mode 100644
index 00000000000..b42f932e07c
--- /dev/null
+++ 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
new file mode 100644
index 00000000000..49956367a16
--- /dev/null
+++ 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>
