blob: 82f03681b89b2ee025625593e7a66acaa624eac3 [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<meta name="fuzzy" content="maxDifference=0-38;totalPixels=400-800" />
<title>This test that groove borders are painted.</title>
<style>
.borderBox {
position: absolute;
width: 30px;
height: 30px;
border-style: groove;
border-color: red;
}
.hide {
position: fixed;
width: 4px;
height: 4px;
background-color: white;
}
</style>
<head>
<body>
<script>
var borderWidth = 1;
var x = 0;
var y = 0;
var cornerBoxSize = 0;
for (var i = 0; i < 10; ++i) {
w = 20 * i;
h = 20 * i;
cornerBoxSize = 2 * borderWidth;
var e = document.createElement("div");
e.className = "borderBox";
e.style.top = y + "px";
e.style.left = x + "px";
e.style.width = w + "px";
e.style.height = h + "px";
e.style.borderWidth = borderWidth + "px";
document.body.appendChild(e);
var hb1 = document.createElement("div");
hb1.className = "hide";
hb1.style.top = y + "px";
hb1.style.left = x + "px";
hb1.style.width = cornerBoxSize + "px";
hb1.style.height = cornerBoxSize + "px";
document.body.appendChild(hb1);
var hb2 = document.createElement("div");
hb2.className = "hide";
hb2.style.top = y + "px";
hb2.style.left = x + w + "px";
hb2.style.width = cornerBoxSize + "px";
hb2.style.height = cornerBoxSize + "px";
document.body.appendChild(hb2);
var hb3 = document.createElement("div");
hb3.className = "hide";
hb3.style.top = y + h + "px";
hb3.style.left = x + "px";
hb3.style.width = cornerBoxSize + "px";
hb3.style.height = cornerBoxSize + "px";
document.body.appendChild(hb3);
var hb4 = document.createElement("div");
hb4.className = "hide";
hb4.style.top = y + w + "px";
hb4.style.left = x + h + "px";
hb4.style.width = cornerBoxSize + "px";
hb4.style.height = cornerBoxSize + "px";
document.body.appendChild(hb4);
borderWidth += 1;
x += (w + 2 * borderWidth);
}
</script>
</body>
</html>