| <!DOCTYPE html> |
| <script src="../resources/js-test.js"></script> |
| <script src="../fast/dom/shadow/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 buildSingleShadowTree(delegatesFocus) { |
| var sandbox = document.querySelector('#sandbox'); |
| sandbox.innerHTML = ''; |
| sandbox.appendChild( |
| createDOM('div', {}, |
| createDOM('input', {'id': 'outer-input'}), |
| createDOM('div', {'id': 'shadow-host'}, |
| createDOM('input', {'id': 'lightdom-input'}), |
| attachShadow( |
| {'mode': 'open', 'delegatesFocus': delegatesFocus}, |
| createDOM('slot'), |
| createDOM('input', {'id': 'inner-input'}))))); |
| |
| } |
| |
| function testSingleShadow() { |
| debug('(1/6) Testing how :focus matches on shadow host with delegatesFocus=false.'); |
| buildSingleShadowTree(false); |
| |
| var host = document.querySelector('#shadow-host'); |
| var lightdomInput = document.querySelector('#lightdom-input'); |
| var innerInput = getNodeInComposedTree('shadow-host/inner-input'); |
| var outerInput = document.querySelector('#outer-input'); |
| |
| outerInput.focus(); |
| backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
| lightdomInput.focus(); |
| backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
| innerInput.focus(); |
| backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
| host.focus(); // host will not get focus as it is not focusable. |
| backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
| |
| debug('(2/6) Testing how :focus matches on shadow host with tabindex=-1, delegatesFocus=false.'); |
| host.tabIndex = -1; |
| outerInput.focus(); |
| backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
| lightdomInput.focus(); |
| backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
| innerInput.focus(); |
| backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
| host.focus(); |
| backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); |
| |
| debug('(3/6) Testing how :focus matches on shadow host with tabindex=0, delegatesFocus=false.'); |
| host.tabIndex = 0; |
| outerInput.focus(); |
| backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
| lightdomInput.focus(); |
| backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
| innerInput.focus(); |
| backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
| host.focus(); |
| backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); |
| |
| |
| debug('(4/6) Testing how :focus matches on shadow host with delegatesFocus=true.'); |
| buildSingleShadowTree(true); |
| |
| var host = document.querySelector('#shadow-host'); |
| var lightdomInput = document.querySelector('#lightdom-input'); |
| var innerInput = getNodeInComposedTree('shadow-host/inner-input'); |
| var outerInput = document.querySelector('#outer-input'); |
| |
| outerInput.focus(); |
| backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
| lightdomInput.focus(); |
| backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
| innerInput.focus(); |
| backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); |
| host.focus(); |
| backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); |
| |
| debug('(5/6) Testing how :focus matches on shadow host with tabindex=-1, delegatesFocus=true.'); |
| host.tabIndex = -1; |
| outerInput.focus(); |
| backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
| lightdomInput.focus(); |
| backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
| innerInput.focus(); |
| backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); |
| host.focus(); |
| backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); |
| |
| debug('(6/6) Testing how :focus matches on shadow host with tabindex=0, delegatesFocus=true.'); |
| host.tabIndex = 0; |
| outerInput.focus(); |
| backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
| lightdomInput.focus(); |
| backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); |
| innerInput.focus(); |
| backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); |
| host.focus(); |
| backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); |
| } |
| |
| testSingleShadow(); |
| </script> |