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

Side by Side Diff: LayoutTests/fast/dom/shadow/css-focus-pseudo-match-shadow-host2.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-host1-expected.txt ('k') | LayoutTests/fast/dom/shadow/css-focus-pseudo-match-shadow-host2-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 <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 backgroundColorOf(selector) {

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

	19 }

	20

	21 function backgroundColorShouldBe(selector, expected) {

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

	23 }

	24

	25 function buildSingleShadowTree(delegatesFocus) {

	26 var sandbox = document.querySelector('#sandbox');

	27 sandbox.innerHTML = '';

	28 sandbox.appendChild(

	29 createDOM('div', {},

	30 createDOM('input', {'id': 'outer-input'}),

	31 createDOM('div', {'id': 'shadow-host'},

	32 createDOM('input', {'id': 'lightdom-input'}),

	33 createShadowRoot(

	34 {'delegatesFocus': delegatesFocus},

	35 createDOM('content'),

	36 createDOM('input', {'id': 'inner-input'})))));

	37

	38 sandbox.offsetTop;

	39 }

	40

	41 function testSingleShadow() {

	42 debug('(1/6) Testing how :focus matches on shadow host with delegatesFocus=f alse.');

	43 buildSingleShadowTree(false);

	44

	45 var host = document.querySelector('#shadow-host');

	46 var lightdomInput = document.querySelector('#lightdom-input');

	47 var innerInput = getNodeInTreeOfTrees('shadow-host/inner-input');

	48 var outerInput = document.querySelector('#outer-input');

	49

	50 outerInput.focus();

	51 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');

	52 lightdomInput.focus();

	53 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');

	54 innerInput.focus();

	55 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');

	56 host.focus(); // host will not get focus as it is not focusable.

	57 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');

	58

	59 debug('(2/6) Testing how :focus matches on shadow host with tabindex=-1, del egatesFocus=false.');

	60 host.tabIndex = -1;

	61 outerInput.focus();

	62 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');

	63 lightdomInput.focus();

	64 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');

	65 innerInput.focus();

	66 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');

	67 host.focus();

	68 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');

	69

	70 debug('(3/6) Testing how :focus matches on shadow host with tabindex=0, dele gatesFocus=false.');

	71 host.tabIndex = 0;

	72 outerInput.focus();

	73 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');

	74 lightdomInput.focus();

	75 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');

	76 innerInput.focus();

	77 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');

	78 host.focus();

	79 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');

	80

	81

	82 debug('(4/6) Testing how :focus matches on shadow host with delegatesFocus=t rue.');

	83 buildSingleShadowTree(true);

	84

	85 var host = document.querySelector('#shadow-host');

	86 var lightdomInput = document.querySelector('#lightdom-input');

	87 var innerInput = getNodeInTreeOfTrees('shadow-host/inner-input');

	88 var outerInput = document.querySelector('#outer-input');

	89

	90 outerInput.focus();

	91 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');

	92 lightdomInput.focus();

	93 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');

	94 innerInput.focus();

	95 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');

	96 host.focus();

	97 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');

	98

	99 debug('(5/6) Testing how :focus matches on shadow host with tabindex=-1, del egatesFocus=true.');

	100 host.tabIndex = -1;

	101 outerInput.focus();

	102 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');

	103 lightdomInput.focus();

	104 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');

	105 innerInput.focus();

	106 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');

	107 host.focus();

	108 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');

	109

	110 debug('(6/6) Testing how :focus matches on shadow host with tabindex=0, dele gatesFocus=true.');

	111 host.tabIndex = 0;

	112 outerInput.focus();

	113 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');

	114 lightdomInput.focus();

	115 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');

	116 innerInput.focus();

	117 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');

	118 host.focus();

	119 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');

	120 }

	121

	122 testSingleShadow();

	123 </script>

OLD	NEW