summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/custom-elements
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-05-15 03:35:49 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-05-15 03:35:49 +0000
commitd8bbc7858622b6d9c278469aab701ca0b609cddf (patch)
treeeff41dc61d9f714852212739e6b3738b82a2af87 /testing/web-platform/tests/custom-elements
parentReleasing progress-linux version 125.0.3-1~progress7.99u1. (diff)
downloadfirefox-d8bbc7858622b6d9c278469aab701ca0b609cddf.tar.xz
firefox-d8bbc7858622b6d9c278469aab701ca0b609cddf.zip
Merging upstream version 126.0.
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/custom-elements')
-rw-r--r--testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLMediaElement.html2
-rw-r--r--testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLSourceElement.html2
-rw-r--r--testing/web-platform/tests/custom-elements/state/state-css-selector-nth-of.html92
-rw-r--r--testing/web-platform/tests/custom-elements/state/state-css-selector.html26
4 files changed, 120 insertions, 2 deletions
diff --git a/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLMediaElement.html b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLMediaElement.html
index 58e002c52c..dd830b7767 100644
--- a/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLMediaElement.html
+++ b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLMediaElement.html
@@ -62,7 +62,7 @@ testReflectBooleanAttributeWithDependentAttributes(
);
testReflectAttribute(
- 'src', 'src', '/media/video.ogv',
+ 'src', 'src', '/media/video.webm',
'/media/movie_5.mp4', 'src on HTMLMediaElement in video', 'video',
HTMLVideoElement
);
diff --git a/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLSourceElement.html b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLSourceElement.html
index f7d567ebcb..8168fd1c2e 100644
--- a/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLSourceElement.html
+++ b/testing/web-platform/tests/custom-elements/reactions/customized-builtins/HTMLSourceElement.html
@@ -22,7 +22,7 @@ function getParentElement(id) {
}
testReflectAttributeWithParentNode(
- 'src', 'src', '/media/video.ogv',
+ 'src', 'src', '/media/video.webm',
'/media/white.mp4', 'src on HTMLSourceElement', 'source',
() => getParentElement('video'), HTMLSourceElement
);
diff --git a/testing/web-platform/tests/custom-elements/state/state-css-selector-nth-of.html b/testing/web-platform/tests/custom-elements/state/state-css-selector-nth-of.html
new file mode 100644
index 0000000000..c7b7183ccb
--- /dev/null
+++ b/testing/web-platform/tests/custom-elements/state/state-css-selector-nth-of.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="author" title="Keith Cirkel" href="mailto:wpt@keithcirkel.co.uk" />
+ <link rel="help" href="https://html.spec.whatwg.org/multipage/custom-elements.html#custom-state-pseudo-class" />
+ <title>:state() css selector applies to nth-of selectors</title>
+
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ </head>
+ <body>
+ <custom-state id="myCE">First Element</custom-state>
+ <p id="mySibling">First Sibling</p>
+ <custom-state id="myCE2">Second Element</custom-state>
+ <p id="mySibling2">Second Sibling</p>
+ <style>
+ :nth-child(1), :nth-child(2) {
+ color: #f00;
+ }
+ :nth-child(2 of :state(--green)) {
+ color: #0f0;
+ }
+ :nth-child(2 of :state(--green)) + p {
+ color: #00f;
+ }
+ </style>
+ <script>
+ customElements.define('custom-state', class extends HTMLElement {
+ connectedCallback() {
+ this.elementInternals = this.attachInternals();
+ }
+ });
+
+ test(function(t) {
+ t.add_cleanup(() => { myCE.elementInternals.states.delete('--green') });
+ t.add_cleanup(() => { myCE2.elementInternals.states.delete('--green') });
+ assert_false(myCE.elementInternals.states.has('--green'));
+ assert_equals(getComputedStyle(myCE).getPropertyValue('color'), 'rgb(255, 0, 0)');
+ assert_equals(getComputedStyle(myCE2).getPropertyValue('color'), 'rgb(255, 0, 0)');
+ assert_equals(getComputedStyle(mySibling).getPropertyValue('color'), 'rgb(255, 0, 0)');
+ assert_equals(getComputedStyle(mySibling2).getPropertyValue('color'), 'rgb(255, 0, 0)');
+ myCE.elementInternals.states.add('--green');
+ assert_true(myCE.elementInternals.states.has('--green'));
+ assert_equals(getComputedStyle(myCE).getPropertyValue('color'), 'rgb(255, 0, 0)');
+ assert_equals(getComputedStyle(myCE2).getPropertyValue('color'), 'rgb(255, 0, 0)');
+ assert_equals(getComputedStyle(mySibling).getPropertyValue('color'), 'rgb(255, 0, 0)');
+ assert_equals(getComputedStyle(mySibling2).getPropertyValue('color'), 'rgb(255, 0, 0)');
+ myCE2.elementInternals.states.add('--green');
+ assert_true(myCE2.elementInternals.states.has('--green'));
+ assert_equals(getComputedStyle(myCE).getPropertyValue('color'), 'rgb(255, 0, 0)');
+ assert_equals(getComputedStyle(myCE2).getPropertyValue('color'), 'rgb(0, 255, 0)');
+ assert_equals(getComputedStyle(mySibling).getPropertyValue('color'), 'rgb(255, 0, 0)');
+ assert_equals(getComputedStyle(mySibling2).getPropertyValue('color'), 'rgb(0, 0, 255)');
+ }, "state selector has influence on nth-of when state is applied");
+
+ test(function(t) {
+ t.add_cleanup(() => { myCE.elementInternals.states.delete('--foo') });
+ t.add_cleanup(() => { myCE2.elementInternals.states.delete('--foo') });
+ myCE.elementInternals.states.add('--foo');
+ myCE2.elementInternals.states.add('--foo');
+ assert_false(myCE.elementInternals.states.has('--green'));
+ assert_true(myCE.elementInternals.states.has('--foo'));
+ assert_false(myCE2.elementInternals.states.has('--green'));
+ assert_true(myCE2.elementInternals.states.has('--foo'));
+ assert_equals(getComputedStyle(myCE).getPropertyValue('color'), 'rgb(255, 0, 0)');
+ assert_equals(getComputedStyle(myCE2).getPropertyValue('color'), 'rgb(255, 0, 0)');
+ assert_equals(getComputedStyle(mySibling).getPropertyValue('color'), 'rgb(255, 0, 0)');
+ assert_equals(getComputedStyle(mySibling2).getPropertyValue('color'), 'rgb(255, 0, 0)');
+ }, "state selector only applies on given ident");
+
+ test(function(t) {
+ myCE.elementInternals.states.add('--green');
+ myCE.elementInternals.states.add('--foo');
+ myCE2.elementInternals.states.add('--green');
+ myCE2.elementInternals.states.add('--foo');
+ assert_true(myCE.elementInternals.states.has('--green'));
+ assert_true(myCE.elementInternals.states.has('--foo'));
+ assert_equals(getComputedStyle(myCE).getPropertyValue('color'), 'rgb(255, 0, 0)');
+ assert_equals(getComputedStyle(myCE2).getPropertyValue('color'), 'rgb(0, 255, 0)');
+ assert_equals(getComputedStyle(mySibling).getPropertyValue('color'), 'rgb(255, 0, 0)');
+ assert_equals(getComputedStyle(mySibling2).getPropertyValue('color'), 'rgb(0, 0, 255)');
+ myCE.elementInternals.states.clear();
+ assert_equals(getComputedStyle(myCE).getPropertyValue('color'), 'rgb(255, 0, 0)');
+ assert_equals(getComputedStyle(myCE2).getPropertyValue('color'), 'rgb(255, 0, 0)');
+ assert_equals(getComputedStyle(mySibling).getPropertyValue('color'), 'rgb(255, 0, 0)');
+ assert_equals(getComputedStyle(mySibling2).getPropertyValue('color'), 'rgb(255, 0, 0)');
+ }, "style is invalided on clear()");
+
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/custom-elements/state/state-css-selector.html b/testing/web-platform/tests/custom-elements/state/state-css-selector.html
index d29c927223..8ead8d7809 100644
--- a/testing/web-platform/tests/custom-elements/state/state-css-selector.html
+++ b/testing/web-platform/tests/custom-elements/state/state-css-selector.html
@@ -99,6 +99,32 @@
assert_equals(getComputedStyle(mySibling).getPropertyValue('color'), 'rgb(255, 0, 0)');
}, "state selector only applies to has() on given ident");
+ test(function(t) {
+ myCE.elementInternals.states.add('--green');
+ myCE.elementInternals.states.add('--green');
+ myCE.elementInternals.states.add('--green');
+ t.add_cleanup(() => { myCE.elementInternals.states.delete('--green') });
+ assert_true(myCE.elementInternals.states.has('--green'));
+ assert_equals(getComputedStyle(myCE).getPropertyValue('color'), 'rgb(0, 255, 0)');
+ assert_true(myCE.elementInternals.states.delete('--green'));
+ assert_false(myCE.elementInternals.states.has('--green'));
+ assert_equals(getComputedStyle(myCE).getPropertyValue('color'), 'rgb(255, 0, 0)');
+ assert_false(myCE.elementInternals.states.delete('--green'));
+ }, "states added multiple times counts as one");
+
+ test(function(t) {
+ myCE.elementInternals.states.add('--green');
+ myCE.elementInternals.states.add('--foo');
+ t.add_cleanup(() => { myCE.elementInternals.states.clear() });
+ assert_true(myCE.elementInternals.states.has('--green'));
+ assert_true(myCE.elementInternals.states.has('--foo'));
+ assert_equals(getComputedStyle(myCE).getPropertyValue('color'), 'rgb(0, 255, 0)');
+ myCE.elementInternals.states.clear();
+ assert_false(myCE.elementInternals.states.has('--green'));
+ assert_false(myCE.elementInternals.states.has('--foo'));
+ assert_equals(getComputedStyle(myCE).getPropertyValue('color'), 'rgb(255, 0, 0)');
+ }, "style is invalided on clear()");
+
</script>
</body>
</html>
generated by cgit v1.2.3 (git 2.39.1) at 2024-10-11 16:39:56 +0000