96 lines
5.5 KiB
HTML
96 lines
5.5 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
|
|
<html lang="en">
|
|
<head>
|
|
<title>currentColor basic test</title>
|
|
<style type="text/css">
|
|
.test {
|
|
display: inline-block;
|
|
height: 5em;
|
|
width: 10em;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
}
|
|
</style>
|
|
<script src="../../resources/js-test-pre.js"></script>
|
|
<script>
|
|
if (window.testRunner)
|
|
testRunner.dumpAsText();
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="border1" class="test" style="border: 5px solid green;">1</div>
|
|
<div id="border2" class="test" style="border-left: 5px solid red; border-top: 5px solid green; border-right: 5px solid blue; border-bottom: 5px solid purple;">2</div>
|
|
<div id="border3" class="test" style="border-left: 5px dashed green; border-top: 5px solid green; border-right: 5px dotted green; border-bottom: 5px groove green;">3</div>
|
|
<div id="border4" class="test" style="border-left: 4px solid green; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green;">4</div>
|
|
<div id="border5" class="test" style="border-left: 2px dashed green; border-top: 3px solid green; border-right: 4px dotted green; border-bottom: 5px groove green;">5</div>
|
|
<div id="border6" class="test" style="border-left: 5px dashed red; border-top: 5px solid green; border-right: 5px dotted blue; border-bottom: 5px groove purple;">6</div>
|
|
<div id="border7" class="test" style="border-left: 2px solid red; border-top: 3px solid green; border-right: 4px solid blue; border-bottom: 5px solid purple;">7</div>
|
|
<div id="border8" class="test" style="border-left: 2px dashed red; border-top: 3px solid green; border-right: 5px dotted blue; border-bottom: 5px groove purple;">8</div>
|
|
<div id="border9" class="test" style="border-left: 5px solid red; border-top: 5px solid green; border-right: 5px solid blue;">9</div>
|
|
<div id="border10" class="test" style="border-left: 5px solid green; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-image: initial">10</div>
|
|
<p id="description"></p>
|
|
<div id="console"></div>
|
|
<script>
|
|
description("<a href=\"https://bugs.webkit.org/show_bug.cgi?id=15823\">Bug 15823: getPropertyValue for border returns null, should compute the shorthand value</a>");
|
|
|
|
var div1 = document.getElementById("border1");
|
|
shouldBe('div1.style.getPropertyValue("border")', "'5px solid green'");
|
|
|
|
var div2 = document.getElementById("border2");
|
|
shouldBe('div2.style.getPropertyValue("border")', "''");
|
|
shouldBe('div2.style.getPropertyValue("border-color")', "'green blue purple red'");
|
|
shouldBe('div2.style.getPropertyValue("border-style")', "'solid'");
|
|
shouldBe('div2.style.getPropertyValue("border-width")', "'5px'");
|
|
|
|
var div3 = document.getElementById("border3");
|
|
shouldBe('div3.style.getPropertyValue("border")', "''");
|
|
shouldBe('div3.style.getPropertyValue("border-color")', "'green'");
|
|
shouldBe('div3.style.getPropertyValue("border-style")', "'solid dotted groove dashed'");
|
|
shouldBe('div3.style.getPropertyValue("border-width")', "'5px'");
|
|
|
|
var div4 = document.getElementById("border4");
|
|
shouldBe('div4.style.getPropertyValue("border")', "''");
|
|
shouldBe('div4.style.getPropertyValue("border-color")', "'green'");
|
|
shouldBe('div4.style.getPropertyValue("border-style")', "'solid'");
|
|
shouldBe('div4.style.getPropertyValue("border-width")', "'5px 5px 5px 4px'");
|
|
|
|
var div5 = document.getElementById("border5");
|
|
shouldBe('div5.style.getPropertyValue("border")', "''");
|
|
shouldBe('div5.style.getPropertyValue("border-color")', "'green'");
|
|
shouldBe('div5.style.getPropertyValue("border-style")', "'solid dotted groove dashed'");
|
|
shouldBe('div5.style.getPropertyValue("border-width")', "'3px 4px 5px 2px'");
|
|
|
|
var div6 = document.getElementById("border6");
|
|
shouldBe('div6.style.getPropertyValue("border")', "''");
|
|
shouldBe('div6.style.getPropertyValue("border-color")', "'green blue purple red'");
|
|
shouldBe('div6.style.getPropertyValue("border-style")', "'solid dotted groove dashed'");
|
|
shouldBe('div6.style.getPropertyValue("border-width")', "'5px'");
|
|
|
|
var div7 = document.getElementById("border7");
|
|
shouldBe('div7.style.getPropertyValue("border")', "''");
|
|
shouldBe('div7.style.getPropertyValue("border-color")', "'green blue purple red'");
|
|
shouldBe('div7.style.getPropertyValue("border-style")', "'solid'");
|
|
shouldBe('div7.style.getPropertyValue("border-width")', "'3px 4px 5px 2px'");
|
|
|
|
var div8 = document.getElementById("border8");
|
|
shouldBe('div8.style.getPropertyValue("border")', "''");
|
|
shouldBe('div8.style.getPropertyValue("border-color")', "'green blue purple red'");
|
|
shouldBe('div8.style.getPropertyValue("border-style")', "'solid dotted groove dashed'");
|
|
shouldBe('div8.style.getPropertyValue("border-width")', "'3px 5px 5px 2px'");
|
|
|
|
var div9 = document.getElementById("border9");
|
|
shouldBe('div9.style.getPropertyValue("border")', "''");
|
|
shouldBe('div9.style.getPropertyValue("border-color")', "''");
|
|
shouldBe('div9.style.getPropertyValue("border-style")', "''");
|
|
shouldBe('div9.style.getPropertyValue("border-width")', "''");
|
|
|
|
var div10 = document.getElementById("border10");
|
|
shouldBe('div10.style.getPropertyValue("border")', "'5px solid green'");
|
|
shouldBe('div10.style.getPropertyValue("border-color")', "'green'");
|
|
shouldBe('div10.style.getPropertyValue("border-style")', "'solid'");
|
|
shouldBe('div10.style.getPropertyValue("border-width")', "'5px'");
|
|
</script>
|
|
<script src="../../resources/js-test-post.js"></script>
|
|
</body>
|
|
</html>
|