Skip to content

GitLab

T
tangled
Commit fd364c78 authored by kochi's avatar kochi Committed by Commit bot
Browse files
Options

Convert remaining focus tests in shadow-dom to use testharness.js 

The following tests are converted to use testharness.js
from js-test.js in LayoutTests/shadow-dom/.

* attach-shadow-with-parameter.html
* focus-slide-on-shadow-host.html
* focus-shadowhost-display-none.html

For attach-shadow-with-parameter.html, I added some return
value checks, but otherwise almost straightforward conversion
to testharness.js API.

Review-Url: https://codereview.chromium.org/2333623003
Cr-Commit-Position: refs/heads/master@{#418770}
parent 531b66b2
Hide whitespace changes
Inline Side-by-side
Showing with 94 additions and 175 deletions
third_party/WebKit/LayoutTests/shadow-dom/attach-shadow-with-parameter-expected.txt deleted 100644 → 0
View file @ 531b66b2
Attach open shadow root.
PASS host1.attachShadow({mode: 'open'}) is non-null.
Attach closed shadow root.
PASS host2.attachShadow({mode: 'closed'}) is non-null.
Attach shadow root whose mode is neither open nor closed.
PASS host4.attachShadow({mode: 'illegal'}) threw exception TypeError: Failed to execute 'attachShadow' on 'Element': The provided value 'illegal' is not a valid enum value of type ShadowRootMode..
Attach open shadow root with shadow-dom.js utility.
PASS [object ShadowRoot] is non-null.
Attach shadow root on already shadowed host will raise InvalidStateError exception.
PASS host1.attachShadow({mode: 'open'}) threw exception InvalidStateError: Failed to execute 'attachShadow' on 'Element': Shadow root cannot be created on a host which already hosts a shadow tree..
PASS successfullyParsed is true
TEST COMPLETE
third_party/WebKit/LayoutTests/shadow-dom/attach-shadow-with-parameter.html
View file @ fd364c78
<!doctype html>
<script src="../resources/js-test.js"></script>
<script src="../fast/dom/shadow/resources/shadow-dom.js"></script>
<body>
<div id="host1"></div>
<div id="host2"></div>
<div id="host3"></div>
</body>
<!DOCTYPE html>
<script src='../resources/testharness.js'></script>
<script src='../resources/testharnessreport.js'></script>
<script src='resources/shadow-dom.js'></script>
<div id='host1'></div>
<div id='host2'></div>
<div id='host3'></div>
<script>
debug('Attach open shadow root.');
var host1 = document.querySelector('#host1');
shouldBeNonNull("host1.attachShadow({mode: 'open'})");
'use strict';
debug('Attach closed shadow root.');
var host2 = document.querySelector('#host2');
shouldBeNonNull("host2.attachShadow({mode: 'closed'})");
test(() => {
let root1 = host1.attachShadow({mode: 'open'});
assert_not_equals(root1, null, 'Attach open shadow root should succeed.');
assert_equals(Object.getPrototypeOf(root1), ShadowRoot.prototype,
'ShadowRoot object should be returned by attachShadow({mode:"open"}).');
debug('Attach shadow root whose mode is neither open nor closed.');
var host4 = document.querySelector('#host3');
shouldThrow("host4.attachShadow({mode: 'illegal'})");
let root2 = host2.attachShadow({mode: 'closed'});
assert_not_equals(root2, null, 'Attach closed shadow root should succeed.');
assert_equals(Object.getPrototypeOf(root2), ShadowRoot.prototype,
'ShadowRoot object should be returned by attachShadow({mode:"closed"}).');
debug('Attach open shadow root with shadow-dom.js utility.');
document.body.appendChild(
createDOM('div', {id: 'host5'},
attachShadow({mode: 'open'})));
var host5 = document.querySelector('#host5');
var root5 = host5.shadowRoot;
shouldBeNonNull(root5);
assert_throws({name: 'TypeError'}, () => { host3.attachShadow({mode: 'illegal'}); },
'Attach shadow root whose mode is neither open nor closed should throw TypeError.');
debug('Attach shadow root on already shadowed host will raise InvalidStateError exception.');
shouldThrow("host1.attachShadow({mode: 'open'})");
assert_throws({name: 'InvalidStateError'}, () => { host1.attachShadow({mode: 'open'}); },
'Attach shadow on a host which has open shadow root will raise InvalidStateError exception.');
assert_throws({name: 'InvalidStateError'}, () => { host2.attachShadow({mode: 'open'}); },
'Attach shadow on a host wich has closed shadow root will raise InvalidStateError exception.');
}, 'Test for Element.attachShadow() with mode parameter.');
</script>
third_party/WebKit/LayoutTests/shadow-dom/focus-shadowhost-display-none-expected.txt deleted 100644 → 0
View file @ 531b66b2
Check if shadow host with display:none CSS rule for :focus works. crbug.com/482830
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
when shadow host itself is focused, it should match display:none, lose focus then becomes display:block again.
PASS window.getComputedStyle(host).display is "none"
PASS document.activeElement is host
PASS root.activeElement is null
PASS successfullyParsed is true
TEST COMPLETE
PASS window.getComputedStyle(host).display is "block"
PASS document.activeElement is document.body
PASS root.activeElement is null
when shadow host with delegatesFocus=true has focused element inside the shadow, it should also match display:none, then lose focus and become display:block again.
PASS window.getComputedStyle(host).display is "none"
PASS document.activeElement is host
PASS root.activeElement is input
PASS window.getComputedStyle(host).display is "block"
PASS document.activeElement is document.body
PASS root.activeElement is null
third_party/WebKit/LayoutTests/shadow-dom/focus-shadowhost-display-none.html
View file @ fd364c78
<!DOCTYPE html>
<script src="../resources/js-test.js"></script>
<script src='../resources/testharness.js'></script>
<script src='../resources/testharnessreport.js'></script>
<style>
div#host:focus { display: none; }
#host:focus { display: none; }
</style>
<div id="sandbox"></div>
<div id="host"></div>
<div id='sandbox'></div>
<script>
description('Check if shadow host with display:none CSS rule for :focus works. crbug.com/482830');
'use strict';
// Check if shadow host with display:none CSS rule for :focus works. crbug.com/482830
var host;
var root;
......@@ -17,57 +19,50 @@ function setupShadowDOM(delegatesFocus) {
host = sandbox.appendChild(document.createElement('div'));
host.id = 'host';
root = host.attachShadow({ 'mode': 'open', 'delegatesFocus': delegatesFocus });
root = host.attachShadow({mode: 'open', delegatesFocus: delegatesFocus});
input = document.createElement('input');
root.appendChild(input);
host.tabIndex = 0;
}
function testFocusShadowHost() {
debug('when shadow host itself is focused, it should match display:none, lose focus then becomes display:block again.');
promise_test(() => {
setupShadowDOM(false);
return new Promise(
function(resolve) {
host.focus();
shouldBeEqualToString('window.getComputedStyle(host).display', 'none');
shouldBe('document.activeElement', 'host');
shouldBeNull('root.activeElement');
assert_equals(window.getComputedStyle(host).display, 'none');
assert_equals(document.activeElement, host);
assert_equals(root.activeElement, null);
function onBlur() {
shouldBeEqualToString('window.getComputedStyle(host).display', 'block');
shouldBe('document.activeElement', 'document.body');
shouldBeNull('root.activeElement');
assert_equals(window.getComputedStyle(host).display, 'block');
assert_equals(document.activeElement, document.body);
assert_equals(root.activeElement, null);
host.removeEventListener('blur', onBlur);
resolve();
}
host.addEventListener('blur', onBlur);
});
}
}, 'when shadow host itself is focused, it should match display:none, lose focus then becomes display:block again.');
function testFocusInsideShadowRoot() {
debug('when shadow host with delegatesFocus=true has focused element inside the shadow, it should also match display:none, then lose focus and become display:block again.');
promise_test(() => {
setupShadowDOM(true);
return new Promise(
function(resolve) {
input.focus();
shouldBeEqualToString('window.getComputedStyle(host).display', 'none');
shouldBe('document.activeElement', 'host');
shouldBe('root.activeElement', 'input');
assert_equals(window.getComputedStyle(host).display, 'none');
assert_equals(document.activeElement, host);
assert_equals(root.activeElement, input);
function onBlur() {
shouldBeEqualToString('window.getComputedStyle(host).display', 'block');
shouldBe('document.activeElement', 'document.body');
shouldBeNull('root.activeElement');
assert_equals(window.getComputedStyle(host).display, 'block');
assert_equals(document.activeElement, document.body);
assert_equals(root.activeElement, null);
input.removeEventListener('blur', onBlur);
resolve();
}
input.addEventListener('blur', onBlur);
});
}
if (window.testRunner) {
testFocusShadowHost().then(testFocusInsideShadowRoot).then(function(){ testRunner.notifyDone(); });
testRunner.waitUntilDone();
}
}, 'when shadow host with delegatesFocus=true has focused element inside the shadow, it should also match display:none, then lose focus and become display:block again.');
</script>
third_party/WebKit/LayoutTests/shadow-dom/focus-slide-on-shadow-host-expected.txt deleted 100644 → 0
View file @ 531b66b2
Click inside focusable shadow host should focus the host.
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
click on inner div should focus shadow host
PASS innermost active element is shadowHost
PASS innermost active element is shadowHost/inputA
PASS innermost active element is shadowHost
PASS innermost active element is shadowHost
click on inner div should focus inner focusable (with delegatesFocus = true)
PASS innermost active element is shadowHost/inputA
PASS inputA.selectionStart is 0
PASS inputA.selectionEnd is 9
PASS innermost active element is shadowHost/inputA
PASS inputA.selectionStart is 0
PASS inputA.selectionEnd is 9
PASS innermost active element is shadowHost/inputA
PASS innermost active element is shadowHost/inputA
PASS inputA.selectionStart is 1
PASS inputA.selectionEnd is 1
PASS innermost active element is shadowHost/inputB
PASS innermost active element is shadowHost/inputB
PASS inputB.selectionStart is 1
PASS inputB.selectionEnd is 1
PASS successfullyParsed is true
TEST COMPLETE
third_party/WebKit/LayoutTests/shadow-dom/focus-slide-on-shadow-host.html
View file @ fd364c78
<!DOCTYPE html>
<script src="../resources/js-test.js"></script>
<script src="../fast/dom/shadow/resources/shadow-dom.js"></script>
<body>
<pre id="console"></pre>
<input id="defaultFocus">
<div id="sandbox"></div>
</body>
<script src='../resources/testharness.js'></script>
<script src='../resources/testharnessreport.js'></script>
<script src='resources/shadow-dom.js'></script>
<script src='resources/focus-utils.js'></script>
<input id='defaultFocus'>
<div id='sandbox'></div>
<script>
description('Click inside focusable shadow host should focus the host.');
'use strict';
function prepareDOMTree(parent, delegatesFocus)
{
parent.innerHTML = '';
parent.appendChild(
createDOM('div', {'id': 'shadowHost', 'tabindex': '0'},
attachShadow({'mode': 'open', 'delegatesFocus': delegatesFocus},
createDOM('div', {'id': 'innerDiv'},
document.createTextNode('Blink')),
createDOM('input', {'id': 'inputA'}),
createDOM('input', {'id': 'inputB'}))));
let host = document.createElement('div');
host.id = 'shadowHost';
host.setAttribute('tabindex', '0');
var root = host.attachShadow({mode: 'open', delegatesFocus: delegatesFocus});
root.innerHTML = '<div id="innerDiv">Blink</div><input id="inputA"><input id="inputB">';
parent.appendChild(host);
}
var host;
......@@ -38,74 +34,71 @@ function resetFocus() {
document.querySelector('#defaultFocus').focus();
}
function checkInnermostActiveElement(id) {
if (isInnermostActiveElement(id))
debug('PASS innermost active element is ' + id);
function assert_innermost_active_element(path) {
assert_true(isInnermostActiveElement(path), 'innermost active element should be ' + path);
}
function runTest() {
var sandbox = document.querySelector('#sandbox');
test(() => {
prepareDOMTree(sandbox, false);
resetFocus();
host = getNodeInComposedTree('shadowHost');
innerDiv = getNodeInComposedTree('shadowHost/innerDiv');
inputA = getNodeInComposedTree('shadowHost/inputA');
inputB = getNodeInComposedTree('shadowHost/inputB');
let host = getNodeInComposedTree('shadowHost');
let innerDiv = getNodeInComposedTree('shadowHost/innerDiv');
let inputA = getNodeInComposedTree('shadowHost/inputA');
let inputB = getNodeInComposedTree('shadowHost/inputB');
debug('click on inner div should focus shadow host');
clickOn(innerDiv);
checkInnermostActiveElement('shadowHost');
assert_innermost_active_element('shadowHost');
inputA.focus();
checkInnermostActiveElement('shadowHost/inputA');
assert_innermost_active_element('shadowHost/inputA');
clickOn(innerDiv);
checkInnermostActiveElement('shadowHost');
assert_innermost_active_element('shadowHost');
inputB.focus();
assert_innermost_active_element('shadowHost/inputB');
clickOn(innerDiv);
checkInnermostActiveElement('shadowHost');
assert_innermost_active_element('shadowHost');
}, 'click on inner div should focus shadow host (with delegatesFocus = false).');
debug('click on inner div should focus inner focusable (with delegatesFocus = true)');
test(() => {
prepareDOMTree(sandbox, true);
resetFocus();
host = getNodeInComposedTree('shadowHost');
innerDiv = getNodeInComposedTree('shadowHost/innerDiv');
inputA = getNodeInComposedTree('shadowHost/inputA');
inputB = getNodeInComposedTree('shadowHost/inputB');
let host = getNodeInComposedTree('shadowHost');
let innerDiv = getNodeInComposedTree('shadowHost/innerDiv');
let inputA = getNodeInComposedTree('shadowHost/inputA');
let inputB = getNodeInComposedTree('shadowHost/inputB');
inputA.value = 'wonderful'; // len = 9
inputB.value = 'beautiful';
clickOn(innerDiv);
checkInnermostActiveElement('shadowHost/inputA');
assert_innermost_active_element('shadowHost/inputA');
// If focus slides from shadow host, all the content will be selected.
shouldBe('inputA.selectionStart', '0');
shouldBe('inputA.selectionEnd', '9');
assert_equals(inputA.selectionStart, 0);
assert_equals(inputA.selectionEnd, 9);
// Clicking on non-focusable area inside shadow should not change the focus state.
clickOn(innerDiv);
checkInnermostActiveElement('shadowHost/inputA');
shouldBe('inputA.selectionStart', '0');
shouldBe('inputA.selectionEnd', '9');
assert_innermost_active_element('shadowHost/inputA');
assert_equals(inputA.selectionStart, 0);
assert_equals(inputA.selectionEnd, 9);
// Clicking on focusable directly will cause the element to be focused.
clickOn(inputA);
checkInnermostActiveElement('shadowHost/inputA');
assert_innermost_active_element('shadowHost/inputA');
clickOn(innerDiv);
checkInnermostActiveElement('shadowHost/inputA');
shouldBe('inputA.selectionStart', '1');
shouldBe('inputA.selectionEnd', '1');
assert_innermost_active_element('shadowHost/inputA');
assert_equals(inputA.selectionStart, 1);
assert_equals(inputA.selectionEnd, 1);
clickOn(inputB);
checkInnermostActiveElement('shadowHost/inputB');
assert_innermost_active_element('shadowHost/inputB');
clickOn(innerDiv);
checkInnermostActiveElement('shadowHost/inputB');
shouldBe('inputB.selectionStart', '1');
shouldBe('inputB.selectionEnd', '1');
}
runTest();
assert_innermost_active_element('shadowHost/inputB');
assert_equals(inputB.selectionStart, 1);
assert_equals(inputB.selectionEnd, 1);
}, 'click on inner div should focus inner focusable (with delegatesFocus = true).');
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment