Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(17)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: LayoutTests/fast/dom/shadow/css-focus-pseudo-match-shadow-host.html

Issue 1152623012: WIP: delegatesFocus (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: 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 side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | LayoutTests/fast/dom/shadow/css-focus-pseudo-match-shadow-host-expected.txt » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: LayoutTests/fast/dom/shadow/css-focus-pseudo-match-shadow-host.html
diff --git a/LayoutTests/fast/dom/shadow/css-focus-pseudo-match-shadow-host.html b/LayoutTests/fast/dom/shadow/css-focus-pseudo-match-shadow-host.html
deleted file mode 100644
index f648513dbb76235bed965737537bda36a73af94e..0000000000000000000000000000000000000000
--- a/LayoutTests/fast/dom/shadow/css-focus-pseudo-match-shadow-host.html
+++ /dev/null
@@ -1,356 +0,0 @@
-<!DOCTYPE html>
-<script src="../../../resources/js-test.js"></script>
-<script src="resources/shadow-dom.js"></script>
-<style>
-div {
- background-color: white;
-}
-
-div#shadow-host:focus {
- background-color: green;
-}
-</style>
-<script>
-function backgroundColorOf(selector) {
- return window.getComputedStyle(getNodeInTreeOfTrees(selector)).backgroundColor;
-}
-
-function backgroundColorShouldBe(selector, expected) {
- shouldBeEqualToString('backgroundColorOf(\'' + selector + '\')', expected);
-}
-
-function testWithoutTabStop()
-{
- debug('testing without tabstop for crbug/479050');
-
- // Setting up the DOM tree
- var sandbox = document.querySelector('#sandbox');
- sandbox.innerHTML = '';
- sandbox.appendChild(
- createDOM('div', {},
- createDOM('input', {'id': 'outer-input1'}),
- createDOM('div', {'id': 'shadow-host', 'tabindex': '-1'},
- createShadowRoot(
- createDOM('input', {'id': 'inner-input'}))),
- createDOM('input', {'id': 'outer-input2'})));
- sandbox.offsetTop;
-
- backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
-
- var host = getNodeInTreeOfTrees('shadow-host');
- var innerInput = getNodeInTreeOfTrees('shadow-host/inner-input');
- var outerInput1 = getNodeInTreeOfTrees('outer-input1');
- var outerInput2 = getNodeInTreeOfTrees('outer-input2');
-
- outerInput1.focus();
- backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
-
- innerInput.focus();
- backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
-
- outerInput2.focus();
- backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
-}
-
-function testSingleShadow() {
- debug('testing single shadow DOM tree');
-
- // Setting up the DOM tree
- var sandbox = document.querySelector('#sandbox');
- sandbox.innerHTML = '';
- sandbox.appendChild(
- createDOM('div', {},
- createDOM('input', {'id': 'outer-input'}),
- createDOM('div', {'id': 'shadow-host'},
- createShadowRoot(
- createDOM('div', {'id': 'inner-div'},
- document.createTextNode('Blink')),
- createDOM('input', {'id': 'inner-input'})))));
- sandbox.offsetTop;
-
- var host = getNodeInTreeOfTrees('shadow-host');
- var input = getNodeInTreeOfTrees('shadow-host/inner-input');
- var outerInput = document.querySelector('#outer-input');
-
- // First check the original behavior.
- // By default, shadow host should not reflect the focus status inside shadow tree.
- outerInput.focus();
- backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
- host.tabIndex = 0;
- host.focus();
- backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
- input.focus();
- backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
-
- // The following 4 cases cover tabIndex(0 or none)/tabStop(true or false) combination.
- // Only when tabindex>=0 and tabStop=false should change the appearance.
- host.tabIndex = 0;
- host.tabStop = false;
- input.focus();
- backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
-
- host.tabStop = true;
- input.focus();
- backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
-
- host.removeAttribute('tabindex');
- input.focus();
- backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
-
- host.tabStop = false;
- input.focus();
- backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
-
- // Focus outside the shadow tree should not affect.
- outerInput.focus();
- backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
-}
-
-function testShadowTreeOfTrees() {
- debug('testing shadow tree of trees');
-
- // Setting up the DOM tree
- var sandbox = document.querySelector('#sandbox');
- sandbox.innerHTML = '';
- sandbox.appendChild(
- createDOM('div', {},
- createDOM('input', {'id': 'outer-input'}),
- createDOM('div', {'id': 'shadow-host'},
- createShadowRoot(
- createDOM('style', {},
- document.createTextNode('div { background-color: yellow; } div#inner-shadow-host:focus { background-color: blue; }')),
- createDOM('div', {'id': 'inner-div'},
- document.createTextNode('Blink')),
- createDOM('input', {'id': 'inner-input'}),
- createDOM('div', {'id': 'inner-shadow-host'},
- createShadowRoot(
- createDOM('div', {'id': 'inner-div2'},
- document.createTextNode('Blink')),
- createDOM('input', {'id': 'inner-input2'})))))));
- sandbox.offsetTop;
-
- backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
- backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');
-
- var host = getNodeInTreeOfTrees('shadow-host');
- var innerHost = getNodeInTreeOfTrees('shadow-host/inner-shadow-host');
- var input = getNodeInTreeOfTrees('shadow-host/inner-input');
- var input2 = getNodeInTreeOfTrees('shadow-host/inner-shadow-host/inner-input2');
- var outerInput = document.querySelector('#outer-input');
-
- // The default behavior.
- input2.focus();
- backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
- backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');
-
-
- // Only first-level shadow host should be affected.
- host.tabIndex = 0;
- host.tabStop = false;
-
- input2.focus();
- backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
- backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');
-
- // Both first-level and second-level shadow hosts should be affected.
- innerHost.tabIndex = 0;
- innerHost.tabStop = false;
- backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
- backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(0, 0, 255)');
-
- // The :focus should propagate only upwards, not downwards.
- input.focus();
- backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
- backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');
-
- // Focus outside the shadow tree should not affect.
- outerInput.focus();
- backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
- backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');
-}
-
-function testDistributedNodes() {
- debug('testing distributed nodes');
-
- // Setting up the DOM tree
- var sandbox = document.querySelector('#sandbox');
- sandbox.innerHTML = '';
- sandbox.appendChild(
- createDOM('div', {},
- createDOM('input', {'id': 'outer-input'}),
- createDOM('div', {'id': 'shadow-host'},
- createDOM('input', {'id': 'light-input'}),
- createShadowRoot(
- createDOM('content', {}),
- createDOM('div', {'id': 'inner-div'},
- document.createTextNode('Blink')),
- createDOM('input', {'id': 'older-input'})),
- createShadowRoot(
- createDOM('shadow', {}),
- createDOM('div', {'id': 'inner-div2'},
- document.createTextNode('Blink')),
- createDOM('input', {'id': 'younger-input'})))));
- sandbox.offsetTop;
-
- backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
-
- var host = getNodeInTreeOfTrees('shadow-host');
- var outerInput = getNodeInTreeOfTrees('outer-input');
- var lightInput = getNodeInTreeOfTrees('light-input');
- var olderInput = getNodeInTreeOfTrees('shadow-host/older-input');
- var youngerInput = getNodeInTreeOfTrees('shadow-host//younger-input');
-
- lightInput.focus();
- backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
-
- host.tabIndex = 0;
- host.tabStop = false;
-
- outerInput.focus();
- backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
- lightInput.focus();
- backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
-
- outerInput.focus();
- backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
- olderInput.focus();
- backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
-
- outerInput.focus();
- backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
- youngerInput.focus();
- backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
-}
-
-function testNestedDistribution() {
- debug('testing nested distribution');
-
- // Setting up the DOM tree
- var sandbox = document.querySelector('#sandbox');
- sandbox.innerHTML = '';
- sandbox.appendChild(
- createDOM('div', {},
- createDOM('input', {'id': 'outer-input'}),
- createDOM('div', {'id': 'shadow-host'},
- createDOM('input', {'id': 'input1'}),
- createShadowRoot(
- createDOM('style', {},
- document.createTextNode('div { background-color: yellow; } div#inner-shadow-host:focus { background-color: blue; }')),
- createDOM('input', {'id': 'input2'}),
- createDOM('div', {'id': 'inner-shadow-host'},
- createDOM('content', {}), // #input1 goes here
- createShadowRoot(
- createDOM('content', {}), // #input1 redistributed here, #input2 goes here.
- createDOM('input', {'id': 'input3'})))))));
- sandbox.offsetTop;
-
- backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
-
- var topShadowHost = getNodeInTreeOfTrees('shadow-host');
- var innerShadowHost = getNodeInTreeOfTrees('shadow-host/inner-shadow-host');
- var outerInput = getNodeInTreeOfTrees('outer-input');
- var input1 = getNodeInTreeOfTrees('input1');
- var input2 = getNodeInTreeOfTrees('shadow-host/input2');
- var input3 = getNodeInTreeOfTrees('shadow-host/inner-shadow-host/input3');
-
- debug('#input1, #input2 are (re)distributed in the same treescope as #input3, but :focus on shadow host only matches when a focused element is under its shadow tree.');
-
- debug('Case 1: top and inner shadow do not delegate focus.');
- outerInput.focus();
- backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
- backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');
-
- input1.focus();
- backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
- backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');
-
- input2.focus();
- backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
- backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');
-
- input3.focus();
- backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
- backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');
-
- debug('Case 2: top shadow delegates, but inner shadow does not.');
- topShadowHost.tabIndex = 0;
- topShadowHost.tabStop = false;
- innerShadowHost.tabStop = true;
-
- outerInput.focus();
- backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
- backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');
-
- input1.focus();
- backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
- backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');
-
- input2.focus();
- backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
- backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');
-
- input3.focus();
- backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
- backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');
-
- debug('Case 3: top shadow does not delegate, but inner shadow does.');
- topShadowHost.removeAttribute('tabindex');
- topShadowHost.removeAttribute('tabstop');
- innerShadowHost.tabIndex = 0;
- innerShadowHost.tabStop = false;
-
- outerInput.focus();
- backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
- backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');
-
- input1.focus();
- backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
- backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');
-
- input2.focus();
- backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
- backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');
-
- input3.focus();
- backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
- backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(0, 0, 255)');
-
- debug('Case 4: both shadow hosts delagate focus.');
- topShadowHost.tabIndex = 0;
- topShadowHost.tabStop = false;
- innerShadowHost.tabIndex = 0;
- innerShadowHost.tabStop = false;
-
- outerInput.focus();
- backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
- backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');
-
- input1.focus();
- backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
- backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');
-
- input2.focus();
- backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
- backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');
-
- input3.focus();
- backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
- backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(0, 0, 255)');
-}
-
-function init() {
- if (!window.eventSender)
- testFailed('No eventSender');
-
- testWithoutTabStop();
- testSingleShadow();
- testShadowTreeOfTrees();
- testDistributedNodes();
- testNestedDistribution();
-}
-
-window.onload = init;
-</script>
-<body>
-<div id="sandbox"></div>
-</body>
« no previous file with comments | « no previous file | LayoutTests/fast/dom/shadow/css-focus-pseudo-match-shadow-host-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698