servo/tests/wpt/css-tests/css-regions-1_dev/html/regions-keyboard-events-007.htm
Ms2ger 296fa2512b Update web-platform-tests and CSS tests.
- Update CSS tests to revision e05bfd5e30ed662c2f8a353577003f8eed230180.
- Update web-platform-tests to revision a052787dd5c069a340031011196b73affbd68cd9.
2017-02-06 22:38:29 +01:00

136 lines
No EOL
6 KiB
HTML

<!DOCTYPE html>
<html><head>
<title>CSS Regions: onkeydown and onkeyup events inside multiple regions using Tab key in forms</title>
<link href="mailto:dalcala@adobe.com" rel="author" title="David Alcala">
<link href="mailto:rhauck@adobe.com" rel="reviewer" title="Rebecca Hauck"><!-- 07-19-2013 -->
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#flow-from" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#relation-to-document-events" rel="help">
<meta content="CSS regions module does not alter the normal processing of events in the document
tree. Therefore, onkeydown and onkeyup events inside multiple named flows should be raised when the Tab key is
pressed and released." name="assert">
<meta content="dom interact" name="flags">
<link href="support/css/regions-keyboard.css" type="text/css" rel="stylesheet">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/js/regions-keyboard-events-test-helper.js"></script>
</head>
<body>
<p id="msg">Press the Tab key three times.</p>
<div id="content">
<form id="my-form">
<div class="block">
<input autofocus="" type="text" id="textfield-inside1" size="10">
</div>
<div class="block">
<input type="text" id="textfield-inside2" size="10">
</div>
<div class="block" id="target-block">
<textarea rows="3" cols="10" id="textarea-inside"></textarea>
</div>
</form>
</div>
<div class="region"></div>
<div class="region"></div>
<div class="region"></div>
<br>
<div id="outside-region">This div is outside the region
<form id="form-outside">
<input type="text" id="textfield-outside" size="10">
<input type="button" id="button-outside" value="Button">
</form>
</div>
<div id="log"></div>
<script type="text/javascript">
if(getLeftPosition("target-block") !== 0) {
var test1 = async_test("onkeydown event fired in textfield1 inside region", {timeout: testTimeout});
test1.step(function () {
var testTarget = document.getElementById("textfield-inside1");
testTarget.onkeydown = test1.step_func(function (evt) {
/* Verify the target outside the region has the correct ID */
test(function() {
assert_equals(evt.target.id, "textfield-inside1");
}, "Textfield1 inside region has the correct ID");
/* Verify the textfield received focus from tab key */
test(function() {
assert_equals(document.activeElement.id, "textfield-inside1");
}, "Textfield1 inside region received focus");
test1.done();
});
});
var test2 = async_test("onkeyup event fired in textfield2 inside region", {timeout: testTimeout});
test2.step(function () {
var testTarget = document.getElementById("textfield-inside2");
testTarget.onkeyup = test2.step_func(function (evt) {
/* Log assertion that the event got fired */
assert_true(true);
test2.done();
});
});
var test3 = async_test("onkeydown event fired in textfield2 inside region", {timeout: testTimeout});
test3.step( function() {
var testTarget = document.getElementById("textfield-inside2");
testTarget.onkeydown = test3.step_func(function (evt) {
/* Verify the target outside the region has the correct ID */
test(function () {
assert_equals(evt.target.id, "textfield-inside2");
}, "Textfield2 inside region has the correct ID");
/* Verify the textfield received focus from tab key */
test(function () {
assert_equals(document.activeElement.id, "textfield-inside2");
}, "Textfield2 inside region received focus");
test3.done();
});
});
var test4 = async_test("onkeyup event fired in textarea inside region", {timeout: testTimeout});
test4.step( function() {
var testTarget = document.getElementById("textarea-inside");
testTarget.onkeyup = test4.step_func(function (evt) {
/* Verify the textarea received focus from tab key */
test(function () {
assert_equals(document.activeElement.id, "textarea-inside");
}, "textarea inside region received focus");
test4.done();
});
});
var test5 = async_test("onkeydown event fired in textarea inside region", {timeout: testTimeout});
test5.step( function() {
var testTarget = document.getElementById("textarea-inside");
testTarget.onkeydown = test5.step_func(function (evt) {
/* Verify the textarea inside the region has the correct ID */
test(function () {
assert_equals(evt.target.id, "textarea-inside");
}, "textarea inside region has the correct ID");
test5.done();
});
});
tabKeyPresses(3);
completionCallback();
} //end of getLeftPosition test
else {
test(function () {
assert_true(false);
}, "Regions are not enabled");
}
</script>
</body></html>