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..697e4fc2b3fb7a6fe200524816be99598def8256 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');
+  }
+} /* media not all */

[philipj_slow, 2015/06/25 09:07:41]

Don't need these /* end comments */ I think.

+
+@supports (invalid-css-property: invalid-css-value) {
+  body {
+    background-image: url('do_not_serialize.png');
+  }
+} /* supports (invalid-css-property: invalid-css-value) */
+
+#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');
+  }
+} /* media all */
+
+@supports (background-image: url('brown_background.png')) {

[philipj_slow, 2015/06/25 09:07:41]

Maybe something trivial like display:block so that it's very clear that the URL
used inside the @supports bit isn't the reason it's serialized.

+  #divBrown {
+    background-image: url('brown_background.png');
+  }
+} /* @supports (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>