diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
| commit | 43a97878ce14b72f0981164f87f2e35e14151312 (patch) | |
| tree | 620249daf56c0258faa40cbdcf9cfba06de2a846 /layout/reftests/border-radius | |
| parent | Initial commit. (diff) | |
| download | firefox-upstream.tar.xz firefox-upstream.zip | |
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'layout/reftests/border-radius')
89 files changed, 2127 insertions, 0 deletions
diff --git a/layout/reftests/border-radius/border-circle-2-ref.xhtml b/layout/reftests/border-radius/border-circle-2-ref.xhtml new file mode 100644 index 0000000000..b589b4d04b --- /dev/null +++ b/layout/reftests/border-radius/border-circle-2-ref.xhtml @@ -0,0 +1,11 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> +<body style="margin: 0"> + <svg width="100px" height="100px" version="1.1" + xmlns="http://www.w3.org/2000/svg"> + <rect style="fill: black; stroke: none" + width="70" height="70" + x="8" y="8" + rx="10" ry="10"/> + </svg> +</body> +</html> diff --git a/layout/reftests/border-radius/border-circle-2.html b/layout/reftests/border-radius/border-circle-2.html new file mode 100644 index 0000000000..6ad0321abc --- /dev/null +++ b/layout/reftests/border-radius/border-circle-2.html @@ -0,0 +1,20 @@ +<!doctype html> +<html><head> +<title>Circular border</title> +<style> +body { margin: 0 } +div { + margin-left: 8px; margin-top: 8px; + width: 50px; height: 50px; + border: 10px solid black; + border-radius: 10px; +} +div > div { + margin: 0; width: 50px; height: 50px; + border-radius: 0; + background: black; + border: none; +} +</style> +</head> +<body><div><div></div></div></body></html> diff --git a/layout/reftests/border-radius/border-circle.html b/layout/reftests/border-radius/border-circle.html new file mode 100644 index 0000000000..02fbebe7ac --- /dev/null +++ b/layout/reftests/border-radius/border-circle.html @@ -0,0 +1,11 @@ +<!doctype html> +<html><head> +<title>Circular border</title> +<style> +div { width: 50px; height: 50px; + border: 10px solid black; + border-radius: 10px; +} +</style> +</head> +<body><div></div></body></html> diff --git a/layout/reftests/border-radius/border-ellips.html b/layout/reftests/border-radius/border-ellips.html new file mode 100644 index 0000000000..94c53fafa0 --- /dev/null +++ b/layout/reftests/border-radius/border-ellips.html @@ -0,0 +1,11 @@ +<!doctype html> +<html><head> +<title>Elliptical border</title> +<style> +div { width: 50px; height: 50px; + border: 10px solid black; + border-radius: 10px / 20px; +} +</style> +</head> +<body><div></div></body></html> diff --git a/layout/reftests/border-radius/border-reduce-height-ref.html b/layout/reftests/border-radius/border-reduce-height-ref.html new file mode 100644 index 0000000000..0c28216dac --- /dev/null +++ b/layout/reftests/border-radius/border-reduce-height-ref.html @@ -0,0 +1,19 @@ +<html> + <head> + <style> + div { box-sizing: border-box; + width: 60px; + height: 20px; + border: 2px solid black; + background: green; + position: absolute; + top: 12px; + left: 12px; + border-radius: 4px 16px 4px 16px; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/layout/reftests/border-radius/border-reduce-height.html b/layout/reftests/border-radius/border-reduce-height.html new file mode 100644 index 0000000000..db0310a6ba --- /dev/null +++ b/layout/reftests/border-radius/border-reduce-height.html @@ -0,0 +1,19 @@ +<html> + <head> + <style> + div { box-sizing: border-box; + width: 60px; + height: 20px; + border: 2px solid black; + background: green; + position: absolute; + top: 12px; + left: 12px; + border-radius: 5px 20px 5px 20px; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/layout/reftests/border-radius/border-square.html b/layout/reftests/border-radius/border-square.html new file mode 100644 index 0000000000..4e16637bbe --- /dev/null +++ b/layout/reftests/border-radius/border-square.html @@ -0,0 +1,10 @@ +<!doctype html> +<html><head> +<title>Square border</title> +<style> +div { width: 50px; height: 50px; + border: 10px solid black; +} +</style> +</head> +<body><div></div></body></html> diff --git a/layout/reftests/border-radius/border-value-interpret-ref.html b/layout/reftests/border-radius/border-value-interpret-ref.html new file mode 100644 index 0000000000..c9a42716b0 --- /dev/null +++ b/layout/reftests/border-radius/border-value-interpret-ref.html @@ -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; + border-top-left-radius: 2em 10px; + border-top-right-radius: 10px 0.5em; + border-bottom-right-radius: 3em 10px; + border-bottom-left-radius: 10px 0.5em; + } + +</style> +</head> +<body> + <div></div> +</body></html> diff --git a/layout/reftests/border-radius/border-value-interpret.html b/layout/reftests/border-radius/border-value-interpret.html new file mode 100644 index 0000000000..16ee01c973 --- /dev/null +++ b/layout/reftests/border-radius/border-value-interpret.html @@ -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 { border-radius: 2em 10px 3em / 10px 0.5em } + +</style> +</head> +<body> + <div id="test1"></div> +</body></html> diff --git a/layout/reftests/border-radius/clipping-1-ref.html b/layout/reftests/border-radius/clipping-1-ref.html new file mode 100644 index 0000000000..f02eee730b --- /dev/null +++ b/layout/reftests/border-radius/clipping-1-ref.html @@ -0,0 +1,28 @@ +<!doctype html> +<html><head> +<title>Border clipping</title> +<style> +.div1 { width: 50px; height: 50px; + border: 10px solid black; + border-radius: 20px; + position: fixed; + left: 50px; + top: 50px; +} + +.div2 { + width: 40px; height: 40px; + border: 10px solid black; + background: black; + border-radius: 10px; + position: fixed; + left: 55px; + top: 55px; +} + +</style> +</head> +<body> + <div class="div1"/> + <div class="div2"/> +</body></html> diff --git a/layout/reftests/border-radius/clipping-1.html b/layout/reftests/border-radius/clipping-1.html new file mode 100644 index 0000000000..979af78817 --- /dev/null +++ b/layout/reftests/border-radius/clipping-1.html @@ -0,0 +1,19 @@ +<!doctype html> +<html><head> +<title>Border clipping</title> +<style> +.div1 { width: 50px; height: 50px; + border: 10px solid black; + border-radius: 20px; + position: absolute; + background: black; + left: 50px; + top: 50px; + background-clip: padding-box; +} + +</style> +</head> +<body> + <div class="div1"></div> +</body></html> diff --git a/layout/reftests/border-radius/clipping-2.html b/layout/reftests/border-radius/clipping-2.html new file mode 100644 index 0000000000..b0630a7fb2 --- /dev/null +++ b/layout/reftests/border-radius/clipping-2.html @@ -0,0 +1,30 @@ +<!doctype html> +<html><head> +<title>Border clipping</title> +<style> +.div1 { width: 50px; height: 50px; + border: 4px dotted black; + border-radius: 10px; + position: fixed; + background: red; + left: 50px; + top: 50px; + background-clip: padding-box; +} + +.div2 { width: 50px; height: 50px; + border: 4px dotted black; + border-radius: 10px; + position: fixed; + background: red; + left: 50px; + top: 140px; + background-clip: border-box; +} + +</style> +</head> +<body> + <div class="div1"/> + <div class="div2"/> +</body></html> diff --git a/layout/reftests/border-radius/clipping-3-ref.xhtml b/layout/reftests/border-radius/clipping-3-ref.xhtml new file mode 100644 index 0000000000..9cab93dbd7 --- /dev/null +++ b/layout/reftests/border-radius/clipping-3-ref.xhtml @@ -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> diff --git a/layout/reftests/border-radius/clipping-3.html b/layout/reftests/border-radius/clipping-3.html new file mode 100644 index 0000000000..af52adb304 --- /dev/null +++ b/layout/reftests/border-radius/clipping-3.html @@ -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; + border-radius: 10px; +} + +</style> +</head> +<body> + <div class="div1"/> + <div class="div2"/> +</body></html> diff --git a/layout/reftests/border-radius/clipping-4-canvas.html b/layout/reftests/border-radius/clipping-4-canvas.html new file mode 100644 index 0000000000..c7836b8370 --- /dev/null +++ b/layout/reftests/border-radius/clipping-4-canvas.html @@ -0,0 +1,14 @@ +<!DOCTYPE HTML> +<title>Test for clipping of border-radius</title> +<style> +canvas { + border-radius: 25px; +} +</style> +<canvas id="canvas" height="100" width="200"></canvas> +<script> +var canvas = document.getElementById("canvas"); +var cx = canvas.getContext("2d"); +cx.fillStyle="lime"; +cx.fillRect(0, 0, 200, 100); +</script> diff --git a/layout/reftests/border-radius/clipping-4-image.html b/layout/reftests/border-radius/clipping-4-image.html new file mode 100644 index 0000000000..8fedba7221 --- /dev/null +++ b/layout/reftests/border-radius/clipping-4-image.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML> +<title>Test for clipping of border-radius</title> +<style> +img { + height: 100px; + width: 200px; + border-radius: 25px; +} +</style> +<img src="../pixel-rounding/lime-25x25.png" alt=""> diff --git a/layout/reftests/border-radius/clipping-4-notref.html b/layout/reftests/border-radius/clipping-4-notref.html new file mode 100644 index 0000000000..816856f3e1 --- /dev/null +++ b/layout/reftests/border-radius/clipping-4-notref.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML> +<title>Test for clipping of border-radius</title> +<style> +div { + background: lime; + height: 100px; + width: 200px; +} +</style> +<div></div> diff --git a/layout/reftests/border-radius/clipping-4-overflow-hidden.html b/layout/reftests/border-radius/clipping-4-overflow-hidden.html new file mode 100644 index 0000000000..734fdef20a --- /dev/null +++ b/layout/reftests/border-radius/clipping-4-overflow-hidden.html @@ -0,0 +1,16 @@ +<!DOCTYPE HTML> +<title>Test for clipping of border-radius</title> +<style> +body > div { + height: 100px; + width: 200px; + border-radius: 25px; + overflow: hidden; +} +body > div > div { + background: lime; + height: 100px; + width: 200px; +} +</style> +<div><div></div></div> diff --git a/layout/reftests/border-radius/clipping-4-ref.html b/layout/reftests/border-radius/clipping-4-ref.html new file mode 100644 index 0000000000..ebe86707f3 --- /dev/null +++ b/layout/reftests/border-radius/clipping-4-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE HTML> +<title>Test for clipping of border-radius</title> +<style> +div { + background: lime; + height: 100px; + width: 200px; + border-radius: 25px; +} +</style> +<div></div> diff --git a/layout/reftests/border-radius/clipping-5-canvas.html b/layout/reftests/border-radius/clipping-5-canvas.html new file mode 100644 index 0000000000..62c05ccf4c --- /dev/null +++ b/layout/reftests/border-radius/clipping-5-canvas.html @@ -0,0 +1,20 @@ +<!DOCTYPE HTML> +<title>Test for clipping of border-radius</title> +<style> +canvas { + border-color: transparent; + border-style: solid; + border-width: 1px 1px 3px 3px; + padding: 0px 1px 1px 5px; + /* border + padding: 1px 2px 4px 8px */ + margin: 17px; + border-radius: 25px 17px 14px 18px / 12px 15px 18px 17px; +} +</style> +<canvas id="canvas" height="100" width="200"></canvas> +<script> +var canvas = document.getElementById("canvas"); +var cx = canvas.getContext("2d"); +cx.fillStyle="lime"; +cx.fillRect(0, 0, 200, 100); +</script> diff --git a/layout/reftests/border-radius/clipping-5-image.html b/layout/reftests/border-radius/clipping-5-image.html new file mode 100644 index 0000000000..8399d0894a --- /dev/null +++ b/layout/reftests/border-radius/clipping-5-image.html @@ -0,0 +1,16 @@ +<!DOCTYPE HTML> +<title>Test for clipping of border-radius</title> +<style> +img { + border-color: transparent; + border-style: solid; + border-width: 1px 1px 3px 3px; + padding: 0px 1px 1px 5px; + /* border + padding: 1px 2px 4px 8px */ + margin: 17px; + height: 100px; + width: 200px; + border-radius: 25px 17px 14px 18px / 12px 15px 18px 17px; +} +</style> +<img src="../pixel-rounding/lime-25x25.png" alt=""> diff --git a/layout/reftests/border-radius/clipping-5-overflow-hidden.html b/layout/reftests/border-radius/clipping-5-overflow-hidden.html new file mode 100644 index 0000000000..e81668ff7b --- /dev/null +++ b/layout/reftests/border-radius/clipping-5-overflow-hidden.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<title>Test for clipping of border-radius</title> +<style> +body > div { + /* padding box is 100px by 200px */ + display: inline-block; /* so margin doesn't collapse with body's */ + height: 99px; + width: 194px; + overflow: hidden; + border-color: transparent; + border-style: solid; + border-width: 1px 2px 4px 8px; + padding: 0px 1px 1px 5px; + margin: 17px; + border-radius: 25px 17px 14px 18px / 12px 15px 18px 17px; +} +body > div > div { + background: lime; + height: 100px; + width: 200px; + margin-left: -5px; +} +</style> +<div><div></div></div> diff --git a/layout/reftests/border-radius/clipping-5-ref.html b/layout/reftests/border-radius/clipping-5-ref.html new file mode 100644 index 0000000000..bcac4ef848 --- /dev/null +++ b/layout/reftests/border-radius/clipping-5-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<title>Test for clipping of border-radius</title> +<style> +div { + display: inline-block; + background: lime; + margin: 18px 19px 21px 25px; + /* border + padding: 1px 2px 4px 8px */ + height: 100px; + width: 200px; + + /* Horizontal: TL TR BR BL / Vertical: TL TR BR BL */ + /* border-radius: 25px 17px 14px 18px / 12px 15px 18px 17px; */ + border-radius: 17px 15px 12px 10px / 11px 14px 14px 13px; +} +</style> +<div></div> diff --git a/layout/reftests/border-radius/clipping-5-refc.html b/layout/reftests/border-radius/clipping-5-refc.html new file mode 100644 index 0000000000..56b130b9c9 --- /dev/null +++ b/layout/reftests/border-radius/clipping-5-refc.html @@ -0,0 +1,19 @@ +<!DOCTYPE HTML> +<title>Test for clipping of border-radius</title> +<style> +canvas { + margin: 18px 19px 21px 25px; + /* border + padding: 1px 2px 4px 8px */ + + /* Horizontal: TL TR BR BL / Vertical: TL TR BR BL */ + /* border-radius: 25px 17px 14px 18px / 12px 15px 18px 17px; */ + border-radius: 17px 15px 12px 10px / 11px 14px 14px 13px; +} +</style> +<canvas id="canvas" height="100" width="200"></canvas> +<script> +var canvas = document.getElementById("canvas"); +var cx = canvas.getContext("2d"); +cx.fillStyle="lime"; +cx.fillRect(0, 0, 200, 100); +</script> diff --git a/layout/reftests/border-radius/clipping-5-refi.html b/layout/reftests/border-radius/clipping-5-refi.html new file mode 100644 index 0000000000..2e3036dd5e --- /dev/null +++ b/layout/reftests/border-radius/clipping-5-refi.html @@ -0,0 +1,15 @@ +<!DOCTYPE HTML> +<title>Test for clipping of border-radius</title> +<style> +img { + margin: 18px 19px 21px 25px; + /* border + padding: 1px 2px 4px 8px */ + height: 100px; + width: 200px; + + /* Horizontal: TL TR BR BL / Vertical: TL TR BR BL */ + /* border-radius: 25px 17px 14px 18px / 12px 15px 18px 17px; */ + border-radius: 17px 15px 12px 10px / 11px 14px 14px 13px; +} +</style> +<img src="../pixel-rounding/lime-25x25.png" alt=""> diff --git a/layout/reftests/border-radius/clipping-6-ref.html b/layout/reftests/border-radius/clipping-6-ref.html new file mode 100644 index 0000000000..7644fe21fe --- /dev/null +++ b/layout/reftests/border-radius/clipping-6-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="content-type" content="text/html; charset=UTF-8"> +</head> +<body> + <div style="overflow:hidden; border-radius:25px; border:3px solid #f00; padding:1px; height:180px; font-size: 300%;"> + <div style="transform: perspective(1px)"> + <div style="height:100px; width:100px; background-color:lime"></div> + <div style="height:100px; width: 50px; background-color:red; position:relative; top: -20px;">Hi</div> + </div> + </div> + <div +</body> +</html> diff --git a/layout/reftests/border-radius/clipping-6.html b/layout/reftests/border-radius/clipping-6.html new file mode 100644 index 0000000000..3447a17e9e --- /dev/null +++ b/layout/reftests/border-radius/clipping-6.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="content-type" content="text/html; charset=UTF-8"> +</head> +<body> + <div style="overflow:hidden; border-radius:25px; border:3px solid #f00; padding:1px; height:180px; font-size: 300%;"> + <div style="height:100px; width:100px; transform:perspective(1px); background-color:lime"></div> + <div style="height:100px; width: 50px; background-color:red; position:relative; top: -20px;">Hi</div> + </div> + <div +</body> +</html> diff --git a/layout/reftests/border-radius/clipping-7-ref.html b/layout/reftests/border-radius/clipping-7-ref.html new file mode 100644 index 0000000000..1d83e5baa0 --- /dev/null +++ b/layout/reftests/border-radius/clipping-7-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="content-type" content="text/html; charset=UTF-8"> +</head> +<body> + <div style="overflow:hidden; border-radius:25px; border:3px solid #f00; padding:1px; height:180px;"> + <div style="height:100px; width:100px; background-color:lime"></div> + <div style="height:100px; width: 50px; background-color:red; position:relative; top: -20px;"></div> + </div> + <div +</body> +</html> diff --git a/layout/reftests/border-radius/clipping-7.html b/layout/reftests/border-radius/clipping-7.html new file mode 100644 index 0000000000..f435d2c41c --- /dev/null +++ b/layout/reftests/border-radius/clipping-7.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="content-type" content="text/html; charset=UTF-8"> +</head> +<body> + <div style="overflow:hidden; border-radius:25px; border:3px solid #f00; padding:1px; height:180px;"> + <div style="height:100px; width:100px; transform:perspective(1px); background-color:lime"></div> + <div style="height:100px; width: 50px; background-color:red; position:relative; top: -20px;"></div> + </div> + <div +</body> +</html> diff --git a/layout/reftests/border-radius/clipping-and-zindex-1-ref.html b/layout/reftests/border-radius/clipping-and-zindex-1-ref.html new file mode 100644 index 0000000000..f1155db7fe --- /dev/null +++ b/layout/reftests/border-radius/clipping-and-zindex-1-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<title>Test for z-index relationship to border-radius clipping of overflow</title> +<style> + +#one { position: absolute; background: blue; + top: 50px; left: 50px; width: 100px; height: 100px } + +#two { position: absolute; border-radius: 15px; background: fuchsia; + top: 25px; left: 75px; width: 100px; height: 100px } + +#three { position: absolute; background: yellow; + top: 75px; left: 100px; width: 100px; height: 100px } + +</style> + +<div id="three"></div> +<div id="two"></div> +<div id="one"></div> diff --git a/layout/reftests/border-radius/clipping-and-zindex-1.html b/layout/reftests/border-radius/clipping-and-zindex-1.html new file mode 100644 index 0000000000..f565d7a822 --- /dev/null +++ b/layout/reftests/border-radius/clipping-and-zindex-1.html @@ -0,0 +1,19 @@ +<!DOCTYPE HTML> +<title>Test for z-index relationship to border-radius clipping of overflow</title> +<style> + +#one { position: absolute; z-index: 2; background: blue; + top: 50px; left: 50px; width: 100px; height: 100px } + +#twoouter { position: absolute; border-radius: 15px; overflow: hidden; + top: 25px; left: 75px; width: 100px; height: 100px } +#twoinner { position: relative; z-index: 1; height: 100px; background: fuchsia } + +#three { position: absolute; z-index: 0; background: yellow; + top: 75px; left: 100px; width: 100px; height: 100px } + +</style> + +<div id="one"></div> +<div id="twoouter"><div id="twoinner"></div></div> +<div id="three"></div> diff --git a/layout/reftests/border-radius/clipping-preserve-3d-ref.html b/layout/reftests/border-radius/clipping-preserve-3d-ref.html new file mode 100644 index 0000000000..54ce4bc044 --- /dev/null +++ b/layout/reftests/border-radius/clipping-preserve-3d-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html> +<body> + <div style="width: 400px; overflow: hidden; border-radius: 50%;"> + <div style="transform-style: preserve-3d; position:relative; transform: translateX(100px);"> + <div style="width: 200px;height: 200px;background-color: red;position: relative;left: 200px;"> + </div> + </div> + </div> +</body> +</html> diff --git a/layout/reftests/border-radius/clipping-preserve-3d.html b/layout/reftests/border-radius/clipping-preserve-3d.html new file mode 100644 index 0000000000..62e6380b74 --- /dev/null +++ b/layout/reftests/border-radius/clipping-preserve-3d.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html> +<body> + <div style="width: 400px; overflow: hidden; border-radius: 50%;"> + <div style="transform-style: preserve-3d; position:relative; left: 100px"> + <div style="width: 200px;height: 200px;background-color: red;position: relative;left: 200px;"> + </div> + </div> + </div> +</body> +</html> diff --git a/layout/reftests/border-radius/color-layer-1-ref.html b/layout/reftests/border-radius/color-layer-1-ref.html new file mode 100644 index 0000000000..118077040f --- /dev/null +++ b/layout/reftests/border-radius/color-layer-1-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML> +<html> +<body style="overflow:hidden"> +<div style="border-radius:100px; width:800px; height:1000px; position:absolute; left:0px; top:0px; overflow:hidden"> + <div style="background:blue; width:100%; height:100%;"></div> + <div style="position:absolute; top:100px; left:100px; width:100px; height:100px; border:5px solid white"></div> + <div style="position:absolute; top:100px; left:100px; width:100px; height:100px; border:5px solid blue"></div> +</div> +</body> +</html> diff --git a/layout/reftests/border-radius/color-layer-1a.html b/layout/reftests/border-radius/color-layer-1a.html new file mode 100644 index 0000000000..ff600cb660 --- /dev/null +++ b/layout/reftests/border-radius/color-layer-1a.html @@ -0,0 +1,8 @@ +<!DOCTYPE HTML> +<html> +<body style="overflow:hidden"> +<div style="border-radius:100px; width:800px; height:1000px; position:absolute; left:0px; top:0px; overflow:hidden"> + <div style="background:blue; width:100%; height:100%;"></div> +</div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/border-radius/corner-1-ref.svg b/layout/reftests/border-radius/corner-1-ref.svg new file mode 100644 index 0000000000..d3e0586f8c --- /dev/null +++ b/layout/reftests/border-radius/corner-1-ref.svg @@ -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> + diff --git a/layout/reftests/border-radius/corner-1.html b/layout/reftests/border-radius/corner-1.html new file mode 100644 index 0000000000..a606b38f8f --- /dev/null +++ b/layout/reftests/border-radius/corner-1.html @@ -0,0 +1,18 @@ +<!doctype html> +<html><head> +<title>Corners different</title> +<style> +.div1 { width: 50px; height: 50px; + border: 10px solid black; + border-radius: 10px 10px 6px 6px; + position: absolute; + background: black; + left: 50px; + top: 50px; +} + +</style> +</head> +<body> + <div class="div1"></div> +</body></html> diff --git a/layout/reftests/border-radius/corner-2-ref.svg b/layout/reftests/border-radius/corner-2-ref.svg new file mode 100644 index 0000000000..3232472eb1 --- /dev/null +++ b/layout/reftests/border-radius/corner-2-ref.svg @@ -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> diff --git a/layout/reftests/border-radius/corner-2.html b/layout/reftests/border-radius/corner-2.html new file mode 100644 index 0000000000..cd860e843a --- /dev/null +++ b/layout/reftests/border-radius/corner-2.html @@ -0,0 +1,18 @@ +<!doctype html> +<html><head> +<title>Corners different</title> +<style> +.div1 { width: 50px; height: 50px; + border: 10px solid black; + border-radius: 10px 6px 6px 10px; + position: absolute; + background: black; + left: 50px; + top: 50px; +} + +</style> +</head> +<body> + <div class="div1"></div> +</body></html> diff --git a/layout/reftests/border-radius/corner-3-ref.svg b/layout/reftests/border-radius/corner-3-ref.svg new file mode 100644 index 0000000000..210cc7637c --- /dev/null +++ b/layout/reftests/border-radius/corner-3-ref.svg @@ -0,0 +1,5 @@ +<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> + <rect x="20" y="50" width="60" height="130" rx="30" fill="rgba(0,0,255,0.5)"/> + <!-- cover left side of first rect --> + <rect width="50" height="100%" fill="white"/> +</svg> diff --git a/layout/reftests/border-radius/corner-3.html b/layout/reftests/border-radius/corner-3.html new file mode 100644 index 0000000000..ee4dd73113 --- /dev/null +++ b/layout/reftests/border-radius/corner-3.html @@ -0,0 +1,22 @@ +<!doctype html> +<html> +<head> + <title>Test when only some of the corners have a border-radius and the border-radius is greater than the sum of the border width and the element's content area width/height</title> + <style> + +div { + width: 0px; + height: 100px; + border: 15px solid rgba(0,0,255,0.5); + border-radius: 0 30px 30px 0; + position: absolute; + left: 50px; + top: 50px; +} + + </style> +</head> +<body> + <div></div> +</body> +</html> diff --git a/layout/reftests/border-radius/corner-4-ref.svg b/layout/reftests/border-radius/corner-4-ref.svg new file mode 100644 index 0000000000..939ccc04ac --- /dev/null +++ b/layout/reftests/border-radius/corner-4-ref.svg @@ -0,0 +1,5 @@ +<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> + <rect x="50" y="50" width="130" height="130" rx="15" fill="rgba(0,0,255,0.5)"/> + <!-- cover center of first rect --> + <rect x="65" y="65" width="100" height="100" fill="white"/> +</svg> diff --git a/layout/reftests/border-radius/corner-4.html b/layout/reftests/border-radius/corner-4.html new file mode 100644 index 0000000000..a51c24f9ca --- /dev/null +++ b/layout/reftests/border-radius/corner-4.html @@ -0,0 +1,22 @@ +<!doctype html> +<html> +<head> + <title>Test the border transparency</title> + <style> + +div { + width: 100px; + height: 100px; + border: 15px solid rgba(0,0,255,0.5); + border-radius: 15px; + position: absolute; + left: 50px; + top: 50px; +} + + </style> +</head> +<body> + <div></div> +</body> +</html> diff --git a/layout/reftests/border-radius/corner-joins-1-ref.xhtml b/layout/reftests/border-radius/corner-joins-1-ref.xhtml new file mode 100644 index 0000000000..1b0ba24a6b --- /dev/null +++ b/layout/reftests/border-radius/corner-joins-1-ref.xhtml @@ -0,0 +1,89 @@ +<?xml version="1.0"?> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg"> +<head> +<title>border</title> +<style type="text/css"> +@namespace url("http://www.w3.org/1999/xhtml"); +@namespace svg url("http://www.w3.org/2000/svg"); + +div.wrapper { + float: left; + margin-left: 20px; + margin-top: 10px; +} + +div.cover, div.cover2 { + position: absolute; + border: 4px solid white; /* cover areas that may differ */ + width: 140px; + height: 118px; + border-radius: 63px; + margin-left: -2px; + margin-top: -2px; +} +div.cover2 { + height: 82px; + margin-top: 16px; + border-radius: 63px / 45px; +} + +svg|svg { + display: block; + width: 146px; + height: 122px; + margin-right: -2px; + margin-bottom: 20px; +} + +</style> +</head> +<body> +<div class="wrapper"> +<div class="cover"></div> +<div class="cover2"></div> +<svg:svg> + <svg:rect x="0" y="0" width="144px" height="122px" rx="61px" ry="61px" + fill="blue"/> + <svg:rect x="0" y="18px" width="144px" height="86px" rx="61px" ry="43px" + fill="red"/> +</svg:svg> +<div class="cover"></div> +<div class="cover2"></div> +<svg:svg> + <svg:clipPath id="topclip"> + <svg:rect x="0" y="0" width="144px" height="61px"/> + </svg:clipPath> + <svg:clipPath id="botclip"> + <svg:rect x="0" y="61px" width="144px" height="61px"/> + </svg:clipPath> + <svg:rect x="0" y="0" width="144px" height="122px" rx="61px" ry="61px" + fill="black" clip-path="url(#topclip)"/> + <svg:rect x="0" y="0" width="144px" height="122px" rx="61px" ry="61px" + fill="blue" clip-path="url(#botclip)"/> + <svg:rect x="0" y="18px" width="144px" height="86px" rx="61px" ry="43px" + fill="red"/> +</svg:svg> +</div> +<div class="wrapper"> +<div class="cover" style="width: 142px"></div> +<div class="cover2" style="margin-left: -1px; border-radius: 61px / 45px"></div> +<svg:svg> + <svg:rect x="0" y="0" width="146px" height="122px" rx="61px" ry="61px" + fill="blue"/> + <svg:rect x="0" y="18px" width="146px" height="86px" rx="61px" ry="43px" + fill="red"/> +</svg:svg> +<div class="cover"></div> +<div class="cover2"></div> +<svg:svg> + <svg:rect x="0" y="0" width="144px" height="122px" rx="61px" ry="61px" + fill="black" clip-path="url(#topclip)"/> + <svg:rect x="0" y="0" width="144px" height="122px" rx="61px" ry="61px" + fill="blue" clip-path="url(#botclip)"/> + <svg:rect x="0" y="18px" width="144px" height="86px" rx="61px" ry="43px" + fill="red"/> +</svg:svg> +</div> +</body> +</html> diff --git a/layout/reftests/border-radius/corner-joins-1.xhtml b/layout/reftests/border-radius/corner-joins-1.xhtml new file mode 100644 index 0000000000..f7a9b8ecdc --- /dev/null +++ b/layout/reftests/border-radius/corner-joins-1.xhtml @@ -0,0 +1,78 @@ +<?xml version="1.0"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>border</title> +<style type="text/css"> + +div.wrapper { + float: left; + margin-left: 20px; + margin-top: 10px; +} + +div.test { + width: 144px; + height: 86px; + border-radius: 72px; + border-top: 18px solid; + border-bottom: 18px solid; + background: red; + margin-bottom: 20px; +} + +div.cover, div.cover2 { + position: absolute; + border: 4px solid white; /* cover areas that may differ */ + width: 140px; + height: 118px; + border-radius: 63px; + margin-left: -2px; + margin-top: -2px; +} +div.cover2 { + height: 82px; + margin-top: 16px; + border-radius: 63px / 45px; +} + +#one { + border-color: blue; +} + +#two { + border-bottom-color: blue; +} + +#three { + border-color: blue; + border-left: 0.01px solid red; + border-right: 0.01px solid red; +} + +#four { + border-bottom-color: blue; + border-left: 0.001px solid red; + border-right: 0.001px solid red; +} + +</style> +</head> +<body> +<div class="wrapper"> +<div class="cover"></div> +<div class="cover2"></div> +<div class="test" id="one"></div> +<div class="cover"></div> +<div class="cover2"></div> +<div class="test" id="two"></div> +</div> +<div class="wrapper"> +<div class="cover" style="width: 142px"></div> +<div class="cover2" style="margin-left: -1px; border-radius: 61px / 45px"></div> +<div class="test" id="three"></div> +<div class="cover"></div> +<div class="cover2"></div> +<div class="test" id="four"></div> +</div> +</body> +</html> diff --git a/layout/reftests/border-radius/corner-joins-2-ref.xhtml b/layout/reftests/border-radius/corner-joins-2-ref.xhtml new file mode 100644 index 0000000000..de765cd10d --- /dev/null +++ b/layout/reftests/border-radius/corner-joins-2-ref.xhtml @@ -0,0 +1,36 @@ +<?xml version="1.0"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>border</title> +<style type="text/css"> + +body { + filter: url('../filters.svg#NonWhiteToBlack'); +} + +body > div { + /* filter doesn't change alpha */ + background: white; +} + +div.test { + width: 154px; + height: 142px; + border-radius: 72px; + background: black; +} + +</style> +</head> +<body> +<div> +<div class="test"></div> +</div> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + version="1.1"> + <!-- use an empty g to force filters.svg to load before onload --> + <use xlink:href="../filters.svg#empty" /> +</svg> +</body> +</html> diff --git a/layout/reftests/border-radius/corner-joins-2.xhtml b/layout/reftests/border-radius/corner-joins-2.xhtml new file mode 100644 index 0000000000..fcc0399c32 --- /dev/null +++ b/layout/reftests/border-radius/corner-joins-2.xhtml @@ -0,0 +1,42 @@ +<?xml version="1.0"?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>border</title> +<style type="text/css"> + +body { + filter: url('../filters.svg#NonWhiteToBlack'); +} + +body > div { + /* filter doesn't change alpha */ + background: white; +} + +div.test { + width: 144px; + height: 86px; + border-radius: 72px; + border-top: 28px solid; + border-bottom: 28px solid; + background: cyan; + margin-bottom: 20px; + border-color: blue; + border-left: 5px solid red; + border-right: 5px solid red; +} + +</style> +</head> +<body> +<div> +<div class="test"></div> +</div> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + version="1.1"> + <!-- use an empty g to force filters.svg to load before onload --> + <use xlink:href="../filters.svg#empty" /> +</svg> +</body> +</html> diff --git a/layout/reftests/border-radius/corner-split-ref.svg b/layout/reftests/border-radius/corner-split-ref.svg new file mode 100644 index 0000000000..742fc03ba9 --- /dev/null +++ b/layout/reftests/border-radius/corner-split-ref.svg @@ -0,0 +1,20 @@ +<svg width="178" height="178" + xmlns="http://www.w3.org/2000/svg"> + <clipPath id="topside"><path d="M175,0 L35,70 L0,0 z" /></clipPath> + <clipPath id="leftside"><path d="M0,0 L35,70 L25,75 L0,175 z" /></clipPath> + <clipPath id="bottomside"><path d="M0,175 L25,75 L75,75 L175,175 z" /></clipPath> + <clipPath id="rightside"><path d="M75,75 L75,50 L175,0 L175,175 z" /></clipPath> + <rect x="0" y="0" width="175" height="175" rx="75" ry="75" clip-path="url(#topside)" fill="red" /> + <rect x="0" y="0" width="175" height="175" rx="75" ry="75" clip-path="url(#leftside)" fill="green" /> + <rect x="0" y="0" width="175" height="175" rx="75" ry="75" clip-path="url(#bottomside)" fill="blue" /> + <rect x="0" y="0" width="175" height="175" rx="75" ry="75" clip-path="url(#rightside)" fill="black" /> + <path d="M75,50 L75,75 L25,75 A50,25 0 0,1 75,50" fill="white" /> + + <rect x="0" y="0" width="175" height="175" rx="75" ry="75" fill="none" stroke="orange" stroke-width="3" /> + <line x1="145" y1="15" x2="75" y2="50" stroke="orange" stroke-width="3" /> + <line x1="153.033004761" y1="153.033004761" x2="75" y2="75" stroke="orange" stroke-width="3" /> + <line x1="9.580468178" y1="136.678131104" x2="25" y2="75" stroke="orange" stroke-width="3" /> + <line x1="15.000000954" y1="30.000001907" x2="31.386978149" y2="62.773956299" stroke="orange" stroke-width="3" /> + <path d="M75,50 L75,75 L25,75 A50,25 0 0,1 75,50" fill="none" stroke="orange" stroke-width="3" /> +</svg> + diff --git a/layout/reftests/border-radius/corner-split.html b/layout/reftests/border-radius/corner-split.html new file mode 100644 index 0000000000..59d26aa1e5 --- /dev/null +++ b/layout/reftests/border-radius/corner-split.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <style type="text/css"> +#borders, .cover { + position: absolute; + top: 0px; + left: 0px; +} +#borders { + width: 50px; + height: 25px; + border-radius: 75px; + border-top: 50px solid red; + border-bottom: 100px solid blue; + border-left: 25px solid green; + border-right: 100px solid black; +} + </style> + </head> + <body> + <div id="borders"></div> +<svg width="178" height="178" class="cover"> + <rect x="0" y="0" width="175" height="175" rx="75" ry="75" fill="none" stroke="orange" stroke-width="3" /> + <line x1="145" y1="15" x2="75" y2="50" stroke="orange" stroke-width="3" /> + <line x1="153.033004761" y1="153.033004761" x2="75" y2="75" stroke="orange" stroke-width="3" /> + <line x1="9.580468178" y1="136.678131104" x2="25" y2="75" stroke="orange" stroke-width="3" /> + <line x1="15.000000954" y1="30.000001907" x2="31.386978149" y2="62.773956299" stroke="orange" stroke-width="3" /> + <path d="M75,50 L75,75 L25,75 A50,25 0 0,1 75,50" fill="none" stroke="orange" stroke-width="3" /> +</svg> + </body> +</html> diff --git a/layout/reftests/border-radius/curved-border-background-nogap-ref.html b/layout/reftests/border-radius/curved-border-background-nogap-ref.html new file mode 100644 index 0000000000..67aead2bca --- /dev/null +++ b/layout/reftests/border-radius/curved-border-background-nogap-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<style> + div { + width: 100px; + height: 100px; + background: black; + } +</style> +<div></div> diff --git a/layout/reftests/border-radius/curved-border-background-nogap.html b/layout/reftests/border-radius/curved-border-background-nogap.html new file mode 100644 index 0000000000..01207e7f04 --- /dev/null +++ b/layout/reftests/border-radius/curved-border-background-nogap.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<style> + /* + Turns out that the antialiasing on the outer edge of a block with + border-radius is not consistent if the width and border-width are changed + even if the resulting shape should look the same. So clip out the part + that's too far from the center + */ + div.outer { + width: 100px; + height: 100px; + overflow: hidden; + } + /* We want the following constraints to be satisfied: + 1) Entire inner div content area is contained inside the 100px square. + 2) Entire 100px square is contained inside the outer circle of the inner + div's border. + + This requires that the inner div width/height be < 100px and that the + radius of the outer circle be at least 50 * sqrt(2). Let's go with a 75px + radius for that outer circle. We then need to shift our inner div up and + to the left by 25px to center it in the clipping region. + */ + + div.inner { + width: 50px; + height: 50px; + border: 50px solid black; + background: black; + border-radius: 100px; + position: relative; + top: -25px; + left: -25px; + } +</style> +<div class="outer"><div class="inner"></div></div> diff --git a/layout/reftests/border-radius/curved-borders-all-styles.html b/layout/reftests/border-radius/curved-borders-all-styles.html new file mode 100644 index 0000000000..e816483e21 --- /dev/null +++ b/layout/reftests/border-radius/curved-borders-all-styles.html @@ -0,0 +1,29 @@ +<html> + +<head> + <title>testcase for bug #382721</title> +<style> + div { + background: beige; + margin: 1ex; + padding: 1ex; + 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> + diff --git a/layout/reftests/border-radius/curved-stripe-border-ref.svg b/layout/reftests/border-radius/curved-stripe-border-ref.svg new file mode 100644 index 0000000000..726094142c --- /dev/null +++ b/layout/reftests/border-radius/curved-stripe-border-ref.svg @@ -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> diff --git a/layout/reftests/border-radius/curved-stripe-border.html b/layout/reftests/border-radius/curved-stripe-border.html new file mode 100644 index 0000000000..1f962765d1 --- /dev/null +++ b/layout/reftests/border-radius/curved-stripe-border.html @@ -0,0 +1,17 @@ +<!doctype html> +<html><head> +<title>Curved stripe border (HTML)</title> +<style> +body { margin: 0 } +div { + box-sizing: border-box; + width: 180px; + height: 180px; + border: 30px double black; + border-radius: 60px / 40px; + margin: 20px; +} +</style> +</head><body> +<div></div> +</body></html> diff --git a/layout/reftests/border-radius/iframe-1-ref.html b/layout/reftests/border-radius/iframe-1-ref.html new file mode 100644 index 0000000000..360c443f04 --- /dev/null +++ b/layout/reftests/border-radius/iframe-1-ref.html @@ -0,0 +1,7 @@ +<html> +<body> +<iframe style="position: absolute; left: 0px; top: 0px; width: 300px; height: 150px; border: none; border-radius: 50px; background: green;" src="data:text/html,<body>"></iframe> +<div style="position: absolute; left: 10px; top: 0px; width: 280px; height: 150px; background: red;"></div> +<div style="position: absolute; left: 0px; top: 10px; width: 300px; height: 130px; background: red;"></div> +</body> +</html> diff --git a/layout/reftests/border-radius/iframe-1.html b/layout/reftests/border-radius/iframe-1.html new file mode 100644 index 0000000000..b3fc86792c --- /dev/null +++ b/layout/reftests/border-radius/iframe-1.html @@ -0,0 +1,7 @@ +<html> +<body> +<iframe style="position: absolute; left: 0px; top: 0px; width: 300px; height: 150px; border: none; border-radius: 50px; background: green;" src="data:text/html,<body bgcolor=green>"></iframe> +<div style="position: absolute; left: 10px; top: 0px; width: 280px; height: 150px; background: red;"></div> +<div style="position: absolute; left: 0px; top: 10px; width: 300px; height: 130px; background: red;"></div> +</body> +</html> diff --git a/layout/reftests/border-radius/inherit-1-ref.html b/layout/reftests/border-radius/inherit-1-ref.html new file mode 100644 index 0000000000..c77e814ff3 --- /dev/null +++ b/layout/reftests/border-radius/inherit-1-ref.html @@ -0,0 +1,25 @@ +<!doctype html> +<html><head> +<title>Border-radius inheritance</title> +<style> +.div1 { width: 100px; height: 100px; + border: 10px solid black; + border-radius: 10px; + left: 50px; + top: 50px; +} + +div > div { + width: 40px; height: 40px; + border: 10px solid black; + position: absolute; + border-radius: 0px; + left: 40px; + top: 40px; +} + +</style> +</head> +<body> + <div class="div1"><div></div></div> +</body></html> diff --git a/layout/reftests/border-radius/inherit-1.html b/layout/reftests/border-radius/inherit-1.html new file mode 100644 index 0000000000..012e14799c --- /dev/null +++ b/layout/reftests/border-radius/inherit-1.html @@ -0,0 +1,24 @@ +<!doctype html> +<html><head> +<title>Border-radius inheritance</title> +<style> +.div1 { width: 100px; height: 100px; + border: 10px solid black; + 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> diff --git a/layout/reftests/border-radius/intersecting-clipping-1-canvas.html b/layout/reftests/border-radius/intersecting-clipping-1-canvas.html new file mode 100644 index 0000000000..020b1e4ce2 --- /dev/null +++ b/layout/reftests/border-radius/intersecting-clipping-1-canvas.html @@ -0,0 +1,20 @@ +<!DOCTYPE HTML> +<title>Test for clipping of border-radius</title> +<style> +div { + overflow: hidden; + width: 200px; + height: 100px; + border-radius: 50px / 20px; +} +canvas { + border-radius: 20px / 40px; +} +</style> +<div><canvas id="canvas" height="100" width="200"></canvas></div> +<script> +var canvas = document.getElementById("canvas"); +var cx = canvas.getContext("2d"); +cx.fillStyle="lime"; +cx.fillRect(0, 0, 200, 100); +</script> diff --git a/layout/reftests/border-radius/intersecting-clipping-1-image.html b/layout/reftests/border-radius/intersecting-clipping-1-image.html new file mode 100644 index 0000000000..ba533d1097 --- /dev/null +++ b/layout/reftests/border-radius/intersecting-clipping-1-image.html @@ -0,0 +1,16 @@ +<!DOCTYPE HTML> +<title>Test for clipping of border-radius</title> +<style> +div { + overflow: hidden; + width: 200px; + height: 100px; + border-radius: 50px / 20px; +} +img { + border-radius: 20px / 40px; + width: 200px; + height: 100px; +} +</style> +<div><img src="../pixel-rounding/lime-25x25.png" alt=""></div> diff --git a/layout/reftests/border-radius/intersecting-clipping-1-overflow-hidden.html b/layout/reftests/border-radius/intersecting-clipping-1-overflow-hidden.html new file mode 100644 index 0000000000..38e2e3f48c --- /dev/null +++ b/layout/reftests/border-radius/intersecting-clipping-1-overflow-hidden.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<title>Test for clipping of border-radius</title> +<style> +body > div { + overflow: hidden; + width: 200px; + height: 100px; + border-radius: 50px / 20px; +} +body > div > div { + border-radius: 20px / 40px; + overflow: hidden; + width: 200px; + height: 100px; + background: lime; +} +</style> +<div><div></div></div> diff --git a/layout/reftests/border-radius/intersecting-clipping-1-ref.html b/layout/reftests/border-radius/intersecting-clipping-1-ref.html new file mode 100644 index 0000000000..0e4061a3f5 --- /dev/null +++ b/layout/reftests/border-radius/intersecting-clipping-1-ref.html @@ -0,0 +1,53 @@ +<!DOCTYPE HTML> +<title>Test for clipping of border-radius</title> +<style> +#contain { + width: 200px; + height: 100px; + position: relative; +} +#contain > div { + overflow: hidden; + width: 200px; + height: 100px; + border-radius: 50px / 20px; +} +#contain > div > div { + border-radius: 20px / 40px; + overflow: hidden; + width: 200px; + height: 100px; + background: lime; +} + +#contain > div.spot { + position: absolute; + height: 1px; + width: 1px; +} + +</style> +<div id="contain"> +<div><div></div></div> + +<!-- +This is just like the test, except we'll add a bunch of spots in various +places that should match the background of what they're on. +--> + +<div class="spot" style="top: 1px; left: 15px; background: white"></div> +<div class="spot" style="top: 14px; left: 2px; background: white"></div> +<div class="spot" style="top: 18px; left: 0px; background: white"></div> +<div class="spot" style="top: 82px; left: 198px; background: white"></div> +<div class="spot" style="top: 97px; left: 180px; background: white"></div> +<div class="spot" style="top: 2px; left: 180px; background: white"></div> +<div class="spot" style="top: 17px; left: 198px; background: white"></div> +<div class="spot" style="top: 97px; left: 19px; background: white"></div> +<div class="spot" style="top: 82px; left: 1px; background: white"></div> + +<div class="spot" style="top: 10px; left: 8px; background: lime"></div> +<div class="spot" style="top: 89px; left: 8px; background: lime"></div> +<div class="spot" style="top: 10px; left: 191px; background: lime"></div> +<div class="spot" style="top: 89px; left: 191px; background: lime"></div> + +</div> diff --git a/layout/reftests/border-radius/intersecting-clipping-1-refc.html b/layout/reftests/border-radius/intersecting-clipping-1-refc.html new file mode 100644 index 0000000000..7208a8c67b --- /dev/null +++ b/layout/reftests/border-radius/intersecting-clipping-1-refc.html @@ -0,0 +1,55 @@ +<!DOCTYPE HTML> +<title>Test for clipping of border-radius</title> +<style> +#contain { + width: 200px; + height: 100px; + position: relative; +} +#contain > div { + overflow: hidden; + width: 200px; + height: 100px; + border-radius: 50px / 20px; +} +#contain > div > canvas { + border-radius: 20px / 40px; +} + +#contain > div.spot { + position: absolute; + height: 1px; + width: 1px; +} + +</style> +<div id="contain"> +<div><canvas id="canvas" height="100" width="200"></canvas></div> +<script> +var canvas = document.getElementById("canvas"); +var cx = canvas.getContext("2d"); +cx.fillStyle="lime"; +cx.fillRect(0, 0, 200, 100); +</script> + +<!-- +This is just like the test, except we'll add a bunch of spots in various +places that should match the background of what they're on. +--> + +<div class="spot" style="top: 1px; left: 15px; background: white"></div> +<div class="spot" style="top: 14px; left: 2px; background: white"></div> +<div class="spot" style="top: 18px; left: 0px; background: white"></div> +<div class="spot" style="top: 82px; left: 198px; background: white"></div> +<div class="spot" style="top: 97px; left: 180px; background: white"></div> +<div class="spot" style="top: 2px; left: 180px; background: white"></div> +<div class="spot" style="top: 17px; left: 198px; background: white"></div> +<div class="spot" style="top: 97px; left: 19px; background: white"></div> +<div class="spot" style="top: 82px; left: 1px; background: white"></div> + +<div class="spot" style="top: 10px; left: 8px; background: lime"></div> +<div class="spot" style="top: 89px; left: 8px; background: lime"></div> +<div class="spot" style="top: 10px; left: 191px; background: lime"></div> +<div class="spot" style="top: 89px; left: 191px; background: lime"></div> + +</div> diff --git a/layout/reftests/border-radius/intersecting-clipping-1-refi.html b/layout/reftests/border-radius/intersecting-clipping-1-refi.html new file mode 100644 index 0000000000..c21a147252 --- /dev/null +++ b/layout/reftests/border-radius/intersecting-clipping-1-refi.html @@ -0,0 +1,51 @@ +<!DOCTYPE HTML> +<title>Test for clipping of border-radius</title> +<style> +#contain { + width: 200px; + height: 100px; + position: relative; +} +#contain > div { + overflow: hidden; + width: 200px; + height: 100px; + border-radius: 50px / 20px; +} +#contain > div > img { + border-radius: 20px / 40px; + width: 200px; + height: 100px; +} + +#contain > div.spot { + position: absolute; + height: 1px; + width: 1px; +} + +</style> +<div id="contain"> +<div><img src="../pixel-rounding/lime-25x25.png" alt=""></div> + +<!-- +This is just like the test, except we'll add a bunch of spots in various +places that should match the background of what they're on. +--> + +<div class="spot" style="top: 1px; left: 15px; background: white"></div> +<div class="spot" style="top: 14px; left: 2px; background: white"></div> +<div class="spot" style="top: 18px; left: 0px; background: white"></div> +<div class="spot" style="top: 82px; left: 198px; background: white"></div> +<div class="spot" style="top: 97px; left: 180px; background: white"></div> +<div class="spot" style="top: 2px; left: 180px; background: white"></div> +<div class="spot" style="top: 17px; left: 198px; background: white"></div> +<div class="spot" style="top: 97px; left: 19px; background: white"></div> +<div class="spot" style="top: 82px; left: 1px; background: white"></div> + +<div class="spot" style="top: 10px; left: 8px; background: lime"></div> +<div class="spot" style="top: 89px; left: 8px; background: lime"></div> +<div class="spot" style="top: 10px; left: 191px; background: lime"></div> +<div class="spot" style="top: 89px; left: 191px; background: lime"></div> + +</div> diff --git a/layout/reftests/border-radius/invalidate-1-ref.html b/layout/reftests/border-radius/invalidate-1-ref.html new file mode 100644 index 0000000000..951f549d04 --- /dev/null +++ b/layout/reftests/border-radius/invalidate-1-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE HTML> +<html> +<body> +<div id="d" style="background:blue; border-radius:50px; width:200px; height:200px;"> +</div> +</body> +</html> diff --git a/layout/reftests/border-radius/invalidate-1a.html b/layout/reftests/border-radius/invalidate-1a.html new file mode 100644 index 0000000000..0d5ce323be --- /dev/null +++ b/layout/reftests/border-radius/invalidate-1a.html @@ -0,0 +1,15 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<body> +<div id="d" style="background:blue; border-radius:50px; width:200px; height:100px;"> +</div> +<script> +function doTest() { + var d = document.getElementById("d"); + d.style.height = "200px"; + document.documentElement.className = ""; +} +window.addEventListener("MozReftestInvalidate", doTest); +</script> +</body> +</html> diff --git a/layout/reftests/border-radius/invalidate-1b.html b/layout/reftests/border-radius/invalidate-1b.html new file mode 100644 index 0000000000..be740a2251 --- /dev/null +++ b/layout/reftests/border-radius/invalidate-1b.html @@ -0,0 +1,15 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<body> +<div id="d" style="background:blue; border-radius:50px; width:100px; height:200px;"> +</div> +<script> +function doTest() { + var d = document.getElementById("d"); + d.style.width = "200px"; + document.documentElement.className = ""; +} +window.addEventListener("MozReftestInvalidate", doTest); +</script> +</body> +</html> diff --git a/layout/reftests/border-radius/outline-circle.html b/layout/reftests/border-radius/outline-circle.html new file mode 100644 index 0000000000..41fcf369e3 --- /dev/null +++ b/layout/reftests/border-radius/outline-circle.html @@ -0,0 +1,11 @@ +<!doctype html> +<html><head> +<title>Circular outline</title> +<style> +div { width: 50px; height: 50px; + outline: 2px solid black; + border-radius: 10px; +} +</style> +</head> +<body><div></div></body></html> diff --git a/layout/reftests/border-radius/outline-ellips.html b/layout/reftests/border-radius/outline-ellips.html new file mode 100644 index 0000000000..965f44432f --- /dev/null +++ b/layout/reftests/border-radius/outline-ellips.html @@ -0,0 +1,11 @@ +<!doctype html> +<html><head> +<title>Elliptical outline</title> +<style> +div { width: 50px; height: 50px; + outline: 2px solid black; + border-radius: 10px / 20px; +} +</style> +</head> +<body><div></div></body></html> diff --git a/layout/reftests/border-radius/outline-square.html b/layout/reftests/border-radius/outline-square.html new file mode 100644 index 0000000000..e95610cf25 --- /dev/null +++ b/layout/reftests/border-radius/outline-square.html @@ -0,0 +1,10 @@ +<!doctype html> +<html><head> +<title>Square outline</title> +<style> +div { width: 50px; height: 50px; + outline: 2px solid black; +} +</style> +</head> +<body><div></div></body></html> diff --git a/layout/reftests/border-radius/percent-1-ref.html b/layout/reftests/border-radius/percent-1-ref.html new file mode 100644 index 0000000000..8bfd633b2d --- /dev/null +++ b/layout/reftests/border-radius/percent-1-ref.html @@ -0,0 +1,55 @@ +<!doctype html> +<html><head><title>Border radius with percent units — reference</title> +<style> +div { background: green; } +.r1 { height: 20px; } .c1 { width: 20px; } +.r2 { height: 40px; } .c2 { width: 40px; } +.r3 { height: 60px; } .c3 { width: 60px; } +.r4 { height: 80px; } .c4 { width: 80px; } + +.r1.c1 { border-radius: 5px / 5px; } +.r1.c2 { border-radius: 10px / 5px; } +.r1.c3 { border-radius: 15px / 5px; } +.r1.c4 { border-radius: 20px / 5px; } +.r2.c1 { border-radius: 5px / 10px; } +.r2.c2 { border-radius: 10px / 10px; } +.r2.c3 { border-radius: 15px / 10px; } +.r2.c4 { border-radius: 20px / 10px; } +.r3.c1 { border-radius: 5px / 15px; } +.r3.c2 { border-radius: 10px / 15px; } +.r3.c3 { border-radius: 15px / 15px; } +.r3.c4 { border-radius: 20px / 15px; } +.r4.c1 { border-radius: 5px / 20px; } +.r4.c2 { border-radius: 10px / 20px; } +.r4.c3 { border-radius: 15px / 20px; } +.r4.c4 { border-radius: 20px / 20px; } + +</style> +</head><body> +<table> + <tr> + <td><div class="r1 c1"></div></td> + <td><div class="r1 c2"></div></td> + <td><div class="r1 c3"></div></td> + <td><div class="r1 c4"></div></td> + </tr> + <tr> + <td><div class="r2 c1"></div></td> + <td><div class="r2 c2"></div></td> + <td><div class="r2 c3"></div></td> + <td><div class="r2 c4"></div></td> + </tr> + <tr> + <td><div class="r3 c1"></div></td> + <td><div class="r3 c2"></div></td> + <td><div class="r3 c3"></div></td> + <td><div class="r3 c4"></div></td> + </tr> + <tr> + <td><div class="r4 c1"></div></td> + <td><div class="r4 c2"></div></td> + <td><div class="r4 c3"></div></td> + <td><div class="r4 c4"></div></td> + </tr> +</table> +</body></html> diff --git a/layout/reftests/border-radius/percent-1.html b/layout/reftests/border-radius/percent-1.html new file mode 100644 index 0000000000..395a070ca7 --- /dev/null +++ b/layout/reftests/border-radius/percent-1.html @@ -0,0 +1,37 @@ +<!doctype html> +<html><head><title>Border radius with percent units — test</title> +<style> +div { border-radius: 25%; background: green; } +.r1 { height: 20px; } .c1 { width: 20px; } +.r2 { height: 40px; } .c2 { width: 40px; } +.r3 { height: 60px; } .c3 { width: 60px; } +.r4 { height: 80px; } .c4 { width: 80px; } +</style> +</head><body> +<table> + <tr> + <td><div class="r1 c1"></div></td> + <td><div class="r1 c2"></div></td> + <td><div class="r1 c3"></div></td> + <td><div class="r1 c4"></div></td> + </tr> + <tr> + <td><div class="r2 c1"></div></td> + <td><div class="r2 c2"></div></td> + <td><div class="r2 c3"></div></td> + <td><div class="r2 c4"></div></td> + </tr> + <tr> + <td><div class="r3 c1"></div></td> + <td><div class="r3 c2"></div></td> + <td><div class="r3 c3"></div></td> + <td><div class="r3 c4"></div></td> + </tr> + <tr> + <td><div class="r4 c1"></div></td> + <td><div class="r4 c2"></div></td> + <td><div class="r4 c3"></div></td> + <td><div class="r4 c4"></div></td> + </tr> +</table> +</body></html> diff --git a/layout/reftests/border-radius/percent-2-ref.html b/layout/reftests/border-radius/percent-2-ref.html new file mode 100644 index 0000000000..2680427acd --- /dev/null +++ b/layout/reftests/border-radius/percent-2-ref.html @@ -0,0 +1,55 @@ +<!doctype html> +<html><head><title>Border radius with percent units — reference</title> +<style> +div { background: green; } +.r1 { height: 20px; } .c1 { width: 20px; } +.r2 { height: 40px; } .c2 { width: 40px; } +.r3 { height: 60px; } .c3 { width: 60px; } +.r4 { height: 80px; } .c4 { width: 80px; } + +.r1.c1 { border-radius: 5px 2px / 5px 2px; } +.r1.c2 { border-radius: 10px 4px / 5px 2px; } +.r1.c3 { border-radius: 15px 6px / 5px 2px; } +.r1.c4 { border-radius: 20px 8px / 5px 2px; } +.r2.c1 { border-radius: 5px 2px / 10px 4px; } +.r2.c2 { border-radius: 10px 4px / 10px 4px; } +.r2.c3 { border-radius: 15px 6px / 10px 4px; } +.r2.c4 { border-radius: 20px 8px / 10px 4px; } +.r3.c1 { border-radius: 5px 2px / 15px 6px; } +.r3.c2 { border-radius: 10px 4px / 15px 6px; } +.r3.c3 { border-radius: 15px 6px / 15px 6px; } +.r3.c4 { border-radius: 20px 8px / 15px 6px; } +.r4.c1 { border-radius: 5px 2px / 20px 8px; } +.r4.c2 { border-radius: 10px 4px / 20px 8px; } +.r4.c3 { border-radius: 15px 6px / 20px 8px; } +.r4.c4 { border-radius: 20px 8px / 20px 8px; } + +</style> +</head><body> +<table> + <tr> + <td><div class="r1 c1"></div></td> + <td><div class="r1 c2"></div></td> + <td><div class="r1 c3"></div></td> + <td><div class="r1 c4"></div></td> + </tr> + <tr> + <td><div class="r2 c1"></div></td> + <td><div class="r2 c2"></div></td> + <td><div class="r2 c3"></div></td> + <td><div class="r2 c4"></div></td> + </tr> + <tr> + <td><div class="r3 c1"></div></td> + <td><div class="r3 c2"></div></td> + <td><div class="r3 c3"></div></td> + <td><div class="r3 c4"></div></td> + </tr> + <tr> + <td><div class="r4 c1"></div></td> + <td><div class="r4 c2"></div></td> + <td><div class="r4 c3"></div></td> + <td><div class="r4 c4"></div></td> + </tr> +</table> +</body></html> diff --git a/layout/reftests/border-radius/percent-2.html b/layout/reftests/border-radius/percent-2.html new file mode 100644 index 0000000000..98fdb10bed --- /dev/null +++ b/layout/reftests/border-radius/percent-2.html @@ -0,0 +1,37 @@ +<!doctype html> +<html><head><title>Border radius with percent units — test</title> +<style> +div { border-radius: 25% 10%; background: green; } +.r1 { height: 20px; } .c1 { width: 20px; } +.r2 { height: 40px; } .c2 { width: 40px; } +.r3 { height: 60px; } .c3 { width: 60px; } +.r4 { height: 80px; } .c4 { width: 80px; } +</style> +</head><body> +<table> + <tr> + <td><div class="r1 c1"></div></td> + <td><div class="r1 c2"></div></td> + <td><div class="r1 c3"></div></td> + <td><div class="r1 c4"></div></td> + </tr> + <tr> + <td><div class="r2 c1"></div></td> + <td><div class="r2 c2"></div></td> + <td><div class="r2 c3"></div></td> + <td><div class="r2 c4"></div></td> + </tr> + <tr> + <td><div class="r3 c1"></div></td> + <td><div class="r3 c2"></div></td> + <td><div class="r3 c3"></div></td> + <td><div class="r3 c4"></div></td> + </tr> + <tr> + <td><div class="r4 c1"></div></td> + <td><div class="r4 c2"></div></td> + <td><div class="r4 c3"></div></td> + <td><div class="r4 c4"></div></td> + </tr> +</table> +</body></html> diff --git a/layout/reftests/border-radius/percent-3-ref.html b/layout/reftests/border-radius/percent-3-ref.html new file mode 100644 index 0000000000..83abf9c4da --- /dev/null +++ b/layout/reftests/border-radius/percent-3-ref.html @@ -0,0 +1,55 @@ +<!doctype html> +<html><head><title>Border radius with percent units — reference</title> +<style> +div { background: green; } +.r1 { height: 20px; } .c1 { width: 20px; } +.r2 { height: 40px; } .c2 { width: 40px; } +.r3 { height: 60px; } .c3 { width: 60px; } +.r4 { height: 80px; } .c4 { width: 80px; } + +.r1.c1 { border-radius: 5px / 2px; } +.r1.c2 { border-radius: 10px / 2px; } +.r1.c3 { border-radius: 15px / 2px; } +.r1.c4 { border-radius: 20px / 2px; } +.r2.c1 { border-radius: 5px / 4px; } +.r2.c2 { border-radius: 10px / 4px; } +.r2.c3 { border-radius: 15px / 4px; } +.r2.c4 { border-radius: 20px / 4px; } +.r3.c1 { border-radius: 5px / 6px; } +.r3.c2 { border-radius: 10px / 6px; } +.r3.c3 { border-radius: 15px / 6px; } +.r3.c4 { border-radius: 20px / 6px; } +.r4.c1 { border-radius: 5px / 8px; } +.r4.c2 { border-radius: 10px / 8px; } +.r4.c3 { border-radius: 15px / 8px; } +.r4.c4 { border-radius: 20px / 8px; } + +</style> +</head><body> +<table> + <tr> + <td><div class="r1 c1"></div></td> + <td><div class="r1 c2"></div></td> + <td><div class="r1 c3"></div></td> + <td><div class="r1 c4"></div></td> + </tr> + <tr> + <td><div class="r2 c1"></div></td> + <td><div class="r2 c2"></div></td> + <td><div class="r2 c3"></div></td> + <td><div class="r2 c4"></div></td> + </tr> + <tr> + <td><div class="r3 c1"></div></td> + <td><div class="r3 c2"></div></td> + <td><div class="r3 c3"></div></td> + <td><div class="r3 c4"></div></td> + </tr> + <tr> + <td><div class="r4 c1"></div></td> + <td><div class="r4 c2"></div></td> + <td><div class="r4 c3"></div></td> + <td><div class="r4 c4"></div></td> + </tr> +</table> +</body></html> diff --git a/layout/reftests/border-radius/percent-3.html b/layout/reftests/border-radius/percent-3.html new file mode 100644 index 0000000000..bb3103554e --- /dev/null +++ b/layout/reftests/border-radius/percent-3.html @@ -0,0 +1,37 @@ +<!doctype html> +<html><head><title>Border radius with percent units — test</title> +<style> +div { border-radius: 25% / 10%; background: green; } +.r1 { height: 20px; } .c1 { width: 20px; } +.r2 { height: 40px; } .c2 { width: 40px; } +.r3 { height: 60px; } .c3 { width: 60px; } +.r4 { height: 80px; } .c4 { width: 80px; } +</style> +</head><body> +<table> + <tr> + <td><div class="r1 c1"></div></td> + <td><div class="r1 c2"></div></td> + <td><div class="r1 c3"></div></td> + <td><div class="r1 c4"></div></td> + </tr> + <tr> + <td><div class="r2 c1"></div></td> + <td><div class="r2 c2"></div></td> + <td><div class="r2 c3"></div></td> + <td><div class="r2 c4"></div></td> + </tr> + <tr> + <td><div class="r3 c1"></div></td> + <td><div class="r3 c2"></div></td> + <td><div class="r3 c3"></div></td> + <td><div class="r3 c4"></div></td> + </tr> + <tr> + <td><div class="r4 c1"></div></td> + <td><div class="r4 c2"></div></td> + <td><div class="r4 c3"></div></td> + <td><div class="r4 c4"></div></td> + </tr> +</table> +</body></html> diff --git a/layout/reftests/border-radius/reftest.list b/layout/reftests/border-radius/reftest.list new file mode 100644 index 0000000000..dedb210b01 --- /dev/null +++ b/layout/reftests/border-radius/reftest.list @@ -0,0 +1,96 @@ +# really basic tests that square, circular, and elliptical border and +# outline radius are not the same thing +!= border-square.html about:blank +!= border-circle.html about:blank +!= border-ellips.html about:blank +!= border-square.html border-circle.html +!= border-square.html border-ellips.html +!= border-circle.html border-ellips.html + +!= outline-square.html about:blank +!= outline-circle.html about:blank +!= outline-ellips.html about:blank +!= 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 + +# percent units +== percent-1.html percent-1-ref.html +fuzzy(0-1,0-342) == percent-2.html percent-2-ref.html +fuzzy(0-1,0-343) == percent-3.html percent-3-ref.html + +# more serious tests, using SVG reference +fuzzy(17-30,58-70) == border-circle-2.html border-circle-2-ref.xhtml +fuzzy(61-63,507-1013) == curved-stripe-border.html curved-stripe-border-ref.svg # bug 459945 + +# Corners +fuzzy(17-30,47-58) == corner-1.html corner-1-ref.svg # bottom corners different radius than top corners +fuzzy(18-30,49-57) == corner-2.html corner-2-ref.svg # right corners different radius than left corners; see bug 500804 +fuzzy(18-23,90-105) == corner-3.html corner-3-ref.svg +fuzzy(12-13,83-108) == corner-4.html corner-4-ref.svg + +# 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 +fuzzy(17-30,58-111) == clipping-3.html clipping-3-ref.xhtml # edge of border-radius clips an underlying object's background + +# Tests for clipping the contents of replaced elements and overflow!=visible +!= clipping-4-ref.html clipping-4-notref.html +fuzzy(0-8,0-20) fuzzy-if(useDrawSnapshot,1-1,172-172) == clipping-4-canvas.html clipping-4-ref.html # bug 732535 +fuzzy(0-1,0-172) == clipping-4-image.html clipping-4-ref.html +fuzzy(0-1,0-77) == clipping-4-overflow-hidden.html clipping-4-ref.html +== clipping-5-canvas.html clipping-5-refc.html +fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),0-1,0-5) == clipping-5-image.html clipping-5-refi.html +fuzzy(0-1,0-77) == clipping-5-overflow-hidden.html clipping-5-ref.html +fuzzy(0-1,0-97) == clipping-5-refi.html clipping-5-ref.html +fuzzy(0-1,0-77) fuzzy-if(useDrawSnapshot,1-1,97-97) == clipping-5-refc.html clipping-5-ref.html # bug 732535 +fuzzy(0-21,0-76) fuzzy-if(winWidget,0-144,0-335) == clipping-6.html clipping-6-ref.html # PaintedLayer and MaskLayer with transforms that aren't identical +fuzzy(0-28,0-97) == clipping-7.html clipping-7-ref.html # ColorLayer and MaskLayer with transforms that aren't identical. Reference image rendered without using layers (which causes fuzzy failures). +== clipping-and-zindex-1.html clipping-and-zindex-1-ref.html +fuzzy-if(cocoaWidget,0-1,0-4) fuzzy-if(d2d,0-59,0-342) == intersecting-clipping-1-canvas.html intersecting-clipping-1-refc.html +== intersecting-clipping-1-image.html intersecting-clipping-1-refi.html +== intersecting-clipping-1-overflow-hidden.html intersecting-clipping-1-ref.html +fuzzy(0-1,0-300) == intersecting-clipping-1-refi.html intersecting-clipping-1-ref.html +fuzzy(0-1,0-135) skip-if(winWidget) fuzzy-if(useDrawSnapshot,1-1,299-299) == intersecting-clipping-1-refc.html intersecting-clipping-1-ref.html # bug 732535 # Disable on Windows bug 1451808 + +== clipping-preserve-3d.html clipping-preserve-3d-ref.html + +# 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 + +fuzzy(0-1,0-116) == invalidate-1a.html invalidate-1-ref.html +fuzzy(0-1,0-117) == invalidate-1b.html invalidate-1-ref.html + +# test that border-radius is reduced for scrollbars +fails-if(Android) fuzzy-if(asyncPan&&!layersGPUAccelerated,0-12,0-12) fuzzy-if(browserIsRemote&&layersGPUAccelerated&&/^Windows\x20NT\x206\.1/.test(http.oscpu),0-12,0-12) fuzzy-if(!Android,0-1,0-50) fuzzy-if(gtkWidget&&layersGPUAccelerated,0-12,0-12) == scrollbar-clamping-1.html scrollbar-clamping-1-ref.html +fails-if(Android) == scrollbar-clamping-2.html scrollbar-clamping-2-ref.html + +# Test for bad corner joins. +fuzzy(0-1,0-1) == corner-joins-1.xhtml corner-joins-1-ref.xhtml +random-if(winWidget) fuzzy(0-255,0-610) == corner-joins-2.xhtml corner-joins-2-ref.xhtml + +fuzzy(0-59,0-146) == scroll-1.html scroll-1-ref.html # see bug 732535 #Bug 959166 + +fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),0-35,0-194) == transforms-1.html transforms-1-ref.html # bug 1507152 + +== zero-radius-clip-1.html zero-radius-clip-ref.html + +== iframe-1.html iframe-1-ref.html + +# Test for antialiasing gaps between background and border +fuzzy(0-1,0-9) == curved-border-background-nogap.html curved-border-background-nogap-ref.html + +fuzzy(0-1,0-4) == color-layer-1a.html color-layer-1-ref.html + +fuzzy-if(!useDrawSnapshot&&!geckoview,1-1,104-162) == corner-split.html corner-split-ref.svg diff --git a/layout/reftests/border-radius/scroll-1-ref.html b/layout/reftests/border-radius/scroll-1-ref.html new file mode 100644 index 0000000000..f290648d0f --- /dev/null +++ b/layout/reftests/border-radius/scroll-1-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE HTML> +<html> +<body> +<div style="border-radius:100px; width:300px; height:300px; overflow:hidden;"> + <div style="height:20px; background:blue;"></div> +</div> +</body> +</html> diff --git a/layout/reftests/border-radius/scroll-1.html b/layout/reftests/border-radius/scroll-1.html new file mode 100644 index 0000000000..30fd7fd8ff --- /dev/null +++ b/layout/reftests/border-radius/scroll-1.html @@ -0,0 +1,23 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<head> +<script> +function scrollTo(v) { + var d = document.getElementById("d"); + d.scrollTop = v; + if (v < 100) { + setTimeout(function() { scrollTo(v + 50); }, 400); + } else { + document.documentElement.removeAttribute("class"); + } +} +</script> +</head> +<body onload="scrollTo(0)"> +<div style="border-radius:100px; width:300px; height:300px; overflow:hidden;" id="d"> + <div style="height:1000px;"> + <div style="margin-top:100px; height:20px; background:blue;"></div> + </div> +</div> +</body> +</html> diff --git a/layout/reftests/border-radius/scrollbar-clamping-1-ref.html b/layout/reftests/border-radius/scrollbar-clamping-1-ref.html new file mode 100644 index 0000000000..39d803754c --- /dev/null +++ b/layout/reftests/border-radius/scrollbar-clamping-1-ref.html @@ -0,0 +1,47 @@ +<!DOCTYPE HTML> +<html dir="ltr"> +<title>Test of reduction of border-radius for scrollbars (border drawing)</title> +<style> + +.contain { height: 130px; position: relative } + +.test { + position: absolute; + top: 0; + left: 0; + /* border-width: 2px 4px 8px 10px; */ + height: 100px; + width: 200px; + /* border-radius: 12px / 15px; */ + border: medium solid blue; + border-width: 2px 4px 8px 10px; +} + +.cover { + position: absolute; + width: 200px; + height: 100px; + top: 2px; + left: 10px; + background: blue; +} + +</style> + +<div class="contain"> + <!-- scrollbar along bottom --> + <div class="test" id="x" style="border-radius: 12px 12px 6.4px 10px / 15px 15px 8px 12.5px"></div> + <div class="cover" style="border-top-right-radius: 5px"></div> +</div> + +<div class="contain"> + <!-- scrollbar along right --> + <div class="test" id="y" style="border-radius: 12px 4px 6.4px 12px / 15px 5px 8px 15px"></div> + <div class="cover"></div> +</div> + +<div class="contain"> + <!-- scrollbar along bottom and right --> + <div class="test" id="xy" style="border-radius: 12px 4px 6.4px 10px / 15px 5px 8px 12.5px"></div> + <div class="cover"></div> +</div> diff --git a/layout/reftests/border-radius/scrollbar-clamping-1.html b/layout/reftests/border-radius/scrollbar-clamping-1.html new file mode 100644 index 0000000000..5d4f3f8cb1 --- /dev/null +++ b/layout/reftests/border-radius/scrollbar-clamping-1.html @@ -0,0 +1,45 @@ +<!DOCTYPE HTML> +<title>Test of reduction of border-radius for scrollbars (border drawing)</title> +<style> + +.contain { height: 130px; position: relative } + +.test { + position: absolute; + top: 0; + left: 0; + border: medium solid blue; + border-width: 2px 4px 8px 10px; + height: 100px; + width: 200px; + border-radius: 12px / 15px; +} + +.cover { + position: absolute; + width: 200px; + height: 100px; + top: 2px; + left: 10px; + background: blue; +} + +#x, #xy { overflow-x: scroll } +#y, #xy { overflow-y: scroll } + +</style> + +<div class="contain"> + <div class="test" id="x"></div> + <div class="cover" style="border-top-right-radius: 5px"></div> +</div> + +<div class="contain"> + <div class="test" id="y"></div> + <div class="cover"></div> +</div> + +<div class="contain"> + <div class="test" id="xy"></div> + <div class="cover"></div> +</div> diff --git a/layout/reftests/border-radius/scrollbar-clamping-2-ref.html b/layout/reftests/border-radius/scrollbar-clamping-2-ref.html new file mode 100644 index 0000000000..de8015e4e8 --- /dev/null +++ b/layout/reftests/border-radius/scrollbar-clamping-2-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE HTML> +<html dir="ltr"> +<title>Test of reduction of border-radius for scrollbars (background drawing)</title> +<style> + +.contain { height: 130px; position: relative } + +.test { + position: absolute; + top: 0; + left: 0; + /* border-width: 2px 4px 8px 10px; */ + height: 110px; + width: 214px; + /* border-radius: 12px / 15px; */ + background: blue; +} + +</style> + +<div class="contain"> + <!-- scrollbar along bottom --> + <div class="test" id="x" style="border-radius: 12px 12px 6.4px 10px / 15px 15px 8px 12.5px"></div> +</div> + +<div class="contain"> + <!-- scrollbar along right --> + <div class="test" id="y" style="border-radius: 12px 4px 6.4px 12px / 15px 5px 8px 15px"></div> +</div> + +<div class="contain"> + <!-- scrollbar along bottom and right --> + <div class="test" id="xy" style="border-radius: 12px 4px 6.4px 10px / 15px 5px 8px 12.5px"></div> +</div> diff --git a/layout/reftests/border-radius/scrollbar-clamping-2.html b/layout/reftests/border-radius/scrollbar-clamping-2.html new file mode 100644 index 0000000000..177e102005 --- /dev/null +++ b/layout/reftests/border-radius/scrollbar-clamping-2.html @@ -0,0 +1,46 @@ +<!DOCTYPE HTML> +<title>Test of reduction of border-radius for scrollbars (background drawing)</title> +<style> + +.contain { height: 130px; position: relative } + +.test { + position: absolute; + top: 0; + left: 0; + border: medium solid transparent; + background: blue; + border-width: 2px 4px 8px 10px; + height: 100px; + width: 200px; + border-radius: 12px / 15px; +} + +.cover { + position: absolute; + width: 200px; + height: 100px; + top: 2px; + left: 10px; + background: blue; +} + +#x, #xy { overflow-x: scroll } +#y, #xy { overflow-y: scroll } + +</style> + +<div class="contain"> + <div class="test" id="x"></div> + <div class="cover" style="margin-top: 50px; height: 50px"></div> +</div> + +<div class="contain"> + <div class="test" id="y"></div> + <div class="cover" style="margin-left: 100px; width: 100px"></div> +</div> + +<div class="contain"> + <div class="test" id="xy"></div> + <div class="cover"></div> +</div> diff --git a/layout/reftests/border-radius/table-collapse-1-ref.html b/layout/reftests/border-radius/table-collapse-1-ref.html new file mode 100644 index 0000000000..9fefb6f8cd --- /dev/null +++ b/layout/reftests/border-radius/table-collapse-1-ref.html @@ -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> </td><td> </td><td> </td></tr> + <tr><td> </td><td> </td><td> </td></tr> + <tr><td> </td><td> </td><td> </td></tr> + </table> +</body></html> diff --git a/layout/reftests/border-radius/table-collapse-1.html b/layout/reftests/border-radius/table-collapse-1.html new file mode 100644 index 0000000000..c7a99b7d73 --- /dev/null +++ b/layout/reftests/border-radius/table-collapse-1.html @@ -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; + border-radius: 4px; +} + +</style> +</head> +<body> + <table> + <tr><td> </td><td> </td><td> </td></tr> + <tr><td> </td><td> </td><td> </td></tr> + <tr><td> </td><td> </td><td> </td></tr> + </table> +</body></html> diff --git a/layout/reftests/border-radius/transforms-1-ref.html b/layout/reftests/border-radius/transforms-1-ref.html new file mode 100644 index 0000000000..2aefee939f --- /dev/null +++ b/layout/reftests/border-radius/transforms-1-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<body style="background:white"> +<style> +div { + position: absolute; + width: 100px; + height: 100px; + border-radius: 30px; + overflow: hidden; +} + +span { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: black; +} +</style> +<div><span></span></div> +</body> +</html> diff --git a/layout/reftests/border-radius/transforms-1.html b/layout/reftests/border-radius/transforms-1.html new file mode 100644 index 0000000000..5b64b3c293 --- /dev/null +++ b/layout/reftests/border-radius/transforms-1.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<body style="background:white"> +<style> +div { + position: absolute; + width: 100px; + height: 100px; + border-radius: 30px; + overflow: hidden; +} + +span { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: black; + transform: scale(2); +} +</style> +<div><span></span></div> +</body> +</html> diff --git a/layout/reftests/border-radius/zero-radius-clip-1.html b/layout/reftests/border-radius/zero-radius-clip-1.html new file mode 100644 index 0000000000..a1364cbd98 --- /dev/null +++ b/layout/reftests/border-radius/zero-radius-clip-1.html @@ -0,0 +1,7 @@ +<html> +<body> +<div style="background: blue; height: 100px; border-radius: 0 0 0 0; border-radius: 0 0 0 0;"> + <div style="background: purple; height: 50px;"></div> +</div> +</body> +</html> diff --git a/layout/reftests/border-radius/zero-radius-clip-ref.html b/layout/reftests/border-radius/zero-radius-clip-ref.html new file mode 100644 index 0000000000..26955c64ec --- /dev/null +++ b/layout/reftests/border-radius/zero-radius-clip-ref.html @@ -0,0 +1,7 @@ +<html> +<body> +<div style="background: blue; height: 100px;"> + <div style="background: purple; height: 50px;"></div> +</div> +</body> +</html> |
