| <!DOCTYPE html> |
| <script src="../../../resources/js-test.js"></script> |
| <script src="resources/shadow-dom.js"></script> |
| <style> |
| div { |
| background-color: white; |
| } |
| |
| div#shadow-host:focus { |
| background-color: green; |
| } |
| </style> |
| <body> |
| <div id="sandbox"></div> |
| </body> |
| <script> |
| function buildNestedDistributionTree(delegatesFocus1, delegatesFocus2) { |
| var sandbox = document.querySelector('#sandbox'); |
| sandbox.innerHTML = ''; |
| sandbox.appendChild( |
| createDOM('div', {}, |
| createDOM('input', {'id': 'outer-input'}), |
| createDOM('div', {'id': 'shadow-host'}, |
| createDOM('input', {'id': 'input1'}), |
| createShadowRoot( |
| {'delegatesFocus': delegatesFocus1}, |
| createDOM('style', {}, |
| document.createTextNode('div { background-color: yellow; } div#inner-shadow-host:focus { background-color: blue; }')), |
| createDOM('input', {'id': 'input2'}), |
| createDOM('div', {'id': 'inner-shadow-host'}, |
| createDOM('content', {}), // #input1 goes here |
| createShadowRoot( |
| {'delegatesFocus': delegatesFocus2}, |
| createDOM('content', {}), // #input1 redistributed here, #input2 goes here. |
| createDOM('input', {'id': 'input3'}))))))); |
| |
| sandbox.offsetTop; |
| } |
| |
| function testNestedDistribution() { |
| debug('testing nested distribution'); |
| |
| buildNestedDistributionTree(false, false); |
| |
| backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
| |
| var outerInput = getNodeInComposedTree('outer-input'); |
| var input1 = getNodeInComposedTree('input1'); |
| var input2 = getNodeInComposedTree('shadow-host/input2'); |
| var input3 = getNodeInComposedTree('shadow-host/inner-shadow-host/input3'); |
| |
| 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 shadow tree.'); |
| |
| debug('(1/4) top and inner shadow do not delegate focus.'); |
| outerInput.focus(); |
| backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
| backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)'); |
| |
| input1.focus(); |
| backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
| backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)'); |
| |
| input2.focus(); |
| backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
| backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)'); |
| |
| input3.focus(); |
| backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
| backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)'); |
| |
| debug('(2/4) top shadow delegates, but inner shadow does not.'); |
| buildNestedDistributionTree(true, false); |
| |
| var outerInput = getNodeInComposedTree('outer-input'); |
| var input1 = getNodeInComposedTree('input1'); |
| var input2 = getNodeInComposedTree('shadow-host/input2'); |
| var input3 = getNodeInComposedTree('shadow-host/inner-shadow-host/input3'); |
| |
| outerInput.focus(); |
| backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
| backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)'); |
| |
| input1.focus(); |
| backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
| backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)'); |
| |
| input2.focus(); |
| backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); |
| backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)'); |
| |
| input3.focus(); |
| backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); |
| backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)'); |
| |
| debug('(3/4) top shadow does not delegate, but inner shadow does.'); |
| buildNestedDistributionTree(false, true); |
| |
| var outerInput = getNodeInComposedTree('outer-input'); |
| var input1 = getNodeInComposedTree('input1'); |
| var input2 = getNodeInComposedTree('shadow-host/input2'); |
| var input3 = getNodeInComposedTree('shadow-host/inner-shadow-host/input3'); |
| |
| outerInput.focus(); |
| backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
| backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)'); |
| |
| input1.focus(); |
| backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
| backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)'); |
| |
| input2.focus(); |
| backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
| backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)'); |
| |
| input3.focus(); |
| backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
| backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(0, 0, 255)'); |
| |
| debug('(4/4) both shadow hosts delagate focus.'); |
| buildNestedDistributionTree(true, true); |
| |
| var outerInput = getNodeInComposedTree('outer-input'); |
| var input1 = getNodeInComposedTree('input1'); |
| var input2 = getNodeInComposedTree('shadow-host/input2'); |
| var input3 = getNodeInComposedTree('shadow-host/inner-shadow-host/input3'); |
| |
| outerInput.focus(); |
| backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
| backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)'); |
| |
| input1.focus(); |
| backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
| backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)'); |
| |
| input2.focus(); |
| backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); |
| backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)'); |
| |
| input3.focus(); |
| backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); |
| backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(0, 0, 255)'); |
| } |
| |
| testNestedDistribution(); |
| </script> |
