| OLD | NEW |
| (Empty) |
| 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 | |
| 9 <div id="container"></div> | |
| 10 <pre id="console"></pre> | |
| 11 | |
| 12 <script> | |
| 13 function testCase(f) | |
| 14 { | |
| 15 container.innerHTML = ''; | |
| 16 container.appendChild(createDOM('div', {'id': 'host'}, | |
| 17 createShadowRoot())); | |
| 18 shadowRoot = internals.shadowRoot(host); | |
| 19 | |
| 20 f(); | |
| 21 debug(''); | |
| 22 } | |
| 23 | |
| 24 testCase(function() | |
| 25 { | |
| 26 debug('Id should be collected'); | |
| 27 | |
| 28 shadowRoot.innerHTML = '<content select="#foo"></content>'; | |
| 29 shouldBe('internals.hasSelectorForIdInShadow(host, "foo")', 'true'); | |
| 30 shouldBe('internals.hasSelectorForIdInShadow(host, "bar")', 'false'); | |
| 31 shouldBe('internals.hasSelectorForIdInShadow(host, "host")', 'false'); | |
| 32 }); | |
| 33 | |
| 34 testCase(function() | |
| 35 { | |
| 36 debug('Class should be collected'); | |
| 37 | |
| 38 shadowRoot.innerHTML = '<content select=".foo"></content>'; | |
| 39 shouldBe('internals.hasSelectorForClassInShadow(host, "foo")', 'true'); | |
| 40 shouldBe('internals.hasSelectorForClassInShadow(host, "host")', 'false'); | |
| 41 }); | |
| 42 | |
| 43 testCase(function() | |
| 44 { | |
| 45 debug('Attribute should be collected'); | |
| 46 | |
| 47 shadowRoot.innerHTML = '<content select="div[foo]"></content>'; | |
| 48 shouldBe('internals.hasSelectorForAttributeInShadow(host, "foo")', 'true'); | |
| 49 shouldBe('internals.hasSelectorForAttributeInShadow(host, "host")', 'false')
; | |
| 50 }); | |
| 51 | |
| 52 testCase(function() | |
| 53 { | |
| 54 debug('Select attribute might have several selectors'); | |
| 55 | |
| 56 shadowRoot.innerHTML = '<content select="#foo,.bar,div[baz]"></content>'; | |
| 57 shouldBe('internals.hasSelectorForIdInShadow(host, "foo")', 'true'); | |
| 58 shouldBe('internals.hasSelectorForIdInShadow(host, "bar")', 'false'); | |
| 59 shouldBe('internals.hasSelectorForIdInShadow(host, "baz")', 'false'); | |
| 60 | |
| 61 shouldBe('internals.hasSelectorForClassInShadow(host, "foo")', 'false'); | |
| 62 shouldBe('internals.hasSelectorForClassInShadow(host, "bar")', 'true'); | |
| 63 shouldBe('internals.hasSelectorForClassInShadow(host, "baz")', 'false'); | |
| 64 | |
| 65 shouldBe('internals.hasSelectorForAttributeInShadow(host, "foo")', 'false'); | |
| 66 shouldBe('internals.hasSelectorForAttributeInShadow(host, "bar")', 'false'); | |
| 67 shouldBe('internals.hasSelectorForAttributeInShadow(host, "baz")', 'true'); | |
| 68 }); | |
| 69 | |
| 70 testCase(function() | |
| 71 { | |
| 72 debug('Don\'t count shadow element'); | |
| 73 | |
| 74 shadowRoot.innerHTML = '<shadow select="#foo,.bar,div[baz]"></shadow>'; | |
| 75 shouldBe('internals.hasSelectorForIdInShadow(host, "foo")', 'false'); | |
| 76 shouldBe('internals.hasSelectorForIdInShadow(host, "bar")', 'false'); | |
| 77 shouldBe('internals.hasSelectorForIdInShadow(host, "baz")', 'false'); | |
| 78 | |
| 79 shouldBe('internals.hasSelectorForClassInShadow(host, "foo")', 'false'); | |
| 80 shouldBe('internals.hasSelectorForClassInShadow(host, "bar")', 'false'); | |
| 81 shouldBe('internals.hasSelectorForClassInShadow(host, "baz")', 'false'); | |
| 82 | |
| 83 shouldBe('internals.hasSelectorForAttributeInShadow(host, "foo")', 'false'); | |
| 84 shouldBe('internals.hasSelectorForAttributeInShadow(host, "bar")', 'false'); | |
| 85 shouldBe('internals.hasSelectorForAttributeInShadow(host, "baz")', 'false'); | |
| 86 }); | |
| 87 | |
| 88 testCase(function() | |
| 89 { | |
| 90 debug('Complex case for single ShadowRoot'); | |
| 91 | |
| 92 shadowRoot.innerHTML = '<div><div></div><content select="*"></content><div><
content select="div[foo=piyo]"></content></div>'; | |
| 93 shouldBe('internals.hasSelectorForIdInShadow(host, "foo")', 'false'); | |
| 94 shouldBe('internals.hasSelectorForClassInShadow(host, "foo")', 'false'); | |
| 95 shouldBe('internals.hasSelectorForAttributeInShadow(host, "foo")', 'true'); | |
| 96 shouldBe('internals.hasSelectorForAttributeInShadow(host, "piyo")', 'false')
; | |
| 97 }); | |
| 98 | |
| 99 testCase(function() | |
| 100 { | |
| 101 debug('Another complex case for single ShadowRoot'); | |
| 102 | |
| 103 shadowRoot.innerHTML = '<content select="#foo,.foo,div[foo]"></content>'; | |
| 104 shouldBe('internals.hasSelectorForIdInShadow(host, "foo")', 'true'); | |
| 105 shouldBe('internals.hasSelectorForClassInShadow(host, "foo")', 'true'); | |
| 106 shouldBe('internals.hasSelectorForAttributeInShadow(host, "foo")', 'true'); | |
| 107 }); | |
| 108 | |
| 109 testCase(function() | |
| 110 { | |
| 111 debug('Multiple ShadowRoot case'); | |
| 112 | |
| 113 var anotherShadowRoot = host.createShadowRoot(); | |
| 114 | |
| 115 shadowRoot.innerHTML = '<content select="#foo"></content>'; | |
| 116 anotherShadowRoot.innerHTML = '<content select="#bar"></content><content sel
ect="div[baz],.bar"></content>'; | |
| 117 | |
| 118 shouldBe('internals.hasSelectorForIdInShadow(host, "foo")', 'true'); | |
| 119 shouldBe('internals.hasSelectorForIdInShadow(host, "bar")', 'true'); | |
| 120 shouldBe('internals.hasSelectorForIdInShadow(host, "baz")', 'false'); | |
| 121 | |
| 122 shouldBe('internals.hasSelectorForClassInShadow(host, "foo")', 'false'); | |
| 123 shouldBe('internals.hasSelectorForClassInShadow(host, "bar")', 'true'); | |
| 124 shouldBe('internals.hasSelectorForClassInShadow(host, "baz")', 'false'); | |
| 125 | |
| 126 shouldBe('internals.hasSelectorForAttributeInShadow(host, "foo")', 'false'); | |
| 127 shouldBe('internals.hasSelectorForAttributeInShadow(host, "bar")', 'false'); | |
| 128 shouldBe('internals.hasSelectorForAttributeInShadow(host, "baz")', 'true'); | |
| 129 }); | |
| 130 | |
| 131 testCase(function() | |
| 132 { | |
| 133 debug('Dynamic select attribute update'); | |
| 134 | |
| 135 shadowRoot.innerHTML = '<content select="#foo"></content>'; | |
| 136 | |
| 137 shouldBe('internals.hasSelectorForIdInShadow(host, "foo")', 'true'); | |
| 138 shouldBe('internals.hasSelectorForIdInShadow(host, "bar")', 'false'); | |
| 139 | |
| 140 var content = shadowRoot.querySelector('content'); | |
| 141 content.select = '#bar'; | |
| 142 | |
| 143 shouldBe('internals.hasSelectorForIdInShadow(host, "foo")', 'false'); | |
| 144 shouldBe('internals.hasSelectorForIdInShadow(host, "bar")', 'true'); | |
| 145 }); | |
| 146 | |
| 147 testCase(function() | |
| 148 { | |
| 149 debug('Nested ShadowDOM case'); | |
| 150 | |
| 151 shadowRoot.innerHTML = '<content select="#foo"></content>'; | |
| 152 | |
| 153 var div = document.createElement('div'); | |
| 154 var nestedShadowRoot = div.createShadowRoot(); | |
| 155 nestedShadowRoot.innerHTML = '<content select="#bar"></content>'; | |
| 156 shadowRoot.appendChild(div); | |
| 157 | |
| 158 shouldBe('internals.hasSelectorForIdInShadow(host, "foo")', 'true'); | |
| 159 shouldBe('internals.hasSelectorForIdInShadow(host, "bar")', 'true'); | |
| 160 shouldBe('internals.hasSelectorForIdInShadow(host, "baz")', 'false'); | |
| 161 | |
| 162 var content = nestedShadowRoot.querySelector('content'); | |
| 163 content.select = '#baz'; | |
| 164 | |
| 165 shouldBe('internals.hasSelectorForIdInShadow(host, "foo")', 'true'); | |
| 166 shouldBe('internals.hasSelectorForIdInShadow(host, "bar")', 'false'); | |
| 167 shouldBe('internals.hasSelectorForIdInShadow(host, "baz")', 'true'); | |
| 168 }); | |
| 169 | |
| 170 finishJSTest(); | |
| 171 </script> | |
| 172 </body> | |
| 173 </html> | |
| OLD | NEW |