Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

add shadow dom v1 support to DOM atoms #5762

Merged
merged 9 commits into from
Apr 30, 2018
Merged

add shadow dom v1 support to DOM atoms #5762

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
b792946
add shadow dom v1 support to getVisibleText
43081j Apr 11, 2018
3db00d0
remove invalid multiple-root test
43081j Apr 11, 2018
ae758b0
rewrite shadow dom tests for v1
43081j Apr 18, 2018
914f185
fix shadow dom tests
43081j Apr 22, 2018
4ccbd05
simplify shadow dom traversal
43081j Apr 23, 2018
de818f1
only assert styles of elements
43081j Apr 23, 2018
4c0c8a3
return early when retrieving DOM parents
43081j Apr 23, 2018
a34a2a7
move displayed to a function
43081j Apr 23, 2018
8da6a65
fix jsdoc
43081j Apr 24, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 9 additions & 3 deletions javascript/atoms/dom.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1289,16 +1289,22 @@ bot.dom.appendVisibleTextLinesFromNodeInComposedDom_ = function(
} else if (bot.dom.isElement(node)) {
var castElem = /** @type {!Element} */ (node);

if (bot.dom.isElement(node, 'CONTENT')) {
if (bot.dom.isElement(node, 'CONTENT') || bot.dom.isElement(node, 'SLOT')) {
var parentNode = node;
while (parentNode.parentNode) {
parentNode = parentNode.parentNode;
}
if (parentNode instanceof ShadowRoot) {
// If the element is <content> and we're inside a shadow DOM then just
// If the element is <content> and we're inside a shadow DOM then just
// append the contents of the nodes that have been distributed into it.
var contentElem = /** @type {!Object} */ (node);
goog.array.forEach(contentElem.getDistributedNodes(), function(node) {
var shadowChildren;
if (bot.dom.isElement(node, 'CONTENT')) {
shadowChildren = contentElem.getDistributedNodes();
} else {
shadowChildren = contentElem.assignedNodes();
}
goog.array.forEach(shadowChildren, function(node) {
bot.dom.appendVisibleTextLinesFromNodeInComposedDom_(
node, lines, shown, whitespace, textTransform);
});
Expand Down
60 changes: 32 additions & 28 deletions javascript/atoms/test/html5/shadow_dom_test.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,13 @@ <H1>Page for Shadow DOM chromedriver tests</H1>
Text inside a content tag outside any shadow DOM. Should be displayed
</content>
</div>
<div id="slottedRoot"></div>

<template id="slotTemplate">
<div id="slottedDiv">
<slot></slot>
</div>
</template>
<template id="parentTemplate">
<div id="parentDiv">
<div style="border-style:solid;border-color:green">
Expand Down Expand Up @@ -66,17 +72,8 @@ <H4>Younger Child Shadow</H4>
</div>
</div>
</template>
<template id="neverShownTemplate">
<div id="neverShownDiv">
This should never be shown. The ShadowDOM is older than the parent shadowDOM,
and parent doesn't have a &lt;shadow&gt; element.
</div>
</template>
<script type="text/javascript" >
if (bot.dom.IS_SHADOW_DOM_ENABLED) {
var neverShownShadowRoot = document.querySelector('#innerDiv').createShadowRoot();
neverShownShadowRoot.appendChild(document.querySelector('#neverShownTemplate'
).content.cloneNode(true));
var parentShadowRoot = document.querySelector('#innerDiv').createShadowRoot();
parentShadowRoot.appendChild(document.querySelector('#parentTemplate'
).content.cloneNode(true));
Expand All @@ -88,6 +85,11 @@ <H4>Younger Child Shadow</H4>
).createShadowRoot();
youngerShadowRoot.appendChild(document.querySelector('#youngerChildTemplate'
).content.cloneNode(true));
var slotted = document.querySelector('#slottedRoot');
slotted.attachShadow({ mode: 'open' });
var slottedTpl = document.querySelector('#slottedTemplate').content.cloneNode(true);
slotted.shadowRoot.appendChild(slottedTpl);
slotted.innerHTML = '<span>foo</span>';
}
</script>

Expand All @@ -105,9 +107,9 @@ <H4>Younger Child Shadow</H4>
var innerDiv = /** @type {!Element} */ (document.querySelector(
"#innerDiv"));
var outerDiv = document.querySelector("#outerDiv");
// According to the logical DOM parentDiv is the parent of
// stuffForYoungChild, but according to the composed DOM,

// According to the logical DOM parentDiv is the parent of
// stuffForYoungChild, but according to the composed DOM,
// youngChildDiv is the parent.
// Check that content elements work.
assertEquals(youngChildContent,
Expand All @@ -132,41 +134,48 @@ <H4>Younger Child Shadow</H4>
"* /deep/ #olderChildDiv"));
var divWithNoShadowDOM = /** @type {!Element} */ (document.querySelector(
"#divWithNoShadowDOM"));
var slottedDiv = /** @type {!Element} */ (document.querySelector(
"#slottedRoot"));
var expectedOlderChildContents = "Older Child\n" +
"As the older child of a nested shadow root, this is the most " +
"likely to go wrong bit of the page.\n" +
"Older Child Contents\n" +
"Parent\n" +
"Parent Contents\n" +
"Base-level Stuff";

var expectedYoungerChildContents = "Younger Child\n" +
"Younger Child Contents\n" +
"Stuff for for the younger child.\n" +
"Younger Child Shadow\n" +
expectedOlderChildContents;

var expectedParentContents = expectedYoungerChildContents;
var expectedOutsideShadowDomContents = "Text inside a content tag " +

var expectedOutsideShadowDomContents = "Text inside a content tag " +
"outside any shadow DOM. Should be displayed";

var expectedPageContents = "Page for Shadow DOM chromedriver tests\n" +

var expectedSlotContents = "foo";

var expectedPageContents = "Page for Shadow DOM chromedriver tests\n" +
"The page has a shadow root that in turn contains two shadow roots. " +
"So we can check behaviour with both nested roots and younger/" +
"older sibling roots. The various sections are highlighted with " +
"colored borders to make it more obvious where each element comes " +
"from.\n" +
expectedParentContents + "\n" + expectedOutsideShadowDomContents;
expectedParentContents + "\n" + expectedOutsideShadowDomContents +
"\n" + expectedSlotContents;

assertEquals(expectedOlderChildContents,
assertEquals(expectedOlderChildContents,
bot.dom.getVisibleText(olderChildDiv));
assertEquals(expectedYoungerChildContents,
assertEquals(expectedYoungerChildContents,
bot.dom.getVisibleText(youngerChildDiv));
assertEquals(expectedParentContents, bot.dom.getVisibleText(parentDiv));
assertEquals(expectedOutsideShadowDomContents, bot.dom.getVisibleText(divWithNoShadowDOM));
assertEquals(expectedPageContents,
assertEquals(expectedPageContents,
bot.dom.getVisibleText(/** @type {!Element} */ (document.body)));
assertEquals(expectedSlotContents,
bot.dom.getVisibleText(slottedDiv));
}
}

Expand All @@ -175,12 +184,7 @@ <H4>Younger Child Shadow</H4>
var parentHeading = /** @type {!Element} */ (document.querySelector(
"* /deep/ #parentHeading"));
var oldChildDiv = document.querySelector("* /deep/ #olderChildDiv");
var neverShownDiv = /** @type {!Element} */ (document.querySelector(
"* /deep/ #neverShownDiv"));

// neverShown is in an older shadow DOM, and thus isn't displayed
assertFalse(bot.dom.isShown(neverShownDiv));
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FYI i removed this test because AFAIK its invalid per the old spec and doesn't apply in the new spec (as createShadowRoot has gone).

this test relies on the fact chrome once allowed you to create a shadow root multiple times, which was removed shortly after. now it just throws an exception or doesn't do anything.



assert(bot.dom.isShown(parentHeading));
var oldChildDivDisplay = oldChildDiv.style.display;
try {
Expand Down