HTML: test stylesheet loading text/css requirement

See whatwg/html#3457 for clarifying this in the HTML Standard.
web-platform-tests · Sep 26, 2018 · 16c953f · 16c953f
1 parent 00416a6
commit 16c953f
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 14 deletions.
diff --git a/html/semantics/document-metadata/the-link-element/link-style-error-01.html b/html/semantics/document-metadata/the-link-element/link-style-error-01.html
@@ -4,6 +4,7 @@
 <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-link-element">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
+<script src=/common/get-host-info.sub.js></script>
 <div id="log"></div>
 <div id="test">
 <script>
@@ -31,18 +32,6 @@
   elt.rel = "stylesheet";
   elt.href = "nonexistent:stylesheet.css";
   document.getElementsByTagName("head")[0].appendChild(elt);
-})
-
-var tText = async_test("Should get an error event for a text/plain response.")
-tText.step(function() {
-  var elt = document.createElement("link");
-  elt.onerror = tText.step_func(function() {
-    assert_true(true, "Got error event for 404 error.")
-    tText.done()
-  })
-  elt.onload = tText.unreached_func("load event should not be fired");
-  elt.rel = "stylesheet";
-  elt.href = "../../../../../common/css-red.txt";
-  document.getElementsByTagName("head")[0].appendChild(elt);
-})
+});
 </script>
+<script src=resources/link-style-error.js></script>
diff --git a/html/semantics/document-metadata/the-link-element/link-style-error-limited-quirks.html b/html/semantics/document-metadata/the-link-element/link-style-error-limited-quirks.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//" "">
+<title>link: error events in limited quirks mode</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src=/common/get-host-info.sub.js></script>
+<div id="log"></div>
+<script src=resources/link-style-error.js></script>
diff --git a/html/semantics/document-metadata/the-link-element/link-style-error-quirks.html b/html/semantics/document-metadata/the-link-element/link-style-error-quirks.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML PUBLIC "-//Sun Microsystems Corp.//DTD HotJava Strict HTML//" "">
+<title>link: error events in quirks mode</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src=/common/get-host-info.sub.js></script>
+<div id="log"></div>
+<script src=resources/link-style-error.js></script>
diff --git a/html/semantics/document-metadata/the-link-element/resources/css.py b/html/semantics/document-metadata/the-link-element/resources/css.py
@@ -0,0 +1,7 @@
+def main(request, response):
+  response.add_required_headers = False
+  if "content_type" in request.GET:
+    response.writer.write_header("Content-Type", request.GET.first("content_type"))
+  if "nosniff" in request.GET:
+  	response.writer.write_header("x-content-type-options", "nosniff")
+  response.writer.write_content("body { background:red }")
diff --git a/html/semantics/document-metadata/the-link-element/resources/link-style-error.js b/html/semantics/document-metadata/the-link-element/resources/link-style-error.js
@@ -0,0 +1,47 @@
+["<link>", "@import"].forEach(linkType => {
+  [
+   ["same-origin", "resources/css.py"],
+   ["cross-origin", get_host_info().HTTP_REMOTE_ORIGIN + "/html/semantics/document-metadata/the-link-element/resources/css.py"]
+  ].forEach(originType => {
+    ["no Content-Type", "wrong Content-Type", "broken Content-Type"].forEach(contentType => {
+      ["no nosniff", "nosniff"].forEach(nosniff => {
+        async_test(t => {
+          const l = document.createElement("link");
+          t.add_cleanup(() => l.remove());
+          if (nosniff === "nosniff" || contentType === "wrong Content-Type" && (document.compatMode === "CSS1Compat" || originType[0] === "cross-origin")) {
+            l.onerror = t.step_func_done();
+            l.onload = t.unreached_func("error event should have fired");
+          } else {
+            l.onload = t.step_func_done();
+            l.onerror = t.unreached_func("load event should have fired");
+          }
+          l.rel = "stylesheet";
+          let query = [];
+          if (contentType === "broken Content-Type") {
+            query.push("content_type=oops");
+          } else if (contentType === "wrong Content-Type") {
+            query.push("content_type=text/plain")
+          }
+          if (nosniff === "nosniff") {
+            query.push("nosniff");
+          }
+          let stringQuery = "";
+          query.forEach(val => {
+            if (stringQuery === "") {
+              stringQuery += "?" + val;
+            } else {
+              stringQuery += "&" + val;
+            }
+          });
+          const link = new URL(originType[1] + stringQuery, location).href;
+          if (linkType === "<link>") {
+            l.href = link;
+          } else {
+            l.href = "data:text/css,@import url(" + link + ");";
+          }
+          document.head.appendChild(l);
+        }, "Stylesheet loading using " + linkType + " with " + contentType + ", " + originType[0] + ", and " + nosniff);
+      });
+    });
+  });
+});