OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <head> |
| 4 <title>Shadow DOM: Attaching a ShadowRoot</title> |
| 5 <meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org"> |
| 6 <meta name="assert" content="Element.prototype.attachShadow should create an ins
tance of ShadowRoot"> |
| 7 <link rel="help" href="https://w3c.github.io/webcomponents/spec/shadow/#widl-Ele
ment-attachShadow-ShadowRoot-ShadowRootInit-shadowRootInitDict"> |
| 8 <script src="../../../resources/testharness.js"></script> |
| 9 <script src="../../../resources/testharnessreport.js"></script> |
| 10 <link rel='stylesheet' href='../../../resources/testharness.css'> |
| 11 </head> |
| 12 <body> |
| 13 <div id="log"></div> |
| 14 <script> |
| 15 |
| 16 test(function () { |
| 17 assert_true('attachShadow' in Element.prototype, 'Element.prototype.attachSh
adow must exist'); |
| 18 assert_equals(typeof(document.createElement('div').attachShadow), 'function'
, 'An instance of div must have attachShadow which is a function'); |
| 19 }, 'Check the existence of Element.attachShadow'); |
| 20 |
| 21 test(function () { |
| 22 assert_false('attachShadow' in Node.prototype, 'Node.prototype.attachShadow
must not exist'); |
| 23 assert_false('attachShadow' in CharacterData.prototype, 'CharacterData.proto
type.attachShadow must not exist'); |
| 24 assert_false('attachShadow' in Comment.prototype, 'Comment.prototype.attachS
hadow must not exist'); |
| 25 assert_equals(typeof(document.createComment('').attachShadow), 'undefined',
'An instance of comment must not have attachShadow'); |
| 26 assert_false('attachShadow' in Document.prototype, 'Document.prototype.attac
hShadow must not exist'); |
| 27 assert_equals(typeof(document.attachShadow), 'undefined', 'An instance of do
cument must not have attachShadow which is a function'); |
| 28 assert_false('attachShadow' in DocumentFragment.prototype, 'DocumentFragment
.prototype.attachShadow must not exist'); |
| 29 assert_equals(typeof((new DOMParser()).parseFromString('', 'text/html').atta
chShadow), 'undefined', 'An instance of document must not have attachShadow whic
h is a function'); |
| 30 assert_false('attachShadow' in Text.prototype, 'Text.prototype.attachShadow
must not exist'); |
| 31 assert_equals(typeof(document.createTextNode('').attachShadow), 'undefined',
'An instance of text node must not have attachShadow'); |
| 32 }, 'Nodes other than Element should not have attachShadow'); |
| 33 |
| 34 test(function () { |
| 35 assert_throws({'name': 'TypeError'}, function () { |
| 36 document.createElement('div').attachShadow({}) |
| 37 }, 'attachShadow must throw a TypeError when mode is omitted'); |
| 38 |
| 39 assert_throws({'name': 'TypeError'}, function () { |
| 40 document.createElement('div').attachShadow({mode: true}) |
| 41 }, 'attachShadow must throw a TypeError when mode is a boolean'); |
| 42 |
| 43 assert_throws({'name': 'TypeError'}, function () { |
| 44 document.createElement('div').attachShadow({mode: 1}) |
| 45 }, 'attachShadow must throw a TypeError when mode is 1'); |
| 46 }, 'Element.attachShadow must throw a TypeError if mode is not "open" or "closed
"'); |
| 47 |
| 48 test(function () { |
| 49 assert_true(document.createElement('div').attachShadow({mode: "open"}) insta
nceof ShadowRoot, |
| 50 'attachShadow({mode: "open"}) should create an instance of ShadowRoot'); |
| 51 assert_true(document.createElement('div').attachShadow({mode: "closed"}) ins
tanceof ShadowRoot, |
| 52 'attachShadow({mode: "closed"}) should create an instance of ShadowRoot'
); |
| 53 }, 'Element.attachShadow must create an instance of ShadowRoot'); |
| 54 |
| 55 test(function () { |
| 56 assert_throws({'name': 'InvalidStateError'}, function () { |
| 57 var div = document.createElement('div'); |
| 58 div.attachShadow({mode: "open"}); |
| 59 div.attachShadow({mode: "open"}); |
| 60 }, 'Calling attachShadow({mode: "open"}) twice on the same element must thro
w'); |
| 61 |
| 62 assert_throws({'name': 'InvalidStateError'}, function () { |
| 63 var div = document.createElement('div'); |
| 64 div.attachShadow({mode: "closed"}); |
| 65 div.attachShadow({mode: "closed"}); |
| 66 }, 'Calling attachShadow({mode: "closed"}) twice on the same element must th
row'); |
| 67 |
| 68 assert_throws({'name': 'InvalidStateError'}, function () { |
| 69 var div = document.createElement('div'); |
| 70 div.attachShadow({mode: "open"}); |
| 71 div.attachShadow({mode: "closed"}); |
| 72 }, 'Calling attachShadow({mode: "closed"}) after attachShadow({mode: "open"}
) on the same element must throw'); |
| 73 |
| 74 assert_throws({'name': 'InvalidStateError'}, function () { |
| 75 var div = document.createElement('div'); |
| 76 div.attachShadow({mode: "closed"}); |
| 77 div.attachShadow({mode: "open"}); |
| 78 }, 'Calling attachShadow({mode: "open"}) after attachShadow({mode: "closed"}
) on the same element must throw'); |
| 79 }, 'Element.attachShadow must throw a InvalidStateError if the context object al
ready hosts a shadow tree'); |
| 80 |
| 81 test(function () { |
| 82 for (var elementName of ['button', 'details', 'input', 'marquee', 'meter', '
progress', 'select', 'textarea', 'keygen']) { |
| 83 assert_throws({'name': 'NotSupportedError'}, function () { |
| 84 document.createElement(elementName).attachShadow({mode: "open"}); |
| 85 }, 'Calling attachShadow({mode: "open"}) on ' + elementName + ' element
must throw'); |
| 86 |
| 87 assert_throws({'name': 'NotSupportedError'}, function () { |
| 88 document.createElement(elementName).attachShadow({mode: "closed"}); |
| 89 }, 'Calling attachShadow({mode: "closed"}) on ' + elementName + ' elemen
t must throw'); |
| 90 } |
| 91 }, 'Element.attachShadow must throw a NotSupportedError for button, details, inp
ut, marquee, meter, progress, select, textarea, and keygen elements'); |
| 92 |
| 93 </script> |
| 94 </body> |
| 95 </html> |
OLD | NEW |