Add a few tests for whether CSS subresources are critical

web-platform-tests · Aug 25, 2017 · 1472888 · 1472888
1 parent 2352285
commit 1472888
Show file tree

Hide file tree

Showing 6 changed files with 121 additions and 0 deletions.
diff --git a/unspecified-css-subresources/background-image.html b/unspecified-css-subresources/background-image.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>background-image blocks load</title>
+<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>
diff --git a/unspecified-css-subresources/font-face-unused.html b/unspecified-css-subresources/font-face-unused.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>unused @font-face blocks load</title>
+<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>
diff --git a/unspecified-css-subresources/font-face-used.html b/unspecified-css-subresources/font-face-used.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>used @font-face blocks load</title>
+<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>XXX</div>
+<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>
diff --git a/unspecified-css-subresources/import.css b/unspecified-css-subresources/import.css
@@ -0,0 +1,3 @@
+#foo {
+  color: blue;
+}
diff --git a/unspecified-css-subresources/import.html b/unspecified-css-subresources/import.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>@import blocks load</title>
+<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>XXX</div>
+<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>
diff --git a/unspecified-css-subresources/list-style-image.html b/unspecified-css-subresources/list-style-image.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>list-style blocks load</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<ul id=foo><li>XXX</ul>
+<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>