51 lines
1.9 KiB
HTML
51 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<style type="text/css">
|
|
div { border: 2px solid red; }
|
|
div[attr1="LOWER"] { border-top-color: yellow }
|
|
div[attr1="lower"] { border-top-color: green }
|
|
div[attr2="upper"] { border-right-color: yellow }
|
|
div[attr2="UPPER"] { border-right-color: green }
|
|
div[attr3="lower" i] { border-bottom-color: green }
|
|
div[attr4="UPPER" i] { border-left-color: green }
|
|
|
|
div[attr-list~="BaR" i] { border: 2px solid green; }
|
|
div[attr-hyphen|="FoO" i] { border: 2px solid green; }
|
|
div[attr-begin^="FoO" i] { border: 2px solid green; }
|
|
div[attr-end$="BaR" i] { border: 2px solid green; }
|
|
div[attr-contain*="OoB" i] { border: 2px solid green; }
|
|
</style>
|
|
|
|
<div id="element-exact" attr1="lower" attr2="UPPER" attr3="LOWER" attr4="upper"></div>
|
|
<div id="element-list" attr-list="foo bar"></div>
|
|
<div id="element-hyphen" attr-hyphen="foo-bar"></div>
|
|
<div id="element-begin" attr-begin="foobar"></div>
|
|
<div id="element-end" attr-end="foobar"></div>
|
|
<div id="element-contains" attr-end="foobar"></div>
|
|
|
|
<p>
|
|
PASS if all elements borders are all green, not red.
|
|
</p>
|
|
|
|
<script src="../../resources/js-test.js"></script>
|
|
<script>
|
|
if (window.testRunner)
|
|
testRunner.dumpAsText();
|
|
|
|
function checkBorders(elementId) {
|
|
debug("Testing " + elementId.split('-')[1] + " attribute selector.");
|
|
element = document.getElementById(elementId);
|
|
shouldBe("window.getComputedStyle(element).borderTopColor", "'rgb(0, 128, 0)'");
|
|
shouldBe("window.getComputedStyle(element).borderRightColor", "'rgb(0, 128, 0)'");
|
|
shouldBe("window.getComputedStyle(element).borderBottomColor", "'rgb(0, 128, 0)'");
|
|
shouldBe("window.getComputedStyle(element).borderLeftColor", "'rgb(0, 128, 0)'");
|
|
}
|
|
|
|
checkBorders("element-exact");
|
|
checkBorders("element-list");
|
|
checkBorders("element-hyphen");
|
|
checkBorders("element-begin");
|
|
checkBorders("element-end");
|
|
checkBorders("element-contains");
|
|
</script>
|