Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(37)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: LayoutTests/fast/dom/shadow/delegatesFocus-highlight-sibling.html

Issue 1177673005: Implement ShadowRoot.delegatesFocus 4/4 (match CSS :focus for shadow host) (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: fix for comments Created 5 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « LayoutTests/fast/dom/shadow/css-focus-pseudo-match-shadow-host5-expected.txt ('k') | LayoutTests/fast/dom/shadow/delegatesFocus-highlight-sibling-expected.txt » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: LayoutTests/fast/dom/shadow/delegatesFocus-highlight-sibling.html
diff --git a/LayoutTests/fast/dom/shadow/delegatesFocus-highlight-sibling.html b/LayoutTests/fast/dom/shadow/delegatesFocus-highlight-sibling.html
new file mode 100644
index 0000000000000000000000000000000000000000..21cfd8ef7dada61c9817e1e17760c8aed86bd374
--- /dev/null
+++ b/LayoutTests/fast/dom/shadow/delegatesFocus-highlight-sibling.html
@@ -0,0 +1,137 @@
+<!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.createShadowRoot({ 'delegatesFocus': delegatesFocus })
+ .appendChild(
+ document.importNode(template.content, true)
+ );
+ };
+ document.registerElement('x-menu', {
+ prototype: xMenuProto
+ });
+}
+
+function backgroundColorOf(selector) {
+ return window.getComputedStyle(getNodeInTreeOfTrees(selector)).backgroundColor;
+}
+
+function backgroundColorShouldBe(selector, expected) {
+ shouldBeEqualToString('backgroundColorOf(\'' + selector + '\')', expected);
+}
+
+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>
« no previous file with comments | « LayoutTests/fast/dom/shadow/css-focus-pseudo-match-shadow-host5-expected.txt ('k') | LayoutTests/fast/dom/shadow/delegatesFocus-highlight-sibling-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698