1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/layout/reftests/border-radius/curved-border-background-nogap.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,36 @@
1.4 +<!DOCTYPE html>
1.5 +<style>
1.6 + /*
1.7 + Turns out that the antialiasing on the outer edge of a block with
1.8 + border-radius is not consistent if the width and border-width are changed
1.9 + even if the resulting shape should look the same. So clip out the part
1.10 + that's too far from the center
1.11 + */
1.12 + div.outer {
1.13 + width: 100px;
1.14 + height: 100px;
1.15 + overflow: hidden;
1.16 + }
1.17 + /* We want the following constraints to be satisfied:
1.18 + 1) Entire inner div content area is contained inside the 100px square.
1.19 + 2) Entire 100px square is contained inside the outer circle of the inner
1.20 + div's border.
1.21 +
1.22 + This requires that the inner div width/height be < 100px and that the
1.23 + radius of the outer circle be at least 50 * sqrt(2). Let's go with a 75px
1.24 + radius for that outer circle. We then need to shift our inner div up and
1.25 + to the left by 25px to center it in the clipping region.
1.26 + */
1.27 +
1.28 + div.inner {
1.29 + width: 50px;
1.30 + height: 50px;
1.31 + border: 50px solid black;
1.32 + background: black;
1.33 + border-radius: 100px;
1.34 + position: relative;
1.35 + top: -25px;
1.36 + left: -25px;
1.37 + }
1.38 +</style>
1.39 +<div class="outer"><div class="inner"></div></div>
