mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
Fix glitches in border-image drawing. (Bug 449647) r=robarnold, sr=vlad
This commit is contained in:
L. David Baron
parent
39530e9214
commit
8da1c2fa2e
@ -273,7 +273,7 @@ static void DrawBorderImageSide(gfxContext *aThebesContext,
|
||||
nsIDeviceContext* aDeviceContext,
|
||||
imgIContainer* aImage,
|
||||
gfxRect& aDestRect,
|
||||
gfxSize& aInterSize,
|
||||
gfxSize aInterSize,
|
||||
gfxRect& aSourceRect,
|
||||
PRUint8 aHFillType,
|
||||
PRUint8 aVFillType);
|
||||
@ -1976,7 +1976,8 @@ DrawBorderImage(nsPresContext* aPresContext,
|
||||
clipRect.pos.y = dc->AppUnitsToGfxUnits(outerRect.y);
|
||||
clipRect.size.width = dc->AppUnitsToGfxUnits(outerRect.width);
|
||||
clipRect.size.height = dc->AppUnitsToGfxUnits(outerRect.height);
|
||||
thebesCtx->UserToDevicePixelSnapped(clipRect);
|
||||
if (thebesCtx->UserToDevicePixelSnapped(clipRect))
|
||||
clipRect = thebesCtx->DeviceToUser(clipRect);
|
||||
|
||||
thebesCtx->Save();
|
||||
thebesCtx->PushGroup(gfxASurface::CONTENT_COLOR_ALPHA);
|
||||
@ -2158,7 +2159,7 @@ DrawBorderImageSide(gfxContext *aThebesContext,
|
||||
nsIDeviceContext* aDeviceContext,
|
||||
imgIContainer* aImage,
|
||||
gfxRect& aDestRect,
|
||||
gfxSize& aInterSize,
|
||||
gfxSize aInterSize, // non-ref to allow aliasing
|
||||
gfxRect& aSourceRect,
|
||||
PRUint8 aHFillType,
|
||||
PRUint8 aVFillType)
|
||||
@ -2172,8 +2173,10 @@ DrawBorderImageSide(gfxContext *aThebesContext,
|
||||
(PRInt32)aSourceRect.size.height);
|
||||
|
||||
// where the actual border ends up being rendered
|
||||
aThebesContext->UserToDevicePixelSnapped(aDestRect);
|
||||
aThebesContext->UserToDevicePixelSnapped(aSourceRect);
|
||||
if (aThebesContext->UserToDevicePixelSnapped(aDestRect))
|
||||
aDestRect = aThebesContext->DeviceToUser(aDestRect);
|
||||
if (aThebesContext->UserToDevicePixelSnapped(aSourceRect))
|
||||
aSourceRect = aThebesContext->DeviceToUser(aSourceRect);
|
||||
|
||||
if (aDestRect.size.height < 1.0 ||
|
||||
aDestRect.size.width < 1.0)
|
||||
|
||||
167
layout/reftests/border-image/multicolor-image-4-ref.html
Normal file
167
layout/reftests/border-image/multicolor-image-4-ref.html
Normal file
@ -0,0 +1,167 @@
|
||||
<!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">
|
||||
|
||||
table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
|
||||
td { padding: 0; }
|
||||
table { margin-bottom: 6px; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div style="padding-top: 100px; padding-left: 100px">
|
||||
<table>
|
||||
<col style="width: 22px">
|
||||
<col style="width: 18px">
|
||||
<col style="width: 12px">
|
||||
<tr style="height: 12px">
|
||||
<td style="background: #93bd5d"></td>
|
||||
<td style="background: #b55dbd"></td>
|
||||
<td style="background: #8d4921"></td>
|
||||
</tr>
|
||||
<tr style="height: 3px">
|
||||
<td style="background: #21a02c"></td>
|
||||
<td style="background: #4a298e"></td>
|
||||
<td style="background: #ef9b23"></td>
|
||||
</tr>
|
||||
<tr style="height: 24px">
|
||||
<td style="background: #9b733a"></td>
|
||||
<td style="background: #f155ad"></td>
|
||||
<td style="background: #adf3eb"></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<table>
|
||||
<col style="width: 8px">
|
||||
<col style="width: 4px">
|
||||
<col style="width: 2px">
|
||||
<tr style="height: 9px">
|
||||
<td style="background: #93bd5d"></td>
|
||||
<td style="background: #b55dbd"></td>
|
||||
<td style="background: #8d4921"></td>
|
||||
</tr>
|
||||
<tr style="height: 51px">
|
||||
<td style="background: #21a02c"></td>
|
||||
<td style="background: #4a298e"></td>
|
||||
<td style="background: #ef9b23"></td>
|
||||
</tr>
|
||||
<tr style="height: 0px">
|
||||
<td style="background: #9b733a"></td>
|
||||
<td style="background: #f155ad"></td>
|
||||
<td style="background: #adf3eb"></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<table>
|
||||
<col style="width: 6px">
|
||||
<col style="width: 34px">
|
||||
<col style="width: 4px">
|
||||
<tr style="height: 30px">
|
||||
<td style="background: #93bd5d"></td>
|
||||
<td style="background: #b55dbd"></td>
|
||||
<td style="background: #8d4921"></td>
|
||||
</tr>
|
||||
<tr style="height: 24px">
|
||||
<td style="background: #21a02c"></td>
|
||||
<td style="background: #4a298e"></td>
|
||||
<td style="background: #ef9b23"></td>
|
||||
</tr>
|
||||
<tr style="height: 15px">
|
||||
<td style="background: #9b733a"></td>
|
||||
<td style="background: #f155ad"></td>
|
||||
<td style="background: #adf3eb"></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<table>
|
||||
<col style="width: 0px">
|
||||
<col style="width: 16px">
|
||||
<col style="width: 14px">
|
||||
<tr style="height: 15px">
|
||||
<td style="background: #93bd5d"></td>
|
||||
<td style="background: #b55dbd"></td>
|
||||
<td style="background: #8d4921"></td>
|
||||
</tr>
|
||||
<tr style="height: 15px">
|
||||
<td style="background: #21a02c"></td>
|
||||
<td style="background: #4a298e"></td>
|
||||
<td style="background: #ef9b23"></td>
|
||||
</tr>
|
||||
<tr style="height: 3px">
|
||||
<td style="background: #9b733a"></td>
|
||||
<td style="background: #f155ad"></td>
|
||||
<td style="background: #adf3eb"></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<table>
|
||||
<col style="width: 4px">
|
||||
<col style="width: 0px">
|
||||
<col style="width: 16px">
|
||||
<tr style="height: 12px">
|
||||
<td style="background: #93bd5d"></td>
|
||||
<td style="background: #b55dbd"></td>
|
||||
<td style="background: #8d4921"></td>
|
||||
</tr>
|
||||
<tr style="height: 24px">
|
||||
<td style="background: #21a02c"></td>
|
||||
<td style="background: #4a298e"></td>
|
||||
<td style="background: #ef9b23"></td>
|
||||
</tr>
|
||||
<tr style="height: 30px">
|
||||
<td style="background: #9b733a"></td>
|
||||
<td style="background: #f155ad"></td>
|
||||
<td style="background: #adf3eb"></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<table>
|
||||
<col style="width: 4px">
|
||||
<col style="width: 34px">
|
||||
<col style="width: 0px">
|
||||
<tr style="height: 12px">
|
||||
<td style="background: #93bd5d"></td>
|
||||
<td style="background: #b55dbd"></td>
|
||||
<td style="background: #8d4921"></td>
|
||||
</tr>
|
||||
<tr style="height: 0px">
|
||||
<td style="background: #21a02c"></td>
|
||||
<td style="background: #4a298e"></td>
|
||||
<td style="background: #ef9b23"></td>
|
||||
</tr>
|
||||
<tr style="height: 30px">
|
||||
<td style="background: #9b733a"></td>
|
||||
<td style="background: #f155ad"></td>
|
||||
<td style="background: #adf3eb"></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<table>
|
||||
<col style="width: 0px">
|
||||
<col style="width: 34px">
|
||||
<col style="width: 6px">
|
||||
<tr style="height: 3px">
|
||||
<td style="background: #93bd5d"></td>
|
||||
<td style="background: #b55dbd"></td>
|
||||
<td style="background: #8d4921"></td>
|
||||
</tr>
|
||||
<tr style="height: 0px">
|
||||
<td style="background: #21a02c"></td>
|
||||
<td style="background: #4a298e"></td>
|
||||
<td style="background: #ef9b23"></td>
|
||||
</tr>
|
||||
<tr style="height: 0px">
|
||||
<td style="background: #9b733a"></td>
|
||||
<td style="background: #f155ad"></td>
|
||||
<td style="background: #adf3eb"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
113
layout/reftests/border-image/multicolor-image-4.html
Normal file
113
layout/reftests/border-image/multicolor-image-4.html
Normal file
@ -0,0 +1,113 @@
|
||||
<!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">
|
||||
|
||||
/**
|
||||
* This is a copy of multicolor-image-2.html with a few changes:
|
||||
* (1) the whole thing is inside a -moz-transform
|
||||
* (2) different border-images have different values for
|
||||
* repeat/stretch/round
|
||||
*/
|
||||
|
||||
body {
|
||||
width: 100px;
|
||||
-moz-transform: translate(100px, 100px) scale(2,3);
|
||||
-moz-transform-origin: 0 0;
|
||||
-khtml-transform: translate(100px, 100px) scale(2,3);
|
||||
-khtml-transform-origin: 0 0;
|
||||
transform: translate(100px, 100px) scale(2,3);
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
|
||||
div {
|
||||
background: red; /* fail if this shows through */
|
||||
background-image: url('3x3multicolor.png'); /* fail if this shows through */
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
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;
|
||||
border-width: 4px 6px 8px 11px;
|
||||
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;
|
||||
border-width: 3px 1px 0px 4px;
|
||||
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;
|
||||
border-width: 10px 2px 5px 3px;
|
||||
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;
|
||||
border-width: 5px 7px 1px 0;
|
||||
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 */
|
||||
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;
|
||||
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;
|
||||
border-width: 1px 3px 0 0;
|
||||
width: 17px;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="one"></div>
|
||||
<div class="two"></div>
|
||||
<div class="three"></div>
|
||||
<div class="four"></div>
|
||||
<div class="five"></div>
|
||||
<div class="six"></div>
|
||||
<div class="seven"></div>
|
||||
</body>
|
||||
</html>
|
||||
167
layout/reftests/border-image/multicolor-image-5-ref.html
Normal file
167
layout/reftests/border-image/multicolor-image-5-ref.html
Normal file
@ -0,0 +1,167 @@
|
||||
<!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">
|
||||
|
||||
table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
|
||||
td { padding: 0; }
|
||||
table { margin-bottom: 2px; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div style="padding-top: 100px; padding-left: 100px">
|
||||
<table>
|
||||
<col style="width: 11px">
|
||||
<col style="width: 9px">
|
||||
<col style="width: 6px">
|
||||
<tr style="height: 4px">
|
||||
<td style="background: #93bd5d"></td>
|
||||
<td style="background: #b55dbd"></td>
|
||||
<td style="background: #8d4921"></td>
|
||||
</tr>
|
||||
<tr style="height: 1px">
|
||||
<td style="background: #21a02c"></td>
|
||||
<td style="background: #4a298e"></td>
|
||||
<td style="background: #ef9b23"></td>
|
||||
</tr>
|
||||
<tr style="height: 8px">
|
||||
<td style="background: #9b733a"></td>
|
||||
<td style="background: #f155ad"></td>
|
||||
<td style="background: #adf3eb"></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<table>
|
||||
<col style="width: 4px">
|
||||
<col style="width: 2px">
|
||||
<col style="width: 1px">
|
||||
<tr style="height: 3px">
|
||||
<td style="background: #93bd5d"></td>
|
||||
<td style="background: #b55dbd"></td>
|
||||
<td style="background: #8d4921"></td>
|
||||
</tr>
|
||||
<tr style="height: 17px">
|
||||
<td style="background: #21a02c"></td>
|
||||
<td style="background: #4a298e"></td>
|
||||
<td style="background: #ef9b23"></td>
|
||||
</tr>
|
||||
<tr style="height: 0px">
|
||||
<td style="background: #9b733a"></td>
|
||||
<td style="background: #f155ad"></td>
|
||||
<td style="background: #adf3eb"></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<table>
|
||||
<col style="width: 3px">
|
||||
<col style="width: 17px">
|
||||
<col style="width: 2px">
|
||||
<tr style="height: 10px">
|
||||
<td style="background: #93bd5d"></td>
|
||||
<td style="background: #b55dbd"></td>
|
||||
<td style="background: #8d4921"></td>
|
||||
</tr>
|
||||
<tr style="height: 8px">
|
||||
<td style="background: #21a02c"></td>
|
||||
<td style="background: #4a298e"></td>
|
||||
<td style="background: #ef9b23"></td>
|
||||
</tr>
|
||||
<tr style="height: 5px">
|
||||
<td style="background: #9b733a"></td>
|
||||
<td style="background: #f155ad"></td>
|
||||
<td style="background: #adf3eb"></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<table>
|
||||
<col style="width: 0px">
|
||||
<col style="width: 8px">
|
||||
<col style="width: 7px">
|
||||
<tr style="height: 5px">
|
||||
<td style="background: #93bd5d"></td>
|
||||
<td style="background: #b55dbd"></td>
|
||||
<td style="background: #8d4921"></td>
|
||||
</tr>
|
||||
<tr style="height: 5px">
|
||||
<td style="background: #21a02c"></td>
|
||||
<td style="background: #4a298e"></td>
|
||||
<td style="background: #ef9b23"></td>
|
||||
</tr>
|
||||
<tr style="height: 1px">
|
||||
<td style="background: #9b733a"></td>
|
||||
<td style="background: #f155ad"></td>
|
||||
<td style="background: #adf3eb"></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<table>
|
||||
<col style="width: 2px">
|
||||
<col style="width: 0px">
|
||||
<col style="width: 8px">
|
||||
<tr style="height: 4px">
|
||||
<td style="background: #93bd5d"></td>
|
||||
<td style="background: #b55dbd"></td>
|
||||
<td style="background: #8d4921"></td>
|
||||
</tr>
|
||||
<tr style="height: 8px">
|
||||
<td style="background: #21a02c"></td>
|
||||
<td style="background: #4a298e"></td>
|
||||
<td style="background: #ef9b23"></td>
|
||||
</tr>
|
||||
<tr style="height: 10px">
|
||||
<td style="background: #9b733a"></td>
|
||||
<td style="background: #f155ad"></td>
|
||||
<td style="background: #adf3eb"></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<table>
|
||||
<col style="width: 2px">
|
||||
<col style="width: 17px">
|
||||
<col style="width: 0px">
|
||||
<tr style="height: 4px">
|
||||
<td style="background: #93bd5d"></td>
|
||||
<td style="background: #b55dbd"></td>
|
||||
<td style="background: #8d4921"></td>
|
||||
</tr>
|
||||
<tr style="height: 0px">
|
||||
<td style="background: #21a02c"></td>
|
||||
<td style="background: #4a298e"></td>
|
||||
<td style="background: #ef9b23"></td>
|
||||
</tr>
|
||||
<tr style="height: 10px">
|
||||
<td style="background: #9b733a"></td>
|
||||
<td style="background: #f155ad"></td>
|
||||
<td style="background: #adf3eb"></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<table>
|
||||
<col style="width: 0px">
|
||||
<col style="width: 17px">
|
||||
<col style="width: 3px">
|
||||
<tr style="height: 1px">
|
||||
<td style="background: #93bd5d"></td>
|
||||
<td style="background: #b55dbd"></td>
|
||||
<td style="background: #8d4921"></td>
|
||||
</tr>
|
||||
<tr style="height: 0px">
|
||||
<td style="background: #21a02c"></td>
|
||||
<td style="background: #4a298e"></td>
|
||||
<td style="background: #ef9b23"></td>
|
||||
</tr>
|
||||
<tr style="height: 0px">
|
||||
<td style="background: #9b733a"></td>
|
||||
<td style="background: #f155ad"></td>
|
||||
<td style="background: #adf3eb"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
114
layout/reftests/border-image/multicolor-image-5.html
Normal file
114
layout/reftests/border-image/multicolor-image-5.html
Normal file
@ -0,0 +1,114 @@
|
||||
<!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">
|
||||
|
||||
/**
|
||||
* This is a copy of multicolor-image-2.html with a few changes:
|
||||
* (1) the whole thing is inside a -moz-transform
|
||||
* (2) different border-images have different values for
|
||||
* repeat/stretch/round
|
||||
*/
|
||||
|
||||
body {
|
||||
width: 100px;
|
||||
/* This transform has no scale, and thus tests pixel-snapping codepaths! */
|
||||
-moz-transform: translate(100px, 100px);
|
||||
-moz-transform-origin: 0 0;
|
||||
-khtml-transform: translate(100px, 100px);
|
||||
-khtml-transform-origin: 0 0;
|
||||
transform: translate(100px, 100px);
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
|
||||
div {
|
||||
background: red; /* fail if this shows through */
|
||||
background-image: url('3x3multicolor.png'); /* fail if this shows through */
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
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;
|
||||
border-width: 4px 6px 8px 11px;
|
||||
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;
|
||||
border-width: 3px 1px 0px 4px;
|
||||
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;
|
||||
border-width: 10px 2px 5px 3px;
|
||||
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;
|
||||
border-width: 5px 7px 1px 0;
|
||||
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 */
|
||||
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;
|
||||
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;
|
||||
border-width: 1px 3px 0 0;
|
||||
width: 17px;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="one"></div>
|
||||
<div class="two"></div>
|
||||
<div class="three"></div>
|
||||
<div class="four"></div>
|
||||
<div class="five"></div>
|
||||
<div class="six"></div>
|
||||
<div class="seven"></div>
|
||||
</body>
|
||||
</html>
|
||||
@ -4,4 +4,6 @@ fails-if(MOZ_WIDGET_TOOLKIT=="cocoa") == solid-image-2.html solid-image-2-ref.ht
|
||||
== multicolor-image-1.html multicolor-image-1-ref.html
|
||||
== multicolor-image-2.html multicolor-image-2-ref.html
|
||||
== multicolor-image-3.html multicolor-image-3-ref.html
|
||||
== multicolor-image-4.html multicolor-image-4-ref.html
|
||||
== multicolor-image-5.html multicolor-image-5-ref.html
|
||||
!= repeat-image-1.html repeat-image-1-ref.html
|
||||
|
||||
Loading…
Reference in New Issue
Block a user