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