<!DOCTYPE html>
<html>
<head>
<script src="../../resources/js-test-pre.js"></script>
<style>
target {
    color: black;
}
trigger[style] ~ target {
    color: pink;
}
</style>
</head>
<body>
    <div>
        <!-- With renderer -->
        <trigger></trigger>
        <padding></padding>
        <padding></padding>
        <padding></padding>
        <padding></padding>
        <padding></padding>
        <target></target>
    </div>
    <div style="display:none;">
        <!-- Without renderer -->
        <trigger></trigger>
        <padding></padding>
        <padding></padding>
        <padding></padding>
        <padding></padding>
        <padding></padding>
        <target></target>
    </div>
</body>
<script>

description('Test that style invalidation through inline-style propagates correctly to siblings when a combinator requires it.');

function testTargetColor(expectedColor) {
    let allTargets = document.querySelectorAll("target");
    for (let i = 0; i < allTargets.length; ++i) {
        shouldBeEqualToString('getComputedStyle(document.querySelectorAll("target")[' + i + ']).color', expectedColor);
    }
}

testTargetColor('rgb(0, 0, 0)');

// Set a style through CSS OM.
function setPropertyWithCSSOM() {
    let allTriggers = document.querySelectorAll("trigger");
    for (let i = 0; i < allTriggers.length; ++i) {
        allTriggers[i].style.cursor = "auto";
    }
}
setPropertyWithCSSOM()
testTargetColor('rgb(255, 192, 203)');

// If we remove the attribute, we should be back to normal.
function removeStyleAttribute() {
    let allTriggers = document.querySelectorAll("trigger");
    for (let i = 0; i < allTriggers.length; ++i) {
        allTriggers[i].removeAttribute("style");
    }
}
removeStyleAttribute();
testTargetColor('rgb(0, 0, 0)');

// Setting the style through a style attribute directly.
function setStyleAttribute() {
    let allTriggers = document.querySelectorAll("trigger");
    for (let i = 0; i < allTriggers.length; ++i) {
        allTriggers[i].setAttribute("style", "alt: \"WebKit!\"");
    }
}
setStyleAttribute();
testTargetColor('rgb(255, 192, 203)');

// Removing the property on the style attribute through CSSOM.
// This leaves an empty style attribute.
function removePropertyWithCSSOM() {
    let allTriggers = document.querySelectorAll("trigger");
    for (let i = 0; i < allTriggers.length; ++i) {
        allTriggers[i].style.removeProperty("alt");
    }
}
removePropertyWithCSSOM()
testTargetColor('rgb(255, 192, 203)');
</script>
<script src="../../resources/js-test-post.js"></script>
</html>