blob: 35855c42f4dd6a058551e00e189b29a78aba7a6f [file] [log] [blame]
<!doctype html>
<html>
<head>
<script src="../../resources/js-test-pre.js"></script>
<style>
/* default */
span.target {
background-color:rgb(0,0,0);
}
a > b > c span.target {
background-color:rgb(1,2,3);
}
d.ok > e > f span.target {
background-color:rgb(4,5,6);
}
g.ok > h > g span.target {
background-color:rgb(7,8,9);
}
i > j > j > j > j span.target {
background-color:rgb(10,11,12);
}
.ok > k > l span.target {
background-color:rgb(13,14,15);
}
.ok > l span.target {
background-color:rgb(16,17,18);
}
</style>
</head>
<body>
<div style="display:none">
<a>
<b>
<!-- selector "a" fails here and start descendant backtracking with this element !-->
<c>
<b>
<c>
<span class="target" id="target1"></span>
</c>
</b>
</c>
</b>
</a>
<d class="ok">
<e>
<f>
<!-- selector "d.ok" fails here and start descendant backtracking with parent of this element !-->
<d class="ng">
<e>
<f>
<span class="target" id="target2"></span>
</f>
</e>
</d>
</f>
</e>
</d>
<d class="ok">
<e>
<!-- selector "d.ok" fails here and start descendant backtracking with this element !-->
<f class="ng">
<e>
<f>
<span class="target" id="target3"></span>
</f>
</e>
</f>
</e>
</d>
<g class="ok">
<h>
<!-- selector "g.ok" fails here and start descendant backtracking with this element (since tag name is g) !-->
<g class="ng">
<h>
<g>
<span class="target" id="target4"></span>
</g>
</h>
</g>
</h>
</g>
<i>
<j>
<j>
<j>
<j>
<!-- selector "i" fails here and start descendant backtracking with the parent of this element (since tag name "c") !-->
<c>
<j>
<j>
<j>
<j>
<span class="target" id="target5"></span>
</j>
</j>
</j>
</j>
</c>
</j>
</j>
</j>
</j>
</i>
<k class="ok">
<k>
<!-- selector ".ok" fails here and start descendant backtracking with this element !-->
<l class="ng">
<k>
<l>
<span class="target" id="target6"></span>
</l>
</k>
</l>
</k>
</k>
<k class="ok">
<!-- selector ".ok" fails here and start descendant backtracking with this element !-->
<l>
<!-- selector ".ok" fails here and start descendant backtracking with this element !-->
<l class="ng">
<l>
<span class="target" id="target7"></span>
</l>
</l>
</l>
</k>
</div>
</body>
<script>
description('The backtracking child combinator without tail cases');
debug("Backtracking immediately with the current element, tag name matching failed. Restart with the current element");
shouldBeEqualToString('getComputedStyle(document.getElementById("target1")).backgroundColor', 'rgb(1, 2, 3)');
debug("Backtracking immediately with the current element, others matching failed. Restart with the parent of the current element.(with parent check)");
shouldBeEqualToString('getComputedStyle(document.getElementById("target2")).backgroundColor', 'rgb(4, 5, 6)');
debug("Backtracking immediately with the current element. Restart with the current element.");
shouldBeEqualToString('getComputedStyle(document.getElementById("target3")).backgroundColor', 'rgb(4, 5, 6)');
debug("Backtracking immediately with the current element. Restart with the current element.");
shouldBeEqualToString('getComputedStyle(document.getElementById("target4")).backgroundColor', 'rgb(7, 8, 9)');
debug("Backtracking immediately with the current element. Restart with the parent of the current element.");
shouldBeEqualToString('getComputedStyle(document.getElementById("target5")).backgroundColor', 'rgb(10, 11, 12)');
debug("Backtracking immediately with the current element (selector doesn't has tag name). Restart with the current element.");
shouldBeEqualToString('getComputedStyle(document.getElementById("target6")).backgroundColor', 'rgb(13, 14, 15)');
debug("Backtracking immediately with the current element (there's no tail). Restart with the current element.");
shouldBeEqualToString('getComputedStyle(document.getElementById("target7")).backgroundColor', 'rgb(16, 17, 18)');
</script>
<script src="../../resources/js-test-post.js"></script>
</html>