<!doctype html>
<html>
<head>
<script src="../../resources/js-test-pre.js"></script>
<style id="style">
    * {
        color: black;
    }
    [style*="PURPLE" i] {
        color: red;
    }
</style>
</head>
<body>
    <div id="test-root-with-renderer">
        <div id="target-with-renderer" style="background-color: purple;"></div>
    </div>

    <div style="display:none">
        <div id="target-without-renderer"style="background-color: purple;"></div>
    </div>
</body>
<script>
description('Test attribute matching with the case insensitive flag used to match the style attribute.');

function testStyle(expectedValues) {
    for (var key in expectedValues) {
        shouldBeEqualToString('getComputedStyle(document.getElementById("target-with-renderer"))["' + key + '"]', expectedValues[key]);
        shouldBeEqualToString('getComputedStyle(document.getElementById("target-without-renderer"))["' + key + '"]', expectedValues[key]);
    }
}

function testQuerySelector(expectMatch) {
    if (expectMatch) {
        shouldBe('document.querySelectorAll("[style*=PURPLE i]").length', '2');
        shouldBeEqualToString('document.querySelectorAll("[style*=PURPLE i]")[0].id', 'target-with-renderer');
        shouldBeEqualToString('document.querySelectorAll("[style*=PURPLE i]")[1].id', 'target-without-renderer');
    } else {
        shouldBe('document.querySelectorAll("[style*=PURPLE i]").length', '0');
    }
}

function test(expectMatch, expectedValues) {
    testQuerySelector(expectMatch);
    testStyle(expectedValues);
}

// Force a layout.
var sideEffect = document.body.offsetTop;


debug("Initial state.");
test(true, {color: "rgb(255, 0, 0)", "background-color": "rgb(128, 0, 128)"});

document.getElementById('test-root-with-renderer').style.display = "None";
debug("");

debug("Let's change the background color to something else than purple.");
var targetWithRenderer = document.getElementById('target-with-renderer');
var targetWithoutRenderer = document.getElementById('target-without-renderer');
targetWithRenderer.style.backgroundColor = 'red';
targetWithoutRenderer.style.backgroundColor = 'red';
test(false, {color: "rgb(0, 0, 0)", "background-color": "rgb(255, 0, 0)"});
debug("");

debug("Back to purple.");
targetWithRenderer.style.backgroundColor = 'purple';
targetWithoutRenderer.style.backgroundColor = 'purple';
test(true, {color: "rgb(255, 0, 0)", "background-color": "rgb(128, 0, 128)"});
debug("");

debug("Remove the style attribute entirely.");
targetWithRenderer.removeAttribute('style');
targetWithoutRenderer.removeAttribute('style');
test(false, {});
debug("");

debug("Back to purple.");
targetWithRenderer.style.backgroundColor = 'purple';
targetWithoutRenderer.style.backgroundColor = 'purple';
test(true, {color: "rgb(255, 0, 0)", "background-color": "rgb(128, 0, 128)"});
</script>
<script src="../../resources/js-test-post.js"></script>
</html>