Chromium Code Reviews| OLD | NEW |
|---|---|
| (Empty) | |
| 1 <!doctype html> | |
| 2 <script src="../../../resources/js-test.js"></script> | |
| 3 <script src="resources/shadow-dom.js"></script> | |
| 4 <style id="style1"> | |
| 5 </style> | |
| 6 <body></body> | |
| 7 <script> | |
| 8 function prepareShadowTree(hostId, mode1, mode2, div1, div2, div3) { | |
| 9 var parent = document.body; | |
| 10 parent.appendChild( | |
| 11 createDOM('div', {'id': hostId}, | |
| 12 createShadowRoot({'mode': mode1}, | |
| 13 createDOM('div', {'id': div1}, | |
| 14 createShadowRoot({'mode': mode2}, | |
| 15 createDOM('div', {'id': div2})), | |
| 16 createDOM('div', {'id': div3}))))); | |
| 17 } | |
| 18 | |
| 19 prepareShadowTree('host_open_open', 'open', 'open', 'div1', 'div2', 'div1b'); | |
| 20 prepareShadowTree('host_open_closed', 'open', 'closed', 'div3', 'div4', 'div3b') ; | |
| 21 prepareShadowTree('host_closed_open', 'closed', 'open', 'div5', 'div6', 'div5b') ; | |
| 22 prepareShadowTree('host_closed_closed', 'closed', 'closed', 'div7', 'div8', 'div 7b'); | |
| 23 | |
| 24 debug('(1/6) /deep/ style rule on top-level document.'); | |
| 25 var styleElement = document.getElementById('style1'); | |
| 26 styleElement.textContent = 'div /deep/ div { background-color: blue; }'; | |
| 27 | |
| 28 backgroundColorShouldBe('host_open_open', 'rgba(0, 0, 0, 0)'); | |
| 29 backgroundColorShouldBe('host_open_open/div1', 'rgb(0, 0, 255)'); | |
| 30 backgroundColorShouldBe('host_open_open/div1/div2', 'rgb(0, 0, 255)'); | |
| 31 backgroundColorShouldBe('host_open_open/div1b', 'rgb(0, 0, 255)'); | |
| 32 backgroundColorShouldBe('host_open_closed', 'rgba(0, 0, 0, 0)'); | |
| 33 backgroundColorShouldBe('host_open_closed/div3', 'rgb(0, 0, 255)'); | |
| 34 backgroundColorShouldBe('host_open_closed/div3/div4', 'rgba(0, 0, 0, 0)'); | |
| 35 backgroundColorShouldBe('host_open_closed/div3b', 'rgb(0, 0, 255)'); | |
| 36 backgroundColorShouldBe('host_closed_open', 'rgba(0, 0, 0, 0)'); | |
| 37 backgroundColorShouldBe('host_closed_open/div5', 'rgba(0, 0, 0, 0)'); | |
| 38 backgroundColorShouldBe('host_closed_open/div5/div6', 'rgba(0, 0, 0, 0)'); | |
| 39 backgroundColorShouldBe('host_closed_open/div5b', 'rgba(0, 0, 0, 0)'); | |
| 40 backgroundColorShouldBe('host_closed_closed', 'rgba(0, 0, 0, 0)'); | |
| 41 backgroundColorShouldBe('host_closed_closed/div7', 'rgba(0, 0, 0, 0)'); | |
| 42 backgroundColorShouldBe('host_closed_closed/div7/div8', 'rgba(0, 0, 0, 0)'); | |
| 43 backgroundColorShouldBe('host_closed_closed/div7b', 'rgba(0, 0, 0, 0)'); | |
| 44 | |
| 45 debug('(2/6) ::shadow style rule on top-level document.'); | |
| 46 styleElement.innerHTML = 'div::shadow div { background-color: green; }'; | |
| 47 | |
| 48 backgroundColorShouldBe('host_open_open', 'rgba(0, 0, 0, 0)'); | |
| 49 backgroundColorShouldBe('host_open_open/div1', 'rgb(0, 128, 0)'); | |
| 50 backgroundColorShouldBe('host_open_open/div1/div2', 'rgba(0, 0, 0, 0)'); | |
| 51 backgroundColorShouldBe('host_open_open/div1b', 'rgb(0, 128, 0)'); | |
| 52 backgroundColorShouldBe('host_open_closed', 'rgba(0, 0, 0, 0)'); | |
| 53 backgroundColorShouldBe('host_open_closed/div3', 'rgb(0, 128, 0)'); | |
| 54 backgroundColorShouldBe('host_open_closed/div3/div4', 'rgba(0, 0, 0, 0)'); | |
| 55 backgroundColorShouldBe('host_open_closed/div3b', 'rgb(0, 128, 0)'); | |
| 56 backgroundColorShouldBe('host_closed_open', 'rgba(0, 0, 0, 0)'); | |
| 57 backgroundColorShouldBe('host_closed_open/div5', 'rgba(0, 0, 0, 0)'); | |
| 58 backgroundColorShouldBe('host_closed_open/div5/div6', 'rgba(0, 0, 0, 0)'); | |
| 59 backgroundColorShouldBe('host_closed_open/div5b', 'rgba(0, 0, 0, 0)'); | |
| 60 backgroundColorShouldBe('host_closed_closed', 'rgba(0, 0, 0, 0)'); | |
| 61 backgroundColorShouldBe('host_closed_closed/div7', 'rgba(0, 0, 0, 0)'); | |
| 62 backgroundColorShouldBe('host_closed_closed/div7/div8', 'rgba(0, 0, 0, 0)'); | |
| 63 backgroundColorShouldBe('host_closed_closed/div7b', 'rgba(0, 0, 0, 0)'); | |
| 64 | |
| 65 debug('(3/6) /deep/ style on shadow tree.'); | |
| 66 styleElement.innerHTML = ''; | |
| 67 var div1 = getNodeInTreeOfTrees('host_open_open/div1'); | |
| 68 div1.insertAdjacentHTML('afterbegin', '<style>div /deep/ div { background-color: blue; }</style>'); | |
| 69 backgroundColorShouldBe('host_open_open/div1', 'rgba(0, 0, 0, 0)'); | |
| 70 backgroundColorShouldBe('host_open_open/div1/div2', 'rgb(0, 0, 255)'); | |
| 71 backgroundColorShouldBe('host_open_open/div1b', 'rgb(0, 0, 255)'); | |
| 72 div1.removeChild(div1.firstElementChild); | |
| 73 | |
| 74 var div3 = getNodeInTreeOfTrees('host_open_closed/div3'); | |
| 75 div3.insertAdjacentHTML('afterbegin', '<style>div /deep/ div { background-color: blue; }</style>'); | |
| 76 backgroundColorShouldBe('host_open_closed/div3', 'rgba(0, 0, 0, 0)'); | |
| 77 backgroundColorShouldBe('host_open_closed/div3/div4', 'rgba(0, 0, 0, 0)'); | |
| 78 backgroundColorShouldBe('host_open_closed/div3b', 'rgb(0, 0, 255)'); | |
| 79 div3.removeChild(div3.firstElementChild); | |
| 80 | |
| 81 var div5 = getNodeInTreeOfTrees('host_closed_open/div5'); | |
| 82 div5.insertAdjacentHTML('afterbegin', '<style>div /deep/ div { background-color: blue; }</style>'); | |
| 83 backgroundColorShouldBe('host_closed_open/div5', 'rgba(0, 0, 0, 0)'); | |
| 84 backgroundColorShouldBe('host_closed_open/div5/div6', 'rgb(0, 0, 255)'); | |
| 85 backgroundColorShouldBe('host_closed_open/div5b', 'rgb(0, 0, 255)'); | |
| 86 div5.removeChild(div5.firstElementChild); | |
| 87 | |
| 88 var div7 = getNodeInTreeOfTrees('host_closed_closed/div7'); | |
| 89 div7.insertAdjacentHTML('afterbegin', '<style>div /deep/ div { background-color: blue; }</style>'); | |
| 90 backgroundColorShouldBe('host_closed_closed/div7', 'rgba(0, 0, 0, 0)'); | |
| 91 backgroundColorShouldBe('host_closed_closed/div7/div8', 'rgba(0, 0, 0, 0)'); | |
| 92 backgroundColorShouldBe('host_closed_closed/div7b', 'rgb(0, 0, 255)'); | |
| 93 div7.removeChild(div7.firstElementChild); | |
| 94 | |
| 95 debug('(4/6) ::shadow style on shadow tree.'); | |
| 96 div1.insertAdjacentHTML('afterbegin', '<style>div::shadow div { background-color : green; }</style>'); | |
| 97 backgroundColorShouldBe('host_open_open/div1', 'rgba(0, 0, 0, 0)'); | |
| 98 backgroundColorShouldBe('host_open_open/div1/div2', 'rgb(0, 128, 0)'); | |
| 99 backgroundColorShouldBe('host_open_open/div1b', 'rgba(0, 0, 0, 0)'); | |
| 100 div1.removeChild(div1.firstElementChild); | |
| 101 | |
| 102 div3.insertAdjacentHTML('afterbegin', '<style>div::shadow div { background-color : green; }</style>'); | |
| 103 backgroundColorShouldBe('host_open_closed/div3', 'rgba(0, 0, 0, 0)'); | |
| 104 backgroundColorShouldBe('host_open_closed/div3/div4', 'rgba(0, 0, 0, 0)'); | |
| 105 backgroundColorShouldBe('host_open_closed/div3b', 'rgba(0, 0, 0, 0)'); | |
| 106 div3.removeChild(div3.firstElementChild); | |
| 107 | |
| 108 div5.insertAdjacentHTML('afterbegin', '<style>div::shadow div { background-color : green; }</style>'); | |
| 109 backgroundColorShouldBe('host_closed_open/div5', 'rgba(0, 0, 0, 0)'); | |
| 110 backgroundColorShouldBe('host_closed_open/div5/div6', 'rgb(0, 128, 0)'); | |
| 111 backgroundColorShouldBe('host_closed_open/div5b', 'rgba(0, 0, 0, 0)'); | |
| 112 div5.removeChild(div5.firstElementChild); | |
| 113 | |
| 114 div7.insertAdjacentHTML('afterbegin', '<style>div::shadow div { background-color : green; }</style>'); | |
| 115 backgroundColorShouldBe('host_closed_closed/div7', 'rgba(0, 0, 0, 0)'); | |
| 116 backgroundColorShouldBe('host_closed_closed/div7/div8', 'rgba(0, 0, 0, 0)'); | |
| 117 backgroundColorShouldBe('host_closed_closed/div7b', 'rgba(0, 0, 0, 0)'); | |
| 118 div7.removeChild(div7.firstElementChild); | |
| 119 | |
| 120 debug('(5/6) /deep/ selector in querySelectorAll()'); | |
| 121 shouldBe('host_open_open.querySelectorAll("div /deep/ div").length', '3'); | |
|
hayato
2015/08/20 03:47:11
Could you assert the content of the result of quer
kochi
2015/08/20 06:04:26
Done.
| |
| 122 shouldBe('host_open_closed.querySelectorAll("div /deep/ div").length', '2'); | |
| 123 shouldBe('host_closed_open.querySelectorAll("div /deep/ div").length', '0'); | |
| 124 shouldBe('host_closed_closed.querySelectorAll("div /deep/ div").length', '0'); | |
| 125 | |
| 126 shouldBe('div1.querySelectorAll("div /deep/ div").length', '2'); | |
| 127 shouldBe('div3.querySelectorAll("div /deep/ div").length', '1'); | |
| 128 shouldBe('div5.querySelectorAll("div /deep/ div").length', '2'); | |
| 129 shouldBe('div7.querySelectorAll("div /deep/ div").length', '1'); | |
| 130 | |
| 131 debug('(6/6) ::shadow selector in querySelectorAll()'); | |
| 132 shouldBe('host_open_open.querySelectorAll("div::shadow div").length', '2'); | |
| 133 shouldBe('host_open_closed.querySelectorAll("div::shadow div").length', '2'); | |
| 134 shouldBe('host_closed_open.querySelectorAll("div::shadow div").length', '0'); | |
| 135 shouldBe('host_closed_closed.querySelectorAll("div::shadow div").length', '0'); | |
| 136 | |
| 137 shouldBe('div1.querySelectorAll("div::shadow div").length', '1'); | |
| 138 shouldBe('div3.querySelectorAll("div::shadow div").length', '0'); | |
| 139 shouldBe('div5.querySelectorAll("div::shadow div").length', '1'); | |
| 140 shouldBe('div7.querySelectorAll("div::shadow div").length', '0'); | |
| 141 </script> | |
| OLD | NEW |