wine/gecko
0
0
Fork 0
mirror of https://gitlab.winehq.org/wine/wine-gecko.git synced 2024-09-13 09:24:08 -07:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
--HG--
extra : rebase_source : b9fb3987c8540457fa1f7b3e27420f208207a9c0
This commit is contained in:
William Chen 2011-12-22 18:34:53 -05:00
parent 1a42df4570
commit 1528f2b910
50 changed files with 581 additions and 375 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
layout/base/tests/Makefile.in
View File

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

138
layout/base/tests/test_bug445810.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>

4
layout/reftests/border-image/470250-1.html
View File

@ -5,7 +5,9 @@
div {
width: 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>
</head><body>

4
layout/reftests/border-image/470250-2.html
View File

@ -6,7 +6,9 @@ table {
width: 48px;
height: 48px;
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>
</head><body>

37
layout/reftests/border-image/border-image-nofill-1-ref.html Normal file
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>

20
layout/reftests/border-image/border-image-nofill-1.html Normal file
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>

15
layout/reftests/border-image/border-image-outset-1-ref.html Normal file
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>

21
layout/reftests/border-image/border-image-outset-1a.html Normal file
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>

22
layout/reftests/border-image/border-image-outset-1b.html Normal file
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>

21
layout/reftests/border-image/border-image-outset-1c.html Normal file
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>

15
layout/reftests/border-image/border-image-outset-move-1-ref.html Normal file
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>

30
layout/reftests/border-image/border-image-outset-move-1.html Normal file
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>

15
layout/reftests/border-image/border-image-outset-resize-1-ref.html Normal file
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>

30
layout/reftests/border-image/border-image-outset-resize-1.html Normal file
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>

15
layout/reftests/border-image/border-image-width-1-ref.html Normal file
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>

20
layout/reftests/border-image/border-image-width-1a.html Normal file
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>

20
layout/reftests/border-image/border-image-width-1b.html Normal file
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>

21
layout/reftests/border-image/border-image-width-1c.html Normal file
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>

3
layout/reftests/border-image/center-scaling-1.html
View File

@ -2,7 +2,8 @@
<style>
div {
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;
height: 108px;
}

3
layout/reftests/border-image/center-scaling-2.html
View File

@ -2,7 +2,8 @@
<style>
div {
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;
height: 108px;
}

3
layout/reftests/border-image/center-scaling-3.html
View File

@ -2,7 +2,8 @@
<style>
div {
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;
height: 108px;
}

3
layout/reftests/border-image/center-scaling-4b.html
View File

@ -2,7 +2,8 @@
<style>
div {
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;
height: 108px;
}

3
layout/reftests/border-image/center-scaling-4l.html
View File

@ -2,7 +2,8 @@
<style>
div {
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;
height: 108px;
}

3
layout/reftests/border-image/center-scaling-4lr.html
View File

@ -2,7 +2,8 @@
<style>
div {
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;
height: 108px;
}

3
layout/reftests/border-image/center-scaling-4r.html
View File

@ -2,7 +2,8 @@
<style>
div {
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;
height: 108px;
}

3
layout/reftests/border-image/center-scaling-4t.html
View File

@ -2,7 +2,8 @@
<style>
div {
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;
height: 108px;
}

3
layout/reftests/border-image/center-scaling-4tb.html
View File

@ -2,7 +2,8 @@
<style>
div {
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;
height: 108px;
}

1
layout/reftests/border-image/different-h-v-1.html
View File

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

1
layout/reftests/border-image/different-h-v-2.html
View File

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

8
layout/reftests/border-image/multicolor-image-1.html
View File

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

60
layout/reftests/border-image/multicolor-image-2.html
View File

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

32
layout/reftests/border-image/multicolor-image-3-ref.html
View File

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

25
layout/reftests/border-image/multicolor-image-3.html
View File

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

60
layout/reftests/border-image/multicolor-image-4.html
View File

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

54
layout/reftests/border-image/multicolor-image-5.html
View File

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

10
layout/reftests/border-image/reftest.list
View File

@ -1,4 +1,5 @@
== 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-2a.html solid-image-2-ref.html
== multicolor-image-1.html multicolor-image-1-ref.html
@ -24,3 +25,12 @@
== center-scaling-4lr.html center-scaling-4lr-ref.html
== side-scaling-1h.html side-scaling-1h-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

16
layout/reftests/border-image/repeat-image-1.html
View File

@ -9,17 +9,21 @@
div.p1 {
background: red; /* 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;
-khtml-border-image: url('4x4multicolor.png') 1 1 1 1 / 1px 3px repeat;
border-image: url('4x4multicolor.png') 1 1 1 1 / 1px 3px repeat;
border-width: 1px 3px;
border-style: solid;
-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 {
background: red; /* 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;
-khtml-border-image: url('4x4multicolor.png') 1 1 1 1 / 1px 3px;
border-image: url('4x4multicolor.png') 1 1 1 1 / 1px 3px;
border-width: 1px 3px;
border-style: solid;
-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>

8
layout/reftests/border-image/solid-image-1.html
View File

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

19
layout/reftests/border-image/solid-image-1a.html Normal file
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>

8
layout/reftests/border-image/solid-image-2.html
View File

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

8
layout/reftests/border-image/solid-image-2a.html
View File

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

2
layout/reftests/bugs/468473-1.xul
View File

@ -3,7 +3,7 @@
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<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" />
</hbox>

22
layout/reftests/pixel-rounding/border-image-width-0.html
View File

@ -5,50 +5,30 @@
<style type="text/css">
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>
</head>
<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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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>

22
layout/reftests/pixel-rounding/border-image-width-10.html
View File

@ -5,50 +5,30 @@
<style type="text/css">
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>
</head>
<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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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>

22
layout/reftests/pixel-rounding/border-image-width-4.html
View File

@ -5,50 +5,30 @@
<style type="text/css">
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>
</head>
<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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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>

22
layout/reftests/pixel-rounding/border-image-width-9.html
View File

@ -5,50 +5,30 @@
<style type="text/css">
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>
</head>
<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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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>

5
layout/reftests/svg/as-image/border-image-simple-1.html
View File

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

5
layout/reftests/svg/as-image/border-image-simple-2.html
View File

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

66
layout/style/test/property_database.js
View File

@ -233,19 +233,73 @@ var gCSSProperties = {
"-moz-border-image": {
domProp: "MozBorderImage",
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" ],
other_values: [ "url('border.png') 27 27 27 27",
"url('border.png') 27",
"stretch url('border.png')",
"url('border.png') 27 fill",
"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",
"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 stretch round" ],
invalid_values: [ "url('border.png')",
"url('border.png') 27 27 27 27 27",
invalid_values: [ "url('border.png') 27 27 27 27 27",
"url('border.png') 27 27 27 27 / 1em 1em 1em 1em 1em",
"url('border.png') / repeat",
"url('border.png') 27 27 27 27 /" ]
"url('border.png') fill",
"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": {
domProp: "MozBorderLeftColors",
@ -1552,7 +1606,7 @@ var gCSSProperties = {
domProp: "border",
inherited: false,
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" ],
other_values: [ "solid", "medium solid", "green solid", "10px solid", "thick solid", "-moz-calc(2px) solid blue" ],
invalid_values: [ "5%" ]

4
layout/style/test/test_shorthand_property_getters.html
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
// '-moz-border-*-colors', but that other 'border-*' shorthands don't
// (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,
'-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");
e.setAttribute("style", '-moz-border-image: url("foo.png") 5 5 5 5; border: medium solid green');
is(e.style.cssText,