Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-09 11:25:00 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 458131. Additional reftests for border-radius. r=zwol

Browse Source
This commit is contained in:
Jonathan Griffin 2009-11-10 11:08:38 -08:00
parent b93042d2d4
commit 375b982a74
21 changed files with 457 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
layout/reftests/border-radius/border-reduce-height-ref.html Normal file
View File

@ -0,0 +1,20 @@
<html>
<head>
<style>
div { -moz-box-sizing: border-box;
box-sizing: border-box;
width: 60px;
height: 20px;
border: 2px solid black;
background: green;
position: absolute;
top: 12px;
left: 12px;
-moz-border-radius: 4px 16px 4px 16px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

20
layout/reftests/border-radius/border-reduce-height.html Normal file
View File

@ -0,0 +1,20 @@
<html>
<head>
<style>
div { -moz-box-sizing: border-box;
box-sizing: border-box;
width: 60px;
height: 20px;
border: 2px solid black;
background: green;
position: absolute;
top: 12px;
left: 12px;
-moz-border-radius: 5px 20px 5px 20px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

21
layout/reftests/border-radius/border-value-interpret-ref.html Normal file
View File

@ -0,0 +1,21 @@
<!doctype html>
<html>
<head>
<title>Test different types of values with border radius</title>
<!-- This bug will break when bug 451134 is fixed -->
<style>
div { width: 200px;
height: 200px;
background: green;
border: 10px dashed black;
-moz-border-radius-topleft: 2em 10px;
-moz-border-radius-topright: 10px 0.5em;
-moz-border-radius-bottomright: 3em 10px;
-moz-border-radius-bottomleft: 10px 0.5em;
}
</style>
</head>
<body>
<div></div>
</body></html>

18
layout/reftests/border-radius/border-value-interpret.html Normal file
View File

@ -0,0 +1,18 @@
<!doctype html>
<html>
<head>
<title>Test different types of values with border radius</title>
<style>
div { width: 200px;
height: 200px;
background: green;
border: 10px dashed black}
/* Test interpreted values */
#test1 { -moz-border-radius: 2em 10px 3em / 10px 0.5em }
</style>
</head>
<body>
<div id="test1"></div>
</body></html>

28
layout/reftests/border-radius/clipping-1-ref.html Normal file
View File

@ -0,0 +1,28 @@
<!doctype html>
<html><head>
<title>Border clipping</title>
<style>
.div1 { width: 50px; height: 50px;
border: 10px solid black;
-moz-border-radius: 20px;
position: fixed;
left: 50px;
top: 50px;
}
.div2 {
width: 40px; height: 40px;
border: 10px solid black;
background: black;
-moz-border-radius: 10px;
position: fixed;
left: 55px;
top: 55px;
}
</style>
</head>
<body>
<div class="div1"/>
<div class="div2"/>
</body></html>

19
layout/reftests/border-radius/clipping-1.html Normal file
View File

@ -0,0 +1,19 @@
<!doctype html>
<html><head>
<title>Border clipping</title>
<style>
.div1 { width: 50px; height: 50px;
border: 10px solid black;
-moz-border-radius: 20px;
position: absolute;
background: black;
left: 50px;
top: 50px;
-moz-background-clip: padding;
}
</style>
</head>
<body>
<div class="div1"></div>
</body></html>

30
layout/reftests/border-radius/clipping-2.html Normal file
View File

@ -0,0 +1,30 @@
<!doctype html>
<html><head>
<title>Border clipping</title>
<style>
.div1 { width: 50px; height: 50px;
border: 4px dotted black;
-moz-border-radius: 10px;
position: fixed;
background: red;
left: 50px;
top: 50px;
-moz-background-clip: padding;
}
.div2 { width: 50px; height: 50px;
border: 4px dotted black;
-moz-border-radius: 10px;
position: fixed;
background: red;
left: 50px;
top: 140px;
-moz-background-clip: border;
}
</style>
</head>
<body>
<div class="div1"/>
<div class="div2"/>
</body></html>

19
layout/reftests/border-radius/clipping-3-ref.xhtml Normal file
View File

@ -0,0 +1,19 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<body style="margin: 0">
<div class="div1"/>
<svg width="200px" height="200px" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect style="fill: blue; stroke: none"
width="70" height="70"
x="50" y="50"/>
<rect style="fill: red; stroke: none"
width="70" height="70"
x="80" y="80"
rx="10" ry="10"/>
</svg>
</body>
</html>

27
layout/reftests/border-radius/clipping-3.html Normal file
View File

@ -0,0 +1,27 @@
<!doctype html>
<html><head>
<title>Border clipping</title>
<style>
.div1 { width: 50px; height: 50px;
border: 10px solid blue;
position: fixed;
background: blue;
left: 50px;
top: 50px;
}
.div2 { width: 50px; height: 50px;
border: 10px solid red;
position: fixed;
background: red;
left: 80px;
top: 80px;
-moz-border-radius: 10px;
}
</style>
</head>
<body>
<div class="div1"/>
<div class="div2"/>
</body></html>

13
layout/reftests/border-radius/corner-1-ref.svg Normal file
View File

@ -0,0 +1,13 @@
<svg width="200px" height="200px" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect style="fill: black; stroke: none"
width="70" height="50"
x="50" y="50"
rx="10" ry="10"/>
<rect style="fill: black; stroke: none"
width="70" height="40"
x="50" y="80"
rx="6" ry="6"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 311 B

18
layout/reftests/border-radius/corner-1.html Normal file
View File

@ -0,0 +1,18 @@
<!doctype html>
<html><head>
<title>Corners different</title>
<style>
.div1 { width: 50px; height: 50px;
border: 10px solid black;
-moz-border-radius: 10px 10px 6px 6px;
position: absolute;
background: black;
left: 50px;
top: 50px;
}
</style>
</head>
<body>
<div class="div1"></div>
</body></html>

12
layout/reftests/border-radius/corner-2-ref.svg Normal file
View File

@ -0,0 +1,12 @@
<svg width="200px" height="200px" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect style="fill: black; stroke: none"
width="50" height="70"
x="50" y="50"
rx="10" ry="10"/>
<rect style="fill: black; stroke: none"
width="50" height="70"
x="70" y="50"
rx="6" ry="6"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 310 B

18
layout/reftests/border-radius/corner-2.html Normal file
View File

@ -0,0 +1,18 @@
<!doctype html>
<html><head>
<title>Corners different</title>
<style>
.div1 { width: 50px; height: 50px;
border: 10px solid black;
-moz-border-radius: 10px 6px 6px 10px;
position: absolute;
background: black;
left: 50px;
top: 50px;
}
</style>
</head>
<body>
<div class="div1"></div>
</body></html>

29
layout/reftests/border-radius/curved-borders-all-styles.html Normal file
View File

@ -0,0 +1,29 @@
<html>
<head>
<title>testcase for bug #382721</title>
<style>
div {
background: beige;
margin: 1ex;
padding: 1ex;
-moz-border-radius: 3ex;
}
</style>
<script>
function ini() {
var s,i,d;
s=['none','hidden','dotted','dashed','solid',
'double','groove','ridge','inset','outset'];
for (i=0; i<s.length; i++) {
d=document.createElement('div');
d.style.border=d.innerHTML=s[i];
document.body.appendChild(d);
}}
</script>
</head>
<body onload="ini()"></body>
</html>

26
layout/reftests/border-radius/curved-stripe-border-ref.svg Normal file
View File

@ -0,0 +1,26 @@
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg"
width="200px" height="200px">
<title>Curved stripe border (SVG)</title>
<style type="text/css">
path { stroke: none; }
</style>
<path
d="M20,60 a60,40 0 0,1 60,-40
h60 a60,40 0 0,1 60,40
v100 a60,40 0 0,1 -60,40
h-60 a60,40 0 0,1 -60,-40 z
M30,160 a50,30 0 0,0 50,30
h60 a50,30 0 0,0 50,-30
v-100 a50,30 0 0,0 -50,-30
h-60 a50,30 0 0,0 -50,30 z"/>
<path
d="M40,60 a40,20 0 0,1 40,-20
h60 a40,20 0 0,1 40,20
v100 a40,20 0 0,1 -40,20
h-60 a40,20 0 0,1 -40,-20 z
M50,160 a30,10 0 0,0 30,10
h60 a30,10 0 0,0 30,-10
v-100 a30,10 0 0,0 -30,-10
h-60 a30,10 0 0,0 -30,10 z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 700 B

17
layout/reftests/border-radius/curved-stripe-border.html Normal file
View File

@ -0,0 +1,17 @@
<!doctype html>
<html><head>
<title>Curved stripe border (HTML)</title>
<style>
body { margin: 0 }
div {
-moz-box-sizing: border-box;
width: 180px;
height: 180px;
border: 30px double black;
-moz-border-radius: 60px / 40px;
margin: 20px;
}
</style>
</head><body>
<div></div>
</body></html>

25
layout/reftests/border-radius/inherit-1-ref.html Normal file
View File

@ -0,0 +1,25 @@
<!doctype html>
<html><head>
<title>Border-radius inheritance</title>
<style>
.div1 { width: 100px; height: 100px;
border: 10px solid black;
-moz-border-radius: 10px;
left: 50px;
top: 50px;
}
div > div {
width: 40px; height: 40px;
border: 10px solid black;
position: absolute;
-moz-border-radius: 0px;
left: 40px;
top: 40px;
}
</style>
</head>
<body>
<div class="div1"><div></div></div>
</body></html>

24
layout/reftests/border-radius/inherit-1.html Normal file
View File

@ -0,0 +1,24 @@
<!doctype html>
<html><head>
<title>Border-radius inheritance</title>
<style>
.div1 { width: 100px; height: 100px;
border: 10px solid black;
-moz-border-radius: 10px;
left: 50px;
top: 50px;
}
div > div {
width: 40px; height: 40px;
border: 10px solid black;
position: absolute;
left: 40px;
top: 40px;
}
</style>
</head>
<body>
<div class="div1"><div></div></div>
</body></html>

24
layout/reftests/border-radius/reftest.list
View File

@ -13,9 +13,33 @@
!= outline-square.html outline-circle.html
!= outline-square.html outline-ellips.html
!= outline-circle.html outline-ellips.html
== border-value-interpret.html border-value-interpret-ref.html
!= curved-borders-all-styles.html about:blank # no way to generate reference for dotted/dashed/inset/outset
# ridge/groove borders
# more serious tests, using SVG reference
== border-circle-2.html border-circle-2-ref.xhtml
fails == curved-stripe-border.html curved-stripe-border-ref.svg # bug 459945
# Corners
== corner-1.html corner-1-ref.svg # bottom corners different radius than top corners
random == corner-2.html corner-2-ref.svg # right corners different radius than left corners; see bug 500804
# Test that radii too long are reduced
== border-reduce-height.html border-reduce-height-ref.html
# Tests for border clipping
fails == clipping-1.html clipping-1-ref.html # background color should completely fill box; bug 466572
!= clipping-2.html about:blank # background color clipped to inner/outer border, can't get
# great tests for this due to antialiasing problems described in bug 466572
== clipping-3.html clipping-3-ref.xhtml # edge of border-radius clips an underlying object's background
# Inheritance
== inherit-1.html inherit-1-ref.html # border-radius shouldn't inherit
# Table elements
== table-collapse-1.html table-collapse-1-ref.html # border-radius is ignored on internal table elements
# when border-collapse: collapse
== invalidate-1a.html invalidate-1-ref.html
== invalidate-1b.html invalidate-1-ref.html

24
layout/reftests/border-radius/table-collapse-1-ref.html Normal file
View File

@ -0,0 +1,24 @@
<!doctype html>
<html><head>
<title>Table border collapse</title>
<style>
table {
border: 2px solid black;
border-collapse: collapse;
}
td {
border: 2px solid black;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<table>
<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
</table>
</body></html>

25
layout/reftests/border-radius/table-collapse-1.html Normal file
View File

@ -0,0 +1,25 @@
<!doctype html>
<html><head>
<title>Table border collapse</title>
<style>
table {
border: 2px solid black;
border-collapse: collapse;
}
td {
border: 2px solid black;
width: 50px;
height: 50px;
-moz-border-radius: 4px;
}
</style>
</head>
<body>
<table>
<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
</table>
</body></html>