| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <script src="../../../resources/js-test.js"></script> | 2 <script src="../../../resources/js-test.js"></script> |
| 3 <script src="resources/shadow-dom.js"></script> | 3 <script src="resources/shadow-dom.js"></script> |
| 4 <style> | 4 <style> |
| 5 div { | 5 div { |
| 6 background-color: white; | 6 background-color: white; |
| 7 } | 7 } |
| 8 | 8 |
| 9 div#shadow-host:focus { | 9 div#shadow-host:focus { |
| 10 background-color: green; | 10 background-color: green; |
| (...skipping 26 matching lines...) Expand all Loading... |
| 37 sandbox.offsetTop; | 37 sandbox.offsetTop; |
| 38 } | 38 } |
| 39 | 39 |
| 40 function testNestedDistribution() { | 40 function testNestedDistribution() { |
| 41 debug('testing nested distribution'); | 41 debug('testing nested distribution'); |
| 42 | 42 |
| 43 buildNestedDistributionTree(false, false); | 43 buildNestedDistributionTree(false, false); |
| 44 | 44 |
| 45 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | 45 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
| 46 | 46 |
| 47 var outerInput = getNodeInTreeOfTrees('outer-input'); | 47 var outerInput = getNodeInComposedTree('outer-input'); |
| 48 var input1 = getNodeInTreeOfTrees('input1'); | 48 var input1 = getNodeInComposedTree('input1'); |
| 49 var input2 = getNodeInTreeOfTrees('shadow-host/input2'); | 49 var input2 = getNodeInComposedTree('shadow-host/input2'); |
| 50 var input3 = getNodeInTreeOfTrees('shadow-host/inner-shadow-host/input3'); | 50 var input3 = getNodeInComposedTree('shadow-host/inner-shadow-host/input3'); |
| 51 | 51 |
| 52 debug('#input1, #input2 are (re)distributed in the same treescope as #input3
, but :focus on shadow host only matches when a focused element is under its sha
dow tree.'); | 52 debug('#input1, #input2 are (re)distributed in the same treescope as #input3
, but :focus on shadow host only matches when a focused element is under its sha
dow tree.'); |
| 53 | 53 |
| 54 debug('(1/4) top and inner shadow do not delegate focus.'); | 54 debug('(1/4) top and inner shadow do not delegate focus.'); |
| 55 outerInput.focus(); | 55 outerInput.focus(); |
| 56 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | 56 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
| 57 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)')
; | 57 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)')
; |
| 58 | 58 |
| 59 input1.focus(); | 59 input1.focus(); |
| 60 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | 60 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
| 61 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)')
; | 61 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)')
; |
| 62 | 62 |
| 63 input2.focus(); | 63 input2.focus(); |
| 64 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | 64 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
| 65 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)')
; | 65 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)')
; |
| 66 | 66 |
| 67 input3.focus(); | 67 input3.focus(); |
| 68 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | 68 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
| 69 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)')
; | 69 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)')
; |
| 70 | 70 |
| 71 debug('(2/4) top shadow delegates, but inner shadow does not.'); | 71 debug('(2/4) top shadow delegates, but inner shadow does not.'); |
| 72 buildNestedDistributionTree(true, false); | 72 buildNestedDistributionTree(true, false); |
| 73 | 73 |
| 74 var outerInput = getNodeInTreeOfTrees('outer-input'); | 74 var outerInput = getNodeInComposedTree('outer-input'); |
| 75 var input1 = getNodeInTreeOfTrees('input1'); | 75 var input1 = getNodeInComposedTree('input1'); |
| 76 var input2 = getNodeInTreeOfTrees('shadow-host/input2'); | 76 var input2 = getNodeInComposedTree('shadow-host/input2'); |
| 77 var input3 = getNodeInTreeOfTrees('shadow-host/inner-shadow-host/input3'); | 77 var input3 = getNodeInComposedTree('shadow-host/inner-shadow-host/input3'); |
| 78 | 78 |
| 79 outerInput.focus(); | 79 outerInput.focus(); |
| 80 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | 80 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
| 81 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)')
; | 81 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)')
; |
| 82 | 82 |
| 83 input1.focus(); | 83 input1.focus(); |
| 84 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | 84 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
| 85 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)')
; | 85 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)')
; |
| 86 | 86 |
| 87 input2.focus(); | 87 input2.focus(); |
| 88 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); | 88 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); |
| 89 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)')
; | 89 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)')
; |
| 90 | 90 |
| 91 input3.focus(); | 91 input3.focus(); |
| 92 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); | 92 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); |
| 93 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)')
; | 93 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)')
; |
| 94 | 94 |
| 95 debug('(3/4) top shadow does not delegate, but inner shadow does.'); | 95 debug('(3/4) top shadow does not delegate, but inner shadow does.'); |
| 96 buildNestedDistributionTree(false, true); | 96 buildNestedDistributionTree(false, true); |
| 97 | 97 |
| 98 var outerInput = getNodeInTreeOfTrees('outer-input'); | 98 var outerInput = getNodeInComposedTree('outer-input'); |
| 99 var input1 = getNodeInTreeOfTrees('input1'); | 99 var input1 = getNodeInComposedTree('input1'); |
| 100 var input2 = getNodeInTreeOfTrees('shadow-host/input2'); | 100 var input2 = getNodeInComposedTree('shadow-host/input2'); |
| 101 var input3 = getNodeInTreeOfTrees('shadow-host/inner-shadow-host/input3'); | 101 var input3 = getNodeInComposedTree('shadow-host/inner-shadow-host/input3'); |
| 102 | 102 |
| 103 outerInput.focus(); | 103 outerInput.focus(); |
| 104 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | 104 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
| 105 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)')
; | 105 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)')
; |
| 106 | 106 |
| 107 input1.focus(); | 107 input1.focus(); |
| 108 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | 108 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
| 109 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)')
; | 109 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)')
; |
| 110 | 110 |
| 111 input2.focus(); | 111 input2.focus(); |
| 112 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | 112 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
| 113 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)')
; | 113 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)')
; |
| 114 | 114 |
| 115 input3.focus(); | 115 input3.focus(); |
| 116 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | 116 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
| 117 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(0, 0, 255)'); | 117 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(0, 0, 255)'); |
| 118 | 118 |
| 119 debug('(4/4) both shadow hosts delagate focus.'); | 119 debug('(4/4) both shadow hosts delagate focus.'); |
| 120 buildNestedDistributionTree(true, true); | 120 buildNestedDistributionTree(true, true); |
| 121 | 121 |
| 122 var outerInput = getNodeInTreeOfTrees('outer-input'); | 122 var outerInput = getNodeInComposedTree('outer-input'); |
| 123 var input1 = getNodeInTreeOfTrees('input1'); | 123 var input1 = getNodeInComposedTree('input1'); |
| 124 var input2 = getNodeInTreeOfTrees('shadow-host/input2'); | 124 var input2 = getNodeInComposedTree('shadow-host/input2'); |
| 125 var input3 = getNodeInTreeOfTrees('shadow-host/inner-shadow-host/input3'); | 125 var input3 = getNodeInComposedTree('shadow-host/inner-shadow-host/input3'); |
| 126 | 126 |
| 127 outerInput.focus(); | 127 outerInput.focus(); |
| 128 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | 128 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
| 129 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)')
; | 129 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)')
; |
| 130 | 130 |
| 131 input1.focus(); | 131 input1.focus(); |
| 132 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | 132 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
| 133 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)')
; | 133 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)')
; |
| 134 | 134 |
| 135 input2.focus(); | 135 input2.focus(); |
| 136 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); | 136 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); |
| 137 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)')
; | 137 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)')
; |
| 138 | 138 |
| 139 input3.focus(); | 139 input3.focus(); |
| 140 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); | 140 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); |
| 141 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(0, 0, 255)'); | 141 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(0, 0, 255)'); |
| 142 } | 142 } |
| 143 | 143 |
| 144 testNestedDistribution(); | 144 testNestedDistribution(); |
| 145 </script> | 145 </script> |
| OLD | NEW |