LayoutTests/fast/dom/shadow/delegatesFocus-highlight-sibling.html - Issue 1177673005: Implement ShadowRoot.delegatesFocus 4/4 (match CSS :focus for shadow host)

Side by Side 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 unified diff | Download patch | Annotate | Revision Log

« 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 »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <!DOCTYPE html>

	2 <script src="../../../resources/js-test.js"></script>

	3 <script src="resources/shadow-dom.js"></script>

	4 <!-- Adapted from http://jsbin.com/dexinu/6/edit for layout test -->

	5

	6 <template id="XMenuTemplate">

	7 <style>

	8 :host {

	9 display: inline-block;

	10 position: relative;

	11 background-color: #aaa;

	12 }

	13 :host(:focus) {

	14 background-color: #ccc;

	15 }

	16 li {

	17 display: inline-block;

	18 position: relative;

	19 background-color: #eee;

	20 }

	21 li:focus {

	22 background-color: #fff;

	23 }

	24 </style>

	25 <li tabindex="0">Item One</li>

	26 <li tabindex="0">Item Two</li>

	27 <li tabindex="0">Item Three</li>

	28 </template>

	29

	30 <section>

	31 <x-menu id="XMenu1" tabindex="0"></x-menu>

	32 </section>

	33 <section>

	34 <x-menu id="XMenu2" tabindex="0" delegatesFocus></x-menu>

	35 <x-menu id="XMenu3" tabindex="0" delegatesFocus></x-menu>

	36 </section>

	37 <section>

	38 <x-menu id="XMenu4" tabindex="0" delegatesFocus></x-menu>

	39 </section>

	40

	41 <script>

	42 function RegisterXMenu() {

	43 var template = document.getElementById('XMenuTemplate');

	44

	45 var xMenuProto = Object.create(HTMLElement.prototype);

	46 xMenuProto.createdCallback = function() {

	47 var delegatesFocus = this.hasAttribute('delegatesFocus');

	48 this.createShadowRoot({ 'delegatesFocus': delegatesFocus })

	49 .appendChild(

	50 document.importNode(template.content, true)

	51 );

	52 };

	53 document.registerElement('x-menu', {

	54 prototype: xMenuProto

	55 });

	56 }

	57

	58 function backgroundColorOf(selector) {

	59 return window.getComputedStyle(getNodeInTreeOfTrees(selector)).backgroundCol or;

	60 }

	61

	62 function backgroundColorShouldBe(selector, expected) {

	63 shouldBeEqualToString('backgroundColorOf(\'' + selector + '\')', expected);

	64 }

	65

	66 function test() {

	67 debug("crbug/474687 :focus style should properly be applied to shadow hosts. ");

	68

	69 var xmenu1 = document.getElementById("XMenu1");

	70 xmenu1.focus();

	71 navigateFocusForward();

	72 navigateFocusForward();

	73 navigateFocusForward();

	74 shouldBeEqualToString('document.activeElement.id', 'XMenu1');

	75 backgroundColorShouldBe('XMenu1', 'rgb(170, 170, 170)');

	76 backgroundColorShouldBe('XMenu2', 'rgb(170, 170, 170)');

	77 backgroundColorShouldBe('XMenu3', 'rgb(170, 170, 170)');

	78 backgroundColorShouldBe('XMenu4', 'rgb(170, 170, 170)');

	79

	80 navigateFocusForward();

	81 navigateFocusForward();

	82 navigateFocusForward();

	83 shouldBeEqualToString('document.activeElement.id', 'XMenu2');

	84 backgroundColorShouldBe('XMenu1', 'rgb(170, 170, 170)');

	85 backgroundColorShouldBe('XMenu2', 'rgb(204, 204, 204)');

	86 backgroundColorShouldBe('XMenu3', 'rgb(170, 170, 170)');

	87 backgroundColorShouldBe('XMenu4', 'rgb(170, 170, 170)');

	88

	89 navigateFocusForward();

	90 navigateFocusForward();

	91 navigateFocusForward();

	92 shouldBeEqualToString('document.activeElement.id', 'XMenu3');

	93 backgroundColorShouldBe('XMenu1', 'rgb(170, 170, 170)');

	94 backgroundColorShouldBe('XMenu2', 'rgb(170, 170, 170)');

	95 backgroundColorShouldBe('XMenu3', 'rgb(204, 204, 204)');

	96 backgroundColorShouldBe('XMenu4', 'rgb(170, 170, 170)');

	97

	98 navigateFocusForward();

	99 navigateFocusForward();

	100 navigateFocusForward();

	101 shouldBeEqualToString('document.activeElement.id', 'XMenu4');

	102 backgroundColorShouldBe('XMenu1', 'rgb(170, 170, 170)');

	103 backgroundColorShouldBe('XMenu2', 'rgb(170, 170, 170)');

	104 backgroundColorShouldBe('XMenu3', 'rgb(170, 170, 170)');

	105 backgroundColorShouldBe('XMenu4', 'rgb(204, 204, 204)');

	106

	107 navigateFocusBackward();

	108 navigateFocusBackward();

	109 navigateFocusBackward();

	110 shouldBeEqualToString('document.activeElement.id', 'XMenu3');

	111 backgroundColorShouldBe('XMenu1', 'rgb(170, 170, 170)');

	112 backgroundColorShouldBe('XMenu2', 'rgb(170, 170, 170)');

	113 backgroundColorShouldBe('XMenu3', 'rgb(204, 204, 204)');

	114 backgroundColorShouldBe('XMenu4', 'rgb(170, 170, 170)');

	115

	116 navigateFocusBackward();

	117 navigateFocusBackward();

	118 navigateFocusBackward();

	119 shouldBeEqualToString('document.activeElement.id', 'XMenu2');

	120 backgroundColorShouldBe('XMenu1', 'rgb(170, 170, 170)');

	121 backgroundColorShouldBe('XMenu2', 'rgb(204, 204, 204)');

	122 backgroundColorShouldBe('XMenu3', 'rgb(170, 170, 170)');

	123 backgroundColorShouldBe('XMenu4', 'rgb(170, 170, 170)');

	124

	125 navigateFocusBackward();

	126 navigateFocusBackward();

	127 navigateFocusBackward();

	128 shouldBeEqualToString('document.activeElement.id', 'XMenu1');

	129 backgroundColorShouldBe('XMenu1', 'rgb(170, 170, 170)');

	130 backgroundColorShouldBe('XMenu2', 'rgb(170, 170, 170)');

	131 backgroundColorShouldBe('XMenu3', 'rgb(170, 170, 170)');

	132 backgroundColorShouldBe('XMenu4', 'rgb(170, 170, 170)');

	133 }

	134

	135 RegisterXMenu();

	136 test();

	137 </script>

OLD	NEW