summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/html/semantics/document-metadata/the-style-element
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/html/semantics/document-metadata/the-style-element')
-rw-r--r--testing/web-platform/tests/html/semantics/document-metadata/the-style-element/historical.html14
-rw-r--r--testing/web-platform/tests/html/semantics/document-metadata/the-style-element/html_style_in_comment-ref.html18
-rw-r--r--testing/web-platform/tests/html/semantics/document-metadata/the-style-element/html_style_in_comment.xhtml18
-rw-r--r--testing/web-platform/tests/html/semantics/document-metadata/the-style-element/mutations.window.js48
-rw-r--r--testing/web-platform/tests/html/semantics/document-metadata/the-style-element/style-error-01.html32
-rw-r--r--testing/web-platform/tests/html/semantics/document-metadata/the-style-element/style-load-after-mutate.html16
-rw-r--r--testing/web-platform/tests/html/semantics/document-metadata/the-style-element/style_disabled.html39
-rw-r--r--testing/web-platform/tests/html/semantics/document-metadata/the-style-element/style_events.html36
-rw-r--r--testing/web-platform/tests/html/semantics/document-metadata/the-style-element/style_load_async.html25
-rw-r--r--testing/web-platform/tests/html/semantics/document-metadata/the-style-element/style_load_event.html28
-rw-r--r--testing/web-platform/tests/html/semantics/document-metadata/the-style-element/style_media.html40
-rw-r--r--testing/web-platform/tests/html/semantics/document-metadata/the-style-element/style_media_change.html43
-rw-r--r--testing/web-platform/tests/html/semantics/document-metadata/the-style-element/style_non_matching_media.html20
-rw-r--r--testing/web-platform/tests/html/semantics/document-metadata/the-style-element/style_type_change.html39
-rw-r--r--testing/web-platform/tests/html/semantics/document-metadata/the-style-element/style_type_html.html71
-rw-r--r--testing/web-platform/tests/html/semantics/document-metadata/the-style-element/style_type_svg.svg75
-rw-r--r--testing/web-platform/tests/html/semantics/document-metadata/the-style-element/support/css-red.txt1
-rw-r--r--testing/web-platform/tests/html/semantics/document-metadata/the-style-element/update-style-block-ascii-case-insensitive-ref.html9
-rw-r--r--testing/web-platform/tests/html/semantics/document-metadata/the-style-element/update-style-block-ascii-case-insensitive.html16
19 files changed, 588 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/historical.html b/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/historical.html
new file mode 100644
index 0000000000..d475f5b3c8
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/historical.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<title>Historical style element features should not be supported</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+function t(property) {
+ test(function() {
+ assert_false(property in document.createElement('style'));
+ }, 'style.' + property + ' should not be supported');
+}
+// added in https://github.com/whatwg/html/commit/29cf39d2163cfc85b67409f4e10390619ffb2b40
+// removed in https://github.com/whatwg/html/commit/c2a3b2a2e3db49c14b486a5e99acf7d10cfe8443
+t('scoped');
+</script>
diff --git a/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/html_style_in_comment-ref.html b/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/html_style_in_comment-ref.html
new file mode 100644
index 0000000000..999383c769
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/html_style_in_comment-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>[style] Reference file</title>
+<link rel="author" title="Intel" href="http://www.intel.com">
+<style>
+ h4 {
+ color: green;
+ }
+</style>
+<body>
+ <p>
+ This page tests that Style written inside HTML comment is not applied
+ </p>
+ This test passes if the text below is <b>Green. NOT Red.</b>
+ <h4>
+ This is some text.
+ </h4>
+</body>
diff --git a/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/html_style_in_comment.xhtml b/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/html_style_in_comment.xhtml
new file mode 100644
index 0000000000..839548f01c
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/html_style_in_comment.xhtml
@@ -0,0 +1,18 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<link rel="match" href="html_style_in_comment-ref.html"/>
+<style type="text/css">
+h4 {color: green}
+<!--
+h4 {color: red}
+-->
+</style>
+</head>
+<body>
+<p> This page tests that Style written inside HTML comment is not applied</p>
+This test passes if the text below is <b>Green. NOT Red.</b>
+<h4>
+This is some text.
+</h4>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/mutations.window.js b/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/mutations.window.js
new file mode 100644
index 0000000000..1c93b40394
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/mutations.window.js
@@ -0,0 +1,48 @@
+test(t => {
+ const style = document.body.appendChild(document.createElement("style"));
+ const sheet = style.sheet;
+ t.add_cleanup(() => style.remove());
+ assert_not_equals(sheet, null);
+ style.appendChild(new Comment());
+ assert_not_equals(sheet, style.sheet);
+}, "Mutating the style element: inserting a Comment node");
+
+test(t => {
+ const style = document.body.appendChild(document.createElement("style"));
+ t.add_cleanup(() => style.remove());
+ const comment = style.appendChild(new Comment());
+ const sheet = style.sheet;
+ comment.appendData("x");
+ assert_not_equals(sheet, style.sheet);
+}, "Mutating the style element: mutating a Comment node");
+
+test(t => {
+ const style = document.body.appendChild(document.createElement("style"));
+ t.add_cleanup(() => style.remove());
+ const text1 = style.appendChild(new Text("1"));
+ const text2 = style.appendChild(new Text("2"));
+ assert_equals(style.textContent, "12");
+ assert_equals(style.childNodes.length, 2);
+ const sheet = style.sheet;
+ style.normalize();
+ assert_equals(style.childNodes.length, 1);
+ assert_not_equals(sheet, style.sheet);
+}, "Mutating the style element: using normalize()");
+
+test(t => {
+ const style = document.body.appendChild(document.createElement("style"));
+ t.add_cleanup(() => style.remove());
+ const comment = style.appendChild(new Comment());
+ const sheet = style.sheet;
+ comment.remove();
+ assert_not_equals(sheet, style.sheet);
+}, "Mutating the style element: removing a Comment node");
+
+test(t => {
+ const style = document.body.appendChild(document.createElement("style"));
+ const sheet = style.sheet;
+ t.add_cleanup(() => style.remove());
+ assert_not_equals(sheet, null);
+ style.appendChild(new DocumentFragment());
+ assert_equals(sheet, style.sheet);
+}, "Mutating the style element: inserting an empty DocumentFragment node");
diff --git a/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/style-error-01.html b/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/style-error-01.html
new file mode 100644
index 0000000000..0bdef0e175
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/style-error-01.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<title>style: error events</title>
+<link rel="author" title="Ms2ger" href="mailto:ms2ger@gmail.com">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-style-element">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="log"></div>
+<div id="test">
+<script>
+//var t404 = async_test("Should get an error event for a 404 error.")
+//t404.step(function() {
+// var elt = document.createElement("style");
+// elt.onerror = t404.step_func(function() {
+// assert_true(true, "Got error event for 404 error.")
+// t404.done()
+// })
+// elt.appendChild(
+// document.createTextNode('@import 404 error;'));
+// 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("style");
+ elt.onerror = tText.step_func(function() {
+ assert_true(true, "Got error event for 404 error.")
+ tText.done()
+ })
+ elt.appendChild(
+ document.createTextNode('@import "support/css-red.txt";'));
+ document.getElementsByTagName("head")[0].appendChild(elt);
+})
+</script>
diff --git a/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/style-load-after-mutate.html b/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/style-load-after-mutate.html
new file mode 100644
index 0000000000..901c5c1ac2
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/style-load-after-mutate.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<title>The 'load' event on the style element should still fire after mutation</title>
+<link rel="help" href="https://crbug.com/1323319">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+promise_test(async () => {
+ const style = document.createElement('style');
+ document.head.appendChild(style);
+ style.appendChild(document.createTextNode('@import url(/support/css-red.txt);'));
+ style.appendChild(document.createTextNode('body {color: green; }'));
+
+ // The 'load' event should fire.
+ await new Promise(resolve => style.onload = resolve);
+});
+</script>
diff --git a/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/style_disabled.html b/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/style_disabled.html
new file mode 100644
index 0000000000..1a88bf1305
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/style_disabled.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>HTML Test: The style should not be applied if it is disabled</title>
+ <link rel="author" title="Intel" href="http://www.intel.com/">
+ <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-style-element">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <style>
+ #test {
+ width: 100px;
+ }
+ </style>
+ <style id="style">
+ #test {
+ width: 50px;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="log"></div>
+ <div id="test"></div>
+ <script>
+ test(function() {
+ var testElement = document.getElementById("test");
+ var style = document.getElementById("style");
+ var width1, width2;
+
+ width1 = window.getComputedStyle(testElement)["width"];
+ assert_equals(width1, "50px", "The style should be applied.");
+
+ style.disabled = true;
+ width2 = window.getComputedStyle(testElement)["width"];
+ assert_equals(width2, "100px", "The style should not be applied.");
+ }, "The style is not applied when it is disabled");
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/style_events.html b/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/style_events.html
new file mode 100644
index 0000000000..5e07e50882
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/style_events.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>HTML Test: The style events</title>
+ <link rel="author" title="Intel" href="http://www.intel.com/">
+ <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-style-element">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script>
+ var tLoad = async_test("If the style is loaded successfully, the 'load' event must be fired");
+ var tError = async_test("If the style is loaded unsuccessfully, the 'error' event must be fired");
+
+ function onstyleload(e) {
+ tLoad.done();
+ }
+
+ function onstyleerror(e) {
+ tError.done();
+ }
+ </script>
+ <style onload="onstyleload()">
+ #test {
+ height: 100px;
+ width: 100px;
+ }
+ </style>
+ <style onerror="onstyleerror()">
+ @import url(nonexistent.css);
+ </style>
+ </head>
+ <body>
+ <div id="log"></div>
+ <div id="test"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/style_load_async.html b/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/style_load_async.html
new file mode 100644
index 0000000000..ef8ac89c46
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/style_load_async.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>Style load event should be async</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+ var t = async_test("style load should be async");
+ var sync = true;
+ function check() {
+ assert_false(sync);
+ t.done();
+ }
+</script>
+<style onload="t.step(check)">
+</style>
+<script>
+ sync = false
+</script>
+
+<body>
+ <div id="log"></div>
+ <div id="test"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/style_load_event.html b/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/style_load_event.html
new file mode 100644
index 0000000000..d852661791
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/style_load_event.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>HTML Test: The style load event should fire when textContent is changed</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/semantics.html#update-a-style-block">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<script>
+ var loadCount = 0;
+ function load() { loadCount++; }
+</script>
+
+<style id=target onload="load()">
+ .box { color:red; }
+</style>
+<div class='box'>Box</div>
+
+<script>
+window.onload = () => {
+ const target = document.getElementById('target');
+ promise_test(async t => {
+ assert_equals(loadCount,1,"Style element should have loaded once by now");
+ target.textContent = `.box { color: green; }`;
+ await new Promise(resolve => target.addEventListener('load', resolve));
+ assert_equals(loadCount,2,"Style element should fire the load event when textContent changes");
+ },"style load event should fire when textContent changed");
+};
+</script>
diff --git a/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/style_media.html b/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/style_media.html
new file mode 100644
index 0000000000..04bcbc53ef
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/style_media.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>HTML Test: The style information must be applied to the environment specified by the media attribute</title>
+ <link rel="author" title="Intel" href="http://www.intel.com/">
+ <link rel="help" href="https://html.spec.whatwg.org/multipage/#attr-style-media">
+ <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-style-element">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <style>
+ #test {
+ width: 100px;
+ }
+ </style>
+ <style id="style">
+ #test {
+ width: 50px;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="log"></div>
+ <div id="test"></div>
+ <script>
+ test(function() {
+ var testElement = document.getElementById("test");
+ var style = document.getElementById("style");
+ var width1, width2;
+
+ width1 = window.getComputedStyle(testElement)["width"];
+ assert_equals(width1, "50px", "The style should be applied.");
+
+ style.media = "print";
+ width2 = window.getComputedStyle(testElement)["width"];
+ assert_equals(width2, "100px", "The style should not be applied.");
+ }, "The style information must be applied to the environment specified by the media attribute");
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/style_media_change.html b/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/style_media_change.html
new file mode 100644
index 0000000000..8b7e8440d5
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/style_media_change.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>Dynamically changing HTMLStyleElement.media should change the rendering accordingly</title>
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-style-element">
+ <style>
+ span {
+ color: red;
+ }
+ </style>
+ <style id="text-style" media="none">
+ span {
+ color: green;
+ }
+ </style>
+ <style id="body-style" media="aural">
+ body {
+ color: green;
+ }
+ </style>
+ </head>
+ <body>
+ <span>text</span>
+ <script>
+ test(function() {
+ var element = document.querySelector("span");
+ assert_equals(getComputedStyle(element).color, "rgb(255, 0, 0)");
+ document.getElementById("text-style").media = 'all';
+ assert_equals(getComputedStyle(element).color, "rgb(0, 128, 0)");
+ }, "change media value dynamically");
+
+ test(function() {
+ var style = document.getElementById("body-style");
+ assert_not_equals(getComputedStyle(document.querySelector("body")).color, "rgb(0, 128, 0)");
+ style.removeAttribute("media");
+ assert_equals(getComputedStyle(document.querySelector("body")).color, "rgb(0, 128, 0)");
+ }, "removing media attribute");
+ </script>
+ </body>
+</html> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/style_non_matching_media.html b/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/style_non_matching_media.html
new file mode 100644
index 0000000000..74d3554b13
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/style_non_matching_media.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>HTML Test: Non-matching media type should have stylesheet</title>
+ <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-style-element">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <style media="unknown">
+ body { color: green }
+ </style>
+ </head>
+ <body>
+ <script>
+ test(function() {
+ assert_equals(document.styleSheets.length, 1);
+ });
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/style_type_change.html b/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/style_type_change.html
new file mode 100644
index 0000000000..a19b3c86d7
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/style_type_change.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>Dynamically changing HTMLStyleElement.type should change the rendering accordingly</title>
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-style-element">
+ <style type="no/mime">
+ body { color: green }
+ </style>
+ </head>
+ <body>
+ Text content.
+ <script>
+ var style = document.querySelector("style");
+ test(function() {
+ assert_equals(document.styleSheets.length, 0);
+ }, "Check initial styleSheets length type");
+
+ test(function() {
+ assert_not_equals(getComputedStyle(document.querySelector("body")).color, "rgb(0, 128, 0)");
+ assert_equals(document.styleSheets.length, 0);
+ style.type = "text/css";
+ assert_equals(getComputedStyle(document.querySelector("body")).color, "rgb(0, 128, 0)");
+ assert_equals(document.styleSheets.length, 1);
+ }, "Change type from invalid type to valid type");
+
+ test(function() {
+ assert_equals(getComputedStyle(document.querySelector("body")).color, "rgb(0, 128, 0)");
+ assert_equals(document.styleSheets.length, 1);
+ style.type = "no/mime";
+ assert_not_equals(getComputedStyle(document.querySelector("body")).color, "rgb(0, 128, 0)");
+ assert_equals(document.styleSheets.length, 0);
+ }, "Change type from valid type to invalid type");
+
+ </script>
+ </body>
+</html> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/style_type_html.html b/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/style_type_html.html
new file mode 100644
index 0000000000..cc48868bd7
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/style_type_html.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>&lt;style> type="" edge cases</title>
+<link rel="author" title="Domenic Denicola" href="mailto:d@domenic.me">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/semantics.html#update-a-style-block">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<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>
+
+<body>
+
+<div id="test1"></div>
+<div id="test2"></div>
+<div id="test3"></div>
+<div id="test4"></div>
+<div id="test5"></div>
+
+<script>
+"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)");
+}
+</script>
diff --git a/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/style_type_svg.svg b/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/style_type_svg.svg
new file mode 100644
index 0000000000..6b0d1e874e
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/style_type_svg.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>
diff --git a/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/support/css-red.txt b/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/support/css-red.txt
new file mode 100644
index 0000000000..9ef04cbd12
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/support/css-red.txt
@@ -0,0 +1 @@
+html { color: red; }
diff --git a/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/update-style-block-ascii-case-insensitive-ref.html b/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/update-style-block-ascii-case-insensitive-ref.html
new file mode 100644
index 0000000000..5ac2432547
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/update-style-block-ascii-case-insensitive-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+p:after { font-weight: bold; }
+p:after { content: "PASS"; color: green; }
+</style>
+<p>text/css treated as CSS?
+<p>TeXt/CsS treated as CSS?
+<p>text/cſs ignored?
diff --git a/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/update-style-block-ascii-case-insensitive.html b/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/update-style-block-ascii-case-insensitive.html
new file mode 100644
index 0000000000..3c5cd152d6
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/update-style-block-ascii-case-insensitive.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="help" href="https://html.spec.whatwg.org/#update-a-style-block">
+<link rel="match" href="update-style-block-ascii-case-insensitive-ref.html">
+<meta name="assert" content="style@type values are ASCII case-insensitive">
+<style>
+p:after { font-weight: bold; }
+p:after { content: "FAIL"; color: red; }
+#c:after { content: "PASS"; color: green; }
+</style>
+<style type="text/css">#a:after { content: "PASS"; color: green; }</style>
+<style type="TeXt/CsS">#b:after { content: "PASS"; color: green; }</style>
+<style type="text/cſs">#c:after { content: "FAIL"; color: red; }</style>
+<p id="a">text/css treated as CSS?
+<p id="b">TeXt/CsS treated as CSS?
+<p id="c">text/cſs ignored?