243 lines
9.5 KiB
HTML
243 lines
9.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
|
|
<script>
|
|
function test()
|
|
{
|
|
let documentNode;
|
|
|
|
async function nodeForSelector(selector) {
|
|
let nodeId = await documentNode.querySelector(selector);
|
|
return WI.domManager.nodeForId(nodeId);
|
|
}
|
|
|
|
function testNodeMatchesPath(node, message, {regular, full}) {
|
|
InspectorTest.expectEqual(WI.cssPath(node), regular, message);
|
|
if (full) {
|
|
let actual = WI.cssPath(node, {full: true});
|
|
InspectorTest.assert(actual === full, `Full path ${actual} doesn't match expected ${full}.`);
|
|
}
|
|
}
|
|
|
|
let suite = InspectorTest.createAsyncSuite("WI.cssPath");
|
|
|
|
suite.addTestCase({
|
|
name: "WI.cssPath.TopLevelNode",
|
|
description: "Top level nodes like html, body, and head are unique.",
|
|
async test() {
|
|
let html = await nodeForSelector("html");
|
|
testNodeMatchesPath(html, "HTML element should have simple selector 'html'.", {
|
|
regular: `html`,
|
|
full: `html`,
|
|
});
|
|
|
|
let body = await nodeForSelector("html > body");
|
|
testNodeMatchesPath(body, "BODY element should have simple selector 'body'.", {
|
|
regular: `body`,
|
|
full: `html > body[onload="runTest()"]`,
|
|
});
|
|
|
|
let head = await nodeForSelector("html > head");
|
|
testNodeMatchesPath(head, "HEAD element should have simple selector 'head'.", {
|
|
regular: `head`,
|
|
full: `html > head`,
|
|
});
|
|
}
|
|
});
|
|
|
|
suite.addTestCase({
|
|
name: "WI.cssPath.ElementWithID",
|
|
description: "Element with ID is unique (#id). Path does not need to go past it.",
|
|
async test() {
|
|
let test = await nodeForSelector("#id-test");
|
|
testNodeMatchesPath(test, "Element with id should have simple selector '#id-test'.", {
|
|
regular: `#id-test`,
|
|
full: `html > body[onload="runTest()"] > div[style="visibility:hidden"] > div#id-test`,
|
|
});
|
|
|
|
let div = await nodeForSelector("#id-test > div");
|
|
testNodeMatchesPath(div, "Element inside element with id should have path from id.", {
|
|
regular: `#id-test > div`,
|
|
full: `html > body[onload="runTest()"] > div[style="visibility:hidden"] > div#id-test > div`,
|
|
});
|
|
}
|
|
});
|
|
|
|
suite.addTestCase({
|
|
name: "WI.cssPath.InputElementFlair",
|
|
description: "Input elements include their type.",
|
|
async test() {
|
|
let input = await nodeForSelector("#input-test input");
|
|
testNodeMatchesPath(input, "Input element should include type.", {
|
|
regular: `#input-test > input[type="password"]`,
|
|
full: `html > body[onload="runTest()"] > div[style="visibility:hidden"] > div#input-test > input[type="password"]`,
|
|
});
|
|
}
|
|
});
|
|
|
|
suite.addTestCase({
|
|
name: "WI.cssPath.UniqueTagName",
|
|
description: "Elements with unique tag name do not need nth-child.",
|
|
async test() {
|
|
let span = await nodeForSelector("#unique-tag-test > span");
|
|
testNodeMatchesPath(span, "Elements with unique tag name should not need nth-child().", {
|
|
regular: `#unique-tag-test > span`,
|
|
full: `html > body[onload="runTest()"] > div[style="visibility:hidden"] > div#unique-tag-test > span`,
|
|
});
|
|
}
|
|
});
|
|
|
|
suite.addTestCase({
|
|
name: "WI.cssPath.NonUniqueTagName",
|
|
description: "Elements with non-unique tag name need nth-child.",
|
|
async test() {
|
|
let span = await nodeForSelector("#non-unique-tag-test > span ~ span");
|
|
testNodeMatchesPath(span, "Elements with non-unique tag name should need nth-child().", {
|
|
regular: `#non-unique-tag-test > span:nth-child(3)`,
|
|
full: `html > body[onload="runTest()"] > div[style="visibility:hidden"] > div#non-unique-tag-test > span:nth-child(3)`,
|
|
});
|
|
}
|
|
});
|
|
|
|
suite.addTestCase({
|
|
name: "WI.cssPath.UniqueClassName",
|
|
description: "Elements with unique class names should include their class names.",
|
|
async test() {
|
|
let beta = await nodeForSelector("#unique-class-test > .beta");
|
|
testNodeMatchesPath(beta, "Elements with unique class names should include their class names.", {
|
|
regular: `#unique-class-test > div.alpha.beta`,
|
|
full: `html > body[onload="runTest()"] > div[style="visibility:hidden"] > div#unique-class-test > div.alpha.beta`,
|
|
});
|
|
}
|
|
});
|
|
|
|
suite.addTestCase({
|
|
name: "WI.cssPath.NonUniqueClassName",
|
|
description: "Elements with non-unique class names should not include their class names.",
|
|
async test() {
|
|
let div = await nodeForSelector("#non-unique-class-test > div ~ div");
|
|
testNodeMatchesPath(div, "Elements with non-unique class names should not include their class names.", {
|
|
regular: `#non-unique-class-test > div:nth-child(2)`,
|
|
full: `html > body[onload="runTest()"] > div[style="visibility:hidden"] > div#non-unique-class-test > div.alpha:nth-child(2)`,
|
|
});
|
|
}
|
|
});
|
|
|
|
suite.addTestCase({
|
|
name: "WI.cssPath.UniqueTagAndClassName",
|
|
description: "Elements with unique tag and class name just use tag for simplicity.",
|
|
async test() {
|
|
let alpha = await nodeForSelector("#unique-tag-and-class-test > .alpha");
|
|
testNodeMatchesPath(alpha, "Elements with unique tag and class names should just have simple tag.", {
|
|
regular: `#unique-tag-and-class-test > div`,
|
|
full: `html > body[onload="runTest()"] > div[style="visibility:hidden"] > div#unique-tag-and-class-test > div.alpha`,
|
|
});
|
|
}
|
|
});
|
|
|
|
suite.addTestCase({
|
|
name: "WI.cssPath.DeepPath",
|
|
description: "Tests for element with complex path.",
|
|
async test() {
|
|
let small = await nodeForSelector("small");
|
|
testNodeMatchesPath(small, "Should be able to create path for deep elements.", {
|
|
regular: `body > div > div.deep-path-test > ul > li > div:nth-child(4) > ul > li.active > a > small`,
|
|
full: `html > body[onload="runTest()"] > div[style="visibility:hidden"] > div.deep-path-test > ul > li > div:nth-child(4) > ul.list > li.active > a[href="#"] > small`,
|
|
});
|
|
}
|
|
});
|
|
|
|
suite.addTestCase({
|
|
name: "WI.cssPath.PseudoElement",
|
|
description: "For a pseudo element we should get the path of the parent and append the pseudo element selector.",
|
|
async test() {
|
|
let div = await nodeForSelector("#pseudo-element-test > div ~ div");
|
|
|
|
let pseudoElementBefore = div.beforePseudoElement();
|
|
InspectorTest.assert(pseudoElementBefore);
|
|
testNodeMatchesPath(pseudoElementBefore, "Should be able to create path for ::before pseudo elements.", {
|
|
regular: `#pseudo-element-test > div:nth-child(3)::before`,
|
|
full: `html > body[onload="runTest()"] > div[style="visibility:hidden"] > div#pseudo-element-test > div:nth-child(3)::before`,
|
|
});
|
|
|
|
let pseudoElementAfter = div.afterPseudoElement();
|
|
InspectorTest.assert(pseudoElementAfter);
|
|
testNodeMatchesPath(pseudoElementAfter, "Should be able to create path for ::after pseudo elements.", {
|
|
regular: `#pseudo-element-test > div:nth-child(3)::after`,
|
|
full: `html > body[onload="runTest()"] > div[style="visibility:hidden"] > div#pseudo-element-test > div:nth-child(3)::after`,
|
|
});
|
|
}
|
|
});
|
|
|
|
// FIXME: Write tests for nodes inside a Shadow DOM Tree.
|
|
|
|
WI.domManager.requestDocument((node) => {
|
|
documentNode = node;
|
|
suite.runTestCasesAndFinish();
|
|
});
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload="runTest()">
|
|
<p>Test for WI.cssPath.</p>
|
|
<!-- If display:none pseudo elements are not created. -->
|
|
<div style="visibility:hidden">
|
|
<div id="id-test">
|
|
<div></div>
|
|
</div>
|
|
<div id="input-test">
|
|
<input type="password">
|
|
</div>
|
|
<div id="unique-tag-test">
|
|
<div></div>
|
|
<span></span>
|
|
<div></div>
|
|
</div>
|
|
<div id="non-unique-tag-test">
|
|
<div></div>
|
|
<span></span>
|
|
<span></span>
|
|
<div></div>
|
|
</div>
|
|
<div id="unique-class-test">
|
|
<div class="alpha"></div>
|
|
<div class="alpha beta"></div>
|
|
<div class="alpha"></div>
|
|
</div>
|
|
<div id="non-unique-class-test">
|
|
<div class="alpha"></div>
|
|
<div class="alpha"></div>
|
|
<div class="alpha"></div>
|
|
</div>
|
|
<div id="unique-tag-and-class-test">
|
|
<div class="alpha"></div>
|
|
</div>
|
|
<div class="deep-path-test">
|
|
<ul>
|
|
<li>
|
|
<h1></h1>
|
|
<div></div>
|
|
<div></div>
|
|
<div>
|
|
<ul class="list">
|
|
<li></li>
|
|
<li class="active"><a href="#"><small></small></a></li>
|
|
<li></li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div id="pseudo-element-test">
|
|
<style>
|
|
#pseudo-element-test > div~div::before { content: "before"; }
|
|
#pseudo-element-test > div~div::after { content: "after"; }
|
|
</style>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|