<!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>

