| <!DOCTYPE html> |
| <script src="../../../resources/js-test.js"></script> |
| <script src="resources/shadow-dom.js"></script> |
| <!-- Adapted from http://jsbin.com/dexinu/6/edit for layout test --> |
| |
| <template id="XMenuTemplate"> |
| <style> |
| :host { |
| display: inline-block; |
| position: relative; |
| background-color: #aaa; |
| } |
| :host(:focus) { |
| background-color: #ccc; |
| } |
| li { |
| display: inline-block; |
| position: relative; |
| background-color: #eee; |
| } |
| li:focus { |
| background-color: #fff; |
| } |
| </style> |
| <li tabindex="0">Item One</li> |
| <li tabindex="0">Item Two</li> |
| <li tabindex="0">Item Three</li> |
| </template> |
| |
| <section> |
| <x-menu id="XMenu1" tabindex="0"></x-menu> |
| </section> |
| <section> |
| <x-menu id="XMenu2" tabindex="0" delegatesFocus></x-menu> |
| <x-menu id="XMenu3" tabindex="0" delegatesFocus></x-menu> |
| </section> |
| <section> |
| <x-menu id="XMenu4" tabindex="0" delegatesFocus></x-menu> |
| </section> |
| |
| <script> |
| function RegisterXMenu() { |
| var template = document.getElementById('XMenuTemplate'); |
| |
| var xMenuProto = Object.create(HTMLElement.prototype); |
| xMenuProto.createdCallback = function() { |
| var delegatesFocus = this.hasAttribute('delegatesFocus'); |
| this.attachShadow({ 'mode': 'open', 'delegatesFocus': delegatesFocus }) |
| .appendChild( |
| document.importNode(template.content, true) |
| ); |
| }; |
| document.registerElement('x-menu', { |
| prototype: xMenuProto |
| }); |
| } |
| |
| function test() { |
| debug("crbug/474687 :focus style should properly be applied to shadow hosts."); |
| |
| var xmenu1 = document.getElementById("XMenu1"); |
| xmenu1.focus(); |
| navigateFocusForward(); |
| navigateFocusForward(); |
| navigateFocusForward(); |
| shouldBeEqualToString('document.activeElement.id', 'XMenu1'); |
| backgroundColorShouldBe('XMenu1', 'rgb(170, 170, 170)'); |
| backgroundColorShouldBe('XMenu2', 'rgb(170, 170, 170)'); |
| backgroundColorShouldBe('XMenu3', 'rgb(170, 170, 170)'); |
| backgroundColorShouldBe('XMenu4', 'rgb(170, 170, 170)'); |
| |
| navigateFocusForward(); |
| navigateFocusForward(); |
| navigateFocusForward(); |
| shouldBeEqualToString('document.activeElement.id', 'XMenu2'); |
| backgroundColorShouldBe('XMenu1', 'rgb(170, 170, 170)'); |
| backgroundColorShouldBe('XMenu2', 'rgb(204, 204, 204)'); |
| backgroundColorShouldBe('XMenu3', 'rgb(170, 170, 170)'); |
| backgroundColorShouldBe('XMenu4', 'rgb(170, 170, 170)'); |
| |
| navigateFocusForward(); |
| navigateFocusForward(); |
| navigateFocusForward(); |
| shouldBeEqualToString('document.activeElement.id', 'XMenu3'); |
| backgroundColorShouldBe('XMenu1', 'rgb(170, 170, 170)'); |
| backgroundColorShouldBe('XMenu2', 'rgb(170, 170, 170)'); |
| backgroundColorShouldBe('XMenu3', 'rgb(204, 204, 204)'); |
| backgroundColorShouldBe('XMenu4', 'rgb(170, 170, 170)'); |
| |
| navigateFocusForward(); |
| navigateFocusForward(); |
| navigateFocusForward(); |
| shouldBeEqualToString('document.activeElement.id', 'XMenu4'); |
| backgroundColorShouldBe('XMenu1', 'rgb(170, 170, 170)'); |
| backgroundColorShouldBe('XMenu2', 'rgb(170, 170, 170)'); |
| backgroundColorShouldBe('XMenu3', 'rgb(170, 170, 170)'); |
| backgroundColorShouldBe('XMenu4', 'rgb(204, 204, 204)'); |
| |
| navigateFocusBackward(); |
| navigateFocusBackward(); |
| navigateFocusBackward(); |
| shouldBeEqualToString('document.activeElement.id', 'XMenu3'); |
| backgroundColorShouldBe('XMenu1', 'rgb(170, 170, 170)'); |
| backgroundColorShouldBe('XMenu2', 'rgb(170, 170, 170)'); |
| backgroundColorShouldBe('XMenu3', 'rgb(204, 204, 204)'); |
| backgroundColorShouldBe('XMenu4', 'rgb(170, 170, 170)'); |
| |
| navigateFocusBackward(); |
| navigateFocusBackward(); |
| navigateFocusBackward(); |
| shouldBeEqualToString('document.activeElement.id', 'XMenu2'); |
| backgroundColorShouldBe('XMenu1', 'rgb(170, 170, 170)'); |
| backgroundColorShouldBe('XMenu2', 'rgb(204, 204, 204)'); |
| backgroundColorShouldBe('XMenu3', 'rgb(170, 170, 170)'); |
| backgroundColorShouldBe('XMenu4', 'rgb(170, 170, 170)'); |
| |
| navigateFocusBackward(); |
| navigateFocusBackward(); |
| navigateFocusBackward(); |
| shouldBeEqualToString('document.activeElement.id', 'XMenu1'); |
| backgroundColorShouldBe('XMenu1', 'rgb(170, 170, 170)'); |
| backgroundColorShouldBe('XMenu2', 'rgb(170, 170, 170)'); |
| backgroundColorShouldBe('XMenu3', 'rgb(170, 170, 170)'); |
| backgroundColorShouldBe('XMenu4', 'rgb(170, 170, 170)'); |
| } |
| |
| RegisterXMenu(); |
| test(); |
| </script> |
