| 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 |