src/third_party/web_platform_tests/shadow-dom/untriaged/user-interaction/focus-navigation/test-003.html - cobalt - Git at Google

 <!DOCTYPE html>
 <!--
 Distributed under both the W3C Test Suite License [1] and the W3C
 3-clause BSD License [2]. To contribute to a W3C Test Suite, see the
 policies and contribution forms [3].

 [1] http://www.w3.org/Consortium/Legal/2008/04-testsuite-license
 [2] http://www.w3.org/Consortium/Legal/2008/03-bsd-license
 [3] http://www.w3.org/2004/10/27-testcases
 -->
 <html>
 <head>
 <title>Shadow DOM Test: A_07_02_03</title>
 <link rel="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru">
 <link rel="help" href="http://www.w3.org/TR/2013/WD-shadow-dom-20130514/#focus-navigation">
 <meta name="assert" content="User Interaction: For sequential focus navigation, the shadow DOM navigation order sequence must be inserted into the document navigation order in place of the shadow host as if the shadow host were assigned the value of auto for determining its position and shadow host is not focusable">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="../../testcommon.js"></script>
 <link rel="stylesheet" href="/resources/testharness.css">
 </head>
 <body>
 <div id="log"></div>
 <script>
 var A_07_02_03_T01 = async_test('A_07_02_03_T01');

 A_07_02_03_T01.step(unit(function (ctx) {

 	var counter = 0;

 	var invoked = [];

 	var d = newRenderedHTMLDocument(ctx);

 	var chb1 = d.createElement('input');
 	chb1.setAttribute('type', 'checkbox');
 	// TODO according CSS3 nav-index is a replacement for tabindex
 	//chb1.setAttribute('nav-index', '4');
 	chb1.setAttribute('tabindex', '4');
 	chb1.setAttribute('id', 'chb1');
 	chb1.addEventListener('focus', A_07_02_03_T01.step_func(function(event) {
 		assert_equals(counter++, 1, 'Point 1: wrong focus navigation order');
 		invoked[1] = true;
 	}), false);
 	invoked[1] = false;
 	d.body.appendChild(chb1);

 	var host = d.createElement('div');
 	d.body.appendChild(host);
 	var s = host.createShadowRoot();

 	var inp1 = d.createElement('input');
 	inp1.setAttribute('type', 'text');
 	inp1.setAttribute('id', 'shInp1');
 	//inp1.setAttribute('nav-index', '3');
 	inp1.setAttribute('tabindex', '3');
 	inp1.setAttribute('value', 'Input 1');
 	inp1.addEventListener('focus', A_07_02_03_T01.step_func(function(event) {
 		assert_equals(counter++, 4, 'Point 2: wrong focus navigation order');
 		invoked[2] = true;
 	}), false);
 	invoked[2] = false;
 	s.appendChild(inp1);

 	var inp2 = d.createElement('input');
 	inp2.setAttribute('type', 'text');
 	inp2.setAttribute('id', 'shInp2');
 	//inp2.setAttribute('nav-index', '2');
 	inp2.setAttribute('tabindex', '2');
 	inp2.setAttribute('value', 'Input 2');
 	inp2.addEventListener('focus', A_07_02_03_T01.step_func(function(event) {
 		assert_equals(counter++, 3, 'Point 3: wrong focus navigation order');
 		invoked[3] = true;
 	}), false);
 	invoked[3] = false;
 	s.appendChild(inp2);

 	var chb2 = d.createElement('input');
 	chb2.setAttribute('type', 'checkbox');
 	chb2.setAttribute('id', 'chb2');
 	//chb2.setAttribute('nav-index', '1');
 	chb2.setAttribute('tabindex', '1');
 	chb2.addEventListener('focus', A_07_02_03_T01.step_func(function(event) {
 		assert_equals(counter++, 0, 'Point 4: wrong focus navigation order');
 		invoked[4] = true;
 	}), false);
 	invoked[4] = false;
 	d.body.appendChild(chb2);

 	var chb3 = d.createElement('input');
 	chb3.setAttribute('type', 'checkbox');
 	chb3.setAttribute('id', 'chb3');
 	//chb3.setAttribute('nav-index', '5');
 	chb3.setAttribute('tabindex', '5');
 	chb3.addEventListener('focus', A_07_02_03_T01.step_func(function(event) {
 		assert_equals(counter++, 2, 'Point 5: wrong focus navigation order');
 		invoked[5] = true;
 	}), false);
 	invoked[5] = false;
 	d.body.appendChild(chb3);

 	chb2.focus();

 	//simulate TAB clicks. Expected order: chb2, chb1, chb3, inp2, inp1
 	fireKeyboardEvent(d, chb2, 'U+0009');

 	fireKeyboardEvent(d, chb1, 'U+0009');

 	fireKeyboardEvent(d, chb3, 'U+0009');

 	fireKeyboardEvent(d, inp2, 'U+0009');

 	fireKeyboardEvent(d, inp1, 'U+0009');

 	for (var i = 1; i < invoked.length; i++) {
 		if (!invoked[i]) {
 			assert_true(false, 'Piont ' + i + ' event listener was not invoked');
 		}
 	}

 	A_07_02_03_T01.done();
 }));

 // test nodes, distributed into insertion points
 var A_07_02_03_T02 = async_test('A_07_02_03_T02');

 A_07_02_03_T02.step(unit(function (ctx) {

 	var counter = 0;

 	var invoked = [];

 	var d = newRenderedHTMLDocument(ctx);

 	var host = d.createElement('div');
 	d.body.appendChild(host);

 	var chb1 = d.createElement('input');
 	chb1.setAttribute('type', 'checkbox');
 	chb1.setAttribute('id', 'chb1');
 	chb1.setAttribute('tabindex', '1');
 	chb1.addEventListener('focus', A_07_02_03_T02.step_func(function(event) {
 		assert_equals(counter++, 0, 'Point 1: wrong focus navigation order');
 		invoked[1] = true;
 	}), false);
 	invoked[1] = false;
 	d.body.appendChild(chb1);

 	var chb2 = d.createElement('input');
 	chb2.setAttribute('type', 'checkbox');
 	chb2.setAttribute('id', 'chb2');
 	chb2.setAttribute('class', 'shadow');
 	chb2.setAttribute('tabindex', '3');
 	chb2.addEventListener('focus', A_07_02_03_T02.step_func(function(event) {
 		assert_equals(counter++, 2, 'Point 2: wrong focus navigation order');
 		invoked[2] = true;
 	}), false);
 	invoked[2] = false;
 	host.appendChild(chb2);

 	var chb3 = d.createElement('input');
 	chb3.setAttribute('type', 'checkbox');
 	chb3.setAttribute('id', 'chb3');
 	chb3.setAttribute('class', 'shadow');
 	chb3.setAttribute('tabindex', '2');
 	chb3.addEventListener('focus', A_07_02_03_T02.step_func(function(event) {
 		assert_equals(counter++, 1, 'Point 3: wrong focus navigation order');
 		invoked[3] = true;
 	}), false);
 	invoked[3] = false;
 	host.appendChild(chb3);

 	var s = host.createShadowRoot();

 	var div = d.createElement('div');
 	div.innerHTML = '<content select=".shadow"></content>';
 	s.appendChild(div);

 	var inp1 = d.createElement('input');
 	inp1.setAttribute('type', 'text');
 	inp1.setAttribute('id', 'shInp1');
 	inp1.setAttribute('value', 'Input 1');
 	inp1.setAttribute('tabindex', '4');
 	inp1.addEventListener('focus', A_07_02_03_T02.step_func(function(event) {
 		assert_equals(counter++, 4, 'Point 4: wrong focus navigation order');
 		invoked[4] = true;
 	}), false);
 	invoked[4] = false;
 	s.appendChild(inp1);

 	var inp2 = d.createElement('input');
 	inp2.setAttribute('type', 'text');
 	inp2.setAttribute('id', 'shInp2');
 	inp2.setAttribute('value', 'Input 2');
 	inp2.setAttribute('tabindex', '5');
 	inp2.addEventListener('focus', A_07_02_03_T02.step_func(function(event) {
 		assert_equals(counter++, 5, 'Point 5: wrong focus navigation order');
 		invoked[5] = true;
 	}), false);
 	invoked[5] = false;
 	s.appendChild(inp2);

 	var chb4 = d.createElement('input');
 	chb4.setAttribute('type', 'checkbox');
 	chb4.setAttribute('id', 'chb4');
 	chb4.setAttribute('tabindex', '6');
 	chb4.addEventListener('focus', A_07_02_03_T02.step_func(function(event) {
 		assert_equals(counter++, 3, 'Point 6: wrong focus navigation order');
 		invoked[6] = true;
 	}), false);
 	invoked[6] = false;
 	d.body.appendChild(chb4);

 	chb1.focus();

 	//simulate TAB clicks
 	//Expected order: chb1, chb3, chb2, chb4, inp1, inp2
 	fireKeyboardEvent(d, chb1, 'U+0009');
 	fireKeyboardEvent(d, chb3, 'U+0009');
 	fireKeyboardEvent(d, chb2, 'U+0009');
 	fireKeyboardEvent(d, chb4, 'U+0009');
 	fireKeyboardEvent(d, inp1, 'U+0009');
 	fireKeyboardEvent(d, inp2, 'U+0009');


 	for (var i = 1; i < invoked.length; i++) {
 		if (!invoked[i]) {
 			assert_true(false, 'Piont ' + i + ' event listener was not invoked');
 		}
 	}

 	A_07_02_03_T02.done();
 }));
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<!--
	Distributed under both the W3C Test Suite License [1] and the W3C
	3-clause BSD License [2]. To contribute to a W3C Test Suite, see the
	policies and contribution forms [3].

	[1] http://www.w3.org/Consortium/Legal/2008/04-testsuite-license
	[2] http://www.w3.org/Consortium/Legal/2008/03-bsd-license
	[3] http://www.w3.org/2004/10/27-testcases
	-->
	<html>
	<head>
	<title>Shadow DOM Test: A_07_02_03</title>
	<link rel="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru">
	<link rel="help" href="http://www.w3.org/TR/2013/WD-shadow-dom-20130514/#focus-navigation">
	<meta name="assert" content="User Interaction: For sequential focus navigation, the shadow DOM navigation order sequence must be inserted into the document navigation order in place of the shadow host as if the shadow host were assigned the value of auto for determining its position and shadow host is not focusable">
	<script src="/resources/testharness.js"></script>
	<script src="/resources/testharnessreport.js"></script>
	<script src="../../testcommon.js"></script>
	<link rel="stylesheet" href="/resources/testharness.css">
	</head>
	<body>
	<div id="log"></div>
	<script>
	var A_07_02_03_T01 = async_test('A_07_02_03_T01');

	A_07_02_03_T01.step(unit(function (ctx) {

	var counter = 0;

	var invoked = [];

	var d = newRenderedHTMLDocument(ctx);

	var chb1 = d.createElement('input');
	chb1.setAttribute('type', 'checkbox');
	// TODO according CSS3 nav-index is a replacement for tabindex
	//chb1.setAttribute('nav-index', '4');
	chb1.setAttribute('tabindex', '4');
	chb1.setAttribute('id', 'chb1');
	chb1.addEventListener('focus', A_07_02_03_T01.step_func(function(event) {
	assert_equals(counter++, 1, 'Point 1: wrong focus navigation order');
	invoked[1] = true;
	}), false);
	invoked[1] = false;
	d.body.appendChild(chb1);

	var host = d.createElement('div');
	d.body.appendChild(host);
	var s = host.createShadowRoot();

	var inp1 = d.createElement('input');
	inp1.setAttribute('type', 'text');
	inp1.setAttribute('id', 'shInp1');
	//inp1.setAttribute('nav-index', '3');
	inp1.setAttribute('tabindex', '3');
	inp1.setAttribute('value', 'Input 1');
	inp1.addEventListener('focus', A_07_02_03_T01.step_func(function(event) {
	assert_equals(counter++, 4, 'Point 2: wrong focus navigation order');
	invoked[2] = true;
	}), false);
	invoked[2] = false;
	s.appendChild(inp1);

	var inp2 = d.createElement('input');
	inp2.setAttribute('type', 'text');
	inp2.setAttribute('id', 'shInp2');
	//inp2.setAttribute('nav-index', '2');
	inp2.setAttribute('tabindex', '2');
	inp2.setAttribute('value', 'Input 2');
	inp2.addEventListener('focus', A_07_02_03_T01.step_func(function(event) {
	assert_equals(counter++, 3, 'Point 3: wrong focus navigation order');
	invoked[3] = true;
	}), false);
	invoked[3] = false;
	s.appendChild(inp2);

	var chb2 = d.createElement('input');
	chb2.setAttribute('type', 'checkbox');
	chb2.setAttribute('id', 'chb2');
	//chb2.setAttribute('nav-index', '1');
	chb2.setAttribute('tabindex', '1');
	chb2.addEventListener('focus', A_07_02_03_T01.step_func(function(event) {
	assert_equals(counter++, 0, 'Point 4: wrong focus navigation order');
	invoked[4] = true;
	}), false);
	invoked[4] = false;
	d.body.appendChild(chb2);

	var chb3 = d.createElement('input');
	chb3.setAttribute('type', 'checkbox');
	chb3.setAttribute('id', 'chb3');
	//chb3.setAttribute('nav-index', '5');
	chb3.setAttribute('tabindex', '5');
	chb3.addEventListener('focus', A_07_02_03_T01.step_func(function(event) {
	assert_equals(counter++, 2, 'Point 5: wrong focus navigation order');
	invoked[5] = true;
	}), false);
	invoked[5] = false;
	d.body.appendChild(chb3);

	chb2.focus();

	//simulate TAB clicks. Expected order: chb2, chb1, chb3, inp2, inp1
	fireKeyboardEvent(d, chb2, 'U+0009');

	fireKeyboardEvent(d, chb1, 'U+0009');

	fireKeyboardEvent(d, chb3, 'U+0009');

	fireKeyboardEvent(d, inp2, 'U+0009');

	fireKeyboardEvent(d, inp1, 'U+0009');

	for (var i = 1; i < invoked.length; i++) {
	if (!invoked[i]) {
	assert_true(false, 'Piont ' + i + ' event listener was not invoked');
	}
	}

	A_07_02_03_T01.done();
	}));

	// test nodes, distributed into insertion points
	var A_07_02_03_T02 = async_test('A_07_02_03_T02');

	A_07_02_03_T02.step(unit(function (ctx) {

	var counter = 0;

	var invoked = [];

	var d = newRenderedHTMLDocument(ctx);

	var host = d.createElement('div');
	d.body.appendChild(host);

	var chb1 = d.createElement('input');
	chb1.setAttribute('type', 'checkbox');
	chb1.setAttribute('id', 'chb1');
	chb1.setAttribute('tabindex', '1');
	chb1.addEventListener('focus', A_07_02_03_T02.step_func(function(event) {
	assert_equals(counter++, 0, 'Point 1: wrong focus navigation order');
	invoked[1] = true;
	}), false);
	invoked[1] = false;
	d.body.appendChild(chb1);

	var chb2 = d.createElement('input');
	chb2.setAttribute('type', 'checkbox');
	chb2.setAttribute('id', 'chb2');
	chb2.setAttribute('class', 'shadow');
	chb2.setAttribute('tabindex', '3');
	chb2.addEventListener('focus', A_07_02_03_T02.step_func(function(event) {
	assert_equals(counter++, 2, 'Point 2: wrong focus navigation order');
	invoked[2] = true;
	}), false);
	invoked[2] = false;
	host.appendChild(chb2);

	var chb3 = d.createElement('input');
	chb3.setAttribute('type', 'checkbox');
	chb3.setAttribute('id', 'chb3');
	chb3.setAttribute('class', 'shadow');
	chb3.setAttribute('tabindex', '2');
	chb3.addEventListener('focus', A_07_02_03_T02.step_func(function(event) {
	assert_equals(counter++, 1, 'Point 3: wrong focus navigation order');
	invoked[3] = true;
	}), false);
	invoked[3] = false;
	host.appendChild(chb3);

	var s = host.createShadowRoot();

	var div = d.createElement('div');
	div.innerHTML = '<content select=".shadow"></content>';
	s.appendChild(div);

	var inp1 = d.createElement('input');
	inp1.setAttribute('type', 'text');
	inp1.setAttribute('id', 'shInp1');
	inp1.setAttribute('value', 'Input 1');
	inp1.setAttribute('tabindex', '4');
	inp1.addEventListener('focus', A_07_02_03_T02.step_func(function(event) {
	assert_equals(counter++, 4, 'Point 4: wrong focus navigation order');
	invoked[4] = true;
	}), false);
	invoked[4] = false;
	s.appendChild(inp1);

	var inp2 = d.createElement('input');
	inp2.setAttribute('type', 'text');
	inp2.setAttribute('id', 'shInp2');
	inp2.setAttribute('value', 'Input 2');
	inp2.setAttribute('tabindex', '5');
	inp2.addEventListener('focus', A_07_02_03_T02.step_func(function(event) {
	assert_equals(counter++, 5, 'Point 5: wrong focus navigation order');
	invoked[5] = true;
	}), false);
	invoked[5] = false;
	s.appendChild(inp2);

	var chb4 = d.createElement('input');
	chb4.setAttribute('type', 'checkbox');
	chb4.setAttribute('id', 'chb4');
	chb4.setAttribute('tabindex', '6');
	chb4.addEventListener('focus', A_07_02_03_T02.step_func(function(event) {
	assert_equals(counter++, 3, 'Point 6: wrong focus navigation order');
	invoked[6] = true;
	}), false);
	invoked[6] = false;
	d.body.appendChild(chb4);

	chb1.focus();

	//simulate TAB clicks
	//Expected order: chb1, chb3, chb2, chb4, inp1, inp2
	fireKeyboardEvent(d, chb1, 'U+0009');
	fireKeyboardEvent(d, chb3, 'U+0009');
	fireKeyboardEvent(d, chb2, 'U+0009');
	fireKeyboardEvent(d, chb4, 'U+0009');
	fireKeyboardEvent(d, inp1, 'U+0009');
	fireKeyboardEvent(d, inp2, 'U+0009');



	for (var i = 1; i < invoked.length; i++) {
	if (!invoked[i]) {
	assert_true(false, 'Piont ' + i + ' event listener was not invoked');
	}
	}

	A_07_02_03_T02.done();
	}));
	</script>
	</body>
	</html>