Retrieve resources from media and supports query rules while serializing

Source/web/tests/data/pageserializer/css/css_test_page.html

Index: Source/web/tests/data/pageserializer/css/css_test_page.html
diff --git a/Source/web/tests/data/pageserializer/css/css_test_page.html b/Source/web/tests/data/pageserializer/css/css_test_page.html
index badff29f68f73ce50db801940325cfdf8340a1cc..4b7cb4ceb22e1bbf311649e6120164b5bdea7947 100644
--- a/Source/web/tests/data/pageserializer/css/css_test_page.html
+++ b/Source/web/tests/data/pageserializer/css/css_test_page.html
@@ -19,6 +19,22 @@
 </style>
 
 <style>
+@media not all {
+  body {
+    background-image: url('do_not_serialize.png');
+  }
+}
+
+@supports (invalid-css-property: invalid-css-value) {
+  body {
+    background-image: url('do_not_serialize.png');
+  }
+}
+
+#nonexistentDiv {
+  background-image: url('do_not_serialize.png');
+}
+
 #divBlue {
   background-image:url('blue_background.png');
 }
@@ -31,6 +47,18 @@ ol {
   list-style-image: url('ol-dot.png');
 }
 
+@media all {
+  #divPink {
+    background-image: url('pink_background.png');
+  }
+}
+
+@supports not (invalid-css-property: invalid-css-value) {
+  #divBrown {
+    background-image: url('brown_background.png');
+  }
+}
+
 </style>
 
 <script>
@@ -82,6 +110,16 @@ This div has a green image as its background.
 This div has a purple image as its background.
 </div>
 
+<!-- Style is defined in a media query -->
+<div id='divPink'>
+This div has a pink image as its background.
+</div>
+
+<!-- Style is defined in a supports feature query -->
+<div id='divBrown'>
+This div has a brown image as its background.
+</div>
+
 Unordered list:<br>
 <ul>
   <li>Blue</li>