<!DOCTYPE html>
<html>
  <head>
    <title>CSS Selectors Invalidation: sibling</title>
    <link rel="help" href="https://drafts.csswg.org/selectors-4/#adjacent-sibling-combinators">
    <link rel="help" href="https://drafts.csswg.org/selectors-4/#general-sibling-combinators">
    <meta name="assert" content="This tests that the + next-sibling selector is effective">
    <meta name="assert" content="This tests that the ~ subsequent-sibling selector is effective">
    <script src="/resources/testharness.js"></script>
    <script src="/resources/testharnessreport.js"></script>
    <style>

* { background-color: inherit; }

body { background-color: rgba(0, 0, 0, 0); }

.t1 .sibling + *,
.t2 .sibling ~ *,
.t3 + .sibling + *,
.t4 + .sibling,
.t5 + *,
.t6 ~ .sibling,
.t7 + * + * .child { background-color: rgb(0, 128, 0); }

    </style>
  </head>
  <body>

<div>
    <div id="t1">
        <div class="sibling"></div>
        <div id="r1"></div>
        <div id="u1"></div>
    </div>
</div>
<div>
    <div id="t2">
        <div class="sibling"></div>
        <div></div>
        <div id="r2"></div>
    </div>
</div>
<div>
    <div id="t3"></div>
    <div class="sibling"></div>
    <div id="r3"></div>
</div>
<div>
    <div id="t4"></div>
    <div id="r4" class="sibling"></div>
    <div id="u4" class="sibling"></div>
</div>
<div>
    <div id="t5"></div>
    <div id="r5"></div>
    <div id="u5"></div>
</div>
<div>
    <div id="t6"></div>
    <div></div>
    <div id="r6" class="sibling">
        <div id="r6b"></div>
    </div>
    <div id="u6"></div>
</div>
<div>
    <div id="t7">
        <div class="child"></div>
    </div>
    <div></div>
    <div>
        <div id="r7" class="child"></div>
    </div>
    <div>
        <div id="u7" class="child"></div>
    </div>
</div>

    <script>

test(function() {
    assert_equals(getComputedStyle(r1).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent");

    t1.className = "t1";
    assert_equals(getComputedStyle(r1).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change");
    assert_equals(getComputedStyle(u1).backgroundColor, "rgba(0, 0, 0, 0)", "Background color remains transparent");
}, "Adjacent with universal selector");

test(function() {
    assert_equals(getComputedStyle(r2).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent");

    t2.className = "t2";
    assert_equals(getComputedStyle(r2).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change");
}, "Indirect adjacent with universal selector");

test(function() {
    assert_equals(getComputedStyle(r3).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent");

    t3.className = "t3";
    assert_equals(getComputedStyle(r3).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change");
}, "Indirect adjacent with two adjacent selectors");

test(function() {
    assert_equals(getComputedStyle(r4).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent");

    t4.className = "t4";
    assert_equals(getComputedStyle(r4).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change");
    assert_equals(getComputedStyle(u4).backgroundColor, "rgba(0, 0, 0, 0)", "Background color remains transparent");
}, "Adjacent class");

test(function() {
    assert_equals(getComputedStyle(r5).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent");

    t5.className = "t5";
    assert_equals(getComputedStyle(r5).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change");
    assert_equals(getComputedStyle(u5).backgroundColor, "rgba(0, 0, 0, 0)", "Background color remains transparent");
}, "Adjacent universal");

test(function() {
    assert_equals(getComputedStyle(r6).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent");
    assert_equals(getComputedStyle(r6b).backgroundColor, "rgba(0, 0, 0, 0)", "Child's background color should initially be transparent");

    t6.className = "t6";
    assert_equals(getComputedStyle(r6).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change");
    assert_equals(getComputedStyle(r6b).backgroundColor, "rgb(0, 128, 0)", "Child's background color is green after class change");
    assert_equals(getComputedStyle(u6).backgroundColor, "rgba(0, 0, 0, 0)", "Background color remains transparent");
}, "Sibling subtree through an indirect adjacent combinator");

test(function() {
    assert_equals(getComputedStyle(r7).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent");

    t7.className = "t7";
    assert_equals(getComputedStyle(r7).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change");
    assert_equals(getComputedStyle(u7).backgroundColor, "rgba(0, 0, 0, 0)", "Background color remains transparent");
}, "Sibling descendant through a universal selector");

    </script>
  </body>
</html>
