src/third_party/WebKit/LayoutTests/fast/dom/shadow/shadow-tree-styles-with-apply-author-styles.html

   1 <!doctype html>
   2 <html>
   3 <head>
   4 <script src="../../../resources/js-test.js"></script>
   5 <script src="resources/shadow-dom.js"></script>
   6 </head>
   7 <body>
   8   <div id='sandbox'></div>
   9   <pre id='console'></pre>
  10 </body>
  11 <script>
  12 description('Test for issue 247275: shadow tree styles selects shadow host when a shadow root has apply-author-styles true.');
  13
  14 var sandbox = document.getElementById('sandbox');
  15
  16 function borderColorOf(selector) {
  17     return window.getComputedStyle(getNodeInTreeOfTrees(selector)).borderColor;
  18 }
  19
  20 function shouldHaveBorderColor(selector, color) {
  21     shouldBeEqualToString('borderColorOf(\'' + selector + '\')', color);
  22 }
  23
  24 function cleanUp() {
  25     sandbox.innerHTML = '';
  26 }
  27
  28 sandbox.appendChild(
  29     createDOM('style', {},
  30         document.createTextNode('div { border: 1px solid green; }')));
  31 sandbox.appendChild(
  32     createDOM('div', {'id': 'host'},
  33         createShadowRoot(
  34             createDOM('div', {'id': 'target'},
  35                 createShadowRoot({'applyAuthorStyles': 'true'},
  36                     createDOM('span', {'id': 'span'},
  37                         document.createTextNode('Hello')))))));
  38
  39 debug('Test when one shadow root has apply-author-styles true');
  40 shouldHaveBorderColor('host/target', 'rgb(0, 128, 0)');
  41
  42 cleanUp();
  43
  44 sandbox.appendChild(
  45     createDOM('style', {},
  46         document.createTextNode('div { border: 1px solid green; }')));
  47 sandbox.appendChild(
  48     createDOM('div', {'id': 'host'},
  49         createShadowRoot(
  50             createDOM('div', {'id': 'target'},
  51                 createShadowRoot({'applyAuthorStyles': 'true'},
  52                     createDOM('span', {'id': 'spanA'},
  53                         document.createTextNode('Hello'))),
  54                 createShadowRoot(
  55                     createDOM('span', {'id': 'spanB'},
  56                         document.createTextNode('Hello'))),
  57             document.createTextNode('child of target')))));
  58
  59 debug('Test when an inert shadow root has apply-author-styles true');
  60 shouldHaveBorderColor('host/target', 'rgb(0, 0, 0)');
  61
  62 cleanUp();
  63
  64 sandbox.appendChild(
  65     createDOM('style', {},
  66         document.createTextNode('div { border: 1px solid green; }')));
  67 sandbox.appendChild(
  68     createDOM('div', {'id': 'host'},
  69         createShadowRoot(
  70             createDOM('div', {'id': 'target'},
  71                 createShadowRoot({'applyAuthorStyles': 'true'},
  72                     createDOM('span', {'id': 'spanA'},
  73                         document.createTextNode('Hello'))),
  74                 createShadowRoot(
  75                     createDOM('shadow', {}))),
  76             document.createTextNode('child of target'))));
  77
  78 debug('Test when one of shadow roots which are not out of compositing has apply-author-styles true');
  79 shouldHaveBorderColor('host/target', 'rgb(0, 128, 0)');
  80
  81 cleanUp();
  82
  83 </script>
  84 </html>