Add a few tests for whether CSS subresources are critical

Author: gsnedders

unspecified-css-subresources/background-image.html

@@ -0,0 +1,24 @@
+>
+<meta charset="utf-8">
+<title>background-image blocks loadtitle>
+<script src="/resources/testharness.js">script>
+<script src="/resources/testharnessreport.js">script>
+<div id=foo>div>
+<style>
+#foo {
+  width: 100px;
+  height: 100px;
+  background: url("/images/blue.png?pipe=trickle(d5)");
+}
+style>
+<script>
+var t1 = performance.timing.responseStart;
+
+async_test(function(t) {
+window.addEventListener("load", t.step_func_done(function() {
+    var t2 = Date.now();
+    var diff = t2 - t1;
+    assert_greater_than(diff, 5000, "ms after style");
+  }));
+}, "load waits for background-image");
+script>

unspecified-css-subresources/font-face-unused.html

@@ -0,0 +1,22 @@
+>
+<meta charset="utf-8">
+<title>unused @font-face blocks loadtitle>
+<script src="/resources/testharness.js">script>
+<script src="/resources/testharnessreport.js">script>
+<style>
+@font-face {
+  font-family: Ahem;
+  src: url("/css/fonts/ahem/ahem.ttf?pipe=trickle(d5)");
+}
+style>
+<script>
+var t1 = performance.timing.responseStart;
+
+async_test(function(t) {
+window.addEventListener("load", t.step_func_done(function() {
+    var t2 = Date.now();
+    var diff = t2 - t1;
+    assert_less_than(diff, 5000, "ms after style");
+  }));
+}, "load doesn't wait for unused @font-face");
+script>

unspecified-css-subresources/font-face-used.html

@@ -0,0 +1,26 @@
+>
+<meta charset="utf-8">
+<title>used @font-face blocks loadtitle>
+<script src="/resources/testharness.js">script>
+<script src="/resources/testharnessreport.js">script>
+<style>
+@font-face {
+  font-family: Ahem;
+  src: url("/css/fonts/ahem/ahem.ttf?pipe=trickle(d5)");
+}
+#foo {
+  font: 25px/1 Ahem;
+}
+style>
+<div id=foo>XXXdiv>
+<script>
+var t1 = performance.timing.responseStart;
+
+async_test(function(t) {
+window.addEventListener("load", t.step_func_done(function() {
+    var t2 = Date.now();
+    var diff = t2 - t1;
+    assert_greater_than(diff, 5000, "ms after style");
+  }));
+}, "load waits for used @font-face");
+script>

unspecified-css-subresources/import.css

@@ -0,0 +1,3 @@
+#foo {
+  color: blue;
+}

unspecified-css-subresources/import.html

@@ -0,0 +1,24 @@
+>
+<meta charset="utf-8">
+<title>@import blocks loadtitle>
+<script src="/resources/testharness.js">script>
+<script src="/resources/testharnessreport.js">script>
+<script>
+script>
+<style>
+@import "import.css?pipe=trickle(d5)";
+style>
+<div id=foo>XXXdiv>
+<script>
+var t1 = performance.timing.responseStart;
+
+async_test(function(t) {
+  window.addEventListener("load", t.step_func_done(function() {
+    var t2 = Date.now();
+    var diff = t2 - t1;
+    assert_greater_than(diff, 5000, "ms after style");
+    var style = getComputedStyle(document.querySelector("#foo"));
+    assert_equals(style.getPropertyValue("color"), "rgb(0, 0, 255)", "#foo.color");
+  }));
+}, "load waits for @import");
+script>

unspecified-css-subresources/list-style-image.html

@@ -0,0 +1,22 @@
+>
+<meta charset="utf-8">
+<title>list-style blocks loadtitle>
+<script src="/resources/testharness.js">script>
+<script src="/resources/testharnessreport.js">script>
+<ul id=foo><li>XXXul>
+<style>
+#foo {
+  list-style: url("/images/blue.png?pipe=trickle(d5)");
+}
+style>
+<script>
+var t1 = performance.timing.responseStart;
+
+async_test(function(t) {
+window.addEventListener("load", t.step_func_done(function() {
+    var t2 = Date.now();
+    var diff = t2 - t1;
+    assert_greater_than(diff, 5000, "ms after style");
+  }));
+}, "load waits for list-style");
+script>