|
| 1 | +<!DOCTYPE html> |
| 2 | +<title>Shadow root clonable flag</title> |
| 3 | +<link rel=' author' href=' mailto:[email protected]' > |
| 4 | +<link rel=' author' href=' mailto:[email protected]' > |
| 5 | +<link rel='help' href='https://dom.spec.whatwg.org/#shadowroot-clonable'> |
| 6 | +<script src='/resources/testharness.js'></script> |
| 7 | +<script src='/resources/testharnessreport.js'></script> |
| 8 | + |
| 9 | +<body> |
| 10 | +<script> |
| 11 | +test(() => { |
| 12 | + const div = document.createElement("div"); |
| 13 | + const root = div.attachShadow({ mode: "open", clonable: true }); |
| 14 | + root.appendChild(document.createElement("input")); |
| 15 | + assert_true(root.clonable, "clonable attribute"); |
| 16 | + |
| 17 | + const clone = div.cloneNode(true); |
| 18 | + const clonedRoot = clone.shadowRoot; |
| 19 | + assert_true(clonedRoot.clonable, "clone gets the same clonable state"); |
| 20 | + assert_equals(clonedRoot.children.length, 1, "children count"); |
| 21 | + assert_equals(clonedRoot.children[0].localName, "input", "children content"); |
| 22 | +}, "attachShadow with clonable: true"); |
| 23 | + |
| 24 | +for (const clonable of [false, undefined]) { |
| 25 | + test(() => { |
| 26 | + const div = document.createElement("div"); |
| 27 | + const root = div.attachShadow({ mode: "open", clonable }); |
| 28 | + root.appendChild(document.createElement("input")); |
| 29 | + assert_false(root.clonable, "clonable attribute"); |
| 30 | + |
| 31 | + const clone = div.cloneNode(true); |
| 32 | + assert_true(!clone.shadowRoot, "shadow should not be cloned"); |
| 33 | + }, `attachShadow with clonable: ${clonable}`); |
| 34 | +} |
| 35 | + |
| 36 | +test(() => { |
| 37 | + const div = document.createElement("div"); |
| 38 | + div.setHTMLUnsafe('<div><template shadowrootmode=open><input></template></div>'); |
| 39 | + const root = div.firstElementChild.shadowRoot; |
| 40 | + assert_true(!!root); |
| 41 | + assert_true(root.clonable, "clonable is automatically true for declarative shadow root"); |
| 42 | + |
| 43 | + const clone = div.cloneNode(true); |
| 44 | + const clonedRoot = clone.firstElementChild.shadowRoot; |
| 45 | + assert_true(!!clonedRoot); |
| 46 | + assert_equals(clonedRoot.children.length, 1, "children count"); |
| 47 | + assert_equals(clonedRoot.children[0].localName, "input", "children content"); |
| 48 | +}, "declarative shadow roots get clonable: true automatically"); |
| 49 | +</script> |
0 commit comments