Bug 497995: Part 2 - Update existing border-image tests. r=dbaron

--HG--
extra : rebase_source : b9fb3987c8540457fa1f7b3e27420f208207a9c0
This commit is contained in:
William Chen 2011-12-22 18:34:53 -05:00
parent 95cab2faf0
commit 338f4b29ba
50 changed files with 581 additions and 375 deletions

View File

@ -89,7 +89,6 @@ _TEST_FILES = \
test_bug404209.xhtml \ test_bug404209.xhtml \
test_bug416896.html \ test_bug416896.html \
test_bug423523.html \ test_bug423523.html \
test_bug445810.html \
test_bug449781.html \ test_bug449781.html \
test_bug450930.xhtml \ test_bug450930.xhtml \
test_bug458898.html \ test_bug458898.html \

View File

@ -1,138 +0,0 @@
<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=445810
-->
<head>
<title>Test for Bug 445810</title>
<script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
<script type="text/javascript" src="/tests/image/test/mochitest/imgutils.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
</head>
<body>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=445810">Mozilla Bug 445810</a>
<div><p id="display"></p></div>
<div style="display: none;"><img id="currimg"></div>
<pre id="test">
<script class="testbody" type="text/javascript">
/** Test for Bug 445810 **/
// Once the border image is loaded, it isn't necessarily decoded. We need to
// force a decode, but only have a good way of doing that for image elements,
// not border images. However, we can take advantage of the image cache (which
// shares images of the same url) and assign the same url to both.
var currImageElem = document.getElementById("currimg");
function new_image_url()
{
var width = 10;
var height = 10;
var canvas = document.createElement("canvas");
canvas.setAttribute("width", width);
canvas.setAttribute("height", height);
var cx = canvas.getContext("2d");
function random_color() {
function random_component() {
return Math.floor(Math.random() * 256);
}
return "rgb(" + random_component() + "," +
random_component() + "," +
random_component() + ")";
}
for (var x = 0; x < width; ++x) {
for (var y = 0; y < height; ++y) {
cx.fillStyle = random_color();
cx.fillRect(x, y, 1, 1);
}
}
return canvas.toDataURL();
}
SimpleTest.waitForExplicitFinish();
var p = document.getElementById("display");
var div = p.parentNode;
var divcs = getComputedStyle(div, "");
div.style.width = "-moz-min-content";
p.style.width = "5px";
p.style.height = "5px";
is(divcs.width, "5px", "correct width without a border");
is(divcs.height, "5px", "correct height without a border");
p.style.border = "3px solid";
is(divcs.width, "11px", // 3 (border-left) + 5 (width) + 3 (border-right)
"correct width without a border image");
is(divcs.height, "11px", // 3 (border-top) + 5 (height) + 3 (border-bottom)
"correct height without a border image");
currImageElem.src = new_image_url();
p.style.MozBorderImage = "url( " + currImageElem.src + ") 2 2 2 2 / 7px 2px";
is(divcs.width, "11px", "border image not loaded yet");
is(divcs.height, "11px", "border image not loaded yet");
currImageElem.onload = function() { setTimeout(step2, 0); }
function step2() {
// We got here through onload
ok(isImageLoaded("currimg"), "image loaded");
// Force a decode
forceDecode("currimg");
ok(isFrameDecoded("currimg"), "frame decoded");
is(divcs.width, "9px", "border image loading caused reflow");
is(divcs.height, "19px", "border image loading caused reflow");
p.style.borderStyle = "none";
is(divcs.width, "9px", "border image still shows with border-style:none");
is(divcs.height, "19px", "border image still shows with border-style:none");
p.style.MozBorderImage = "";
is(divcs.width, "5px", "correct width without a border");
is(divcs.height, "5px", "correct height without a border");
currImageElem.src = new_image_url();
p.style.MozBorderImage = "url( " + currImageElem.src + ") 2 2 2 2 / 7px 2px";
is(divcs.width, "5px", "border image not loaded yet");
is(divcs.height, "5px", "border image not loaded yet");
currImageElem.onload = function() { setTimeout(step3, 0); }
}
function step3() {
// We got here through onload
ok(isImageLoaded("currimg"), "image loaded");
// Force a decode
forceDecode("currimg");
ok(isFrameDecoded("currimg"), "frame decoded");
is(divcs.width, "9px", "border image loading caused reflow");
is(divcs.height, "19px", "border image loading caused reflow");
currImageElem.src = new_image_url();
p.style.MozBorderImage = "url( " + currImageElem.src + ") 2 2 2 2";
is(divcs.width, "5px", "border image not loaded yet");
is(divcs.height, "5px", "border image not loaded yet");
currImageElem.onload = function() { setTimeout(step4, 0); }
}
function step4() {
// We got here through onload
ok(isImageLoaded("currimg"), "image loaded");
// Force a decode
forceDecode("currimg");
ok(isFrameDecoded("currimg"), "frame decoded");
is(divcs.width, "11px", "border image loading caused reflow");
is(divcs.height, "11px", "border image loading caused reflow");
SimpleTest.finish();
}
</script>
</pre>
</body>
</html>

View File

@ -5,7 +5,9 @@
div { div {
width: 48px; width: 48px;
height: 48px; height: 48px;
-moz-border-image: url(3x3green-1DD813.png) 0 / 0; border-width: 0;
border-style: solid;
-moz-border-image: url(3x3green-1DD813.png) 0 fill;
} }
</style> </style>
</head><body> </head><body>

View File

@ -6,7 +6,9 @@ table {
width: 48px; width: 48px;
height: 48px; height: 48px;
border-collapse: separate; border-collapse: separate;
-moz-border-image: url(3x3green-1DD813.png) 0 / 0; border-width: 0;
border-style: solid;
-moz-border-image: url(3x3green-1DD813.png) 0 fill;
} }
</style> </style>
</head><body> </head><body>

View File

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>-moz-border-image-slice without fill reference</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
td { padding: 0; }
</style>
</head>
<body>
<table>
<col style="width: 7px">
<col style="width: 100px">
<col style="width: 7px">
<tr style="height: 7px">
<td style="background: #87f0b4"></td>
<td style="background: #4a298e"></td>
<td style="background: #c98bb7"></td>
</tr>
<tr style="height: 5px">
<td style="background: #90a213"></td>
<td></td>
<td style="background: #90c157"></td>
</tr>
<tr style="height: 7px">
<td style="background: #9d57c1"></td>
<td style="background: #3a8e20"></td>
<td style="background: #0e6f6c"></td>
</tr>
</table>
</body>
</html>

View File

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of -moz-border-image-slice without fill</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
div {
border-width: 7px;
border-style: solid;
-moz-border-image: url('3x3multicolor.png') 1 1 1 1;
}
</style>
</head>
<body>
<div style="width: 100px; height: 5px"></div>
</body>
</html>

View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>-moz-border-image-outset: 1em reference</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
</head>
<body>
<div style="border: solid #1DD813 1em; margin: 1em;">
<div style="padding: 1em;">
border.png<br />second longer longer longer longer longer longer line<br />third longer longer longer longer longer longer line
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>-moz-border-outset-width: 1em</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
div {
margin: 2em;
border-width: 1em;
border-style: solid;
-moz-border-image: url('3x3green-1DD813.png') 1 1 1 1 / / 1em;
}
</style>
</head>
<body>
<div>
border.png<br />second longer longer longer longer longer longer line<br />third longer longer longer longer longer longer line
</div>
</body>
</html>

View File

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>-moz-border-outset-width: 1em</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
div {
margin: 2em;
border-width: 1em;
border-style: solid;
-moz-border-image: url('3x3green-1DD813.png') 1 1 1 1;
-moz-border-image-outset: 1em;
}
</style>
</head>
<body>
<div>
border.png<br />second longer longer longer longer longer longer line<br />third longer longer longer longer longer longer line
</div>
</body>
</html>

View File

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>-moz-border-outset-width: 1em</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
div {
margin: 2em;
border-width: 1em;
border-style: solid;
-moz-border-image: 1 1 1 1 / / 1em url('3x3green-1DD813.png');
}
</style>
</head>
<body>
<div>
border.png<br />second longer longer longer longer longer longer line<br />third longer longer longer longer longer longer line
</div>
</body>
</html>

View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>-moz-border-image-outset move reference</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
</head>
<body>
<div style="width: 100px; border: solid #1DD813 10px; margin: 10px;">
<div style="padding: 10px;">
Hello World!
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html class="reftest-wait" lang="en-US">
<head>
<title>-moz-border-outset move</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
div {
margin: 20px;
border-width: 10px;
border-style: solid;
-moz-border-image: url('3x3green-1DD813.png') 1 1 1 1;
-moz-border-image-outset: 10px;
}
</style>
</head>
<body>
<div id="container" style="width: 80px; margin-left: 60px;">
Hello World!
</div>
<script type="text/javascript">
// The purpose of this test is to move the border and ensure that the
// overflow area caused by border-image-outset is redrawn.
setTimeout(function() {
document.getElementById("container").style.marginLeft = "20px";
document.documentElement.className = "";
}, 100);
</script>
</body>
</html>

View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>-moz-border-image-outset resize reference</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
</head>
<body>
<div style="width: 100px; border: solid #1DD813 10px; margin: 10px;">
<div style="padding: 10px;">
Hello World!
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html class="reftest-wait" lang="en-US">
<head>
<title>-moz-border-outset resize</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
div {
margin: 20px;
border-width: 10px;
border-style: solid;
-moz-border-image: url('3x3green-1DD813.png') 1 1 1 1;
-moz-border-image-outset: 10px;
}
</style>
</head>
<body>
<div id="container" style="width: 180px;">
Hello World!
</div>
<script type="text/javascript">
// The purpose of this test is to resize the border and ensure that the
// overflow area caused by border-image-outset is redrawn.
setTimeout(function() {
document.getElementById("container").style.width = "80px";
document.documentElement.className = "";
}, 100);
</script>
</body>
</html>

View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>-moz-border-image-width: 1em reference</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
</head>
<body>
<div style="border: solid #1DD813 2em">
<div style="margin: -1em;">
border.png<br />second longer longer longer longer longer longer line<br />third longer longer longer longer longer longer line
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>-moz-border-image-width: 2em</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
div {
border-width: 1em;
border-style: solid;
-moz-border-image: url('3x3green-1DD813.png') 1 1 1 1 / 2em;
}
</style>
</head>
<body>
<div>
border.png<br />second longer longer longer longer longer longer line<br />third longer longer longer longer longer longer line
</div>
</body>
</html>

View File

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>-moz-border-image-width: 2</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
div {
border-width: 1em;
border-style: solid;
-moz-border-image: url('3x3green-1DD813.png') 1 1 1 1 / 2;
}
</style>
</head>
<body>
<div>
border.png<br />second longer longer longer longer longer longer line<br />third longer longer longer longer longer longer line
</div>
</body>
</html>

View File

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>-moz-border-image-width: 2</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
div {
border-width: 1em;
border-style: solid;
-moz-border-image: url('3x3green-1DD813.png') 1 1 1 1;
-moz-border-image-width: 2;
}
</style>
</head>
<body>
<div>
border.png<br />second longer longer longer longer longer longer line<br />third longer longer longer longer longer longer line
</div>
</body>
</html>

View File

@ -2,7 +2,8 @@
<style> <style>
div { div {
border-width: 27px; border-width: 27px;
-moz-border-image: url("reticule.png") 27 round; border-style: solid;
-moz-border-image: url("reticule.png") 27 fill round;
width: 216px; width: 216px;
height: 108px; height: 108px;
} }

View File

@ -2,7 +2,8 @@
<style> <style>
div { div {
border-width: 27px 54px; border-width: 27px 54px;
-moz-border-image: url("reticule.png") 27 round; border-style: solid;
-moz-border-image: url("reticule.png") 27 fill round;
width: 216px; width: 216px;
height: 108px; height: 108px;
} }

View File

@ -2,7 +2,8 @@
<style> <style>
div { div {
border-width: 54px 27px; border-width: 54px 27px;
-moz-border-image: url("reticule.png") 27 round; border-style: solid;
-moz-border-image: url("reticule.png") 27 fill round;
width: 216px; width: 216px;
height: 108px; height: 108px;
} }

View File

@ -2,7 +2,8 @@
<style> <style>
div { div {
border-width: 27px 27px 0 27px; border-width: 27px 27px 0 27px;
-moz-border-image: url("reticule.png") 27 round; border-style: solid;
-moz-border-image: url("reticule.png") 27 fill round;
width: 216px; width: 216px;
height: 108px; height: 108px;
} }

View File

@ -2,7 +2,8 @@
<style> <style>
div { div {
border-width: 27px 27px 27px 0; border-width: 27px 27px 27px 0;
-moz-border-image: url("reticule.png") 27 round; border-style: solid;
-moz-border-image: url("reticule.png") 27 fill round;
width: 216px; width: 216px;
height: 108px; height: 108px;
} }

View File

@ -2,7 +2,8 @@
<style> <style>
div { div {
border-width: 27px 0 27px 0; border-width: 27px 0 27px 0;
-moz-border-image: url("reticule.png") 27 round; border-style: solid;
-moz-border-image: url("reticule.png") 27 fill round;
width: 216px; width: 216px;
height: 108px; height: 108px;
} }

View File

@ -2,7 +2,8 @@
<style> <style>
div { div {
border-width: 27px 0 27px 27px; border-width: 27px 0 27px 27px;
-moz-border-image: url("reticule.png") 27 round; border-style: solid;
-moz-border-image: url("reticule.png") 27 fill round;
width: 216px; width: 216px;
height: 108px; height: 108px;
} }

View File

@ -2,7 +2,8 @@
<style> <style>
div { div {
border-width: 0 27px 27px 27px; border-width: 0 27px 27px 27px;
-moz-border-image: url("reticule.png") 27 round; border-style: solid;
-moz-border-image: url("reticule.png") 27 fill round;
width: 216px; width: 216px;
height: 108px; height: 108px;
} }

View File

@ -2,7 +2,8 @@
<style> <style>
div { div {
border-width: 0 27px 0 27px; border-width: 0 27px 0 27px;
-moz-border-image: url("reticule.png") 27 round; border-style: solid;
-moz-border-image: url("reticule.png") 27 fill round;
width: 216px; width: 216px;
height: 108px; height: 108px;
} }

View File

@ -4,6 +4,7 @@
div { div {
margin: 27px; margin: 27px;
border-width: 1em; border-width: 1em;
border-style: solid;
-moz-border-image: url("diamonds.png") 27 stretch round; -moz-border-image: url("diamonds.png") 27 stretch round;
width: 270px; width: 270px;
height: 135px; height: 135px;

View File

@ -4,6 +4,7 @@
div { div {
margin: 27px; margin: 27px;
border-width: 1em; border-width: 1em;
border-style: solid;
-moz-border-image: url("diamonds.png") 27 round stretch; -moz-border-image: url("diamonds.png") 27 round stretch;
width: 270px; width: 270px;
height: 135px; height: 135px;

View File

@ -7,11 +7,13 @@
<style type="text/css"> <style type="text/css">
div { div {
border-width: 7px;
border-style: solid;
background: red; /* fail if this shows through */ background: red; /* fail if this shows through */
background-image: url('3x3multicolor.png'); /* fail if this shows through */ background-image: url('3x3multicolor.png'); /* fail if this shows through */
-moz-border-image: url('3x3multicolor.png') 1 1 1 1 / 7px; -moz-border-image: url('3x3multicolor.png') 1 1 1 1 fill;
-khtml-border-image: url('3x3multicolor.png') 1 1 1 1 / 7px; -khtml-border-image: url('3x3multicolor.png') 1 1 1 1 fill;
border-image: url('3x3multicolor.png') 1 1 1 1 / 7px; border-image: url('3x3multicolor.png') 1 1 1 1 fill;
} }
</style> </style>

View File

@ -13,71 +13,71 @@
} }
div.one { div.one {
-moz-border-image: url(10x5multicolor.png) 2 2 1 3; -moz-border-image: url(10x5multicolor.png) 2 2 1 3 fill;
-khtml-border-image: url(10x5multicolor.png) 2 2 1 3; -khtml-border-image: url(10x5multicolor.png) 2 2 1 3 fill;
border-image: url(10x5multicolor.png) 2 2 1 3; border-image: url(10x5multicolor.png) 2 2 1 3 fill;
border-width: 4px 6px 8px 11px; border-width: 4px 6px 8px 11px;
border-style: solid;
width: 9px; width: 9px;
height: 1px; height: 1px;
} }
div.two { div.two {
-moz-border-image: url(10x5multicolor.png) 40% 20% 20% 30%; -moz-border-image: url(10x5multicolor.png) 40% 20% 20% 30% fill;
-khtml-border-image: url(10x5multicolor.png) 40% 20% 20% 30%; -khtml-border-image: url(10x5multicolor.png) 40% 20% 20% 30% fill;
border-image: url(10x5multicolor.png) 40% 20% 20% 30%; border-image: url(10x5multicolor.png) 40% 20% 20% 30% fill;
border-width: 3px 1px 0px 4px; border-width: 3px 1px 0px 4px;
border-style: solid;
width: 2px; width: 2px;
height: 17px; height: 17px;
} }
div.three { div.three {
-moz-border-image: url(10x5multicolor.png) 40% 2 1 30%; -moz-border-image: url(10x5multicolor.png) 40% 2 1 30% fill;
-khtml-border-image: url(10x5multicolor.png) 40% 2 1 30%; -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% fill;
border-image: url(10x5multicolor.png) 40% 2 1 30%; border-image: url(10x5multicolor.png) 40% 2 1 30% fill;
border-width: 10px 2px 5px 3px; border-width: 10px 2px 5px 3px;
border-style: solid;
width: 17px; width: 17px;
height: 8px; height: 8px;
} }
div.four { div.four {
-moz-border-image: url(10x5multicolor.png) 2 2 20% 30%; -moz-border-image: url(10x5multicolor.png) 2 2 20% 30% fill;
-khtml-border-image: url(10x5multicolor.png) 2 2 20% 30%; -khtml-border-image: url(10x5multicolor.png) 2 2 20% 30% fill;
border-image: url(10x5multicolor.png) 2 2 20% 30%; border-image: url(10x5multicolor.png) 2 2 20% 30% fill;
border-width: 5px 7px 1px 0; border-width: 5px 7px 1px 0;
border-style: solid;
width: 8px; width: 8px;
height: 5px; height: 5px;
} }
div.five { div.five {
border-width: 5px 6px 7px 8px; /* ignored */ border-width: 4px 8px 10px 2px;
border-width: 5px 6px 7px 8px ! important; /* ignored */ -moz-border-image: url(10x5multicolor.png) 40% 2 1 30% fill;
-moz-border-image: url(10x5multicolor.png) 40% 2 1 30% / 4px 8px 10px 2px; -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% fill;
-khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% / 4px 8px 10px 2px; border-image: url(10x5multicolor.png) 40% 2 1 30% fill;
border-image: url(10x5multicolor.png) 40% 2 1 30% / 4px 8px 10px 2px; border-style: solid;
border-width: 5px 6px 7px 8px; /* ignored */
border-width: 5px 6px 7px 8px ! important; /* ignored */
width: 0; width: 0;
height: 8px; height: 8px;
} }
div.five {
border-width: 5px 6px 7px 8px; /* ignored */
border-width: 5px 6px 7px 8px ! important; /* ignored */
}
div.six { div.six {
border-width: 5px 6px 7px 8px; /* ignored */ border-width: 4px 0 10px 2px;
-moz-border-image: url(10x5multicolor.png) 40% 2 1 30% / 4px 0 10px 2px; -moz-border-image: url(10x5multicolor.png) 40% 2 1 30% fill;
-khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% / 4px 0 10px 2px; -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% fill;
border-image: url(10x5multicolor.png) 40% 2 1 30% / 4px 0 10px 2px; border-image: url(10x5multicolor.png) 40% 2 1 30% fill;
border-style: solid;
width: 17px; width: 17px;
height: 0; height: 0;
} }
div.seven { div.seven {
-moz-border-image: url(10x5multicolor.png) 40% 2 1 30%; -moz-border-image: url(10x5multicolor.png) 40% 2 1 30% fill;
-khtml-border-image: url(10x5multicolor.png) 40% 2 1 30%; -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% fill;
border-image: url(10x5multicolor.png) 40% 2 1 30%; border-image: url(10x5multicolor.png) 40% 2 1 30% fill;
border-width: 1px 3px 0 0; border-width: 1px 3px 0 0;
border-style: solid;
width: 17px; width: 17px;
height: 0; height: 0;
} }

View File

@ -13,33 +13,41 @@
} }
div.one { div.one {
-moz-border-image: url(10x5multicolor.png) 2 2 2 2 / 4px 6px 8px 6px; border-width: 4px 6px 8px 6px;
-khtml-border-image: url(10x5multicolor.png) 2 2 2 2 / 4px 6px 8px 6px; border-style: solid;
border-image: url(10x5multicolor.png) 2 2 2 2 / 4px 6px 8px 6px; -moz-border-image: url(10x5multicolor.png) 2 2 2 2;
-khtml-border-image: url(10x5multicolor.png) 2 2 2 2;
border-image: url(10x5multicolor.png) 2 2 2 2;
width: 5px; width: 5px;
height: 2px; height: 2px;
} }
div.two { div.two {
-moz-border-image: url(10x5multicolor.png) 2 1 2 1/ 4px 4px 4px 4px; border-width: 4px 4px 4px 4px;
-khtml-border-image: url(10x5multicolor.png) 2 1 2 1/ 4px 4px 4px 4px; border-style: solid;
border-image: url(10x5multicolor.png) 2 1 2 1/ 4px 4px 4px 4px; -moz-border-image: url(10x5multicolor.png) 2 1 2 1;
-khtml-border-image: url(10x5multicolor.png) 2 1 2 1;
border-image: url(10x5multicolor.png) 2 1 2 1;
width: 5px; width: 5px;
height: 2px; height: 2px;
} }
div.three { div.three {
-moz-border-image: url(10x5multicolor.png) 2 3 1 3 / 4px 2px 4px 2px; border-width: 4px 2px 4px 2px;
-khtml-border-image: url(10x5multicolor.png) 2 3 1 3 / 4px 2px 4px 2px; border-style: solid;
border-image: url(10x5multicolor.png) 2 3 1 3 / 4px 2px 4px 2px; -moz-border-image: url(10x5multicolor.png) 2 3 1 3;
-khtml-border-image: url(10x5multicolor.png) 2 3 1 3;
border-image: url(10x5multicolor.png) 2 3 1 3;
width: 5px; width: 5px;
height: 2px; height: 2px;
} }
div.four { div.four {
-moz-border-image: url(10x5multicolor.png) 2 3 1 1 / 4px 3px 4px 3px; border-width: 4px 3px 4px 3px;
-khtml-border-image: url(10x5multicolor.png) 2 3 1 1 / 4px 3px 4px 3px; border-style: solid;
border-image: url(10x5multicolor.png) 2 3 1 1 / 4px 3px 4px 3px; -moz-border-image: url(10x5multicolor.png) 2 3 1 1;
-khtml-border-image: url(10x5multicolor.png) 2 3 1 1;
border-image: url(10x5multicolor.png) 2 3 1 1;
width: 5px; width: 5px;
height: 2px; height: 2px;
} }

View File

@ -13,17 +13,21 @@
} }
div.one { div.one {
-moz-border-image: url(10x5multicolor.png) 2 / 4px 6px 8px; border-width: 4px 6px 8px;
-khtml-border-image: url(10x5multicolor.png) 2 / 4px 6px 8px; border-style: solid;
border-image: url(10x5multicolor.png) 2 / 4px 6px 8px; -moz-border-image: url(10x5multicolor.png) 2;
-khtml-border-image: url(10x5multicolor.png) 2;
border-image: url(10x5multicolor.png) 2;
width: 5px; width: 5px;
height: 2px; height: 2px;
} }
div.two { div.two {
-moz-border-image: url(10x5multicolor.png) 2 1 / 4px; border-width: 4px;
-khtml-border-image: url(10x5multicolor.png) 2 1 / 4px; border-style: solid;
border-image: url(10x5multicolor.png) 2 1 / 4px; -moz-border-image: url(10x5multicolor.png) 2 1;
-khtml-border-image: url(10x5multicolor.png) 2 1;
border-image: url(10x5multicolor.png) 2 1;
width: 5px; width: 5px;
height: 2px; height: 2px;
} }
@ -33,14 +37,17 @@
-khtml-border-image: url(10x5multicolor.png) 2 3 1; -khtml-border-image: url(10x5multicolor.png) 2 3 1;
border-image: url(10x5multicolor.png) 2 3 1; border-image: url(10x5multicolor.png) 2 3 1;
border-width: 4px 2px; border-width: 4px 2px;
border-style: solid;
width: 5px; width: 5px;
height: 2px; height: 2px;
} }
div.four { div.four {
-moz-border-image: url(10x5multicolor.png) 2 3 1 1 / 4px 3px; border-width: 4px 3px;
-khtml-border-image: url(10x5multicolor.png) 2 3 1 1 / 4px 3px; border-style: solid;
border-image: url(10x5multicolor.png) 2 3 1 1 / 4px 3px; -moz-border-image: url(10x5multicolor.png) 2 3 1 1;
-khtml-border-image: url(10x5multicolor.png) 2 3 1 1;
border-image: url(10x5multicolor.png) 2 3 1 1;
width: 5px; width: 5px;
height: 2px; height: 2px;
} }

View File

@ -30,71 +30,71 @@
} }
div.one { div.one {
-moz-border-image: url(10x5multicolor.png) 2 2 1 3 stretch; -moz-border-image: url(10x5multicolor.png) 2 2 1 3 fill stretch;
-khtml-border-image: url(10x5multicolor.png) 2 2 1 3 stretch; -khtml-border-image: url(10x5multicolor.png) 2 2 1 3 fill stretch;
border-image: url(10x5multicolor.png) 2 2 1 3 stretch; border-image: url(10x5multicolor.png) 2 2 1 3 fill stretch;
border-width: 4px 6px 8px 11px; border-width: 4px 6px 8px 11px;
border-style: solid;
width: 9px; width: 9px;
height: 1px; height: 1px;
} }
div.two { div.two {
-moz-border-image: url(10x5multicolor.png) 40% 20% 20% 30% repeat; -moz-border-image: url(10x5multicolor.png) 40% 20% 20% 30% fill repeat;
-khtml-border-image: url(10x5multicolor.png) 40% 20% 20% 30% repeat; -khtml-border-image: url(10x5multicolor.png) 40% 20% 20% 30% fill repeat;
border-image: url(10x5multicolor.png) 40% 20% 20% 30% repeat; border-image: url(10x5multicolor.png) 40% 20% 20% 30% fill repeat;
border-width: 3px 1px 0px 4px; border-width: 3px 1px 0px 4px;
border-style: solid;
width: 2px; width: 2px;
height: 17px; height: 17px;
} }
div.three { div.three {
-moz-border-image: url(10x5multicolor.png) 40% 2 1 30% round; -moz-border-image: url(10x5multicolor.png) 40% 2 1 30% fill round;
-khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% round; -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% fill round;
border-image: url(10x5multicolor.png) 40% 2 1 30% round; border-image: url(10x5multicolor.png) 40% 2 1 30% fill round;
border-width: 10px 2px 5px 3px; border-width: 10px 2px 5px 3px;
border-style: solid;
width: 17px; width: 17px;
height: 8px; height: 8px;
} }
div.four { div.four {
-moz-border-image: url(10x5multicolor.png) 2 2 20% 30% stretch round; -moz-border-image: url(10x5multicolor.png) 2 2 20% 30% fill stretch round;
-khtml-border-image: url(10x5multicolor.png) 2 2 20% 30% stretch round; -khtml-border-image: url(10x5multicolor.png) 2 2 20% 30% fill stretch round;
border-image: url(10x5multicolor.png) 2 2 20% 30% stretch round; border-image: url(10x5multicolor.png) 2 2 20% 30% fill stretch round;
border-width: 5px 7px 1px 0; border-width: 5px 7px 1px 0;
border-style: solid;
width: 8px; width: 8px;
height: 5px; height: 5px;
} }
div.five { div.five {
border-width: 5px 6px 7px 8px; /* ignored */ border-width: 4px 8px 10px 2px;
border-width: 5px 6px 7px 8px ! important; /* ignored */ border-style: solid;
-moz-border-image: url(10x5multicolor.png) 40% 2 1 30% / 4px 8px 10px 2px repeat stretch; -moz-border-image: url(10x5multicolor.png) 40% 2 1 30% fill repeat stretch;
-khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% / 4px 8px 10px 2px repeat stretch; -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% fill repeat stretch;
border-image: url(10x5multicolor.png) 40% 2 1 30% / 4px 8px 10px 2px repeat stretch; border-image: url(10x5multicolor.png) 40% 2 1 30% fill repeat stretch;
border-width: 5px 6px 7px 8px; /* ignored */
border-width: 5px 6px 7px 8px ! important; /* ignored */
width: 0; width: 0;
height: 8px; height: 8px;
} }
div.five {
border-width: 5px 6px 7px 8px; /* ignored */
border-width: 5px 6px 7px 8px ! important; /* ignored */
}
div.six { div.six {
border-width: 5px 6px 7px 8px; /* ignored */ border-width: 4px 0 10px 2px;
-moz-border-image: url(10x5multicolor.png) 40% 2 1 30% / 4px 0 10px 2px round repeat; border-style: solid;
-khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% / 4px 0 10px 2px round repeat; -moz-border-image: url(10x5multicolor.png) 40% 2 1 30% fill round repeat;
border-image: url(10x5multicolor.png) 40% 2 1 30% / 4px 0 10px 2px round repeat; -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% fill round repeat;
border-image: url(10x5multicolor.png) 40% 2 1 30% fill round repeat;
width: 17px; width: 17px;
height: 0; height: 0;
} }
div.seven { div.seven {
-moz-border-image: url(10x5multicolor.png) 40% 2 1 30% stretch repeat; -moz-border-image: url(10x5multicolor.png) 40% 2 1 30% fill stretch repeat;
-khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% stretch repeat; -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% fill stretch repeat;
border-image: url(10x5multicolor.png) 40% 2 1 30% stretch repeat; border-image: url(10x5multicolor.png) 40% 2 1 30% fill stretch repeat;
border-width: 1px 3px 0 0; border-width: 1px 3px 0 0;
border-style: solid;
width: 17px; width: 17px;
height: 0; height: 0;
} }

View File

@ -31,62 +31,61 @@
} }
div.one { div.one {
-moz-border-image: url(10x5multicolor.png) 2 2 1 3 stretch; -moz-border-image: url(10x5multicolor.png) 2 2 1 3 fill stretch;
-khtml-border-image: url(10x5multicolor.png) 2 2 1 3 stretch; -khtml-border-image: url(10x5multicolor.png) 2 2 1 3 fill stretch;
border-image: url(10x5multicolor.png) 2 2 1 3 stretch; border-image: url(10x5multicolor.png) 2 2 1 3 fill stretch;
border-width: 4px 6px 8px 11px; border-width: 4px 6px 8px 11px;
border-style: solid;
width: 9px; width: 9px;
height: 1px; height: 1px;
} }
div.two { div.two {
-moz-border-image: url(10x5multicolor.png) 40% 20% 20% 30% repeat; -moz-border-image: url(10x5multicolor.png) 40% 20% 20% 30% fill repeat;
-khtml-border-image: url(10x5multicolor.png) 40% 20% 20% 30% repeat; -khtml-border-image: url(10x5multicolor.png) 40% 20% 20% 30% fill repeat;
border-image: url(10x5multicolor.png) 40% 20% 20% 30% repeat; border-image: url(10x5multicolor.png) 40% 20% 20% 30% fill repeat;
border-width: 3px 1px 0px 4px; border-width: 3px 1px 0px 4px;
border-style: solid;
width: 2px; width: 2px;
height: 17px; height: 17px;
} }
div.three { div.three {
-moz-border-image: url(10x5multicolor.png) 40% 2 1 30% round; -moz-border-image: url(10x5multicolor.png) 40% 2 1 30% fill round;
-khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% round; -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% fill round;
border-image: url(10x5multicolor.png) 40% 2 1 30% round; border-image: url(10x5multicolor.png) 40% 2 1 30% fill round;
border-width: 10px 2px 5px 3px; border-width: 10px 2px 5px 3px;
border-style: solid;
width: 17px; width: 17px;
height: 8px; height: 8px;
} }
div.four { div.four {
-moz-border-image: url(10x5multicolor.png) 2 2 20% 30% stretch round; -moz-border-image: url(10x5multicolor.png) 2 2 20% 30% fill stretch round;
-khtml-border-image: url(10x5multicolor.png) 2 2 20% 30% stretch round; -khtml-border-image: url(10x5multicolor.png) 2 2 20% 30% fill stretch round;
border-image: url(10x5multicolor.png) 2 2 20% 30% stretch round; border-image: url(10x5multicolor.png) 2 2 20% 30% fill stretch round;
border-width: 5px 7px 1px 0; border-width: 5px 7px 1px 0;
border-style: solid;
width: 8px; width: 8px;
height: 5px; height: 5px;
} }
div.five { div.five {
border-width: 5px 6px 7px 8px; /* ignored */ border-width: 4px 8px 10px 2px;
border-width: 5px 6px 7px 8px ! important; /* ignored */ border-style: solid;
-moz-border-image: url(10x5multicolor.png) 40% 2 1 30% / 4px 8px 10px 2px repeat stretch; -moz-border-image: url(10x5multicolor.png) 40% 2 1 30% fill repeat stretch;
-khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% / 4px 8px 10px 2px repeat stretch; -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% fill repeat stretch;
border-image: url(10x5multicolor.png) 40% 2 1 30% / 4px 8px 10px 2px repeat stretch; border-image: url(10x5multicolor.png) 40% 2 1 30% fill repeat stretch;
border-width: 5px 6px 7px 8px; /* ignored */
border-width: 5px 6px 7px 8px ! important; /* ignored */
width: 0; width: 0;
height: 8px; height: 8px;
} }
div.five {
border-width: 5px 6px 7px 8px; /* ignored */
border-width: 5px 6px 7px 8px ! important; /* ignored */
}
div.six { div.six {
border-width: 5px 6px 7px 8px; /* ignored */ border-width: 4px 0 10px 2px;
-moz-border-image: url(10x5multicolor.png) 40% 2 1 30% / 4px 0 10px 2px round repeat; border-style: solid;
-khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% / 4px 0 10px 2px round repeat; -moz-border-image: url(10x5multicolor.png) 40% 2 1 30% round repeat;
border-image: url(10x5multicolor.png) 40% 2 1 30% / 4px 0 10px 2px round repeat; -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% round repeat;
border-image: url(10x5multicolor.png) 40% 2 1 30% round repeat;
width: 17px; width: 17px;
height: 0; height: 0;
} }
@ -96,6 +95,7 @@
-khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% stretch repeat; -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% stretch repeat;
border-image: url(10x5multicolor.png) 40% 2 1 30% stretch repeat; border-image: url(10x5multicolor.png) 40% 2 1 30% stretch repeat;
border-width: 1px 3px 0 0; border-width: 1px 3px 0 0;
border-style: solid;
width: 17px; width: 17px;
height: 0; height: 0;
} }

View File

@ -1,4 +1,5 @@
== solid-image-1.html solid-image-1-ref.html == solid-image-1.html solid-image-1-ref.html
== solid-image-1a.html solid-image-1-ref.html
== solid-image-2.html solid-image-2-ref.html == solid-image-2.html solid-image-2-ref.html
== solid-image-2a.html solid-image-2-ref.html == solid-image-2a.html solid-image-2-ref.html
== multicolor-image-1.html multicolor-image-1-ref.html == multicolor-image-1.html multicolor-image-1-ref.html
@ -24,3 +25,12 @@
== center-scaling-4lr.html center-scaling-4lr-ref.html == center-scaling-4lr.html center-scaling-4lr-ref.html
== side-scaling-1h.html side-scaling-1h-ref.html == side-scaling-1h.html side-scaling-1h-ref.html
== side-scaling-1v.html side-scaling-1v-ref.html == side-scaling-1v.html side-scaling-1v-ref.html
== border-image-width-1a.html border-image-width-1-ref.html
== border-image-width-1b.html border-image-width-1-ref.html
== border-image-width-1c.html border-image-width-1-ref.html
== border-image-outset-1a.html border-image-outset-1-ref.html
== border-image-outset-1b.html border-image-outset-1-ref.html
== border-image-outset-1c.html border-image-outset-1-ref.html
== border-image-nofill-1.html border-image-nofill-1-ref.html
== border-image-outset-resize-1.html border-image-outset-resize-1-ref.html
== border-image-outset-move-1.html border-image-outset-move-1-ref.html

View File

@ -9,17 +9,21 @@
div.p1 { div.p1 {
background: red; /* fail if this shows through */ background: red; /* fail if this shows through */
background-image: url('3x3multicolor.png'); /* fail if this shows through */ background-image: url('3x3multicolor.png'); /* fail if this shows through */
-moz-border-image: url('4x4multicolor.png') 1 1 1 1 / 1px 3px repeat; border-width: 1px 3px;
-khtml-border-image: url('4x4multicolor.png') 1 1 1 1 / 1px 3px repeat; border-style: solid;
border-image: url('4x4multicolor.png') 1 1 1 1 / 1px 3px repeat; -moz-border-image: url('4x4multicolor.png') 1 1 1 1 repeat;
-khtml-border-image: url('4x4multicolor.png') 1 1 1 1 repeat;
border-image: url('4x4multicolor.png') 1 1 1 1 repeat;
} }
div.p2 { div.p2 {
background: red; /* fail if this shows through */ background: red; /* fail if this shows through */
background-image: url('3x3multicolor.png'); /* fail if this shows through */ background-image: url('3x3multicolor.png'); /* fail if this shows through */
-moz-border-image: url('4x4multicolor.png') 1 1 1 1 / 1px 3px; border-width: 1px 3px;
-khtml-border-image: url('4x4multicolor.png') 1 1 1 1 / 1px 3px; border-style: solid;
border-image: url('4x4multicolor.png') 1 1 1 1 / 1px 3px; -moz-border-image: url('4x4multicolor.png') 1 1 1 1;
-khtml-border-image: url('4x4multicolor.png') 1 1 1 1;
border-image: url('4x4multicolor.png') 1 1 1 1;
} }
</style> </style>

View File

@ -6,9 +6,11 @@
<meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css"> <style type="text/css">
div { div {
-moz-border-image: url('3x3green-1DD813.png') 1 1 1 1 / 1em; border-width: 1em;
-khtml-border-image: url('3x3green-1DD813.png') 1 1 1 1 / 1em; border-style: solid;
border-image: url('3x3green-1DD813.png') 1 1 1 1 / 1em; -moz-border-image: url('3x3green-1DD813.png') 1 1 1 1;
-khtml-border-image: url('3x3green-1DD813.png') 1 1 1 1;
border-image: url('3x3green-1DD813.png') 1 1 1 1;
} }
</style> </style>
</head> </head>

View File

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>test of -moz-border-image</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
div {
border-width: 1em;
border-style: solid;
-moz-border-image-source: url('3x3green-1DD813.png');
-moz-border-image-slice: 1 1 1 1;
}
</style>
</head>
<body>
<div>border.png<br />second longer longer longer longer longer longer line<br />third longer longer longer longer longer longer line</div>
</body>
</html>

View File

@ -7,9 +7,11 @@
<style type="text/css"> <style type="text/css">
div { div {
-moz-border-image: url('3x3green-1DD813.png') 1 1 1 1 / 10px; border-width: 10px;
-khtml-border-image: url('3x3green-1DD813.png') 1 1 1 1 / 10px; border-style: solid;
border-image: url('3x3green-1DD813.png') 1 1 1 1 / 10px; -moz-border-image: url('3x3green-1DD813.png') 1 1 1 1;
-khtml-border-image: url('3x3green-1DD813.png') 1 1 1 1;
border-image: url('3x3green-1DD813.png') 1 1 1 1;
margin: 1px; margin: 1px;
} }

View File

@ -7,9 +7,11 @@
<style type="text/css"> <style type="text/css">
div { div {
-moz-border-image: url('3x3green-1DD813.png') 1 1 1 1 / 10px repeat; border-width: 10px;
-khtml-border-image: url('3x3green-1DD813.png') 1 1 1 1 / 10px repeat; border-style: solid;
border-image: url('3x3green-1DD813.png') 1 1 1 1 / 10px repeat; -moz-border-image: url('3x3green-1DD813.png') 1 1 1 1 repeat;
-khtml-border-image: url('3x3green-1DD813.png') 1 1 1 1 repeat;
border-image: url('3x3green-1DD813.png') 1 1 1 1 repeat;
margin: 1px; margin: 1px;
} }

View File

@ -3,7 +3,7 @@
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<hbox> <hbox>
<button label="Button" style="min-width: 0; -moz-appearance: none; border-width: 0; padding: 0; margin: 0; visibility:hidden; -moz-border-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAARCAMAAADnhAzLAAAAsVBMVEUAAAAAAAAAAAD///////8QEBAAAAAHBwcQEBD///8GBgYAAAAAAAAAAAAAAAAODg4AAAA2NjYAAAAAAAAGBgYREREAAAAQEBAAAAA4ODiJiYkSEhIAAADExMQAAAAICAhra2stLS0ODg4JCQklJSX///8HBwcGBgb///////98fHz///////+hoaE4ODj////////e3t6np6dxcXFUVFROTk7///////////////////+i+RpeAAAAO3RSTlNKAEwHAlBRbU8Ff2heWVdcZyFPTX1MZE5VIGpIVFdOXFhVWFdaQWp4El1tIGp6YBhhjYNxbWwnVXeDhIrUVQ0AAACvSURBVHheXdDXDoJAEIXhMztL73ZRFBXE3vv7P5hrognrfzdfMjcHRJIT22q5bsuyE5ZEIIe7lecHYRj4XtVlhyA5inuNplA1G704Yglud0yBb8LstBn9uYla5ryPwRBawwFmI51GM4yFTmKMKfQUTKCnIP9/zJEVOhUZytSoi5GWWCxXNTNWywVovdnufrLbbtYEov3heDpfrtfL+XQ87OlDJG/3x/P1ej7uN6nON0ZMDbf0SRXfAAAAAElFTkSuQmCC) 0 8 / 0 8px;"/> <button label="Button" style="min-width: 0; -moz-appearance: none; border-width: 0; padding: 0; margin: 0; visibility:hidden; border-width: 0 8px; border-style: solid; -moz-border-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAARCAMAAADnhAzLAAAAsVBMVEUAAAAAAAAAAAD///////8QEBAAAAAHBwcQEBD///8GBgYAAAAAAAAAAAAAAAAODg4AAAA2NjYAAAAAAAAGBgYREREAAAAQEBAAAAA4ODiJiYkSEhIAAADExMQAAAAICAhra2stLS0ODg4JCQklJSX///8HBwcGBgb///////98fHz///////+hoaE4ODj////////e3t6np6dxcXFUVFROTk7///////////////////+i+RpeAAAAO3RSTlNKAEwHAlBRbU8Ff2heWVdcZyFPTX1MZE5VIGpIVFdOXFhVWFdaQWp4El1tIGp6YBhhjYNxbWwnVXeDhIrUVQ0AAACvSURBVHheXdDXDoJAEIXhMztL73ZRFBXE3vv7P5hrognrfzdfMjcHRJIT22q5bsuyE5ZEIIe7lecHYRj4XtVlhyA5inuNplA1G704Yglud0yBb8LstBn9uYla5ryPwRBawwFmI51GM4yFTmKMKfQUTKCnIP9/zJEVOhUZytSoi5GWWCxXNTNWywVovdnufrLbbtYEov3heDpfrtfL+XQ87OlDJG/3x/P1ej7uN6nON0ZMDbf0SRXfAAAAAElFTkSuQmCC) 0 8 fill;"/>
<box flex="1" style="background: green" /> <box flex="1" style="background: green" />
</hbox> </hbox>

View File

@ -5,50 +5,30 @@
<style type="text/css"> <style type="text/css">
html, body { margin: 0; border: none; padding: 0; } html, body { margin: 0; border: none; padding: 0; }
div { position: absolute; height: 10px; width: 10px; } div { position: absolute; height: 10px; width: 10px; border-style: solid; }
</style> </style>
</head> </head>
<body> <body>
<div style="top: 10px; left: 10px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 2px;"></div>
<div style="top: 10px; left: 30px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 2px;"></div>
<div style="top: 10px; left: 50px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 2px;"></div>
<div style="top: 10px; left: 70px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 2px;"></div>
<div style="top: 10px; left: 90px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 2px;"></div>
<div style="top: 10px; left: 110px; -moz-border-image: url(random-10x10.png) 3 2 2 3; border-width: 2px 2px 2px 2px;"></div> <div style="top: 10px; left: 110px; -moz-border-image: url(random-10x10.png) 3 2 2 3; border-width: 2px 2px 2px 2px;"></div>
<div style="top: 10px; left: 130px; -moz-border-image: url(random-10x10.png) 3 2 2 3 stretch; border-width: 2px 2px 2px 2px;"></div> <div style="top: 10px; left: 130px; -moz-border-image: url(random-10x10.png) 3 2 2 3 stretch; border-width: 2px 2px 2px 2px;"></div>
<div style="top: 10px; left: 150px; -moz-border-image: url(random-10x10.png) 3 2 2 3 stretch stretch; border-width: 2px 2px 2px 2px;"></div> <div style="top: 10px; left: 150px; -moz-border-image: url(random-10x10.png) 3 2 2 3 stretch stretch; border-width: 2px 2px 2px 2px;"></div>
<div style="top: 10px; left: 170px; -moz-border-image: url(random-10x10.png) 3 2 2 3; border-width: 2px 2px 2px 2px;"></div> <div style="top: 10px; left: 170px; -moz-border-image: url(random-10x10.png) 3 2 2 3; border-width: 2px 2px 2px 2px;"></div>
<div style="top: 10px; left: 190px; -moz-border-image: url(random-10x10.png) 3 2 2 3; border-width: 2px 2px 2px 2px;"></div> <div style="top: 10px; left: 190px; -moz-border-image: url(random-10x10.png) 3 2 2 3; border-width: 2px 2px 2px 2px;"></div>
<div style="top: 30px; left: 10px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 2px round;"></div>
<div style="top: 30px; left: 30px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 2px round round;"></div>
<div style="top: 30px; left: 50px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 2px round round;"></div>
<div style="top: 30px; left: 70px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 2px round;"></div>
<div style="top: 30px; left: 90px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 2px round;"></div>
<div style="top: 30px; left: 110px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round round; border-width: 2px 2px 2px 2px;"></div> <div style="top: 30px; left: 110px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round round; border-width: 2px 2px 2px 2px;"></div>
<div style="top: 30px; left: 130px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2px 2px 2px;"></div> <div style="top: 30px; left: 130px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2px 2px 2px;"></div>
<div style="top: 30px; left: 150px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2px 2px 2px;"></div> <div style="top: 30px; left: 150px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2px 2px 2px;"></div>
<div style="top: 30px; left: 170px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2px 2px 2px;"></div> <div style="top: 30px; left: 170px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2px 2px 2px;"></div>
<div style="top: 30px; left: 190px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round round; border-width: 2px 2px 2px 2px;"></div> <div style="top: 30px; left: 190px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round round; border-width: 2px 2px 2px 2px;"></div>
<div style="top: 50px; left: 10px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 2px repeat;"></div>
<div style="top: 50px; left: 30px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 2px repeat repeat;"></div>
<div style="top: 50px; left: 50px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 2px repeat repeat;"></div>
<div style="top: 50px; left: 70px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 2px repeat;"></div>
<div style="top: 50px; left: 90px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 2px repeat;"></div>
<div style="top: 50px; left: 110px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat repeat; border-width: 2px 2px 2px 2px;"></div> <div style="top: 50px; left: 110px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat repeat; border-width: 2px 2px 2px 2px;"></div>
<div style="top: 50px; left: 130px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2px 2px 2px;"></div> <div style="top: 50px; left: 130px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2px 2px 2px;"></div>
<div style="top: 50px; left: 150px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2px 2px 2px;"></div> <div style="top: 50px; left: 150px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2px 2px 2px;"></div>
<div style="top: 50px; left: 170px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2px 2px 2px;"></div> <div style="top: 50px; left: 170px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2px 2px 2px;"></div>
<div style="top: 50px; left: 190px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat repeat; border-width: 2px 2px 2px 2px;"></div> <div style="top: 50px; left: 190px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat repeat; border-width: 2px 2px 2px 2px;"></div>
<div style="top: 70px; left: 10px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 2px repeat round;"></div>
<div style="top: 70px; left: 30px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 2px stretch repeat;"></div>
<div style="top: 70px; left: 50px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 2px round repeat;"></div>
<div style="top: 70px; left: 70px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 2px repeat stretch;"></div>
<div style="top: 70px; left: 90px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 2px round stretch;"></div>
<div style="top: 70px; left: 110px; -moz-border-image: url(random-10x10.png) 3 2 2 3 stretch round; border-width: 2px 2px 2px 2px;"></div> <div style="top: 70px; left: 110px; -moz-border-image: url(random-10x10.png) 3 2 2 3 stretch round; border-width: 2px 2px 2px 2px;"></div>
<div style="top: 70px; left: 130px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round repeat; border-width: 2px 2px 2px 2px;"></div> <div style="top: 70px; left: 130px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round repeat; border-width: 2px 2px 2px 2px;"></div>
<div style="top: 70px; left: 150px; -moz-border-image: url(random-10x10.png) 3 2 2 3 stretch repeat; border-width: 2px 2px 2px 2px;"></div> <div style="top: 70px; left: 150px; -moz-border-image: url(random-10x10.png) 3 2 2 3 stretch repeat; border-width: 2px 2px 2px 2px;"></div>

View File

@ -5,50 +5,30 @@
<style type="text/css"> <style type="text/css">
html, body { margin: 0; border: none; padding: 0; } html, body { margin: 0; border: none; padding: 0; }
div { position: absolute; height: 10px; width: 10px; } div { position: absolute; height: 10px; width: 10px; border-style:solid; }
</style> </style>
</head> </head>
<body> <body>
<div style="top: 10px; left: 10px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 3px 2px 2px 2px;"></div>
<div style="top: 10px; left: 30px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 3px 2px 2px;"></div>
<div style="top: 10px; left: 50px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 3px 2px;"></div>
<div style="top: 10px; left: 70px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 3px;"></div>
<div style="top: 10px; left: 90px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 3px 3px 3px 3px;"></div>
<div style="top: 10px; left: 110px; -moz-border-image: url(random-10x10.png) 3 2 2 3; border-width: 3px 2px 2px 2px;"></div> <div style="top: 10px; left: 110px; -moz-border-image: url(random-10x10.png) 3 2 2 3; border-width: 3px 2px 2px 2px;"></div>
<div style="top: 10px; left: 130px; -moz-border-image: url(random-10x10.png) 3 2 2 3 stretch; border-width: 2px 3px 2px 2px;"></div> <div style="top: 10px; left: 130px; -moz-border-image: url(random-10x10.png) 3 2 2 3 stretch; border-width: 2px 3px 2px 2px;"></div>
<div style="top: 10px; left: 150px; -moz-border-image: url(random-10x10.png) 3 2 2 3 stretch stretch; border-width: 2px 2px 3px 2px;"></div> <div style="top: 10px; left: 150px; -moz-border-image: url(random-10x10.png) 3 2 2 3 stretch stretch; border-width: 2px 2px 3px 2px;"></div>
<div style="top: 10px; left: 170px; -moz-border-image: url(random-10x10.png) 3 2 2 3; border-width: 2px 2px 2px 3px;"></div> <div style="top: 10px; left: 170px; -moz-border-image: url(random-10x10.png) 3 2 2 3; border-width: 2px 2px 2px 3px;"></div>
<div style="top: 10px; left: 190px; -moz-border-image: url(random-10x10.png) 3 2 2 3; border-width: 3px 3px 3px 3px;"></div> <div style="top: 10px; left: 190px; -moz-border-image: url(random-10x10.png) 3 2 2 3; border-width: 3px 3px 3px 3px;"></div>
<div style="top: 30px; left: 10px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 3px 2px 2px 2px round;"></div>
<div style="top: 30px; left: 30px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 3px 2px 2px round round;"></div>
<div style="top: 30px; left: 50px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 3px 2px round round;"></div>
<div style="top: 30px; left: 70px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 3px round;"></div>
<div style="top: 30px; left: 90px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 3px 3px 3px 3px round;"></div>
<div style="top: 30px; left: 110px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round round; border-width: 3px 2px 2px 2px;"></div> <div style="top: 30px; left: 110px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round round; border-width: 3px 2px 2px 2px;"></div>
<div style="top: 30px; left: 130px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 3px 2px 2px;"></div> <div style="top: 30px; left: 130px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 3px 2px 2px;"></div>
<div style="top: 30px; left: 150px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2px 3px 2px;"></div> <div style="top: 30px; left: 150px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2px 3px 2px;"></div>
<div style="top: 30px; left: 170px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2px 2px 3px;"></div> <div style="top: 30px; left: 170px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2px 2px 3px;"></div>
<div style="top: 30px; left: 190px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round round; border-width: 3px 3px 3px 3px;"></div> <div style="top: 30px; left: 190px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round round; border-width: 3px 3px 3px 3px;"></div>
<div style="top: 50px; left: 10px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 3px 2px 2px 2px repeat;"></div>
<div style="top: 50px; left: 30px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 3px 2px 2px repeat repeat;"></div>
<div style="top: 50px; left: 50px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 3px 2px repeat repeat;"></div>
<div style="top: 50px; left: 70px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 3px repeat;"></div>
<div style="top: 50px; left: 90px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 3px 3px 3px 3px repeat;"></div>
<div style="top: 50px; left: 110px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat repeat; border-width: 3px 2px 2px 2px;"></div> <div style="top: 50px; left: 110px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat repeat; border-width: 3px 2px 2px 2px;"></div>
<div style="top: 50px; left: 130px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 3px 2px 2px;"></div> <div style="top: 50px; left: 130px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 3px 2px 2px;"></div>
<div style="top: 50px; left: 150px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2px 3px 2px;"></div> <div style="top: 50px; left: 150px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2px 3px 2px;"></div>
<div style="top: 50px; left: 170px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2px 2px 3px;"></div> <div style="top: 50px; left: 170px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2px 2px 3px;"></div>
<div style="top: 50px; left: 190px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat repeat; border-width: 3px 3px 3px 3px;"></div> <div style="top: 50px; left: 190px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat repeat; border-width: 3px 3px 3px 3px;"></div>
<div style="top: 70px; left: 10px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 3px 2px 2px 2px repeat round;"></div>
<div style="top: 70px; left: 30px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 3px 2px 2px stretch repeat;"></div>
<div style="top: 70px; left: 50px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 3px 2px round repeat;"></div>
<div style="top: 70px; left: 70px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 3px repeat stretch;"></div>
<div style="top: 70px; left: 90px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 3px 3px 3px 3px round stretch;"></div>
<div style="top: 70px; left: 110px; -moz-border-image: url(random-10x10.png) 3 2 2 3 stretch round; border-width: 3px 2px 2px 2px;"></div> <div style="top: 70px; left: 110px; -moz-border-image: url(random-10x10.png) 3 2 2 3 stretch round; border-width: 3px 2px 2px 2px;"></div>
<div style="top: 70px; left: 130px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round repeat; border-width: 2px 3px 2px 2px;"></div> <div style="top: 70px; left: 130px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round repeat; border-width: 2px 3px 2px 2px;"></div>
<div style="top: 70px; left: 150px; -moz-border-image: url(random-10x10.png) 3 2 2 3 stretch repeat; border-width: 2px 2px 3px 2px;"></div> <div style="top: 70px; left: 150px; -moz-border-image: url(random-10x10.png) 3 2 2 3 stretch repeat; border-width: 2px 2px 3px 2px;"></div>

View File

@ -5,50 +5,30 @@
<style type="text/css"> <style type="text/css">
html, body { margin: 0; border: none; padding: 0; } html, body { margin: 0; border: none; padding: 0; }
div { position: absolute; height: 10px; width: 10px; } div { position: absolute; height: 10px; width: 10px; border-style: solid; }
</style> </style>
</head> </head>
<body> <body>
<div style="top: 10px; left: 10px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2.4px 2px 2px 2px;"></div>
<div style="top: 10px; left: 30px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2.4px 2px 2px;"></div>
<div style="top: 10px; left: 50px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2.4px 2px;"></div>
<div style="top: 10px; left: 70px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 2.4px;"></div>
<div style="top: 10px; left: 90px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2.4px 2.4px 2.4px 2.4px;"></div>
<div style="top: 10px; left: 110px; -moz-border-image: url(random-10x10.png) 3 2 2 3; border-width: 2.4px 2px 2px 2px;"></div> <div style="top: 10px; left: 110px; -moz-border-image: url(random-10x10.png) 3 2 2 3; border-width: 2.4px 2px 2px 2px;"></div>
<div style="top: 10px; left: 130px; -moz-border-image: url(random-10x10.png) 3 2 2 3 stretch; border-width: 2px 2.4px 2px 2px;"></div> <div style="top: 10px; left: 130px; -moz-border-image: url(random-10x10.png) 3 2 2 3 stretch; border-width: 2px 2.4px 2px 2px;"></div>
<div style="top: 10px; left: 150px; -moz-border-image: url(random-10x10.png) 3 2 2 3 stretch stretch; border-width: 2px 2px 2.4px 2px;"></div> <div style="top: 10px; left: 150px; -moz-border-image: url(random-10x10.png) 3 2 2 3 stretch stretch; border-width: 2px 2px 2.4px 2px;"></div>
<div style="top: 10px; left: 170px; -moz-border-image: url(random-10x10.png) 3 2 2 3; border-width: 2px 2px 2px 2.4px;"></div> <div style="top: 10px; left: 170px; -moz-border-image: url(random-10x10.png) 3 2 2 3; border-width: 2px 2px 2px 2.4px;"></div>
<div style="top: 10px; left: 190px; -moz-border-image: url(random-10x10.png) 3 2 2 3; border-width: 2.4px 2.4px 2.4px 2.4px;"></div> <div style="top: 10px; left: 190px; -moz-border-image: url(random-10x10.png) 3 2 2 3; border-width: 2.4px 2.4px 2.4px 2.4px;"></div>
<div style="top: 30px; left: 10px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2.4px 2px 2px 2px round;"></div>
<div style="top: 30px; left: 30px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2.4px 2px 2px round round;"></div>
<div style="top: 30px; left: 50px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2.4px 2px round round;"></div>
<div style="top: 30px; left: 70px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 2.4px round;"></div>
<div style="top: 30px; left: 90px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2.4px 2.4px 2.4px 2.4px round;"></div>
<div style="top: 30px; left: 110px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round round; border-width: 2.4px 2px 2px 2px;"></div> <div style="top: 30px; left: 110px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round round; border-width: 2.4px 2px 2px 2px;"></div>
<div style="top: 30px; left: 130px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2.4px 2px 2px;"></div> <div style="top: 30px; left: 130px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2.4px 2px 2px;"></div>
<div style="top: 30px; left: 150px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2px 2.4px 2px;"></div> <div style="top: 30px; left: 150px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2px 2.4px 2px;"></div>
<div style="top: 30px; left: 170px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2px 2px 2.4px;"></div> <div style="top: 30px; left: 170px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2px 2px 2.4px;"></div>
<div style="top: 30px; left: 190px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round round; border-width: 2.4px 2.4px 2.4px 2.4px;"></div> <div style="top: 30px; left: 190px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round round; border-width: 2.4px 2.4px 2.4px 2.4px;"></div>
<div style="top: 50px; left: 10px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2.4px 2px 2px 2px repeat;"></div>
<div style="top: 50px; left: 30px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2.4px 2px 2px repeat repeat;"></div>
<div style="top: 50px; left: 50px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2.4px 2px repeat repeat;"></div>
<div style="top: 50px; left: 70px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 2.4px repeat;"></div>
<div style="top: 50px; left: 90px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2.4px 2.4px 2.4px 2.4px repeat;"></div>
<div style="top: 50px; left: 110px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat repeat; border-width: 2.4px 2px 2px 2px;"></div> <div style="top: 50px; left: 110px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat repeat; border-width: 2.4px 2px 2px 2px;"></div>
<div style="top: 50px; left: 130px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2.4px 2px 2px;"></div> <div style="top: 50px; left: 130px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2.4px 2px 2px;"></div>
<div style="top: 50px; left: 150px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2px 2.4px 2px;"></div> <div style="top: 50px; left: 150px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2px 2.4px 2px;"></div>
<div style="top: 50px; left: 170px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2px 2px 2.4px;"></div> <div style="top: 50px; left: 170px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2px 2px 2.4px;"></div>
<div style="top: 50px; left: 190px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat repeat; border-width: 2.4px 2.4px 2.4px 2.4px;"></div> <div style="top: 50px; left: 190px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat repeat; border-width: 2.4px 2.4px 2.4px 2.4px;"></div>
<div style="top: 70px; left: 10px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2.4px 2px 2px 2px repeat round;"></div>
<div style="top: 70px; left: 30px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2.4px 2px 2px stretch repeat;"></div>
<div style="top: 70px; left: 50px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2.4px 2px round repeat;"></div>
<div style="top: 70px; left: 70px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 2.4px repeat stretch;"></div>
<div style="top: 70px; left: 90px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2.4px 2.4px 2.4px 2.4px round stretch;"></div>
<div style="top: 70px; left: 110px; -moz-border-image: url(random-10x10.png) 3 2 2 3 stretch round; border-width: 2.4px 2px 2px 2px;"></div> <div style="top: 70px; left: 110px; -moz-border-image: url(random-10x10.png) 3 2 2 3 stretch round; border-width: 2.4px 2px 2px 2px;"></div>
<div style="top: 70px; left: 130px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round repeat; border-width: 2px 2.4px 2px 2px;"></div> <div style="top: 70px; left: 130px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round repeat; border-width: 2px 2.4px 2px 2px;"></div>
<div style="top: 70px; left: 150px; -moz-border-image: url(random-10x10.png) 3 2 2 3 stretch repeat; border-width: 2px 2px 2.4px 2px;"></div> <div style="top: 70px; left: 150px; -moz-border-image: url(random-10x10.png) 3 2 2 3 stretch repeat; border-width: 2px 2px 2.4px 2px;"></div>

View File

@ -5,50 +5,30 @@
<style type="text/css"> <style type="text/css">
html, body { margin: 0; border: none; padding: 0; } html, body { margin: 0; border: none; padding: 0; }
div { position: absolute; height: 10px; width: 10px; } div { position: absolute; height: 10px; width: 10px; border-style: solid;}
</style> </style>
</head> </head>
<body> <body>
<div style="top: 10px; left: 10px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2.9px 2px 2px 2px;"></div>
<div style="top: 10px; left: 30px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2.9px 2px 2px;"></div>
<div style="top: 10px; left: 50px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2.9px 2px;"></div>
<div style="top: 10px; left: 70px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 2.9px;"></div>
<div style="top: 10px; left: 90px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2.9px 2.9px 2.9px 2.9px;"></div>
<div style="top: 10px; left: 110px; -moz-border-image: url(random-10x10.png) 3 2 2 3; border-width: 2.9px 2px 2px 2px;"></div> <div style="top: 10px; left: 110px; -moz-border-image: url(random-10x10.png) 3 2 2 3; border-width: 2.9px 2px 2px 2px;"></div>
<div style="top: 10px; left: 130px; -moz-border-image: url(random-10x10.png) 3 2 2 3 stretch; border-width: 2px 2.9px 2px 2px;"></div> <div style="top: 10px; left: 130px; -moz-border-image: url(random-10x10.png) 3 2 2 3 stretch; border-width: 2px 2.9px 2px 2px;"></div>
<div style="top: 10px; left: 150px; -moz-border-image: url(random-10x10.png) 3 2 2 3 stretch stretch; border-width: 2px 2px 2.9px 2px;"></div> <div style="top: 10px; left: 150px; -moz-border-image: url(random-10x10.png) 3 2 2 3 stretch stretch; border-width: 2px 2px 2.9px 2px;"></div>
<div style="top: 10px; left: 170px; -moz-border-image: url(random-10x10.png) 3 2 2 3; border-width: 2px 2px 2px 2.9px;"></div> <div style="top: 10px; left: 170px; -moz-border-image: url(random-10x10.png) 3 2 2 3; border-width: 2px 2px 2px 2.9px;"></div>
<div style="top: 10px; left: 190px; -moz-border-image: url(random-10x10.png) 3 2 2 3; border-width: 2.9px 2.9px 2.9px 2.9px;"></div> <div style="top: 10px; left: 190px; -moz-border-image: url(random-10x10.png) 3 2 2 3; border-width: 2.9px 2.9px 2.9px 2.9px;"></div>
<div style="top: 30px; left: 10px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2.9px 2px 2px 2px round;"></div>
<div style="top: 30px; left: 30px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2.9px 2px 2px round round;"></div>
<div style="top: 30px; left: 50px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2.9px 2px round round;"></div>
<div style="top: 30px; left: 70px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 2.9px round;"></div>
<div style="top: 30px; left: 90px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2.9px 2.9px 2.9px 2.9px round;"></div>
<div style="top: 30px; left: 110px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round round; border-width: 2.9px 2px 2px 2px;"></div> <div style="top: 30px; left: 110px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round round; border-width: 2.9px 2px 2px 2px;"></div>
<div style="top: 30px; left: 130px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2.9px 2px 2px;"></div> <div style="top: 30px; left: 130px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2.9px 2px 2px;"></div>
<div style="top: 30px; left: 150px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2px 2.9px 2px;"></div> <div style="top: 30px; left: 150px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2px 2.9px 2px;"></div>
<div style="top: 30px; left: 170px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2px 2px 2.9px;"></div> <div style="top: 30px; left: 170px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2px 2px 2.9px;"></div>
<div style="top: 30px; left: 190px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round round; border-width: 2.9px 2.9px 2.9px 2.9px;"></div> <div style="top: 30px; left: 190px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round round; border-width: 2.9px 2.9px 2.9px 2.9px;"></div>
<div style="top: 50px; left: 10px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2.9px 2px 2px 2px repeat;"></div>
<div style="top: 50px; left: 30px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2.9px 2px 2px repeat repeat;"></div>
<div style="top: 50px; left: 50px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2.9px 2px repeat repeat;"></div>
<div style="top: 50px; left: 70px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 2.9px repeat;"></div>
<div style="top: 50px; left: 90px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2.9px 2.9px 2.9px 2.9px repeat;"></div>
<div style="top: 50px; left: 110px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat repeat; border-width: 2.9px 2px 2px 2px;"></div> <div style="top: 50px; left: 110px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat repeat; border-width: 2.9px 2px 2px 2px;"></div>
<div style="top: 50px; left: 130px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2.9px 2px 2px;"></div> <div style="top: 50px; left: 130px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2.9px 2px 2px;"></div>
<div style="top: 50px; left: 150px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2px 2.9px 2px;"></div> <div style="top: 50px; left: 150px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2px 2.9px 2px;"></div>
<div style="top: 50px; left: 170px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2px 2px 2.9px;"></div> <div style="top: 50px; left: 170px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2px 2px 2.9px;"></div>
<div style="top: 50px; left: 190px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat repeat; border-width: 2.9px 2.9px 2.9px 2.9px;"></div> <div style="top: 50px; left: 190px; -moz-border-image: url(random-10x10.png) 3 2 2 3 repeat repeat; border-width: 2.9px 2.9px 2.9px 2.9px;"></div>
<div style="top: 70px; left: 10px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2.9px 2px 2px 2px repeat round;"></div>
<div style="top: 70px; left: 30px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2.9px 2px 2px stretch repeat;"></div>
<div style="top: 70px; left: 50px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2.9px 2px round repeat;"></div>
<div style="top: 70px; left: 70px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2px 2px 2px 2.9px repeat stretch;"></div>
<div style="top: 70px; left: 90px; -moz-border-image: url(random-10x10.png) 3 2 2 3 / 2.9px 2.9px 2.9px 2.9px round stretch;"></div>
<div style="top: 70px; left: 110px; -moz-border-image: url(random-10x10.png) 3 2 2 3 stretch round; border-width: 2.9px 2px 2px 2px;"></div> <div style="top: 70px; left: 110px; -moz-border-image: url(random-10x10.png) 3 2 2 3 stretch round; border-width: 2.9px 2px 2px 2px;"></div>
<div style="top: 70px; left: 130px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round repeat; border-width: 2px 2.9px 2px 2px;"></div> <div style="top: 70px; left: 130px; -moz-border-image: url(random-10x10.png) 3 2 2 3 round repeat; border-width: 2px 2.9px 2px 2px;"></div>
<div style="top: 70px; left: 150px; -moz-border-image: url(random-10x10.png) 3 2 2 3 stretch repeat; border-width: 2px 2px 2.9px 2px;"></div> <div style="top: 70px; left: 150px; -moz-border-image: url(random-10x10.png) 3 2 2 3 stretch repeat; border-width: 2px 2px 2.9px 2px;"></div>

View File

@ -1,7 +1,6 @@
<html> <html>
<body> <body>
<div style="margin-left: -3px; margin-top: -3px; <div style="height: 100px; width: 100px;
height: 100px; width: 100px; -moz-border-image: url('lime100x100.png') 0 fill;"/>
-moz-border-image: url('lime100x100.svg') 0;"/>
</body> </body>
</html> </html>

View File

@ -1,7 +1,6 @@
<html> <html>
<body> <body>
<div style="margin-left: -3px; margin-top: -3px; <div style="height: 100px; width: 100px;
height: 100px; width: 100px; -moz-border-image: url('lime100x100-noSVGDimensions.svg') 0 fill;"/>
-moz-border-image: url('lime100x100-noSVGDimensions.svg') 0;"/>
</body> </body>
</html> </html>

View File

@ -233,19 +233,73 @@ var gCSSProperties = {
"-moz-border-image": { "-moz-border-image": {
domProp: "MozBorderImage", domProp: "MozBorderImage",
inherited: false, inherited: false,
type: CSS_TYPE_LONGHAND, type: CSS_TYPE_TRUE_SHORTHAND,
subproperties: [ "-moz-border-image-source", "-moz-border-image-slice", "-moz-border-image-width", "-moz-border-image-outset", "-moz-border-image-repeat" ],
initial_values: [ "none" ], initial_values: [ "none" ],
other_values: [ "url('border.png') 27 27 27 27", other_values: [ "url('border.png') 27 27 27 27",
"url('border.png') 27", "url('border.png') 27",
"stretch url('border.png')",
"url('border.png') 27 fill",
"url('border.png') 27 27 27 27 repeat", "url('border.png') 27 27 27 27 repeat",
"repeat url('border.png') 27 27 27 27",
"url('border.png') repeat 27 27 27 27",
"url('border.png') fill 27 27 27 27 repeat",
"url('border.png') 27 27 27 27 / 1em", "url('border.png') 27 27 27 27 / 1em",
"27 27 27 27 / 1em url('border.png') ",
"url('border.png') 27 27 27 27 / 10 10 10 / 10 10 repeat",
"repeat 27 27 27 27 / 10 10 10 / 10 10 url('border.png')",
"url('border.png') 27 27 27 27 / / 10 10 1em",
"fill 27 27 27 27 / / 10 10 1em url('border.png')",
"url('border.png') 27 27 27 27 /",
"url('border.png') 27 27 27 27 / 1em 1em 1em 1em repeat", "url('border.png') 27 27 27 27 / 1em 1em 1em 1em repeat",
"url('border.png') 27 27 27 27 / 1em 1em 1em 1em stretch round" ], "url('border.png') 27 27 27 27 / 1em 1em 1em 1em stretch round" ],
invalid_values: [ "url('border.png')", invalid_values: [ "url('border.png') 27 27 27 27 27",
"url('border.png') 27 27 27 27 27",
"url('border.png') 27 27 27 27 / 1em 1em 1em 1em 1em", "url('border.png') 27 27 27 27 / 1em 1em 1em 1em 1em",
"url('border.png') / repeat", "url('border.png') fill",
"url('border.png') 27 27 27 27 /" ] "url('border.png') fill repeat",
"fill repeat",
"url('border.png') fill / 1em",
"url('border.png') / repeat" ]
},
"-moz-border-image-source": {
domProp: "MozBorderImageSource",
inherited: false,
type: CSS_TYPE_LONGHAND,
initial_values: [ "none" ],
other_values: [ "url('border.png')" ],
invalid_values: [ "url('border.png') url('border.png')" ]
},
"-moz-border-image-slice": {
domProp: "MozBorderImageSlice",
inherited: false,
type: CSS_TYPE_LONGHAND,
initial_values: [ "100%", "100% 100% 100% 100%" ],
other_values: [ "0%", "10", "10 100% 0 2", "0 0 0 0", "fill 10 10", "10 10 fill" ],
invalid_values: [ "-10%", "-10", "10 10 10 10 10", "10 10 10 10 -10", "10px", "-10px", "fill", "fill fill 10px", "10px fill fill" ]
},
"-moz-border-image-width": {
domProp: "MozBorderImageWidth",
inherited: false,
type: CSS_TYPE_LONGHAND,
initial_values: [ "1", "1 1 1 1" ],
other_values: [ "0", "0%", "0px", "auto auto auto auto", "10 10% auto 15px", "10px 10px 10px 10px", "10", "10 10", "10 10 10" ],
invalid_values: [ "-10", "-10px", "-10%", "10 10 10 10 10", "10 10 10 10 auto", "auto auto auto auto auto" ]
},
"-moz-border-image-outset": {
domProp: "MozBorderImageOutset",
inherited: false,
type: CSS_TYPE_LONGHAND,
initial_values: [ "0", "0 0 0 0" ],
other_values: [ "10px", "10", "10 10", "10 10 10", "10 10 10 10", "10px 10 10 10px" ],
invalid_values: [ "-10", "-10px", "-10%", "10%", "10 10 10 10 10" ]
},
"-moz-border-image-repeat": {
domProp: "MozBorderImageRepeat",
inherited: false,
type: CSS_TYPE_LONGHAND,
initial_values: [ "stretch", "stretch stretch" ],
other_values: [ "round", "repeat", "stretch round", "repeat round", "stretch repeat", "round round", "repeat repeat" ],
invalid_values: [ "none", "stretch stretch stretch", "0", "10", "0%", "0px" ]
}, },
"-moz-border-left-colors": { "-moz-border-left-colors": {
domProp: "MozBorderLeftColors", domProp: "MozBorderLeftColors",
@ -1552,7 +1606,7 @@ var gCSSProperties = {
domProp: "border", domProp: "border",
inherited: false, inherited: false,
type: CSS_TYPE_TRUE_SHORTHAND, type: CSS_TYPE_TRUE_SHORTHAND,
subproperties: [ "border-bottom-color", "border-bottom-style", "border-bottom-width", "border-left-color", "border-left-style", "border-left-width", "border-right-color", "border-right-style", "border-right-width", "border-top-color", "border-top-style", "border-top-width", "-moz-border-top-colors", "-moz-border-right-colors", "-moz-border-bottom-colors", "-moz-border-left-colors", "-moz-border-image" ], subproperties: [ "border-bottom-color", "border-bottom-style", "border-bottom-width", "border-left-color", "border-left-style", "border-left-width", "border-right-color", "border-right-style", "border-right-width", "border-top-color", "border-top-style", "border-top-width", "-moz-border-top-colors", "-moz-border-right-colors", "-moz-border-bottom-colors", "-moz-border-left-colors", "-moz-border-image-source", "-moz-border-image-slice", "-moz-border-image-width", "-moz-border-image-outset", "-moz-border-image-repeat" ],
initial_values: [ "none", "medium", "currentColor", "thin", "none medium currentcolor", "-moz-calc(4px - 1px) none" ], initial_values: [ "none", "medium", "currentColor", "thin", "none medium currentcolor", "-moz-calc(4px - 1px) none" ],
other_values: [ "solid", "medium solid", "green solid", "10px solid", "thick solid", "-moz-calc(2px) solid blue" ], other_values: [ "solid", "medium solid", "green solid", "10px solid", "thick solid", "-moz-calc(2px) solid blue" ],
invalid_values: [ "5%" ] invalid_values: [ "5%" ]

View File

@ -169,9 +169,9 @@ is(e.style.MozTransition, "", "should not have -moz-transition shorthand (lists
// Check that the 'border' shorthand resets 'border-image' and // Check that the 'border' shorthand resets 'border-image' and
// '-moz-border-*-colors', but that other 'border-*' shorthands don't // '-moz-border-*-colors', but that other 'border-*' shorthands don't
// (bug 482692). // (bug 482692).
e.setAttribute("style", '-moz-border-image: url("foo.png") 5 5 5 5; border-left: medium solid green'); e.setAttribute("style", '-moz-border-image: url("foo.png") 5 5 5 5 / 5 5 5 5 / 5 5 5 5 repeat repeat; border-left: medium solid green');
is(e.style.cssText, is(e.style.cssText,
'-moz-border-image: url("foo.png") 5 5 5 5; border-left: medium solid green;', '-moz-border-image: url("foo.png") 5 5 5 5 / 5 5 5 5 / 5 5 5 5 repeat repeat; border-left: medium solid green;',
"border-left does NOT reset -moz-border-image"); "border-left does NOT reset -moz-border-image");
e.setAttribute("style", '-moz-border-image: url("foo.png") 5 5 5 5; border: medium solid green'); e.setAttribute("style", '-moz-border-image: url("foo.png") 5 5 5 5; border: medium solid green');
is(e.style.cssText, is(e.style.cssText,