ElementInternals-states.html (2508B)
1 <!DOCTYPE html> 2 <link rel=help href="https://html.spec.whatwg.org/multipage/custom-elements.html#custom-state-pseudo-class"> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <script> 6 class TestElement extends HTMLElement { 7 constructor() { 8 super(); 9 this._internals = this.attachInternals(); 10 } 11 12 get internals() { 13 return this._internals; 14 } 15 } 16 customElements.define("test-element", TestElement); 17 18 test(() => { 19 let i = (new TestElement()).internals; 20 21 assert_true(i.states instanceof CustomStateSet); 22 assert_equals(i.states.size, 0); 23 assert_false(i.states.has('foo')); 24 assert_false(i.states.has('--foo')); 25 assert_equals(i.states.toString(), '[object CustomStateSet]'); 26 }, 'CustomStateSet behavior of ElementInternals.states: Initial state'); 27 28 test(() => { 29 let i = (new TestElement()).internals; 30 assert_throws_js(TypeError, () => { i.states.supports('foo'); }); 31 i.states.add(''); // should not throw. 32 i.states.add('--a\tb'); // should not throw. 33 }, 'CustomStateSet behavior of ElementInternals.states: Exceptions'); 34 35 test(() => { 36 let i = (new TestElement()).internals; 37 i.states.add('--foo'); 38 i.states.add('--bar'); 39 i.states.add('--foo'); 40 assert_equals(i.states.size, 2); 41 assert_true(i.states.has('--foo')); 42 assert_true(i.states.has('--bar')); 43 assert_array_equals([...i.states], ['--foo', '--bar']); 44 i.states.delete('--foo'); 45 assert_array_equals([...i.states], ['--bar']); 46 i.states.add('--foo'); 47 assert_array_equals([...i.states], ['--bar', '--foo']); 48 i.states.delete('--bar'); 49 i.states.add('--baz'); 50 assert_array_equals([...i.states], ['--foo', '--baz']); 51 }, 'CustomStateSet behavior of ElementInternals.states: Modifications'); 52 53 test(() => { 54 let i = (new TestElement()).internals; 55 i.states.add('--one'); 56 i.states.add('--two'); 57 i.states.add('--three'); 58 let iter = i.states.values(); 59 60 // Delete the next item. 61 i.states.delete('--one'); 62 let item = iter.next(); 63 assert_false(item.done); 64 assert_equals(item.value, '--two'); 65 66 // Clear the set. 67 i.states.clear(); 68 item = iter.next(); 69 assert_true(item.done); 70 71 // Delete the previous item. 72 i.states.add('--one'); 73 i.states.add('--two'); 74 i.states.add('--three'); 75 iter = i.states.values(); 76 item = iter.next(); 77 assert_equals(item.value, '--one'); 78 i.states.delete('--one'); 79 item = iter.next(); 80 assert_equals(item.value, '--two'); 81 }, 'Updating a CustomStateSet while iterating it should work'); 82 </script>