From ed93c318ea694da22ab23080a68b7f6240ed997f Mon Sep 17 00:00:00 2001
From: Marcos Caceres <marcos@marcosc.com>
Date: Fri, 29 Sep 2023 03:29:28 -0700
Subject: [PATCH] Implement updated TextTrackCue constructor proposal
 https://bugs.webkit.org/show_bug.cgi?id=262053 rdar://116002871

Reviewed by Eric Carlson.

Implements spec changes suggested at:
https://github.com/whatwg/html/pull/9771

Specifically:

 * supports `b` and `i` elements, to match WebVTT
 * drops support for allowing `img` in the cue fragment
 * implements more robust error checking to prevent malformed ::cue and :cuebackground hierarchies
 * As such, ::tagPseudoObjects() can now throw
 * Switch from InvalidStateError to InvalidNodeTypeError for when required attributes are missing
 * implements cuebackground and cue global attributes

* LayoutTests/imported/w3c/web-platform-tests/custom-elements/reactions/HTMLElement-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/custom-elements/reactions/HTMLElement.html:
* LayoutTests/imported/w3c/web-platform-tests/html/dom/elements/global-attributes/cue-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/html/dom/elements/global-attributes/cue.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/html/dom/elements/global-attributes/cuebackground-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/html/dom/elements/global-attributes/cuebackground.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/html/semantics/embedded-content/media-elements/historical-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/html/semantics/embedded-content/media-elements/historical.html:
* LayoutTests/imported/w3c/web-platform-tests/html/semantics/embedded-content/media-elements/interfaces/TextTrackCue/constructor-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/html/semantics/embedded-content/media-elements/interfaces/TextTrackCue/constructor.html:
* LayoutTests/inspector/model/remote-object/dom-expected.txt:
* LayoutTests/media/track/texttrackcue/texttrackcue-constructor-expected.txt:
* LayoutTests/media/track/texttrackcue/texttrackcue-constructor.html:
* Source/WebCore/html/HTMLAttributeNames.in:
* Source/WebCore/html/HTMLElement.idl:
* Source/WebCore/html/track/TextTrackCue.cpp:
(WebCore::isLegalNode):
(WebCore::tagPseudoObjects):
(WebCore::removePseudoAttributes):
(WebCore::TextTrackCue::create):
(WebCore::TextTrackCue::setPauseOnExit):
(WebCore::cueAttributName): Deleted.
(WebCore::cueBackgroundAttributName): Deleted.

Canonical link: https://commits.webkit.org/268644@main
---
 .../reactions/HTMLElement-expected.txt        |   4 +
 .../reactions/HTMLElement.html                |   3 +-
 .../global-attributes/cue-expected.txt        |  25 +
 .../dom/elements/global-attributes/cue.html   | 112 ++++
 .../cuebackground-expected.txt                |  25 +
 .../global-attributes/cuebackground.html      | 110 ++++
 .../media-elements/historical-expected.txt    |   1 -
 .../media-elements/historical.html            |   7 -
 .../TextTrackCue/constructor-expected.txt     | 147 ++++-
 .../interfaces/TextTrackCue/constructor.html  | 607 +++++++++++++++++-
 .../model/remote-object/dom-expected.txt      |   2 +-
 .../texttrackcue-constructor-expected.txt     |   2 +-
 .../texttrackcue-constructor.html             |   9 +-
 Source/WebCore/html/HTMLAttributeNames.in     |   2 +
 Source/WebCore/html/HTMLElement.idl           |   4 +
 Source/WebCore/html/track/TextTrackCue.cpp    |  69 +-
 16 files changed, 1069 insertions(+), 60 deletions(-)
 create mode 100644 LayoutTests/imported/w3c/web-platform-tests/html/dom/elements/global-attributes/cue-expected.txt
 create mode 100644 LayoutTests/imported/w3c/web-platform-tests/html/dom/elements/global-attributes/cue.html
 create mode 100644 LayoutTests/imported/w3c/web-platform-tests/html/dom/elements/global-attributes/cuebackground-expected.txt
 create mode 100644 LayoutTests/imported/w3c/web-platform-tests/html/dom/elements/global-attributes/cuebackground.html

diff --git a/LayoutTests/imported/w3c/web-platform-tests/custom-elements/reactions/HTMLElement-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/custom-elements/reactions/HTMLElement-expected.txt
index fc0e54a15b2e4..9deb712ef7105 100644
--- a/LayoutTests/imported/w3c/web-platform-tests/custom-elements/reactions/HTMLElement-expected.txt
+++ b/LayoutTests/imported/w3c/web-platform-tests/custom-elements/reactions/HTMLElement-expected.txt
@@ -1,4 +1,8 @@
 
+PASS cue on HTMLElement must enqueue an attributeChanged reaction when adding cue content attribute
+PASS cue on HTMLElement must enqueue an attributeChanged reaction when replacing an existing attribute
+PASS cuebackground on HTMLElement must enqueue an attributeChanged reaction when adding cuebackground content attribute
+PASS cuebackground on HTMLElement must enqueue an attributeChanged reaction when replacing an existing attribute
 PASS title on HTMLElement must enqueue an attributeChanged reaction when adding title content attribute
 PASS title on HTMLElement must enqueue an attributeChanged reaction when replacing an existing attribute
 PASS lang on HTMLElement must enqueue an attributeChanged reaction when adding lang content attribute
diff --git a/LayoutTests/imported/w3c/web-platform-tests/custom-elements/reactions/HTMLElement.html b/LayoutTests/imported/w3c/web-platform-tests/custom-elements/reactions/HTMLElement.html
index bd252282161b5..38b7efc2b18f4 100644
--- a/LayoutTests/imported/w3c/web-platform-tests/custom-elements/reactions/HTMLElement.html
+++ b/LayoutTests/imported/w3c/web-platform-tests/custom-elements/reactions/HTMLElement.html
@@ -13,7 +13,8 @@
 <body>
 <div id="log"></div>
 <script>
-
+testReflectBooleanAttribute('cue', 'cue', 'cue on HTMLElement');
+testReflectBooleanAttribute('cuebackground', 'cuebackground', 'cuebackground on HTMLElement');
 testReflectAttribute('title', 'title', 'foo', 'bar', 'title on HTMLElement');
 testReflectAttribute('lang', 'lang', 'en', 'zh', 'lang on HTMLElement');
 testReflectAttributeWithContentValues('translate', 'translate', true, 'yes', false, 'no', 'translate on HTMLElement');
diff --git a/LayoutTests/imported/w3c/web-platform-tests/html/dom/elements/global-attributes/cue-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/html/dom/elements/global-attributes/cue-expected.txt
new file mode 100644
index 0000000000000..6b447cfbbfa07
--- /dev/null
+++ b/LayoutTests/imported/w3c/web-platform-tests/html/dom/elements/global-attributes/cue-expected.txt
@@ -0,0 +1,25 @@
+
+PASS "cue" attribute in HTML defaults to false
+PASS Boolean attributes should be case-insensitive
+PASS Setting "cue" attribute in HTML should set the property to true
+PASS Getting a present "cue" attribute should return the attribute value
+PASS Setting "cue" attribute using setAttribute should set the property to true
+PASS Setting the 'cue' to true should set its value to empty string
+PASS Toggling "cue" attribute should result in the correct value
+PASS Cloning an element should preserve the boolean attribute
+PASS Boolean attribute should work correctly on dynamically created elements
+PASS Removing "cue" attribute using removeAttribute should set the property to false
+PASS Setting "cue" property via JavaScript should reflect the correct boolean value
+PASS Setting "cue" property via JavaScript should reflect in the content attribute
+PASS Setting "cue" property in JavaScript with truthy value (boolean true) should set the property to true
+PASS Setting "cue" property in JavaScript with truthy value (number 1) should set the property to true
+PASS Setting "cue" property in JavaScript with truthy value (string true) should set the property to true
+PASS Setting "cue" property in JavaScript with truthy value (object [object Object]) should set the property to true
+PASS Setting "cue" property in JavaScript with truthy value (object ) should set the property to true
+PASS Setting "cue" property in JavaScript with truthy value (string any-non-empty-string) should set the property to true
+PASS Setting "cue" property in JavaScript with falsy value (false) should set the property to false
+PASS Setting "cue" property in JavaScript with falsy value (0) should set the property to false
+PASS Setting "cue" property in JavaScript with falsy value () should set the property to false
+PASS Setting "cue" property in JavaScript with falsy value (null) should set the property to false
+PASS Setting "cue" property in JavaScript with falsy value (undefined) should set the property to false
+
diff --git a/LayoutTests/imported/w3c/web-platform-tests/html/dom/elements/global-attributes/cue.html b/LayoutTests/imported/w3c/web-platform-tests/html/dom/elements/global-attributes/cue.html
new file mode 100644
index 0000000000000..904d413d60fc1
--- /dev/null
+++ b/LayoutTests/imported/w3c/web-platform-tests/html/dom/elements/global-attributes/cue.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Test for cue attribute</title>
+        <link rel="help" href="https://github.com/whatwg/html/pull/9771" />
+        <script src="/resources/testharness.js"></script>
+        <script src="/resources/testharnessreport.js"></script>
+    </head>
+    <body>
+        <span id="element1"></span>
+        <span id="element2" cue></span>
+        <span id="element3" cue="custom value"></span>
+    </body>
+    <script>
+        const element1 = document.getElementById("element1");
+        const element2 = document.getElementById("element2");
+        const element3 = document.getElementById("element3");
+        test(() => {
+            assert_false(element1.cue);
+        }, '"cue" attribute in HTML defaults to false');
+
+        test(() => {
+            element1.setAttribute("CUE", "");
+            assert_true(element1.cue);
+            element1.removeAttribute("CUE");
+            assert_false(element1.cue);
+        }, "Boolean attributes should be case-insensitive");
+
+        test(() => {
+            assert_true(element2.cue);
+        }, 'Setting "cue" attribute in HTML should set the property to true');
+
+        test(() => {
+            assert_true(element3.cue);
+            assert_equals(element3.getAttribute("cue"), "custom value");
+            element3.setAttribute("cue", "new value")
+            assert_true(element3.cue);
+            assert_equals(element3.getAttribute("cue"), "new value");
+            element3.cue = false;
+            assert_equals(element3.getAttribute("cue"), null);
+        }, 'Getting a present "cue" attribute should return the attribute value');
+
+        test(() => {
+            element1.setAttribute("cue", "");
+            assert_true(element1.cue);
+        }, 'Setting "cue" attribute using setAttribute should set the property to true');
+
+        test(() => {
+            element1.cuebackground = true;
+            assert_equals(element1.getAttribute("cue"), "");
+        }, "Setting the 'cue' to true should set its value to empty string");
+
+        test(() => {
+            element1.cue = true;
+            assert_true(element1.cue);
+            element1.cue = false;
+            assert_false(element1.cue);
+            element1.cue = true;
+            assert_true(element1.cue);
+        }, 'Toggling "cue" attribute should result in the correct value');
+
+        test(() => {
+            element1.cue = true;
+            const clone = element1.cloneNode(true);
+            assert_true(clone.cue);
+        }, "Cloning an element should preserve the boolean attribute");
+
+        test(() => {
+            const dynamicElement = document.createElement("example-element");
+            assert_false(dynamicElement.cue);
+            dynamicElement.cue = true;
+            assert_true(dynamicElement.cue);
+        }, "Boolean attribute should work correctly on dynamically created elements");
+
+        test(() => {
+            element1.setAttribute("cue", "");
+            assert_true(element1.cue);
+            element1.removeAttribute("cue");
+            assert_false(element1.cue);
+        }, 'Removing "cue" attribute using removeAttribute should set the property to false');
+
+        test(() => {
+            element1.cue = true;
+            assert_true(element1.cue);
+            element1.cue = false;
+            assert_false(element1.cue);
+        }, 'Setting "cue" property via JavaScript should reflect the correct boolean value');
+
+        test(() => {
+            element1.cue = false;
+            assert_false(element1.hasAttribute("cue"));
+            element1.cue = true;
+            assert_true(element1.hasAttribute("cue"));
+        }, 'Setting "cue" property via JavaScript should reflect in the content attribute');
+
+        const truthyValues = [true, 1, "true", {}, [], "any-non-empty-string"];
+        truthyValues.forEach((value) => {
+            test(() => {
+                element1.cue = value;
+                assert_true(element1.cue);
+            }, `Setting "cue" property in JavaScript with truthy value (${typeof value} ${value}) should set the property to true`);
+        });
+
+        const falsyValues = [false, 0, "", null, undefined];
+        falsyValues.forEach((value, index) => {
+            test(() => {
+                element1.cue = value;
+                assert_false(element1.cue);
+            }, `Setting "cue" property in JavaScript with falsy value (${value}) should set the property to false`);
+        });
+    </script>
+</html>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/html/dom/elements/global-attributes/cuebackground-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/html/dom/elements/global-attributes/cuebackground-expected.txt
new file mode 100644
index 0000000000000..686c431f48252
--- /dev/null
+++ b/LayoutTests/imported/w3c/web-platform-tests/html/dom/elements/global-attributes/cuebackground-expected.txt
@@ -0,0 +1,25 @@
+
+PASS "cuebackground" attribute in HTML defaults to false
+PASS Boolean attributes should be case-insensitive
+PASS Setting "cuebackground" attribute in HTML should set the property to true
+PASS Getting a present "cuebackground" attribute should return the attribute value
+PASS Setting "cuebackground" attribute using setAttribute should set the property to true
+PASS Setting the 'cuebackground' to true should set its value to empty string
+PASS Toggling "cuebackground" attribute should result in the correct value
+PASS Cloning an element should preserve the boolean attribute
+PASS Boolean attribute should work correctly on dynamically created elements
+PASS Removing "cuebackground" attribute using removeAttribute should set the property to false
+PASS Setting "cuebackground" property via JavaScript should reflect the correct boolean value
+PASS Setting "cue" property via JavaScript should reflect in the content attribute
+PASS Setting "cuebackground" property in JavaScript with truthy value (boolean true) should set the property to true
+PASS Setting "cuebackground" property in JavaScript with truthy value (number 1) should set the property to true
+PASS Setting "cuebackground" property in JavaScript with truthy value (string true) should set the property to true
+PASS Setting "cuebackground" property in JavaScript with truthy value (object [object Object]) should set the property to true
+PASS Setting "cuebackground" property in JavaScript with truthy value (object ) should set the property to true
+PASS Setting "cuebackground" property in JavaScript with truthy value (string any-non-empty-string) should set the property to true
+PASS Setting "cuebackground" property in JavaScript with falsy value (false) should set the property to false
+PASS Setting "cuebackground" property in JavaScript with falsy value (0) should set the property to false
+PASS Setting "cuebackground" property in JavaScript with falsy value () should set the property to false
+PASS Setting "cuebackground" property in JavaScript with falsy value (null) should set the property to false
+PASS Setting "cuebackground" property in JavaScript with falsy value (undefined) should set the property to false
+
diff --git a/LayoutTests/imported/w3c/web-platform-tests/html/dom/elements/global-attributes/cuebackground.html b/LayoutTests/imported/w3c/web-platform-tests/html/dom/elements/global-attributes/cuebackground.html
new file mode 100644
index 0000000000000..634b80fc67bf0
--- /dev/null
+++ b/LayoutTests/imported/w3c/web-platform-tests/html/dom/elements/global-attributes/cuebackground.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Test for cuebackground attribute</title>
+        <link rel="help" href="https://github.com/whatwg/html/pull/9771" />
+        <script src="/resources/testharness.js"></script>
+        <script src="/resources/testharnessreport.js"></script>
+    </head>
+    <body>
+        <span id="element1"></span>
+        <span id="element2" cuebackground></span>
+        <span id="element3" cuebackground="custom value"></span>
+    </body>
+    <script>
+        const element1 = document.getElementById("element1");
+        const element2 = document.getElementById("element2");
+        const element3 = document.getElementById("element3");
+        test(() => {
+            assert_false(element1.cuebackground);
+        }, '"cuebackground" attribute in HTML defaults to false');
+
+        test(() => {
+            element1.setAttribute("CUEBACKGROUND", "");
+            assert_true(element1.cuebackground);
+        }, "Boolean attributes should be case-insensitive");
+
+        test(() => {
+            assert_true(element2.cuebackground);
+        }, 'Setting "cuebackground" attribute in HTML should set the property to true');
+
+        test(() => {
+            assert_true(element3.cuebackground);
+            assert_equals(element3.getAttribute("cuebackground"), "custom value");
+            element3.setAttribute("cuebackground", "new value")
+            assert_true(element3.cuebackground);
+            assert_equals(element3.getAttribute("cuebackground"), "new value");
+            element3.cuebackground = false;
+            assert_equals(element3.getAttribute("cuebackground"), null);
+        }, 'Getting a present "cuebackground" attribute should return the attribute value');
+
+        test(() => {
+            element1.setAttribute("cuebackground", "");
+            assert_true(element1.cuebackground);
+        }, 'Setting "cuebackground" attribute using setAttribute should set the property to true');
+
+        test(() => {
+            element1.cuebackground = true;
+            assert_equals(element1.getAttribute("cuebackground"), "");
+        }, "Setting the 'cuebackground' to true should set its value to empty string");
+
+        test(() => {
+            element1.cuebackground = true;
+            assert_true(element1.cuebackground);
+            element1.cuebackground = false;
+            assert_false(element1.cuebackground);
+            element1.cuebackground = true;
+            assert_true(element1.cuebackground);
+        }, 'Toggling "cuebackground" attribute should result in the correct value');
+
+        test(() => {
+            element1.cuebackground = true;
+            const clone = element1.cloneNode(true);
+            assert_true(clone.cuebackground);
+        }, "Cloning an element should preserve the boolean attribute");
+
+        test(() => {
+            const dynamicElement = document.createElement("example-element");
+            assert_false(dynamicElement.cuebackground);
+            dynamicElement.cuebackground = true;
+            assert_true(dynamicElement.cuebackground);
+        }, "Boolean attribute should work correctly on dynamically created elements");
+
+        test(() => {
+            element1.setAttribute("cuebackground", "");
+            assert_true(element1.cuebackground);
+            element1.removeAttribute("cuebackground");
+            assert_false(element1.cuebackground);
+        }, 'Removing "cuebackground" attribute using removeAttribute should set the property to false');
+
+        test(() => {
+            element1.cuebackground = true;
+            assert_true(element1.cuebackground);
+            element1.cuebackground = false;
+            assert_false(element1.cuebackground);
+        }, 'Setting "cuebackground" property via JavaScript should reflect the correct boolean value');
+
+        test(() => {
+            element1.cue = false;
+            assert_false(element1.hasAttribute("cue"));
+            element1.cue = true;
+            assert_true(element1.hasAttribute("cue"));
+        }, 'Setting "cue" property via JavaScript should reflect in the content attribute');
+
+        const truthyValues = [true, 1, "true", {}, [], "any-non-empty-string"];
+        truthyValues.forEach((value) => {
+            test(() => {
+                element1.cuebackground = value;
+                assert_true(element1.cuebackground);
+            }, `Setting "cuebackground" property in JavaScript with truthy value (${typeof value} ${value}) should set the property to true`);
+        });
+
+        const falsyValues = [false, 0, "", null, undefined];
+        falsyValues.forEach((value, index) => {
+            test(() => {
+                element1.cuebackground = value;
+                assert_false(element1.cuebackground);
+            }, `Setting "cuebackground" property in JavaScript with falsy value (${value}) should set the property to false`);
+        });
+    </script>
+</html>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/html/semantics/embedded-content/media-elements/historical-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/html/semantics/embedded-content/media-elements/historical-expected.txt
index 619386c985ddf..6a0dc4292c2cf 100644
--- a/LayoutTests/imported/w3c/web-platform-tests/html/semantics/embedded-content/media-elements/historical-expected.txt
+++ b/LayoutTests/imported/w3c/web-platform-tests/html/semantics/embedded-content/media-elements/historical-expected.txt
@@ -47,7 +47,6 @@ PASS audio.mozPreservesPitch should not be supported
 PASS video.mozPreservesPitch should not be supported
 FAIL audio.webkitPreservesPitch should not be supported assert_false: expected false got true
 FAIL video.webkitPreservesPitch should not be supported assert_false: expected false got true
-PASS TextTrackCue constructor should not be supported
 FAIL audio.mediaGroup should not be supported assert_false: expected false got true
 FAIL video.mediaGroup should not be supported assert_false: expected false got true
 FAIL audio.controller should not be supported assert_false: expected false got true
diff --git a/LayoutTests/imported/w3c/web-platform-tests/html/semantics/embedded-content/media-elements/historical.html b/LayoutTests/imported/w3c/web-platform-tests/html/semantics/embedded-content/media-elements/historical.html
index d7395632eb909..7d381a586dc95 100644
--- a/LayoutTests/imported/w3c/web-platform-tests/html/semantics/embedded-content/media-elements/historical.html
+++ b/LayoutTests/imported/w3c/web-platform-tests/html/semantics/embedded-content/media-elements/historical.html
@@ -39,13 +39,6 @@
 t('mozPreservesPitch'); // prefixed version should be removed.
 t('webkitPreservesPitch'); // prefixed version should be removed.
 
-// TextTrackCue constructor: added in r5723, removed in r7742.
-test(function() {
-  assert_throws_js(TypeError, function() {
-    new TextTrackCue(0, 0, '');
-  });
-}, 'TextTrackCue constructor should not be supported');
-
 // added in https://github.com/whatwg/html/commit/66c5b32240c202c74f475872e7ea2cd163777b4a
 // removed in https://github.com/whatwg/html/commit/634698e70ea4586d58c989fa7d2cbfcad20d33e6
 t('mediaGroup');
diff --git a/LayoutTests/imported/w3c/web-platform-tests/html/semantics/embedded-content/media-elements/interfaces/TextTrackCue/constructor-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/html/semantics/embedded-content/media-elements/interfaces/TextTrackCue/constructor-expected.txt
index 18a48042addf0..02c129a257b99 100644
--- a/LayoutTests/imported/w3c/web-platform-tests/html/semantics/embedded-content/media-elements/interfaces/TextTrackCue/constructor-expected.txt
+++ b/LayoutTests/imported/w3c/web-platform-tests/html/semantics/embedded-content/media-elements/interfaces/TextTrackCue/constructor-expected.txt
@@ -1,4 +1,149 @@
 
 PASS TextTrackCue and VTTCue are separate interfaces
-PASS TextTrackCue constructor should not be supported
+PASS TextTrackCue constructor sets start time and end time correctly
+PASS TextTrackCue constructor with equal startTime and endTime
+PASS TextTrackCue constructor with extreme values for startTime and endTime
+PASS TextTrackCue constructor with reversed extreme values for startTime and endTime
+PASS TextTrackCue constructor with non-numeric startTime and endTime
+PASS TextTrackCue constructor with NaN and Infinity for startTime and endTime
+PASS TextTrackCue constructor throws InvalidNodeTypeError if cueFragment's first child is null
+PASS TextTrackCue constructor with a DocumentFragment containing only Text nodes
+PASS TextTrackCue constructor throws for non-exclusive Text nodes
+PASS TextTrackCue can be successfully constructed with cue and cuebackground on the same element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for Comment
+PASS TextTrackCue constructor throws InvalidNodeTypeError for ProcessingInstruction
+PASS TextTrackCue with a CDATASection Node should throw InvalidNodeTypeError
+PASS TextTrackCue constructor throws InvalidNodeTypeError for non-HTML namespace elements
+PASS TextTrackCue constructor throws InvalidNodeTypeError for mixed namespace elements
+PASS TextTrackCue constructor allows individual b element
+PASS TextTrackCue constructor allows individual br element
+PASS TextTrackCue constructor allows individual div element
+PASS TextTrackCue constructor allows individual i element
+PASS TextTrackCue constructor allows individual p element
+PASS TextTrackCue constructor allows individual rb element
+PASS TextTrackCue constructor allows individual rt element
+PASS TextTrackCue constructor allows individual rtc element
+PASS TextTrackCue constructor allows individual ruby element
+PASS TextTrackCue constructor allows individual span element
+PASS TextTrackCue constructor allows multiple allowed elements nested in a div with cue and cuebackground attributes
+PASS TextTrackCue constructor allows nested allowed elements in a div with cue and cuebackground attributes
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual a element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual abbr element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual address element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual area element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual article element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual aside element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual audio element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual base element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual bdi element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual bdo element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual blockquote element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual body element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual button element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual canvas element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual caption element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual cite element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual code element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual col element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual colgroup element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual data element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual datalist element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual dd element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual del element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual details element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual dfn element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual dialog element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual dl element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual dt element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual em element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual embed element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual fieldset element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual figcaption element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual figure element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual footer element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual form element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual h1 element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual h2 element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual h3 element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual h4 element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual h5 element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual h6 element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual head element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual header element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual hgroup element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual hr element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual html element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual iframe element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual img element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual input element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual ins element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual kbd element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual label element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual legend element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual li element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual link element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual main element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual map element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual mark element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual meta element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual meter element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual nav element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual noscript element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual object element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual ol element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual optgroup element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual option element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual output element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual param element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual picture element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual pre element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual progress element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual q element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual s element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual samp element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual script element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual section element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual select element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual small element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual source element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual strong element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual style element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual sub element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual summary element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual sup element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual svg element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual table element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual tbody element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual td element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual template element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual textarea element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual tfoot element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual th element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual thead element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual time element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual title element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual tr element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual track element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual u element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual ul element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual var element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual video element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for individual wbr element
+PASS TextTrackCue constructor throws InvalidNodeTypeError for interleaved b and a
+PASS TextTrackCue constructor throws InvalidNodeTypeError for interleaved br and abbr
+PASS TextTrackCue constructor throws InvalidNodeTypeError for interleaved div and address
+PASS TextTrackCue constructor throws InvalidNodeTypeError for interleaved i and area
+PASS TextTrackCue constructor throws InvalidNodeTypeError for interleaved p and article
+PASS TextTrackCue constructor throws InvalidNodeTypeError for interleaved rb and aside
+PASS TextTrackCue constructor throws InvalidNodeTypeError for interleaved rt and audio
+PASS TextTrackCue constructor throws InvalidNodeTypeError for interleaved rtc and base
+PASS TextTrackCue constructor throws InvalidNodeTypeError for interleaved ruby and bdi
+PASS TextTrackCue constructor throws InvalidNodeTypeError for interleaved span and bdo
+PASS TextTrackCue constructor with deeply nested allowed elements and each disallowed element at the end
+PASS TextTrackCue constructor allows DocumentFragment from different documents
+PASS TextTrackCue constructor throws if cue attribute is present with no cuebackground attribute
+PASS TextTrackCue constructor throws if cuebackground attribute is present with no cue attribute
+PASS TextTrackCue constructor allows multiple cue attributes with a cuebackground ancestor or on the same element
+PASS Invalid hierarchy of cue and cuebackground attributes
+PASS Invalid hierarchy with cue as ancestor of cuebackground
 
diff --git a/LayoutTests/imported/w3c/web-platform-tests/html/semantics/embedded-content/media-elements/interfaces/TextTrackCue/constructor.html b/LayoutTests/imported/w3c/web-platform-tests/html/semantics/embedded-content/media-elements/interfaces/TextTrackCue/constructor.html
index 8ee9adb1c0d30..57532765e5324 100644
--- a/LayoutTests/imported/w3c/web-platform-tests/html/semantics/embedded-content/media-elements/interfaces/TextTrackCue/constructor.html
+++ b/LayoutTests/imported/w3c/web-platform-tests/html/semantics/embedded-content/media-elements/interfaces/TextTrackCue/constructor.html
@@ -7,17 +7,608 @@
     </head>
     <body>
         <script>
-            test(function()
-            {
+            function createValidCueFragment() {
+                const fragment = new DocumentFragment();
+                const div = document.createElement("div");
+                div.cuebackground = true;
+                div.innerHTML = "<span cue>Sample text</span>";
+                fragment.appendChild(div);
+                return fragment;
+            }
+
+            const cueFragment = createValidCueFragment();
+
+            test(function () {
                 assert_not_equals(TextTrackCue, VTTCue);
             }, "TextTrackCue and VTTCue are separate interfaces");
-            test(function()
-            {
-                assert_throws_js(TypeError, function()
-                {
-                    new TextTrackCue(0, 0, "");
+
+            test(() => {
+                const startTime = 10;
+                const endTime = 20;
+                const cue = new TextTrackCue(startTime, endTime, cueFragment);
+
+                assert_equals(
+                    cue.startTime,
+                    startTime,
+                    "startTime should be set correctly"
+                );
+                assert_equals(
+                    cue.endTime,
+                    endTime,
+                    "endTime should be set correctly"
+                );
+            }, "TextTrackCue constructor sets start time and end time correctly");
+
+            test(() => {
+                const cue = new TextTrackCue(1, 1, cueFragment);
+                assert_equals(cue.startTime, 1);
+                assert_equals(cue.endTime, 1);
+            }, "TextTrackCue constructor with equal startTime and endTime");
+
+            test(() => {
+                const cue = new TextTrackCue(
+                    Number.MIN_SAFE_INTEGER,
+                    Number.MAX_SAFE_INTEGER,
+                    cueFragment
+                );
+                assert_equals(cue.startTime, Number.MIN_SAFE_INTEGER);
+                assert_equals(cue.endTime, Number.MAX_SAFE_INTEGER);
+            }, "TextTrackCue constructor with extreme values for startTime and endTime");
+
+            test(() => {
+                const cue = new TextTrackCue(
+                    Number.MAX_SAFE_INTEGER,
+                    Number.MIN_SAFE_INTEGER,
+                    cueFragment
+                );
+                assert_equals(cue.startTime, Number.MAX_SAFE_INTEGER);
+                assert_equals(cue.endTime, Number.MIN_SAFE_INTEGER);
+            }, "TextTrackCue constructor with reversed extreme values for startTime and endTime");
+
+            test(() => {
+                assert_throws_js(
+                    TypeError,
+                    () => new TextTrackCue("invalid", 0, cueFragment),
+                    "Constructor should throw for non-numeric startTime"
+                );
+                assert_throws_js(
+                    TypeError,
+                    () => new TextTrackCue(0, "invalid", cueFragment),
+                    "Constructor should throw for non-numeric endTime"
+                );
+                assert_throws_js(
+                    TypeError,
+                    () => new TextTrackCue("invalid", "invalid", cueFragment),
+                    "Constructor should throw for non-numeric startTime and endTime"
+                );
+            }, "TextTrackCue constructor with non-numeric startTime and endTime");
+
+            test(() => {
+                assert_throws_js(
+                    TypeError,
+                    () => new TextTrackCue(NaN, Infinity, cueFragment),
+                    "Constructor should throw for NaN and Infinity startTime and endTime"
+                );
+            }, "TextTrackCue constructor with NaN and Infinity for startTime and endTime");
+
+            test(() => {
+                const cueFragment = new DocumentFragment();
+
+                assert_throws_dom(
+                    "InvalidNodeTypeError",
+                    () => {
+                        new TextTrackCue(0, 1, cueFragment);
+                    },
+                    "Constructor should throw an InvalidNodeTypeError if cueFragment's first child is null"
+                );
+            }, "TextTrackCue constructor throws InvalidNodeTypeError if cueFragment's first child is null");
+
+            test(() => {
+                const textOnlyFragment = new DocumentFragment();
+                textOnlyFragment.appendChild(document.createTextNode("Text"));
+                textOnlyFragment.appendChild(document.createTextNode("Text"));
+                assert_throws_dom(
+                    "InvalidNodeTypeError",
+                    () => {
+                        new TextTrackCue(0, 1, textOnlyFragment);
+                    },
+                    "Constructor should throw InvalidNodeTypeError with a DocumentFragment containing only Text nodes"
+                );
+            }, "TextTrackCue constructor with a DocumentFragment containing only Text nodes");
+
+            test(() => {
+                const fragment = new DocumentFragment();
+                const div = document.createElement("div");
+                div.cue = true;
+                div.cuebackground = true;
+
+                const textNode = document.createTextNode(
+                    "Non-exclusive text node"
+                );
+
+                // Appending the textNode first to the fragment to make it non-exclusive
+                fragment.appendChild(textNode);
+                fragment.appendChild(div);
+                assert_throws_dom("InvalidNodeTypeError", () => {
+                    new TextTrackCue(0, 1, fragment);
                 });
-            }, "TextTrackCue constructor should not be supported");
+            }, "TextTrackCue constructor throws for non-exclusive Text nodes");
+
+            test(() => {
+                const cueFragment = new DocumentFragment();
+                const span = document.createElement("span");
+                span.setAttribute("cue", "");
+                span.setAttribute("cuebackground", "");
+                cueFragment.appendChild(span);
+
+                const cue = new TextTrackCue(0, 1, cueFragment);
+
+                assert_true(
+                    cue instanceof TextTrackCue,
+                    "The constructed object should be an instance of TextTrackCue"
+                );
+            }, "TextTrackCue can be successfully constructed with cue and cuebackground on the same element");
+
+            const nonTextNonElementNodes = [
+                document.createComment("Comment node"),
+                document.createProcessingInstruction("target", "data"),
+            ];
+
+            nonTextNonElementNodes.forEach((node, index) => {
+                test(() => {
+                    const cueFragment = new DocumentFragment();
+                    cueFragment.appendChild(node);
+
+                    assert_throws_dom(
+                        "InvalidNodeTypeError",
+                        () => {
+                            new TextTrackCue(0, 1, cueFragment);
+                        },
+                        `Constructor should throw InvalidNodeTypeError for ${node.constructor.name}`
+                    );
+                }, `TextTrackCue constructor throws InvalidNodeTypeError for ${node.constructor.name}`);
+            });
+
+            test(() => {
+                const xhtmlDocument = document.implementation.createDocument(
+                    "http://www.w3.org/1999/xhtml",
+                    "html",
+                    null
+                );
+                const fragment = xhtmlDocument.createDocumentFragment();
+                const cdataNode =
+                    xhtmlDocument.createCDATASection("CDATA Section");
+                fragment.appendChild(cdataNode);
+                const div = xhtmlDocument.createElement("div");
+                div.cue = true;
+                div.cuebackground = true;
+                fragment.appendChild(div);
+                assert_throws_dom(
+                    "InvalidNodeTypeError",
+                    () => new TextTrackCue(0, 1, fragment)
+                );
+            }, "TextTrackCue with a CDATASection Node should throw InvalidNodeTypeError");
+
+            test(() => {
+                const cueFragment = new DocumentFragment();
+                const svgElement = document.createElementNS(
+                    "http://www.w3.org/2000/svg",
+                    "svg"
+                );
+                cueFragment.appendChild(svgElement);
+
+                assert_throws_dom(
+                    "InvalidNodeTypeError",
+                    () => {
+                        new TextTrackCue(0, 1, cueFragment);
+                    },
+                    "Constructor should throw InvalidNodeTypeError for element not in the HTML namespace"
+                );
+            }, "TextTrackCue constructor throws InvalidNodeTypeError for non-HTML namespace elements");
+
+            test(() => {
+                const cueFragment = new DocumentFragment();
+
+                // Append an element in the HTML namespace
+                const divElement = document.createElement("div");
+                cueFragment.appendChild(divElement);
+
+                // Append an element in a non-HTML namespace (SVG in this case)
+                const svgElement = document.createElementNS(
+                    "http://www.w3.org/2000/svg",
+                    "svg"
+                );
+                cueFragment.appendChild(svgElement);
+
+                assert_throws_dom(
+                    "InvalidNodeTypeError",
+                    () => {
+                        new TextTrackCue(0, 1, cueFragment);
+                    },
+                    "Constructor should throw InvalidNodeTypeError if elements from different namespaces are present"
+                );
+            }, "TextTrackCue constructor throws InvalidNodeTypeError for mixed namespace elements");
+
+            const allowedElements = [
+                "b",
+                "br",
+                "div",
+                "i",
+                "p",
+                "rb",
+                "rt",
+                "rtc",
+                "ruby",
+                "span",
+            ];
+
+            allowedElements.forEach((tagName) => {
+                test(() => {
+                    const cueFragment = new DocumentFragment();
+                    const element = document.createElement(tagName);
+
+                    // Set required attributes
+                    element.setAttribute("cue", "");
+                    element.setAttribute("cuebackground", "");
+                    cueFragment.appendChild(element);
+
+                    assert_true(
+                        new TextTrackCue(0, 1, cueFragment) instanceof
+                            TextTrackCue,
+                        `TextTrackCue should be constructible with a ${tagName} element`
+                    );
+                }, `TextTrackCue constructor allows individual ${tagName} element`);
+            });
+
+            test(() => {
+                const cueFragment = new DocumentFragment();
+                const divElement = document.createElement("div");
+
+                // Set required attributes
+                divElement.setAttribute("cue", "");
+                divElement.setAttribute("cuebackground", "");
+
+                // Append each allowed element as a child to the div
+                allowedElements.forEach((tagName) => {
+                    const element = document.createElement(tagName);
+                    divElement.appendChild(element);
+                });
+
+                cueFragment.appendChild(divElement);
+
+                assert_true(
+                    new TextTrackCue(0, 1, cueFragment) instanceof TextTrackCue,
+                    "TextTrackCue should be constructible with multiple allowed elements nested in a div"
+                );
+            }, "TextTrackCue constructor allows multiple allowed elements nested in a div with cue and cuebackground attributes");
+
+            test(() => {
+                const cueFragment = new DocumentFragment();
+                const outerDivElement = document.createElement("div");
+
+                // Set required attributes
+                outerDivElement.setAttribute("cue", "");
+                outerDivElement.setAttribute("cuebackground", "");
+
+                let parentElement = outerDivElement;
+                // Nest each allowed element inside the previous one
+                allowedElements.forEach((tagName) => {
+                    const element = document.createElement(tagName);
+                    parentElement.appendChild(element);
+                    parentElement = element;
+                });
+
+                cueFragment.appendChild(outerDivElement);
+
+                assert_true(
+                    new TextTrackCue(0, 1, cueFragment) instanceof TextTrackCue,
+                    "TextTrackCue should be constructible with allowed elements nested inside each other in a div"
+                );
+            }, "TextTrackCue constructor allows nested allowed elements in a div with cue and cuebackground attributes");
+
+            const disallowedElements = [
+                "a",
+                "abbr",
+                "address",
+                "area",
+                "article",
+                "aside",
+                "audio",
+                "base",
+                "bdi",
+                "bdo",
+                "blockquote",
+                "body",
+                "button",
+                "canvas",
+                "caption",
+                "cite",
+                "code",
+                "col",
+                "colgroup",
+                "data",
+                "datalist",
+                "dd",
+                "del",
+                "details",
+                "dfn",
+                "dialog",
+                "dl",
+                "dt",
+                "em",
+                "embed",
+                "fieldset",
+                "figcaption",
+                "figure",
+                "footer",
+                "form",
+                "h1",
+                "h2",
+                "h3",
+                "h4",
+                "h5",
+                "h6",
+                "head",
+                "header",
+                "hgroup",
+                "hr",
+                "html",
+                "iframe",
+                "img",
+                "input",
+                "ins",
+                "kbd",
+                "label",
+                "legend",
+                "li",
+                "link",
+                "main",
+                "map",
+                "mark",
+                "meta",
+                "meter",
+                "nav",
+                "noscript",
+                "object",
+                "ol",
+                "optgroup",
+                "option",
+                "output",
+                "param",
+                "picture",
+                "pre",
+                "progress",
+                "q",
+                "s",
+                "samp",
+                "script",
+                "section",
+                "select",
+                "small",
+                "source",
+                "strong",
+                "style",
+                "sub",
+                "summary",
+                "sup",
+                "svg",
+                "table",
+                "tbody",
+                "td",
+                "template",
+                "textarea",
+                "tfoot",
+                "th",
+                "thead",
+                "time",
+                "title",
+                "tr",
+                "track",
+                "u",
+                "ul",
+                "var",
+                "video",
+                "wbr",
+            ];
+
+            disallowedElements.forEach((tagName) => {
+                test(() => {
+                    const cueFragment = new DocumentFragment();
+                    const element = document.createElement(tagName);
+
+                    // Set required attributes
+                    element.setAttribute("cue", "");
+                    element.setAttribute("cuebackground", "");
+                    cueFragment.appendChild(element);
+
+                    assert_throws_dom(
+                        "InvalidNodeTypeError",
+                        () => {
+                            new TextTrackCue(0, 1, cueFragment);
+                        },
+                        `Constructor should throw InvalidNodeTypeError for a ${tagName} element`
+                    );
+                }, `TextTrackCue constructor throws InvalidNodeTypeError for individual ${tagName} element`);
+            });
+
+            const interleavedLength = Math.min(
+                allowedElements.length,
+                disallowedElements.length
+            );
+            for (let i = 0; i < interleavedLength; i++) {
+                test(() => {
+                    const cueFragment = new DocumentFragment();
+
+                    const allowedElement = document.createElement(
+                        allowedElements[i]
+                    );
+                    allowedElement.setAttribute("cue", "");
+                    allowedElement.setAttribute("cuebackground", "");
+                    cueFragment.appendChild(allowedElement);
+
+                    const disallowedElement = document.createElement(
+                        disallowedElements[i]
+                    );
+                    cueFragment.appendChild(disallowedElement);
+
+                    assert_throws_dom(
+                        "InvalidNodeTypeError",
+                        () => {
+                            new TextTrackCue(0, 1, cueFragment);
+                        },
+                        `Constructor should throw InvalidNodeTypeError for interleaved ${allowedElements[i]} and ${disallowedElements[i]}`
+                    );
+                }, `TextTrackCue constructor throws InvalidNodeTypeError for interleaved ${allowedElements[i]} and ${disallowedElements[i]}`);
+            }
+
+            test(() => {
+                // Function to create a nested structure with all allowed elements.
+                const createNestedAllowedElements = (elements) => {
+                    if (!elements.length) return null;
+                    const element = document.createElement(elements[0]);
+                    const remainingElements = elements.slice(1);
+                    const child =
+                        createNestedAllowedElements(remainingElements);
+                    if (child) element.appendChild(child);
+                    return element;
+                };
+
+                const nestedAllowedElements =
+                    createNestedAllowedElements(allowedElements);
+                nestedAllowedElements.setAttribute("cue", "");
+                nestedAllowedElements.setAttribute("cuebackground", "");
+
+                const cueFragment = new DocumentFragment();
+                cueFragment.appendChild(nestedAllowedElements);
+
+                // Append each disallowed element at the end of the nested structure, one at a time,
+                // and check that the TextTrackCue constructor throws InvalidNodeTypeError.
+                disallowedElements.forEach((tagName) => {
+                    const disallowedElement = document.createElement(tagName);
+                    cueFragment.appendChild(disallowedElement);
+
+                    assert_throws_dom(
+                        "InvalidNodeTypeError",
+                        () => {
+                            new TextTrackCue(0, 1, cueFragment);
+                        },
+                        `Constructor should throw InvalidNodeTypeError for deeply nested allowed elements with a disallowed ${tagName} element at the end`
+                    );
+
+                    cueFragment.removeChild(disallowedElement);
+                });
+            }, "TextTrackCue constructor with deeply nested allowed elements and each disallowed element at the end");
+
+            test(() => {
+                const iframe = document.createElement("iframe");
+                document.body.appendChild(iframe);
+
+                const otherDocumentFragment =
+                    iframe.contentDocument.createDocumentFragment();
+                const div = iframe.contentDocument.createElement("div");
+                div.cue = true;
+                div.cuebackground = true;
+                otherDocumentFragment.appendChild(div);
+
+                let result = "pass";
+                try {
+                    new TextTrackCue(0, 1, otherDocumentFragment);
+                } catch (err) {
+                    result = err.message;
+                }
+                assert_equals(
+                    result,
+                    "pass",
+                    "The constructor to not throw any exception"
+                );
+
+                document.body.removeChild(iframe);
+            }, "TextTrackCue constructor allows DocumentFragment from different documents");
+
+            test(() => {
+                const fragment = new DocumentFragment();
+                const div = document.createElement("div");
+                div.cue = true;
+                fragment.appendChild(div);
+
+                assert_throws_dom("HierarchyRequestError", () => {
+                    new TextTrackCue(0, 1, fragment);
+                });
+            }, "TextTrackCue constructor throws if cue attribute is present with no cuebackground attribute");
+
+            test(() => {
+                const fragment = new DocumentFragment();
+                const div = document.createElement("div");
+                div.cuebackground = true;
+                fragment.appendChild(div);
+
+                assert_throws_dom("InvalidNodeTypeError", () => {
+                    new TextTrackCue(0, 1, fragment);
+                });
+            }, "TextTrackCue constructor throws if cuebackground attribute is present with no cue attribute");
+
+            test(() => {
+                const fragment = new DocumentFragment();
+                const div = document.createElement("div");
+                div.cue = true;
+                div.cuebackground = true;
+
+                const child1 = document.createElement("span");
+                child1.setAttribute("cue", "");
+                div.appendChild(child1);
+
+                const child2 = document.createElement("span");
+                child2.setAttribute("cue", "");
+                div.appendChild(child2);
+
+                fragment.appendChild(div);
+
+                // This should not throw, as all 'cue' have a corresponding 'cuebackground' ancestor
+                new TextTrackCue(0, 1, fragment);
+            }, "TextTrackCue constructor allows multiple cue attributes with a cuebackground ancestor or on the same element");
+
+            test(() => {
+                const fragment = new DocumentFragment();
+                const div = document.createElement("div");
+
+                const backgroundCueElement = document.createElement("span");
+                backgroundCueElement.setAttribute("cue", "");
+                div.appendChild(backgroundCueElement);
+
+                const cueElement = document.createElement("span");
+                cueElement.setAttribute("cuebackground", "");
+                div.appendChild(cueElement);
+
+                fragment.appendChild(div);
+
+                assert_throws_dom(
+                    "InvalidNodeTypeError",
+                    () => {
+                        new TextTrackCue(0, 1, fragment);
+                    },
+                    "TextTrackCue constructor throws InvalidNodeTypeError if cuebackground is not an inclusive ancestor of cue"
+                );
+            }, "Invalid hierarchy of cue and cuebackground attributes");
+
+            test(() => {
+                const fragment = new DocumentFragment();
+                const div = document.createElement("div");
+                div.cue = true;
+
+                const backgroundCueElement = document.createElement("span");
+                backgroundCueElement.setAttribute("cuebackground", "");
+                div.appendChild(backgroundCueElement);
+
+                fragment.appendChild(div);
+
+                assert_throws_dom(
+                    "HierarchyRequestError",
+                    () => {
+                        new TextTrackCue(0, 1, fragment);
+                    },
+                    "TextTrackCue constructor throws HierarchyRequestError if cue is an inclusive ancestor of cuebackground"
+                );
+            }, "Invalid hierarchy with cue as ancestor of cuebackground");
         </script>
     </body>
 </html>
diff --git a/LayoutTests/inspector/model/remote-object/dom-expected.txt b/LayoutTests/inspector/model/remote-object/dom-expected.txt
index e94ec7d803a22..6cca84080240d 100644
--- a/LayoutTests/inspector/model/remote-object/dom-expected.txt
+++ b/LayoutTests/inspector/model/remote-object/dom-expected.txt
@@ -166,7 +166,7 @@ EXPRESSION: span = document.createElement("span"); span.id = "foo"; span
         "_value": ""
       },
       {
-        "_name": "hidden",
+        "_name": "cue",
         "_type": "boolean",
         "_value": "false"
       }
diff --git a/LayoutTests/media/track/texttrackcue/texttrackcue-constructor-expected.txt b/LayoutTests/media/track/texttrackcue/texttrackcue-constructor-expected.txt
index 46bbe355598c6..d73eed536c528 100644
--- a/LayoutTests/media/track/texttrackcue/texttrackcue-constructor-expected.txt
+++ b/LayoutTests/media/track/texttrackcue/texttrackcue-constructor-expected.txt
@@ -2,7 +2,7 @@
 PASS TextTrackCue should throw "TypeError" if the cue node is not a documentFragment
 PASS TextTrackCue should throw "InvalidNodeTypeError" if passed an invalid documentFragment
 PASS TextTrackCue should throw "InvalidNodeTypeError" if documentFragment has an invalid node
-PASS TextTrackCue should throw "InvalidStateError" if documentFragment doesn't have 'cuebackground' and 'cue' nodes
+PASS TextTrackCue should throw "InvalidNodeTypeError" if documentFragment doesn't have 'cuebackground' and 'cue' nodes
 PASS TextTrackCue should allow all valid node types
 PASS Test TextTrackCue.getCueAsHTML()
 
diff --git a/LayoutTests/media/track/texttrackcue/texttrackcue-constructor.html b/LayoutTests/media/track/texttrackcue/texttrackcue-constructor.html
index 9e3a66eee30db..2261c5a72fbad 100644
--- a/LayoutTests/media/track/texttrackcue/texttrackcue-constructor.html
+++ b/LayoutTests/media/track/texttrackcue/texttrackcue-constructor.html
@@ -45,12 +45,12 @@
     let validCue = new TextTrackCue(0, 10, fragment);
 
     fragment.firstChild.removeAttribute('cuebackground')
-    assert_throws_dom("InvalidStateError", _ => { new TextTrackCue(0, 10, fragment) });
+    assert_throws_dom("InvalidNodeTypeError", _ => { new TextTrackCue(0, 10, fragment) });
 
     fragment = createValidCueFragment();
     fragment.firstChild.firstChild.removeAttribute('cue')
-    assert_throws_dom("InvalidStateError", _ => { new TextTrackCue(0, 10, fragment) });
-}, `TextTrackCue should throw "InvalidStateError" if documentFragment doesn't have 'cuebackground' and 'cue' nodes`);
+    assert_throws_dom("InvalidNodeTypeError", _ => { new TextTrackCue(0, 10, fragment) });
+}, `TextTrackCue should throw "InvalidNodeTypeError" if documentFragment doesn't have 'cuebackground' and 'cue' nodes`);
 
 test( test => {
     let fragment = createValidCueFragment();
@@ -62,9 +62,6 @@
     fragment.firstChild.appendChild(document.createElement('div'));
     validCue = new TextTrackCue(0, 10, fragment);
 
-    fragment.firstChild.appendChild(document.createElement('img'));
-    validCue = new TextTrackCue(0, 10, fragment);
-
     fragment.firstChild.appendChild(document.createElement('p'));
     validCue = new TextTrackCue(0, 10, fragment);
 
diff --git a/Source/WebCore/html/HTMLAttributeNames.in b/Source/WebCore/html/HTMLAttributeNames.in
index a0b579e643b43..16397c905f256 100644
--- a/Source/WebCore/html/HTMLAttributeNames.in
+++ b/Source/WebCore/html/HTMLAttributeNames.in
@@ -111,6 +111,8 @@ contenteditable
 controls
 coords
 crossorigin
+cue
+cuebackground
 data
 datetime
 declare
diff --git a/Source/WebCore/html/HTMLElement.idl b/Source/WebCore/html/HTMLElement.idl
index c4349feeb7509..1f10b47b786ad 100644
--- a/Source/WebCore/html/HTMLElement.idl
+++ b/Source/WebCore/html/HTMLElement.idl
@@ -34,6 +34,10 @@
     [CEReactions=Needed] attribute boolean translate;
     [CEReactions=Needed] attribute [AtomString] DOMString dir;
 
+    // TextTrackCue related
+    [CEReactions=Needed, Reflect] attribute boolean cue;
+    [CEReactions=Needed, Reflect] attribute boolean cuebackground;
+
     // user interaction
     [CEReactions=Needed, Reflect] attribute boolean hidden;
     undefined click();
diff --git a/Source/WebCore/html/track/TextTrackCue.cpp b/Source/WebCore/html/track/TextTrackCue.cpp
index e6a3ad30cfb44..e3c645dad45e0 100644
--- a/Source/WebCore/html/track/TextTrackCue.cpp
+++ b/Source/WebCore/html/track/TextTrackCue.cpp
@@ -65,18 +65,6 @@ namespace WebCore {
 WTF_MAKE_ISO_ALLOCATED_IMPL(TextTrackCue);
 WTF_MAKE_ISO_ALLOCATED_IMPL(TextTrackCueBox);
 
-static const QualifiedName& cueAttributName()
-{
-    static NeverDestroyed<QualifiedName> cueTag(nullAtom(), "cue"_s, nullAtom());
-    return cueTag;
-}
-
-static const QualifiedName& cueBackgroundAttributName()
-{
-    static NeverDestroyed<QualifiedName> cueBackgroundTag(nullAtom(), "cuebackground"_s, nullAtom());
-    return cueBackgroundTag;
-}
-
 Ref<TextTrackCueBox> TextTrackCueBox::create(Document& document, TextTrackCue& cue)
 {
     auto box = adoptRef(*new TextTrackCueBox(document, cue));
@@ -102,13 +90,14 @@ TextTrackCue* TextTrackCueBox::getCue() const
 
 static inline bool isLegalNode(Node& node)
 {
-    return node.hasTagName(HTMLNames::brTag)
+    return node.hasTagName(HTMLNames::bTag)
+        || node.hasTagName(HTMLNames::brTag)
         || node.hasTagName(HTMLNames::divTag)
-        || node.hasTagName(HTMLNames::imgTag)
+        || node.hasTagName(HTMLNames::iTag)
         || node.hasTagName(HTMLNames::pTag)
         || node.hasTagName(HTMLNames::rbTag)
-        || node.hasTagName(HTMLNames::rtTag)
         || node.hasTagName(HTMLNames::rtcTag)
+        || node.hasTagName(HTMLNames::rtTag)
         || node.hasTagName(HTMLNames::rubyTag)
         || node.hasTagName(HTMLNames::spanTag)
         || node.nodeType() == Node::TEXT_NODE;
@@ -143,26 +132,32 @@ enum RequiredNodes {
     CueBackground = 1 << 1,
 };
 
-static OptionSet<RequiredNodes> tagPseudoObjects(Node& node)
+static ExceptionOr<void> tagPseudoObjects(Node& node, OptionSet<RequiredNodes>& nodeTypes)
 {
     if (!is<Element>(node))
         return { };
 
-    OptionSet<RequiredNodes> nodeTypes = { };
-
     auto& element = downcast<Element>(node);
-    if (element.hasAttributeWithoutSynchronization(cueAttributName())) {
-        element.setPseudo(ShadowPseudoIds::cue());
-        nodeTypes = { RequiredNodes::Cue };
-    } else if (element.hasAttributeWithoutSynchronization(cueBackgroundAttributName())) {
+
+    if (element.hasAttributeWithoutSynchronization(HTMLNames::cuebackgroundAttr)) {
         element.setPseudo(ShadowPseudoIds::webkitMediaTextTrackDisplayBackdrop());
-        nodeTypes = { RequiredNodes::CueBackground };
+        nodeTypes.add(RequiredNodes::CueBackground);
     }
 
-    for (auto* child = element.firstChild(); child; child = child->nextSibling())
-        nodeTypes.add(tagPseudoObjects(*child));
+    if (element.hasAttributeWithoutSynchronization(HTMLNames::cueAttr)) {
+        if (!nodeTypes.contains(RequiredNodes::CueBackground) || !element.closest("[cuebackground]"_s).returnValue())
+            return Exception { HierarchyRequestError, "Found cue attribute but no cuebackground attribute in hierarchy "_s };
 
-    return nodeTypes;
+        element.setPseudo(ShadowPseudoIds::cue());
+        nodeTypes.add(RequiredNodes::Cue);
+    }
+
+    if (nodeTypes.contains(RequiredNodes::CueBackground) && nodeTypes.contains(RequiredNodes::Cue))
+        return { };
+
+    for (auto* child = element.firstChild(); child; child = child->nextSibling())
+        tagPseudoObjects(*child, nodeTypes);
+    return { };
 }
 
 static void removePseudoAttributes(Node& node)
@@ -171,7 +166,7 @@ static void removePseudoAttributes(Node& node)
         return;
 
     auto& element = downcast<Element>(node);
-    if (element.hasAttributeWithoutSynchronization(cueAttributName()) || element.hasAttributeWithoutSynchronization(cueBackgroundAttributName()))
+    if (element.hasAttributeWithoutSynchronization(HTMLNames::cueAttr) || element.hasAttributeWithoutSynchronization(HTMLNames::cuebackgroundAttr))
         element.removeAttribute(HTMLNames::pseudoAttr);
 
     for (auto* child = element.firstChild(); child; child = child->nextSibling())
@@ -183,6 +178,9 @@ ExceptionOr<Ref<TextTrackCue>> TextTrackCue::create(Document& document, double s
     if (!cueFragment.firstChild())
         return Exception { InvalidNodeTypeError, "Empty cue fragment"_s };
 
+    if (cueFragment.firstChild()->nodeType() == Node::TEXT_NODE)
+        return Exception { InvalidNodeTypeError, "Invalid first child"_s };
+
     for (Node* node = cueFragment.firstChild(); node; node = node->nextSibling()) {
         auto result = checkForInvalidNodeTypes(*node);
         if (result.hasException())
@@ -198,13 +196,16 @@ ExceptionOr<Ref<TextTrackCue>> TextTrackCue::create(Document& document, double s
     cueFragment.cloneChildNodes(fragment);
 
     OptionSet<RequiredNodes> nodeTypes = { };
-    for (Node* node = fragment->firstChild(); node; node = node->nextSibling())
-        nodeTypes.add(tagPseudoObjects(*node));
+    for (Node* node = fragment->firstChild(); node; node = node->nextSibling()) {
+        auto result = tagPseudoObjects(*node, nodeTypes);
+        if (result.hasException())
+            return result.releaseException();
+    }
 
     if (!nodeTypes.contains(RequiredNodes::Cue))
-        return Exception { InvalidStateError, makeString("Missing required attribute: ", cueAttributName().toString()) };
+        return Exception { InvalidNodeTypeError, "Missing required attribute: cue"_s };
     if (!nodeTypes.contains(RequiredNodes::CueBackground))
-        return Exception { InvalidStateError, makeString("Missing required attribute: ", cueBackgroundAttributName().toString()) };
+        return Exception { InvalidNodeTypeError, "Missing required attribute: cuebackground"_s };
 
     auto textTrackCue = adoptRef(*new TextTrackCue(document, MediaTime::createWithDouble(start), MediaTime::createWithDouble(end), WTFMove(fragment)));
     textTrackCue->suspendIfNeeded();
@@ -291,7 +292,7 @@ void TextTrackCue::setStartTime(const MediaTime& value)
     m_startTime = value;
     didChange();
 }
-    
+
 void TextTrackCue::setEndTime(double value)
 {
     if (m_endTime.toDouble() == value)
@@ -306,12 +307,12 @@ void TextTrackCue::setEndTime(const MediaTime& value)
     m_endTime = value;
     didChange();
 }
-    
+
 void TextTrackCue::setPauseOnExit(bool value)
 {
     if (m_pauseOnExit == value)
         return;
-    
+
     m_pauseOnExit = value;
 }