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