| OLD | NEW |
| (Empty) |
| 1 <!DOCTYPE html> | |
| 2 <script src="../../../resources/js-test.js"></script> | |
| 3 <script src="resources/shadow-dom.js"></script> | |
| 4 <style> | |
| 5 div { | |
| 6 background-color: white; | |
| 7 } | |
| 8 | |
| 9 div#shadow-host:focus { | |
| 10 background-color: green; | |
| 11 } | |
| 12 </style> | |
| 13 <body> | |
| 14 <div id="sandbox"></div> | |
| 15 </body> | |
| 16 <script> | |
| 17 function testWithoutDelegatesFocus() | |
| 18 { | |
| 19 debug(':focus and shadow host without delegatesFocus for crbug/479050'); | |
| 20 | |
| 21 // Setting up the DOM tree | |
| 22 var sandbox = document.querySelector('#sandbox'); | |
| 23 sandbox.innerHTML = ''; | |
| 24 sandbox.appendChild( | |
| 25 createDOM('div', {}, | |
| 26 createDOM('input', {'id': 'outer-input1'}), | |
| 27 createDOM('div', {'id': 'shadow-host'}, | |
| 28 createDOM('input', {'id': 'lightdom-input'}), | |
| 29 createShadowRoot( | |
| 30 createDOM('content'), | |
| 31 createDOM('input', {'id': 'inner-input'}))), | |
| 32 createDOM('input', {'id': 'outer-input2'}))); | |
| 33 sandbox.offsetTop; | |
| 34 | |
| 35 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | |
| 36 | |
| 37 var host = getNodeInComposedTree('shadow-host'); | |
| 38 var innerInput = getNodeInComposedTree('shadow-host/inner-input'); | |
| 39 var lightdomInput = getNodeInComposedTree('lightdom-input'); | |
| 40 var outerInput1 = getNodeInComposedTree('outer-input1'); | |
| 41 var outerInput2 = getNodeInComposedTree('outer-input2'); | |
| 42 | |
| 43 debug('Test shadow host without tabindex'); | |
| 44 outerInput1.focus(); | |
| 45 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | |
| 46 outerInput2.focus(); | |
| 47 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | |
| 48 innerInput.focus(); | |
| 49 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | |
| 50 lightdomInput.focus(); | |
| 51 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | |
| 52 host.focus(); // host will not get focus as it is not focusable. | |
| 53 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | |
| 54 | |
| 55 debug('Test shadow host with tabindex=-1'); | |
| 56 host.tabIndex = -1; | |
| 57 outerInput1.focus(); | |
| 58 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | |
| 59 outerInput2.focus(); | |
| 60 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | |
| 61 innerInput.focus(); | |
| 62 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | |
| 63 lightdomInput.focus(); | |
| 64 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | |
| 65 host.focus(); | |
| 66 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); | |
| 67 | |
| 68 debug('Test shadow host without tabindex=0'); | |
| 69 host.tabIndex = 0; | |
| 70 outerInput1.focus(); | |
| 71 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | |
| 72 outerInput2.focus(); | |
| 73 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | |
| 74 innerInput.focus(); | |
| 75 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | |
| 76 lightdomInput.focus(); | |
| 77 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | |
| 78 host.focus(); | |
| 79 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); | |
| 80 } | |
| 81 | |
| 82 testWithoutDelegatesFocus(); | |
| 83 </script> | |
| OLD | NEW |