summaryrefslogtreecommitdiffstats
path: root/layout/reftests/border-radius/curved-border-background-nogap.html
diff options
context:
space:
mode:
Diffstat (limited to 'layout/reftests/border-radius/curved-border-background-nogap.html')
-rw-r--r--layout/reftests/border-radius/curved-border-background-nogap.html36
1 files changed, 36 insertions, 0 deletions
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>