LayoutTests/fast/dom/shadow/css-focus-pseudo-match-shadow-host4.html - Issue 1177673005: Implement ShadowRoot.delegatesFocus 4/4 (match CSS :focus for shadow host)

Unified Diff: LayoutTests/fast/dom/shadow/css-focus-pseudo-match-shadow-host4.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-host3-expected.txt ('k') | LayoutTests/fast/dom/shadow/css-focus-pseudo-match-shadow-host4-expected.txt » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

Index: LayoutTests/fast/dom/shadow/css-focus-pseudo-match-shadow-host4.html

diff --git a/LayoutTests/fast/dom/shadow/css-focus-pseudo-match-shadow-host4.html b/LayoutTests/fast/dom/shadow/css-focus-pseudo-match-shadow-host4.html

new file mode 100644

index 0000000000000000000000000000000000000000..43657994f9fb67dfc83ad6e0a8cd9c498b467e15

--- /dev/null

+++ b/LayoutTests/fast/dom/shadow/css-focus-pseudo-match-shadow-host4.html

@@ -0,0 +1,97 @@

+<!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 testDistributedNodes() {

+ debug('Testing shadow host :focus and 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', 'tabindex': '0'},

+ createDOM('input', {'id': 'light-input'}),

+ createShadowRoot(

+ createDOM('content', {}),

+ createDOM('div', {'id': 'inner-div'},

+ document.createTextNode('Blink')),

+ createDOM('input', {'id': 'older-input'})),

+ createShadowRoot(

+ {'delegatesFocus': true},

+ 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');

+ debug('(1/3) shadow host without tabindex');

+ outerInput.focus();

+ backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');

+ lightInput.focus();

+ backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');

+ olderInput.focus();

+ backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');

+ youngerInput.focus();

+ backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');

+ host.focus();

+ backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');

+ debug('(2/3) shadow host with tabindex=-1');

+ host.tabIndex = -1;

+ outerInput.focus();

+ backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');

+ lightInput.focus();

+ backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');

+ olderInput.focus();

+ backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');

+ youngerInput.focus();

+ backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');

+ host.focus();

+ backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');

+ debug('(3/3) shadow host with tabindex=0');

+ host.tabIndex = 0;

+ outerInput.focus();

+ backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');

+ lightInput.focus();

+ backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');

+ olderInput.focus();

+ backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');

+ youngerInput.focus();

+ backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');

+ host.focus();

+ backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');

+testDistributedNodes();

+</script>