From a4ee3fb1f09781b01ff7396091cd108cf0c45a4d Mon Sep 17 00:00:00 2001
From: Tim Ledbetter <tim.ledbetter@ladybird.org>
Date: Fri, 21 Feb 2025 10:19:43 +0000
Subject: [PATCH] LibWeb: Use type attribute to determine `HTMLLinkElement`
 mime type

Previously, the type attribute was ignored on link elements.
---
 Libraries/LibWeb/HTML/HTMLLinkElement.cpp     | 21 +++++++++++++++++--
 Libraries/LibWeb/HTML/HTMLLinkElement.h       |  2 ++
 .../link-type-attribute-ref.html              |  3 +++
 ...d-resource-ascii-case-insensitive-ref.html |  9 ++++++++
 .../the-link-element/link-type-attribute.html |  9 ++++++++
 ...inked-resource-ascii-case-insensitive.html | 14 +++++++++++++
 ...-resource-ascii-case-insensitive-lower.css |  1 +
 ...-resource-ascii-case-insensitive-mixed.css |  1 +
 ...-resource-ascii-case-insensitive-other.css |  1 +
 ...linked-resource-ascii-case-insensitive.css |  3 +++
 10 files changed, 62 insertions(+), 2 deletions(-)
 create mode 100644 Tests/LibWeb/Ref/expected/wpt-import/html/semantics/document-metadata/the-link-element/link-type-attribute-ref.html
 create mode 100644 Tests/LibWeb/Ref/expected/wpt-import/html/semantics/links/linktypes/link-type-stylesheet/process-stylesheet-linked-resource-ascii-case-insensitive-ref.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/html/semantics/document-metadata/the-link-element/link-type-attribute.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/html/semantics/links/linktypes/link-type-stylesheet/process-stylesheet-linked-resource-ascii-case-insensitive.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/html/semantics/links/linktypes/link-type-stylesheet/support/process-stylesheet-linked-resource-ascii-case-insensitive-lower.css
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/html/semantics/links/linktypes/link-type-stylesheet/support/process-stylesheet-linked-resource-ascii-case-insensitive-mixed.css
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/html/semantics/links/linktypes/link-type-stylesheet/support/process-stylesheet-linked-resource-ascii-case-insensitive-other.css
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/html/semantics/links/linktypes/link-type-stylesheet/support/process-stylesheet-linked-resource-ascii-case-insensitive.css

diff --git a/Libraries/LibWeb/HTML/HTMLLinkElement.cpp b/Libraries/LibWeb/HTML/HTMLLinkElement.cpp
index 7e5f295b4e1..164310b6916 100644
--- a/Libraries/LibWeb/HTML/HTMLLinkElement.cpp
+++ b/Libraries/LibWeb/HTML/HTMLLinkElement.cpp
@@ -133,6 +133,17 @@ void HTMLLinkElement::attribute_changed(FlyString const& name, Optional<String>
 {
     Base::attribute_changed(name, old_value, value, namespace_);
 
+    // https://html.spec.whatwg.org/multipage/semantics.html#processing-the-type-attribute:attr-link-type
+    if (name == HTML::AttributeNames::type) {
+        if (value.has_value())
+            m_mime_type = value->to_ascii_lowercase();
+        else {
+            m_mime_type = {};
+        }
+
+        return;
+    }
+
     // 4.6.7 Link types - https://html.spec.whatwg.org/multipage/links.html#linkTypes
     auto old_relationship = m_relationship;
     if (name == HTML::AttributeNames::rel) {
@@ -379,8 +390,14 @@ void HTMLLinkElement::default_fetch_and_process_linked_resource()
 void HTMLLinkElement::process_stylesheet_resource(bool success, Fetch::Infrastructure::Response const& response, Variant<Empty, Fetch::Infrastructure::FetchAlgorithms::ConsumeBodyFailureTag, ByteBuffer> body_bytes)
 {
     // 1. If the resource's Content-Type metadata is not text/css, then set success to false.
-    auto extracted_mime_type = response.header_list()->extract_mime_type();
-    if (!extracted_mime_type.has_value() || extracted_mime_type->essence() != "text/css") {
+    auto mime_type_string = m_mime_type;
+    if (!mime_type_string.has_value()) {
+        auto extracted_mime_type = response.header_list()->extract_mime_type();
+        if (extracted_mime_type.has_value())
+            mime_type_string = extracted_mime_type->essence();
+    }
+
+    if (mime_type_string != "text/css"sv) {
         success = false;
     }
 
diff --git a/Libraries/LibWeb/HTML/HTMLLinkElement.h b/Libraries/LibWeb/HTML/HTMLLinkElement.h
index 70734ea3015..3b909ac8d19 100644
--- a/Libraries/LibWeb/HTML/HTMLLinkElement.h
+++ b/Libraries/LibWeb/HTML/HTMLLinkElement.h
@@ -150,6 +150,8 @@ private:
     unsigned m_relationship { 0 };
     // https://html.spec.whatwg.org/multipage/semantics.html#explicitly-enabled
     bool m_explicitly_enabled { false };
+
+    Optional<String> m_mime_type;
 };
 
 }
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/html/semantics/document-metadata/the-link-element/link-type-attribute-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/html/semantics/document-metadata/the-link-element/link-type-attribute-ref.html
new file mode 100644
index 00000000000..f32472105d5
--- /dev/null
+++ b/Tests/LibWeb/Ref/expected/wpt-import/html/semantics/document-metadata/the-link-element/link-type-attribute-ref.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<p>You should see a green rectangle below</p>
+<div style="width:100px;height:100px;background-color:green"></div>
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/html/semantics/links/linktypes/link-type-stylesheet/process-stylesheet-linked-resource-ascii-case-insensitive-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/html/semantics/links/linktypes/link-type-stylesheet/process-stylesheet-linked-resource-ascii-case-insensitive-ref.html
new file mode 100644
index 00000000000..5ac2432547e
--- /dev/null
+++ b/Tests/LibWeb/Ref/expected/wpt-import/html/semantics/links/linktypes/link-type-stylesheet/process-stylesheet-linked-resource-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/Tests/LibWeb/Ref/input/wpt-import/html/semantics/document-metadata/the-link-element/link-type-attribute.html b/Tests/LibWeb/Ref/input/wpt-import/html/semantics/document-metadata/the-link-element/link-type-attribute.html
new file mode 100644
index 00000000000..f18be736ddc
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/html/semantics/document-metadata/the-link-element/link-type-attribute.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<link rel=match href=../../../../../../expected/wpt-import/html/semantics/document-metadata/the-link-element/link-type-attribute-ref.html>
+<link rel="stylesheet" type="application/javascript" href="data:text/css,div { background-color: red !important; }">
+<link rel="stylesheet" type="ABCtext/css" href="data:text/css,div { background-color: red !important; }">
+<link rel="stylesheet" type="text/cssDEF" href="data:text/css,div { background-color: red !important; }">
+<link rel="stylesheet" type="text/invalid" href="data:text/css,div { background-color: red !important; }">
+<link rel="stylesheet" type="invalid" href="data:text/css,div { background-color: red !important; }">
+<p>You should see a green rectangle below</p>
+<div style="width:100px;height:100px;background-color:green"></div>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/html/semantics/links/linktypes/link-type-stylesheet/process-stylesheet-linked-resource-ascii-case-insensitive.html b/Tests/LibWeb/Ref/input/wpt-import/html/semantics/links/linktypes/link-type-stylesheet/process-stylesheet-linked-resource-ascii-case-insensitive.html
new file mode 100644
index 00000000000..3d34554e73e
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/html/semantics/links/linktypes/link-type-stylesheet/process-stylesheet-linked-resource-ascii-case-insensitive.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="help" href="https://html.spec.whatwg.org/#link-type-stylesheet:process-the-linked-resource">
+<link rel="help" href="https://html.spec.whatwg.org/#content-type">
+<link rel="help" href="https://mimesniff.spec.whatwg.org/#mime-type-representation">
+<link rel="match" href="../../../../../../../expected/wpt-import/html/semantics/links/linktypes/link-type-stylesheet/process-stylesheet-linked-resource-ascii-case-insensitive-ref.html">
+<meta name="assert" content="link@type values for stylesheet resources are ASCII case-insensitive">
+<link rel="stylesheet" href="support/process-stylesheet-linked-resource-ascii-case-insensitive.css">
+<link rel="stylesheet" href="support/process-stylesheet-linked-resource-ascii-case-insensitive-lower.css" type="text/css">
+<link rel="stylesheet" href="support/process-stylesheet-linked-resource-ascii-case-insensitive-mixed.css" type="TeXt/CsS">
+<link rel="stylesheet" href="support/process-stylesheet-linked-resource-ascii-case-insensitive-other.css" type="text/cſs">
+<p id="z-lower">text/css treated as CSS?
+<p id="z-mixed">TeXt/CsS treated as CSS?
+<p id="z-other">text/cſs ignored?
diff --git a/Tests/LibWeb/Ref/input/wpt-import/html/semantics/links/linktypes/link-type-stylesheet/support/process-stylesheet-linked-resource-ascii-case-insensitive-lower.css b/Tests/LibWeb/Ref/input/wpt-import/html/semantics/links/linktypes/link-type-stylesheet/support/process-stylesheet-linked-resource-ascii-case-insensitive-lower.css
new file mode 100644
index 00000000000..a19c9dfd72d
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/html/semantics/links/linktypes/link-type-stylesheet/support/process-stylesheet-linked-resource-ascii-case-insensitive-lower.css
@@ -0,0 +1 @@
+#z-lower:after { content: "PASS"; color: green; }
diff --git a/Tests/LibWeb/Ref/input/wpt-import/html/semantics/links/linktypes/link-type-stylesheet/support/process-stylesheet-linked-resource-ascii-case-insensitive-mixed.css b/Tests/LibWeb/Ref/input/wpt-import/html/semantics/links/linktypes/link-type-stylesheet/support/process-stylesheet-linked-resource-ascii-case-insensitive-mixed.css
new file mode 100644
index 00000000000..7389ea1a1a3
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/html/semantics/links/linktypes/link-type-stylesheet/support/process-stylesheet-linked-resource-ascii-case-insensitive-mixed.css
@@ -0,0 +1 @@
+#z-mixed:after { content: "PASS"; color: green; }
diff --git a/Tests/LibWeb/Ref/input/wpt-import/html/semantics/links/linktypes/link-type-stylesheet/support/process-stylesheet-linked-resource-ascii-case-insensitive-other.css b/Tests/LibWeb/Ref/input/wpt-import/html/semantics/links/linktypes/link-type-stylesheet/support/process-stylesheet-linked-resource-ascii-case-insensitive-other.css
new file mode 100644
index 00000000000..a6c2616d868
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/html/semantics/links/linktypes/link-type-stylesheet/support/process-stylesheet-linked-resource-ascii-case-insensitive-other.css
@@ -0,0 +1 @@
+#z-other:after { content: "FAIL"; color: red; }
diff --git a/Tests/LibWeb/Ref/input/wpt-import/html/semantics/links/linktypes/link-type-stylesheet/support/process-stylesheet-linked-resource-ascii-case-insensitive.css b/Tests/LibWeb/Ref/input/wpt-import/html/semantics/links/linktypes/link-type-stylesheet/support/process-stylesheet-linked-resource-ascii-case-insensitive.css
new file mode 100644
index 00000000000..5d647d0f2ea
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/html/semantics/links/linktypes/link-type-stylesheet/support/process-stylesheet-linked-resource-ascii-case-insensitive.css
@@ -0,0 +1,3 @@
+p:after { font-weight: bold; }
+p:after { content: "FAIL"; color: red; }
+#z-other:after { content: "PASS"; color: green; }