summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/custom-elements/state
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 17:32:43 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 17:32:43 +0000
commit6bf0a5cb5034a7e684dcc3500e841785237ce2dd (patch)
treea68f146d7fa01f0134297619fbe7e33db084e0aa /testing/web-platform/tests/custom-elements/state
parentInitial commit. (diff)
downloadthunderbird-6bf0a5cb5034a7e684dcc3500e841785237ce2dd.tar.xz
thunderbird-6bf0a5cb5034a7e684dcc3500e841785237ce2dd.zip
Adding upstream version 1:115.7.0.upstream/1%115.7.0upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/custom-elements/state')
-rw-r--r--testing/web-platform/tests/custom-elements/state/tentative/ElementInternals-states.html82
-rw-r--r--testing/web-platform/tests/custom-elements/state/tentative/README.md1
-rw-r--r--testing/web-platform/tests/custom-elements/state/tentative/state-pseudo-class.html132
3 files changed, 215 insertions, 0 deletions
diff --git a/testing/web-platform/tests/custom-elements/state/tentative/ElementInternals-states.html b/testing/web-platform/tests/custom-elements/state/tentative/ElementInternals-states.html
new file mode 100644
index 0000000000..96dcb841ee
--- /dev/null
+++ b/testing/web-platform/tests/custom-elements/state/tentative/ElementInternals-states.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+class TestElement extends HTMLElement {
+ constructor() {
+ super();
+ this._internals = this.attachInternals();
+ }
+
+ get internals() {
+ return this._internals;
+ }
+}
+customElements.define("test-element", TestElement);
+
+test(() => {
+ let i = (new TestElement()).internals;
+
+ assert_true(i.states instanceof CustomStateSet);
+ assert_equals(i.states.size, 0);
+ assert_false(i.states.has('foo'));
+ assert_false(i.states.has('--foo'));
+ assert_equals(i.states.toString(), '[object CustomStateSet]');
+}, 'CustomStateSet behavior of ElementInternals.states: Initial state');
+
+test(() => {
+ let i = (new TestElement()).internals;
+ assert_throws_js(TypeError, () => { i.states.supports('foo'); });
+ assert_throws_dom('SyntaxError', () => { i.states.add(''); });
+ assert_throws_dom('SyntaxError', () => { i.states.add('--a\tb'); });
+}, 'CustomStateSet behavior of ElementInternals.states: Exceptions');
+
+test(() => {
+ let i = (new TestElement()).internals;
+ i.states.add('--foo');
+ i.states.add('--bar');
+ i.states.add('--foo');
+ assert_equals(i.states.size, 2);
+ assert_true(i.states.has('--foo'));
+ assert_true(i.states.has('--bar'));
+ assert_array_equals([...i.states], ['--foo', '--bar']);
+ i.states.delete('--foo');
+ assert_array_equals([...i.states], ['--bar']);
+ i.states.add('--foo');
+ assert_array_equals([...i.states], ['--bar', '--foo']);
+ i.states.delete('--bar');
+ i.states.add('--baz');
+ assert_array_equals([...i.states], ['--foo', '--baz']);
+}, 'CustomStateSet behavior of ElementInternals.states: Modifications');
+
+test(() => {
+ let i = (new TestElement()).internals;
+ i.states.add('--one');
+ i.states.add('--two');
+ i.states.add('--three');
+ let iter = i.states.values();
+
+ // Delete the next item.
+ i.states.delete('--one');
+ let item = iter.next();
+ assert_false(item.done);
+ assert_equals(item.value, '--two');
+
+ // Clear the set.
+ i.states.clear();
+ item = iter.next();
+ assert_true(item.done);
+
+ // Delete the previous item.
+ i.states.add('--one');
+ i.states.add('--two');
+ i.states.add('--three');
+ iter = i.states.values();
+ item = iter.next();
+ assert_equals(item.value, '--one');
+ i.states.delete('--one');
+ item = iter.next();
+ assert_equals(item.value, '--two');
+}, 'Updating a CustomStateSet while iterating it should work');
+</script>
+
diff --git a/testing/web-platform/tests/custom-elements/state/tentative/README.md b/testing/web-platform/tests/custom-elements/state/tentative/README.md
new file mode 100644
index 0000000000..b11784bd07
--- /dev/null
+++ b/testing/web-platform/tests/custom-elements/state/tentative/README.md
@@ -0,0 +1 @@
+Tests for [Custom State Pseudo Class](https://wicg.github.io/custom-state-pseudo-class/)
diff --git a/testing/web-platform/tests/custom-elements/state/tentative/state-pseudo-class.html b/testing/web-platform/tests/custom-elements/state/tentative/state-pseudo-class.html
new file mode 100644
index 0000000000..3e3806a042
--- /dev/null
+++ b/testing/web-platform/tests/custom-elements/state/tentative/state-pseudo-class.html
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+#state-and-part::part(inner) {
+ opacity: 0;
+}
+#state-and-part::part(inner):--innerFoo {
+ opacity: 0.5;
+}
+#state-and-part:--outerFoo::part(inner) {
+ opacity: 0.25;
+}
+:--\(escaped\ state {}
+</style>
+<body>
+<script>
+class TestElement extends HTMLElement {
+ constructor() {
+ super();
+ this._internals = this.attachInternals();
+ }
+
+ get i() {
+ return this._internals;
+ }
+}
+customElements.define('test-element', TestElement);
+
+class ContainerElement extends HTMLElement {
+ constructor() {
+ super();
+ this._internals = this.attachInternals();
+ this._shadow = this.attachShadow({mode:'open'});
+ this._shadow.innerHTML = `
+<style>
+:host {
+ border-style: solid;
+}
+:host(:--dotted) {
+ border-style: dotted;
+}
+</style>
+<test-element part="inner"></test-element>`;
+ }
+
+ get i() {
+ return this._internals;
+ }
+ get innerElement() {
+ return this._shadow.querySelector('test-element');
+ }
+}
+customElements.define('container-element', ContainerElement);
+
+test(() => {
+ document.querySelector(':--');
+ document.querySelector(':--16px');
+}, ':--foo parsing passes');
+
+test(() => {
+ assert_throws_dom('SyntaxError', () => { document.querySelector(':--('); });
+ assert_throws_dom('SyntaxError', () => { document.querySelector(':--)'); });
+ assert_throws_dom('SyntaxError', () => { document.querySelector(':--='); });
+ assert_throws_dom('SyntaxError', () => { document.querySelector(':--name=value'); });
+}, ':--foo parsing failures');
+
+test(() => {
+ assert_equals(document.styleSheets[0].cssRules[1].cssText,
+ '#state-and-part::part(inner):--innerFoo { opacity: 0.5; }');
+ assert_equals(document.styleSheets[0].cssRules[3].selectorText,
+ ':--\\(escaped\\ state');
+}, ':--foo serialization');
+
+test(() => {
+ let element = new TestElement();
+ let states = element.i.states;
+
+ assert_false(element.matches(':--foo'));
+ assert_true(element.matches(':not(:--foo)'));
+ states.add('--foo');
+ assert_true(element.matches(':--foo'));
+ assert_true(element.matches(':is(:--foo)'));
+ element.classList.add('c1', 'c2');
+ assert_true(element.matches('.c1:--foo'));
+ assert_true(element.matches(':--foo.c1'));
+ assert_true(element.matches('.c2:--foo.c1'));
+}, ':--foo in simple cases');
+
+test(() => {
+ let element = new TestElement();
+ element.tabIndex = 0;
+ document.body.appendChild(element);
+ element.focus();
+ let states = element.i.states;
+
+ states.add('--foo');
+ assert_true(element.matches(':focus:--foo'));
+ assert_true(element.matches(':--foo:focus'));
+}, ':--foo and other pseudo classes');
+
+test(() => {
+ let outer = new ContainerElement();
+ outer.id = 'state-and-part';
+ document.body.appendChild(outer);
+ let inner = outer.innerElement;
+ let innerStates = inner.i.states;
+
+ innerStates.add('--innerFoo');
+ assert_equals(getComputedStyle(inner).opacity, '0.5',
+ '::part() followed by :--foo');
+ innerStates.delete('--innerFoo');
+ innerStates.add('--innerfoo');
+ assert_equals(getComputedStyle(inner).opacity, '0',
+ ':--foo matching should be case-sensitive');
+ innerStates.delete('--innerfoo');
+
+ outer.i.states.add('--outerFoo');
+ assert_equals(getComputedStyle(inner).opacity, '0.25',
+ ':--foo followed by ::part()');
+}, ':--foo and ::part()');
+
+test(() => {
+ let outer = new ContainerElement();
+ document.body.appendChild(outer);
+
+ assert_equals(getComputedStyle(outer).borderStyle, 'solid');
+ outer.i.states.add('--dotted');
+ assert_equals(getComputedStyle(outer).borderStyle, 'dotted');
+}, ':--foo and :host()');
+</script>
+</body>
generated by cgit v1.2.3 (git 2.39.1) at 2024-07-20 12:59:58 +0000