case-sensitive-attr.html | Explore in Territory

<!DOCTYPE html>
<script src="../..//resources/js-test.js"></script>
<style type="text/css">
    div[attr="caseSensitiveAttr"] {color: green;}
    div[attr="caseSensitiveATTR"] {color: blue;}
    div[dir="ltr"] {color: red};
</style>
<div id="attr1" attr="caseSensitiveAttr">
    This line should be green (attribute value is case sensitive).
</div>
<div id="attr2" attr="caseSensitiveATTR">
    This line should be purple (attribute value is case sensitive).
</div>
<div id="attr3" attr="casesensitiveattr">
    This line should be black (attribute value is case sensitive).
</div>
<div id="dir1" dir="LTR">
    This line should be green (dir attribute is case insensitive).
</body>
<div id="dir2" dir="ltr">
    This line should be green (dir attribute is case insensitive).
</body>
<script>
    var attr1 = document.getElementById("attr1");
    var attr2 = document.getElementById("attr2");
    var attr3 = document.getElementById("attr3");
    var dir1 = document.getElementById("dir1");
    var dir2 = document.getElementById("dir2");

    // green
    shouldBeEqualToString("window.getComputedStyle(attr1, null).color", "rgb(0, 128, 0)");

    // blue
    shouldBeEqualToString("window.getComputedStyle(attr2, null).color", "rgb(0, 0, 255)");

    // black
    shouldBeEqualToString("window.getComputedStyle(attr3, null).color", "rgb(0, 0, 0)");

    // red
    shouldBeEqualToString("window.getComputedStyle(dir1, null).color", "rgb(255, 0, 0)");

    // red
    shouldBeEqualToString("window.getComputedStyle(dir2, null).color", "rgb(255, 0, 0)");
</script>
chromium/third_party/blink/web_tests/fast/css/case-sensitive-attr.html
