Bug 458131. Additional reftests for border-radius. r=zwol
authorJonathan Griffin <jgriffin@mozilla.com>
Tue, 10 Nov 2009 11:08:38 -0800
changeset 34740 f0f48d5f535a708ae3dd3845e4f566542d6145c7
parent 34739 12b789f71d7025108f96a9dd26f4a4d48187e92b
child 34741 5372b453a52ea3f065b17a707bfb50d61bd7f818
push id10218
push userjgriffin@mozilla.com
push dateTue, 10 Nov 2009 19:09:18 +0000
treeherdermozilla-central@f0f48d5f535a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerszwol
bugs458131
milestone1.9.3a1pre
Bug 458131. Additional reftests for border-radius. r=zwol
layout/reftests/border-radius/border-reduce-height-ref.html
layout/reftests/border-radius/border-reduce-height.html
layout/reftests/border-radius/border-value-interpret-ref.html
layout/reftests/border-radius/border-value-interpret.html
layout/reftests/border-radius/clipping-1-ref.html
layout/reftests/border-radius/clipping-1.html
layout/reftests/border-radius/clipping-2.html
layout/reftests/border-radius/clipping-3-ref.xhtml
layout/reftests/border-radius/clipping-3.html
layout/reftests/border-radius/corner-1-ref.svg
layout/reftests/border-radius/corner-1.html
layout/reftests/border-radius/corner-2-ref.svg
layout/reftests/border-radius/corner-2.html
layout/reftests/border-radius/curved-borders-all-styles.html
layout/reftests/border-radius/curved-stripe-border-ref.svg
layout/reftests/border-radius/curved-stripe-border.html
layout/reftests/border-radius/inherit-1-ref.html
layout/reftests/border-radius/inherit-1.html
layout/reftests/border-radius/reftest.list
layout/reftests/border-radius/table-collapse-1-ref.html
layout/reftests/border-radius/table-collapse-1.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/border-radius/border-reduce-height-ref.html
@@ -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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/border-radius/border-reduce-height.html
@@ -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>
new file mode 100644
--- /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;
+            -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>
new file mode 100644
--- /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 { -moz-border-radius: 2em 10px 3em / 10px 0.5em }
+
+</style>
+</head>
+<body>
+  <div id="test1"></div>
+</body></html>
new file mode 100644
--- /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; 
+      -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>
new file mode 100644
--- /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; 
+      -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>
new file mode 100644
--- /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; 
+      -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>
new file mode 100644
--- /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>
new file mode 100644
--- /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;
+      -moz-border-radius: 10px;
+}
+
+</style>
+</head>
+<body>
+  <div class="div1"/>
+  <div class="div2"/>
+</body></html>
new file mode 100644
--- /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>
+
new file mode 100644
--- /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; 
+      -moz-border-radius: 10px 10px 6px 6px;
+      position: absolute;
+      background: black;
+      left: 50px;
+      top: 50px;
+}
+
+</style>
+</head>
+<body>
+  <div class="div1"></div>
+</body></html>
new file mode 100644
--- /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>
new file mode 100644
--- /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; 
+      -moz-border-radius: 10px 6px 6px 10px;
+      position: absolute;
+      background: black;
+      left: 50px;
+      top: 50px;
+}
+
+</style>
+</head>
+<body>
+  <div class="div1"></div>
+</body></html>
new file mode 100644
--- /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;
+	-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>
+
new file mode 100644
--- /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>
new file mode 100644
--- /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 {
+  -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>
new file mode 100644
--- /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; 
+      -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>
new file mode 100644
--- /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; 
+      -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>
--- a/layout/reftests/border-radius/reftest.list
+++ b/layout/reftests/border-radius/reftest.list
@@ -8,14 +8,38 @@
 != 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
 
 # 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
new file mode 100644
--- /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>&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>
new file mode 100644
--- /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;
+  -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>