diff options
Diffstat (limited to 'testing/web-platform/tests/shadow-dom/focus-navigation/delegatesFocus-highlight-sibling.html')
| -rw-r--r-- | testing/web-platform/tests/shadow-dom/focus-navigation/delegatesFocus-highlight-sibling.html | 126 |
1 files changed, 126 insertions, 0 deletions
diff --git a/testing/web-platform/tests/shadow-dom/focus-navigation/delegatesFocus-highlight-sibling.html b/testing/web-platform/tests/shadow-dom/focus-navigation/delegatesFocus-highlight-sibling.html new file mode 100644 index 0000000000..dde18128ad --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/focus-navigation/delegatesFocus-highlight-sibling.html @@ -0,0 +1,126 @@ +<!DOCTYPE html> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src="resources/shadow-dom.js"></script> +<script src="resources/focus-utils.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> +'use strict'; + +const template = document.querySelector('#XMenuTemplate'); + +customElements.define('x-menu', class extends HTMLElement { + connectedCallback() { + const delegatesFocus = this.hasAttribute('delegatesFocus'); + this.attachShadow({mode: 'open', delegatesFocus: delegatesFocus}) + .appendChild(document.importNode(template.content, true)); + } +}); + +promise_test(async () => { + let xmenu1 = document.getElementById('XMenu1'); + + xmenu1.focus(); + await navigateFocusForward(); + await navigateFocusForward(); + await navigateFocusForward(); + assert_equals(document.activeElement.id, 'XMenu1'); + assert_background_color('XMenu1', 'rgb(204, 204, 204)'); + assert_background_color('XMenu2', 'rgb(170, 170, 170)'); + assert_background_color('XMenu3', 'rgb(170, 170, 170)'); + assert_background_color('XMenu4', 'rgb(170, 170, 170)'); + + await navigateFocusForward(); + await navigateFocusForward(); + await navigateFocusForward(); + assert_equals(document.activeElement.id, 'XMenu2'); + await assert_background_color('XMenu1', 'rgb(170, 170, 170)'); + await assert_background_color('XMenu2', 'rgb(204, 204, 204)'); + await assert_background_color('XMenu3', 'rgb(170, 170, 170)'); + await assert_background_color('XMenu4', 'rgb(170, 170, 170)'); + + await navigateFocusForward(); + await navigateFocusForward(); + await navigateFocusForward(); + assert_equals(document.activeElement.id, 'XMenu3'); + assert_background_color('XMenu1', 'rgb(170, 170, 170)'); + assert_background_color('XMenu2', 'rgb(170, 170, 170)'); + assert_background_color('XMenu3', 'rgb(204, 204, 204)'); + assert_background_color('XMenu4', 'rgb(170, 170, 170)'); + + await navigateFocusForward(); + await navigateFocusForward(); + await navigateFocusForward(); + assert_equals(document.activeElement.id, 'XMenu4'); + assert_background_color('XMenu1', 'rgb(170, 170, 170)'); + assert_background_color('XMenu2', 'rgb(170, 170, 170)'); + assert_background_color('XMenu3', 'rgb(170, 170, 170)'); + assert_background_color('XMenu4', 'rgb(204, 204, 204)'); + + await navigateFocusBackward(); + await navigateFocusBackward(); + await navigateFocusBackward(); + assert_equals(document.activeElement.id, 'XMenu3'); + assert_background_color('XMenu1', 'rgb(170, 170, 170)'); + assert_background_color('XMenu2', 'rgb(170, 170, 170)'); + assert_background_color('XMenu3', 'rgb(204, 204, 204)'); + assert_background_color('XMenu4', 'rgb(170, 170, 170)'); + + await navigateFocusBackward(); + await navigateFocusBackward(); + await navigateFocusBackward(); + assert_equals(document.activeElement.id, 'XMenu2'); + assert_background_color('XMenu1', 'rgb(170, 170, 170)'); + assert_background_color('XMenu2', 'rgb(204, 204, 204)'); + assert_background_color('XMenu3', 'rgb(170, 170, 170)'); + assert_background_color('XMenu4', 'rgb(170, 170, 170)'); + + await navigateFocusBackward(); + await navigateFocusBackward(); + await navigateFocusBackward(); + assert_equals(document.activeElement.id, 'XMenu1'); + assert_background_color('XMenu1', 'rgb(204, 204, 204)'); + assert_background_color('XMenu2', 'rgb(170, 170, 170)'); + assert_background_color('XMenu3', 'rgb(170, 170, 170)'); + assert_background_color('XMenu4', 'rgb(170, 170, 170)'); +}, 'crbug/474687 :focus style should properly be applied to shadow hosts.'); +</script> |