Add reftests for clipping to the border-radius curve. (Bug 459144, Bug 485501) a2.0=blocking2.0:beta6
authorL. David Baron <dbaron@dbaron.org>
Thu, 09 Sep 2010 08:21:47 -0700
changeset 52295 da15f373d499380dc04e7a2d663bfabe5df359fe
parent 52294 0aa1272e932fee3aa47f6cde08ec602e5c0310bc
child 52296 94cf996b52d0ce0d2aaf7aecf635957f847e95eb
push id15592
push userdbaron@mozilla.com
push dateThu, 09 Sep 2010 15:23:38 +0000
treeherdermozilla-central@8adb2f64c138 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs459144, 485501
milestone2.0b6pre
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Add reftests for clipping to the border-radius curve. (Bug 459144, Bug 485501) a2.0=blocking2.0:beta6
layout/reftests/border-radius/clipping-4-canvas.html
layout/reftests/border-radius/clipping-4-image.html
layout/reftests/border-radius/clipping-4-notref.html
layout/reftests/border-radius/clipping-4-overflow-hidden.html
layout/reftests/border-radius/clipping-4-ref.html
layout/reftests/border-radius/clipping-5-canvas.html
layout/reftests/border-radius/clipping-5-image.html
layout/reftests/border-radius/clipping-5-overflow-hidden.html
layout/reftests/border-radius/clipping-5-ref.html
layout/reftests/border-radius/clipping-5-refc.html
layout/reftests/border-radius/clipping-5-refi.html
layout/reftests/border-radius/clipping-and-zindex-1-ref.html
layout/reftests/border-radius/clipping-and-zindex-1.html
layout/reftests/border-radius/intersecting-clipping-1-canvas.html
layout/reftests/border-radius/intersecting-clipping-1-image.html
layout/reftests/border-radius/intersecting-clipping-1-overflow-hidden.html
layout/reftests/border-radius/intersecting-clipping-1-ref.html
layout/reftests/border-radius/intersecting-clipping-1-refc.html
layout/reftests/border-radius/intersecting-clipping-1-refi.html
layout/reftests/border-radius/reftest.list
new file mode 100644
--- /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 {
+  -moz-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="green";
+cx.fillRect(0, 0, 200, 100);
+</script>
new file mode 100644
--- /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;
+  -moz-border-radius: 25px;
+}
+</style>
+<img src="../pixel-rounding/green-25x25.png" alt="">
new file mode 100644
--- /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: green;
+  height: 100px;
+  width: 200px;
+}
+</style>
+<div></div>
new file mode 100644
--- /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;
+  -moz-border-radius: 25px;
+  overflow: hidden;
+}
+body > div > div {
+  background: green;
+  height: 100px;
+  width: 200px;
+}
+</style>
+<div><div></div></div>
new file mode 100644
--- /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: green;
+  height: 100px;
+  width: 200px;
+  -moz-border-radius: 25px;
+}
+</style>
+<div></div>
new file mode 100644
--- /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;
+  -moz-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="green";
+cx.fillRect(0, 0, 200, 100);
+</script>
new file mode 100644
--- /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;
+  -moz-border-radius: 25px 17px 14px 18px / 12px 15px 18px 17px;
+}
+</style>
+<img src="../pixel-rounding/green-25x25.png" alt="">
new file mode 100644
--- /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;
+  -moz-border-radius: 25px 17px 14px 18px / 12px 15px 18px 17px;
+}
+body > div > div {
+  background: green;
+  height: 100px;
+  width: 200px;
+  margin-left: -5px;
+}
+</style>
+<div><div></div></div>
new file mode 100644
--- /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: green;
+  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 */
+  /* -moz-border-radius: 25px 17px 14px 18px / 12px 15px 18px 17px; */
+  -moz-border-radius: 17px 15px 12px 10px / 11px 14px 14px 13px;
+}
+</style>
+<div></div>
new file mode 100644
--- /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 */
+  /* -moz-border-radius: 25px 17px 14px 18px / 12px 15px 18px 17px; */
+  -moz-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="green";
+cx.fillRect(0, 0, 200, 100);
+</script>
new file mode 100644
--- /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 */
+  /* -moz-border-radius: 25px 17px 14px 18px / 12px 15px 18px 17px; */
+  -moz-border-radius: 17px 15px 12px 10px / 11px 14px 14px 13px;
+}
+</style>
+<img src="../pixel-rounding/green-25x25.png" alt="">
new file mode 100644
--- /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; -moz-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>
new file mode 100644
--- /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; -moz-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>
new file mode 100644
--- /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;
+  -moz-border-radius: 50px / 20px;
+}
+canvas {
+  -moz-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="green";
+cx.fillRect(0, 0, 200, 100);
+</script>
new file mode 100644
--- /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;
+  -moz-border-radius: 50px / 20px;
+}
+img {
+  -moz-border-radius: 20px / 40px;
+  width: 200px;
+  height: 100px;
+}
+</style>
+<div><img src="../pixel-rounding/green-25x25.png" alt=""></div>
new file mode 100644
--- /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;
+  -moz-border-radius: 50px / 20px;
+}
+body > div > div {
+  -moz-border-radius: 20px / 40px;
+  overflow: hidden;
+  width: 200px;
+  height: 100px;
+  background: green;
+}
+</style>
+<div><div></div></div>
new file mode 100644
--- /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;
+  -moz-border-radius: 50px / 20px;
+}
+#contain > div > div {
+  -moz-border-radius: 20px / 40px;
+  overflow: hidden;
+  width: 200px;
+  height: 100px;
+  background: green;
+}
+
+#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: green"></div>
+<div class="spot" style="top: 89px; left: 8px; background: green"></div>
+<div class="spot" style="top: 10px; left: 191px; background: green"></div>
+<div class="spot" style="top: 89px; left: 191px; background: green"></div>
+
+</div>
new file mode 100644
--- /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;
+  -moz-border-radius: 50px / 20px;
+}
+#contain > div > canvas {
+  -moz-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="green";
+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: green"></div>
+<div class="spot" style="top: 89px; left: 8px; background: green"></div>
+<div class="spot" style="top: 10px; left: 191px; background: green"></div>
+<div class="spot" style="top: 89px; left: 191px; background: green"></div>
+
+</div>
new file mode 100644
--- /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;
+  -moz-border-radius: 50px / 20px;
+}
+#contain > div > img {
+  -moz-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/green-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: green"></div>
+<div class="spot" style="top: 89px; left: 8px; background: green"></div>
+<div class="spot" style="top: 10px; left: 191px; background: green"></div>
+<div class="spot" style="top: 89px; left: 191px; background: green"></div>
+
+</div>
--- a/layout/reftests/border-radius/reftest.list
+++ b/layout/reftests/border-radius/reftest.list
@@ -34,16 +34,33 @@ random == corner-2.html corner-2-ref.svg
 == 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
 
+# Tests for clipping the contents of replaced elements and overflow!=visible
+!= clipping-4-ref.html clipping-4-notref.html
+fails-if(cocoaWidget) == clipping-4-canvas.html clipping-4-ref.html
+== clipping-4-image.html clipping-4-ref.html
+== clipping-4-overflow-hidden.html clipping-4-ref.html
+== clipping-5-canvas.html clipping-5-refc.html
+== clipping-5-image.html clipping-5-refi.html
+== clipping-5-overflow-hidden.html clipping-5-ref.html
+== clipping-5-refi.html clipping-5-ref.html
+fails-if(cocoaWidget) == clipping-5-refc.html clipping-5-ref.html
+== clipping-and-zindex-1.html clipping-and-zindex-1-ref.html
+== 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
+== intersecting-clipping-1-refi.html intersecting-clipping-1-ref.html
+fails-if(cocoaWidget) == intersecting-clipping-1-refc.html intersecting-clipping-1-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
 
 == invalidate-1a.html invalidate-1-ref.html