src/third_party/WebKit/LayoutTests/fast/css/style-scoped/style-scoped-apply-author-styles.html

   1 <!doctype html>
   2 <html>
   3 <head>
   4 <script src="../../../resources/js-test.js"></script>
   5 <script src="../../dom/shadow/resources/shadow-dom.js"></script>
   6 <script>
   7 shouldBeDefined("window.internals");
   8
   9 var borderColor;
  10
  11 function borderColorShouldBe(node, color)
  12 {
  13     borderColor = document.defaultView.getComputedStyle(node, null).getPropertyValue('border-color');
  14     shouldBeEqualToString('borderColor', color);
  15 }
  16
  17 function cleanUp()
  18 {
  19     document.getElementById('sandbox').innerHTML = '';
  20 }
  21
  22 function testBasic()
  23 {
  24     debug('test a scoped style in document is applied to a node in shadow dom subtree when apply-author-styles is true.');
  25     document.getElementById('sandbox').appendChild(
  26         createDOM('div', {},
  27             createDOM('style', {'scoped': 'scoped'},
  28                 document.createTextNode('div { border: 1px solid red; }')),
  29             createDOM('div', {'id': 'host'},
  30                 createShadowRoot(
  31                     createDOM('div', {'id': 'target'})))));
  32
  33     // before
  34     getNodeInTreeOfTrees('host/').applyAuthorStyles = false;
  35     borderColorShouldBe(getNodeInTreeOfTrees('host/target'), 'rgb(0, 0, 0)');
  36
  37     // after
  38     getNodeInTreeOfTrees('host/').applyAuthorStyles = true;
  39     borderColorShouldBe(getNodeInTreeOfTrees('host/target'), 'rgb(255, 0, 0)');
  40
  41     cleanUp();
  42 }
  43
  44 function testEnclosingShadow()
  45 {
  46     debug('test a style in an enclosing shadow dom tree is applied to a node in shadow subtree when apply-author-styles is true.');
  47     document.getElementById('sandbox').appendChild(
  48         createDOM('div', {'id': 'host'},
  49             createShadowRoot(
  50                 createDOM('style', {},
  51                     document.createTextNode('div { border: 1px solid red; }')),
  52                 createDOM('div', {'id': 'enclosed'},
  53                     createShadowRoot(
  54                         createDOM('div', {'id': 'target'}))))));
  55
  56     // before
  57     getNodeInTreeOfTrees('host/enclosed/').applyAuthorStyles = false;
  58     borderColorShouldBe(getNodeInTreeOfTrees('host/enclosed/target'), 'rgb(0, 0, 0)');
  59
  60     // after
  61     getNodeInTreeOfTrees('host/enclosed/').applyAuthorStyles = true;
  62     borderColorShouldBe(getNodeInTreeOfTrees('host/enclosed/target'), 'rgb(255, 0, 0)');
  63
  64     cleanUp();
  65 }
  66
  67 function testEnclosingShadowWithScoped()
  68 {
  69     debug('test a scoped style in an enclosing shadow dom tree is applied to a node in shadow subtree when apply-author-styles is true and the node is in the scope.');
  70     document.getElementById('sandbox').appendChild(
  71         createDOM('div', {'id': 'host'},
  72             createShadowRoot(
  73                 createDOM('div', {},
  74                     createDOM('style', {'scoped': 'scoped'},
  75                         document.createTextNode('div { border: 1px solid red; }')),
  76                     createDOM('div', {'id': 'outerInScope'},
  77                         createShadowRoot(
  78                             createDOM('div', {'id': 'targetInScope'})))),
  79                 createDOM('div', {'id': 'outerOutOfScope'},
  80                         createShadowRoot(
  81                             createDOM('div', {'id': 'targetOutOfScope'}))))));
  82
  83
  84     // before
  85     getNodeInTreeOfTrees('host/outerInScope/').applyAuthorStyles = false;
  86     getNodeInTreeOfTrees('host/outerOutOfScope/').applyAuthorStyles = false;
  87
  88     borderColorShouldBe(getNodeInTreeOfTrees('host/outerInScope/targetInScope'), 'rgb(0, 0, 0)');
  89     borderColorShouldBe(getNodeInTreeOfTrees('host/outerOutOfScope/targetOutOfScope'), 'rgb(0, 0, 0)');
  90
  91     // after
  92     getNodeInTreeOfTrees('host/outerInScope/').applyAuthorStyles = true;
  93     getNodeInTreeOfTrees('host/outerOutOfScope/').applyAuthorStyles = true;
  94     borderColorShouldBe(getNodeInTreeOfTrees('host/outerInScope/targetInScope'), 'rgb(255, 0, 0)');
  95     borderColorShouldBe(getNodeInTreeOfTrees('host/outerOutOfScope/targetOutOfScope'), 'rgb(0, 0, 0)');
  96
  97     cleanUp();
  98 }
  99
 100 function testNestedShadow()
 101 {
 102     debug('test styles declared in enclosing shadow trees should be applied to an enclosed shadow tree whose apply-atur-styles is true.');
 103     document.getElementById('sandbox').appendChild(
 104         createDOM('div',
 105             createDOM('style', {'scoped': 'scoped'},
 106                 document.createTextNode('div { border: 1px solid red; }')),
 107             createDOM('div', {'id': 'host'},
 108                 createShadowRoot(
 109                     createDOM('style', {},
 110                         document.createTextNode('div { border: 1px solid blue; }')),
 111                     createDOM('div', {'id': 'outerMost'},
 112                         createShadowRoot(
 113                             createDOM('div', {'id': 'outer'},
 114                                 createShadowRoot(
 115                                     createDOM('div', {'id': 'target'})))))))));
 116
 117     getNodeInTreeOfTrees('host/').applyAuthorStyles = false;
 118     getNodeInTreeOfTrees('host/outerMost/').applyAuthorStyles = false;
 119     getNodeInTreeOfTrees('host/outerMost/outer/').applyAuthorStyles = false;
 120
 121     // No styles should be applied.
 122     borderColorShouldBe(getNodeInTreeOfTrees('host/outerMost/outer/target'), 'rgb(0, 0, 0)');
 123
 124     getNodeInTreeOfTrees('host/outerMost/outer/').applyAuthorStyles = true;
 125     // A style in document should be applied.
 126     borderColorShouldBe(getNodeInTreeOfTrees('host/outerMost/outer/target'), 'rgb(0, 0, 255)');
 127
 128     getNodeInTreeOfTrees('host/outerMost/').applyAuthorStyles = true;
 129     // Not depend on apply-author-styles flags of parent shadow trees.
 130     borderColorShouldBe(getNodeInTreeOfTrees('host/outerMost/outer/target'), 'rgb(0, 0, 255)');
 131
 132     cleanUp();
 133 }
 134
 135 function testMultipleShadow()
 136 {
 137     debug('test a style in document is applied to nodes in multiple shadow subtrees when apply-author-styles is true.');
 138     document.getElementById('sandbox').appendChild(
 139         createDOM('div', {'id': 'host'},
 140             createShadowRoot(
 141                 createDOM('shadow', {}),
 142                 createDOM('div', {'id': 'oldestShadow'})),
 143             createShadowRoot(
 144                 createDOM('style', {'scoped': 'scoped'},
 145                     document.createTextNode('div { border: 1px solid blue }')),
 146                 createDOM('shadow', {}),
 147                 createDOM('div', {'id': 'olderShadow'})),
 148             createShadowRoot(
 149                 createDOM('shadow', {}),
 150                 createDOM('div', {'id': 'target'})),
 151
 152             createDOM('style', {'scoped': 'scoped'},
 153                 document.createTextNode('div { border: 1px solid red; }')),
 154             createDOM('div', {})));
 155
 156     getNodeInTreeOfTrees('host/').applyAuthorStyles = false;
 157     getNodeInTreeOfTrees('host//').applyAuthorStyles = false;
 158     getNodeInTreeOfTrees('host///').applyAuthorStyles = false;
 159
 160     // before
 161     borderColorShouldBe(getNodeInTreeOfTrees('host/oldestShadow'), 'rgb(0, 0, 0)');
 162     borderColorShouldBe(getNodeInTreeOfTrees('host//olderShadow'), 'rgb(0, 0, 255)');
 163     borderColorShouldBe(getNodeInTreeOfTrees('host///target'), 'rgb(0, 0, 0)');
 164
 165     // document ---+--- oldestShadow
 166     //             |
 167     //             +--- olderShadow
 168     //             |
 169     //             +--- shadow
 170
 171     // apply-author-styles affects between shadow and document.
 172     getNodeInTreeOfTrees('host///').applyAuthorStyles = true;
 173     borderColorShouldBe(getNodeInTreeOfTrees('host/oldestShadow'), 'rgb(0, 0, 0)');
 174     borderColorShouldBe(getNodeInTreeOfTrees('host//olderShadow'), 'rgb(0, 0, 255)');
 175     borderColorShouldBe(getNodeInTreeOfTrees('host///target'), 'rgb(255, 0, 0)');
 176
 177     // apply-author-styles affects between older shadow and document.
 178     getNodeInTreeOfTrees('host///').applyAuthorStyles = false;
 179     getNodeInTreeOfTrees('host//').applyAuthorStyles = true;
 180     borderColorShouldBe(getNodeInTreeOfTrees('host/oldestShadow'), 'rgb(0, 0, 0)');
 181     borderColorShouldBe(getNodeInTreeOfTrees('host//olderShadow'), 'rgb(0, 0, 255)');
 182     borderColorShouldBe(getNodeInTreeOfTrees('host///target'), 'rgb(0, 0, 0)');
 183
 184     // apply-author-styles affects between oldest shadow and document.
 185     getNodeInTreeOfTrees('host//').applyAuthorStyles = false;
 186     getNodeInTreeOfTrees('host/').applyAuthorStyles = true;
 187     borderColorShouldBe(getNodeInTreeOfTrees('host/oldestShadow'), 'rgb(255, 0, 0)');
 188     borderColorShouldBe(getNodeInTreeOfTrees('host//olderShadow'), 'rgb(0, 0, 255)');
 189     borderColorShouldBe(getNodeInTreeOfTrees('host///target'), 'rgb(0, 0, 0)');
 190
 191     cleanUp();
 192 }
 193
 194 function testOrderOfApplyStyle()
 195 {
 196     debug('test a style is applied in document order.');
 197
 198     document.getElementById('sandbox').appendChild(
 199         createDOM('div', {},
 200             createDOM('style', {'scoped': 'scoped'},
 201                 document.createTextNode('div { border: 1px solid red }')),
 202             createDOM('div', {'id': 'host'},
 203                 createShadowRoot(
 204                     createDOM('style', {},
 205                         document.createTextNode('div { border: 1px solid blue; }')),
 206                     createDOM('div', {'id': 'outerMost'},
 207                         createShadowRoot(
 208                             createDOM('style', {},
 209                                 document.createTextNode('div { border: 1px solid green; }')),
 210                             createDOM('div', {'id': 'outer'},
 211                                 createShadowRoot(
 212                                     createDOM('style', {},
 213                                         document.createTextNode('div { border: 1px solid yellow; }')),
 214                                     createDOM('div', {'id': 'target'})))))))));
 215
 216     getNodeInTreeOfTrees('host/').applyAuthorStyles = true;
 217     getNodeInTreeOfTrees('host/outerMost/').applyAuthorStyles = true;
 218     getNodeInTreeOfTrees('host/outerMost/outer/').applyAuthorStyles = true;
 219
 220     // The last scoped style should be applied.
 221     borderColorShouldBe(getNodeInTreeOfTrees('host/outerMost/outer/target'), 'rgb(255, 255, 0)');
 222
 223     getNodeInTreeOfTrees('host/outerMost/outer/').innerHTML = '<div id="target">target</div>';
 224     // The outer's scoped style should be applied.
 225     borderColorShouldBe(getNodeInTreeOfTrees('host/outerMost/outer/target'), 'rgb(0, 128, 0)');
 226
 227     cleanUp();
 228 }
 229
 230 function runTests() {
 231     testBasic();
 232     testEnclosingShadow();
 233     testEnclosingShadowWithScoped();
 234     testNestedShadow();
 235     testMultipleShadow();
 236     testOrderOfApplyStyle();
 237 }
 238 </script>
 239 </head>
 240 <body onload="runTests()">
 241   <div id='sandbox'></div>
 242 </body>
 243 </html>