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

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: LayoutTests/fast/dom/shadow/css-focus-pseudo-match-shadow-host3.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 side-by-side diff with in-line comments
Download patch
« no previous file with comments | « LayoutTests/fast/dom/shadow/css-focus-pseudo-match-shadow-host2-expected.txt ('k') | LayoutTests/fast/dom/shadow/css-focus-pseudo-match-shadow-host3-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-host3.html
diff --git a/LayoutTests/fast/dom/shadow/css-focus-pseudo-match-shadow-host3.html b/LayoutTests/fast/dom/shadow/css-focus-pseudo-match-shadow-host3.html
new file mode 100644
index 0000000000000000000000000000000000000000..c25c124034a545e76d5e3cdcd8977a2742614edc
--- /dev/null
+++ b/LayoutTests/fast/dom/shadow/css-focus-pseudo-match-shadow-host3.html
@@ -0,0 +1,159 @@
+<!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>
+<body>
+<div id="sandbox"></div>
+</body>
+<script>
+function backgroundColorOf(selector) {
+ return window.getComputedStyle(getNodeInTreeOfTrees(selector)).backgroundColor;
+}
+
+function backgroundColorShouldBe(selector, expected) {
+ shouldBeEqualToString('backgroundColorOf(\'' + selector + '\')', expected);
+}
+
+function buildShadowTreeOfTrees(delegatesFocus1, delegatesFocus2) {
+ var sandbox = document.querySelector('#sandbox');
+ sandbox.innerHTML = '';
+ sandbox.appendChild(
+ createDOM('div', {},
+ createDOM('input', {'id': 'outer-input'}),
+ createDOM('div', {'id': 'shadow-host'},
+ createShadowRoot(
+ {'delegatesFocus': delegatesFocus1},
+ 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(
+ {'delegatesFocus': delegatesFocus2},
+ createDOM('div', {'id': 'inner-div2'},
+ document.createTextNode('Blink')),
+ createDOM('input', {'id': 'inner-input2'})))))));
+ sandbox.offsetTop;
+}
+
+function testShadowTreeOfTrees() {
+ debug('testing shadow tree of trees');
+
+ debug('(1/4) both shadow hosts\' delegateFocus are false');
+ buildShadowTreeOfTrees(false, false);
+
+ 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');
+
+ input.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)');
+ outerInput.focus();
+ backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
+ backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');
+ host.focus(); // this isn't focusable.
+ backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
+ backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');
+ innerHost.focus(); // this isn't focusable.
+ backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
+ backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');
+
+
+ debug('(2/4) top-level shadow host\'s delegateFocus is true');
+ buildShadowTreeOfTrees(true, false);
+
+ 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');
+
+ input.focus()
+ backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
+ 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)');
+ outerInput.focus();
+ backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
+ backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');
+ host.focus();
+ backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
+ backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');
+ innerHost.focus(); // this isn't focusable.
+ backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
+ backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');
+
+
+ debug('(3/4) lower-level shadow host\'s delegateFocus is true');
+ buildShadowTreeOfTrees(false, true);
+
+ 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');
+
+ input.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(0, 0, 255)');
+ outerInput.focus();
+ backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
+ backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');
+ host.focus(); // this isn't focusable.
+ backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
+ backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');
+ innerHost.focus();
+ backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
+ backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(0, 0, 255)');
+
+
+ debug('(4/4) both shadow hosts\' delegateFocus are true');
+ buildShadowTreeOfTrees(true, true);
+
+ 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');
+
+ input.focus()
+ backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
+ 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(0, 0, 255)');
+ outerInput.focus();
+ backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
+ backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');
+ host.focus();
+ backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
+ backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');
+ innerHost.focus();
+ backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
+ backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(0, 0, 255)');
+}
+
+testShadowTreeOfTrees();
+</script>
« no previous file with comments | « LayoutTests/fast/dom/shadow/css-focus-pseudo-match-shadow-host2-expected.txt ('k') | LayoutTests/fast/dom/shadow/css-focus-pseudo-match-shadow-host3-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698