LayoutTests/fast/shadow-dom/Node-interface-rootNode.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <title>Shadow DOM: Extensions to Node interface</title>
   5 <meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org">
   6 <meta name="assert" content="Node interface must have rootNode attribute">
   7 <link rel="help" href="http://w3c.github.io/webcomponents/spec/shadow/#extensions-to-node-interface">
   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('rootNode' in document.createElement('div').attachShadow({mode: 'closed'}), 'rootNode must be defined on a closed shadow root element');
  18     assert_true('rootNode' in document.createElement('div').attachShadow({mode: 'open'}), 'rootNode must be defined on a open shadow root element');
  19 }, 'rootNode attribute must be defined on ShadowRoot interface');
  20
  21 test(function () {
  22     var closedShadowRoot = document.createElement('div').attachShadow({mode: 'closed'});
  23     assert_equals(closedShadowRoot.rootNode, closedShadowRoot, 'rootNode on a closed shadow root must return the shadow root itself');
  24
  25     var openShadowRoot = document.createElement('div').attachShadow({mode: 'open'});
  26     assert_equals(openShadowRoot.rootNode, openShadowRoot, 'rootNode on a open shadow root must return the shadow root itself');
  27 }, 'rootNode attribute must return the context object when it does not have any parent');
  28
  29 test(function () {
  30     var parent = document.createElement('div');
  31
  32     var hostWithClosedShadowRoot = document.createElement('div');
  33     parent.appendChild(hostWithClosedShadowRoot);
  34     var closedShadowRoot = hostWithClosedShadowRoot.attachShadow({mode: 'closed'});
  35     assert_equals(closedShadowRoot.rootNode, closedShadowRoot, 'rootNode on a closed shadow root with a single ancestor on its host must return the shadow root itself');
  36
  37     var hostWithOpenShadowRoot = document.createElement('div');
  38     parent.appendChild(hostWithOpenShadowRoot);
  39     var openShadowRoot = hostWithOpenShadowRoot.attachShadow({mode: 'open'});
  40     assert_equals(openShadowRoot.rootNode, openShadowRoot, 'rootNode on a open shadow root with a single ancestor on its host must return the shadow root itself');
  41 }, 'rootNode attribute must return the parent node of the context object when the context object has a single ancestor not in a document');
  42
  43 test(function () {
  44     var parent = document.createElement('div');
  45     document.body.appendChild(parent);
  46
  47     var element = document.createElement('div');
  48     parent.appendChild(element);
  49     assert_equals(element.rootNode, document, 'rootNode on an element inside a document must return the document');
  50
  51     var text = document.createTextNode('');
  52     parent.appendChild(text);
  53     assert_equals(text.rootNode, document, 'rootNode on a text node inside a document must return the document');
  54
  55     var processingInstruction = document.createProcessingInstruction('target', 'data');
  56     parent.appendChild(processingInstruction)
  57     assert_equals(processingInstruction.rootNode, document, 'rootNode on a processing instruction node inside a document must return the document');
  58 }, 'rootNode attribute must return the document when a node is in document and not in a shadow tree');
  59
  60 function testrootNodeOnNodeInsideShadowTree(mode) {
  61     test(function () {
  62         var host = document.createElement('div');
  63         document.body.appendChild(host);
  64
  65         var shadowRoot = host.attachShadow({mode: mode});
  66         var parent = document.createElement('p');
  67         shadowRoot.appendChild(parent);
  68
  69         var element = document.createElement('span');
  70         parent.appendChild(element);
  71         assert_equals(element.rootNode, shadowRoot, 'rootNode on an element inside a shadow tree must return the shadow root');
  72
  73         var text = document.createTextNode('');
  74         parent.appendChild(text);
  75         assert_equals(text.rootNode, shadowRoot, 'rootNode on a text node inside a shadow tree must return the shadow root');
  76
  77         var processingInstruction = document.createProcessingInstruction('target', 'data');
  78         parent.appendChild(processingInstruction);
  79         assert_equals(processingInstruction.rootNode, shadowRoot, 'rootNode on a processing instruction node inside a shadow tree must return the shadow root');
  80     }, 'rootNode attribute must return the ' + mode + ' shadow root of the context object when the shadow host is in a document');
  81 }
  82
  83 testrootNodeOnNodeInsideShadowTree('open');
  84 testrootNodeOnNodeInsideShadowTree('closed');
  85
  86 function testrootNodeOnNodeInsideNestedShadowTree(outerMode, innerMode) {
  87     test(function () {
  88         var outerHost = document.createElement('div');
  89         document.body.appendChild(outerHost);
  90         var outerShadowRoot = outerHost.attachShadow({mode: outerMode});
  91
  92         var innerHost = document.createElement('section');
  93         outerShadowRoot.appendChild(innerHost);
  94         var innerShadowRoot = innerHost.attachShadow({mode: innerMode});
  95
  96         var parent = document.createElement('p');
  97         innerShadowRoot.appendChild(parent);
  98
  99         var element = document.createElement('span');
 100         parent.appendChild(element);
 101         assert_equals(element.rootNode, innerShadowRoot, 'rootNode on an element inside a shadow tree must return its root node');
 102
 103         var text = document.createTextNode('');
 104         parent.appendChild(text);
 105         assert_equals(text.rootNode, innerShadowRoot, 'rootNode on a text node inside a shadow tree must return its root node');
 106
 107         var processingInstruction = document.createProcessingInstruction('target', 'data');
 108         parent.appendChild(processingInstruction);
 109         assert_equals(processingInstruction.rootNode, innerShadowRoot, 'rootNode on a processing instruction node inside a shadow tree must return its root node');
 110     }, 'rootNode attribute must return the root node of the context object when the context object is inside a ' + innerMode
 111         + ' shadow root whose shadow host is in another ' + outerMode + ' shadow root');
 112 }
 113
 114 testrootNodeOnNodeInsideNestedShadowTree('open', 'open');
 115 testrootNodeOnNodeInsideNestedShadowTree('open', 'closed');
 116 testrootNodeOnNodeInsideNestedShadowTree('closed', 'open');
 117 testrootNodeOnNodeInsideNestedShadowTree('closed', 'closed');
 118
 119 </script>
 120 </body>
 121 </html>