Fix the handling of the type attribute of HTMLStyleElement

Differential Revision: https://phabricator.services.mozilla.com/D62254

bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1614329
gecko-commit: d2c7a9b66822875ce9cd1ab769f8d90e25b437d9
gecko-integration-branch: autoland
gecko-reviewers: bzbarsky
diff --git a/html/semantics/document-metadata/the-style-element/style_type.svg b/html/semantics/document-metadata/the-style-element/style_type.svg
new file mode 100644
index 0000000..6b0d1e8
--- /dev/null
+++ b/html/semantics/document-metadata/the-style-element/style_type.svg
@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="8000px">
+  <title>&lt;style&gt; type="" edge cases</title>
+  <metadata>
+    <h:link rel="help" href="https://html.spec.whatwg.org/multipage/semantics.html#update-a-style-block"/>
+  </metadata>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+
+  <style>
+  #test1 { color: rgb(0, 128, 0); }
+  </style>
+
+  <style type="">
+  #test2 { color: rgb(0, 128, 0); }
+  </style>
+
+  <style type="TEXT/CsS">
+  #test3 { color: rgb(0, 128, 0); }
+  </style>
+
+  <style type=" text/css ">
+  #test4 { color: rgb(0, 128, 0); }
+  </style>
+
+  <style type="text/css; charset=utf-8">
+  #test5 { color: rgb(0, 128, 0); }
+  </style>
+
+  <h:body>
+    <h:div id="test1"/>
+    <h:div id="test2"/>
+    <h:div id="test3"/>
+    <h:div id="test4"/>
+    <h:div id="test5"/>
+
+    <h:script><![CDATA[
+    "use strict";
+
+    test(() => {
+      assertApplied("test1");
+    }, "With no type attribute, the style should apply");
+
+    test(() => {
+      assertApplied("test2");
+    }, "With an empty type attribute, the style should apply");
+
+    test(() => {
+      assertApplied("test3");
+    }, "With a mixed-case type attribute, the style should apply");
+
+    test(() => {
+      assertNotApplied("test4");
+    }, "With a whitespace-surrounded type attribute, the style should not apply");
+
+    test(() => {
+      assertNotApplied("test5");
+    }, "With a charset parameter in the type attribute, the style should not apply");
+
+    function getColor(id) {
+      return window.getComputedStyle(document.getElementById(id)).color;
+    }
+
+    function assertApplied(id) {
+      assert_equals(getColor(id), "rgb(0, 128, 0)");
+    }
+
+    function assertNotApplied(id) {
+      assert_not_equals(getColor(id), "rgb(0, 128, 0)");
+    }
+    ]]></h:script>
+  </h:body>
+</svg>