diff options
Diffstat (limited to 'testing/web-platform/tests/custom-elements/state/tentative')
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> |