| <!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 testDistributedNodes() { |
| debug('Testing shadow host :focus and distributed nodes'); |
| |
| // Setting up the DOM tree |
| var sandbox = document.querySelector('#sandbox'); |
| sandbox.innerHTML = ''; |
| sandbox.appendChild( |
| createDOM('div', {}, |
| createDOM('input', {'id': 'outer-input'}), |
| createDOM('div', {'id': 'shadow-host', 'tabindex': '0'}, |
| createDOM('input', {'id': 'light-input'}), |
| createShadowRoot( |
| createDOM('content', {}), |
| createDOM('div', {'id': 'inner-div'}, |
| document.createTextNode('Blink')), |
| createDOM('input', {'id': 'older-input'})), |
| createShadowRoot( |
| {'delegatesFocus': true}, |
| createDOM('shadow', {}), |
| createDOM('div', {'id': 'inner-div2'}, |
| document.createTextNode('Blink')), |
| createDOM('input', {'id': 'younger-input'}))))); |
| sandbox.offsetTop; |
| |
| backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
| |
| var host = getNodeInComposedTree('shadow-host'); |
| var outerInput = getNodeInComposedTree('outer-input'); |
| var lightInput = getNodeInComposedTree('light-input'); |
| var olderInput = getNodeInComposedTree('shadow-host/older-input'); |
| var youngerInput = getNodeInComposedTree('shadow-host//younger-input'); |
| |
| debug('(1/3) shadow host without tabindex'); |
| outerInput.focus(); |
| backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
| lightInput.focus(); |
| backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
| olderInput.focus(); |
| backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); |
| youngerInput.focus(); |
| backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); |
| host.focus(); |
| backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); |
| |
| debug('(2/3) shadow host with tabindex=-1'); |
| host.tabIndex = -1; |
| outerInput.focus(); |
| backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
| lightInput.focus(); |
| backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
| olderInput.focus(); |
| backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); |
| youngerInput.focus(); |
| backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); |
| host.focus(); |
| backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); |
| |
| debug('(3/3) shadow host with tabindex=0'); |
| host.tabIndex = 0; |
| outerInput.focus(); |
| backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
| lightInput.focus(); |
| backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
| olderInput.focus(); |
| backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); |
| youngerInput.focus(); |
| backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); |
| host.focus(); |
| backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); |
| } |
| |
| testDistributedNodes(); |
| </script> |