Element-interface-attachShadow.html (5287B)
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 instance of ShadowRoot"> 7 <link rel="help" href="https://w3c.github.io/webcomponents/spec/shadow/#widl-Element-attachShadow-ShadowRoot-ShadowRootInit-shadowRootInitDict"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src='../html/resources/common.js'></script> 11 </head> 12 <body> 13 <div id="log"></div> 14 <script> 15 16 test(function () { 17 assert_true('attachShadow' in Element.prototype, 'Element.prototype.attachShadow 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.prototype.attachShadow must not exist'); 24 assert_false('attachShadow' in Comment.prototype, 'Comment.prototype.attachShadow 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.attachShadow must not exist'); 27 assert_equals(typeof(document.attachShadow), 'undefined', 'An instance of document 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').attachShadow), 'undefined', 'An instance of document must not have attachShadow which 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_js(TypeError, function () { 36 document.createElement('div').attachShadow({}) 37 }, 'attachShadow must throw a TypeError when mode is omitted'); 38 39 assert_throws_js(TypeError, function () { 40 document.createElement('div').attachShadow({mode: true}) 41 }, 'attachShadow must throw a TypeError when mode is a boolean'); 42 43 assert_throws_js(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"}) instanceof ShadowRoot, 50 'attachShadow({mode: "open"}) should create an instance of ShadowRoot'); 51 assert_true(document.createElement('div').attachShadow({mode: "closed"}) instanceof 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_dom('NotSupportedError', 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 throw'); 61 62 assert_throws_dom('NotSupportedError', 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 throw'); 67 68 assert_throws_dom('NotSupportedError', 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_dom('NotSupportedError', 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 NotSupportedError if the context object already hosts a shadow tree'); 80 81 test(function () { 82 for (var elementName of HTML5_SHADOW_DISALLOWED_ELEMENTS) { 83 assert_throws_dom('NotSupportedError', function () { 84 document.createElement(elementName).attachShadow({mode: "open"}); 85 }, 'Calling attachShadow({mode: "open"}) on ' + elementName + ' element must throw'); 86 87 assert_throws_dom('NotSupportedError', function () { 88 document.createElement(elementName).attachShadow({mode: "closed"}); 89 }, 'Calling attachShadow({mode: "closed"}) on ' + elementName + ' element must throw'); 90 } 91 }, 'Element.attachShadow must throw a NotSupportedError for non-safelisted elements'); 92 93 </script> 94 </body> 95 </html>