layout/reftests/border-radius/curved-border-background-nogap.html@a63d609f5ebe
layout/reftests/border-radius/curved-border-background-nogap.html
Thu, 15 Jan 2015 15:55:04 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Thu, 15 Jan 2015 15:55:04 +0100
- branch
- TOR_BUG_9701
- changeset 9
- a63d609f5ebe
- permissions
- -rw-r--r--
Back out 97036ab72558 which inappropriately compared turds to third parties.
1 <!DOCTYPE html>
2 <style>
3 /*
4 Turns out that the antialiasing on the outer edge of a block with
5 border-radius is not consistent if the width and border-width are changed
6 even if the resulting shape should look the same. So clip out the part
7 that's too far from the center
8 */
9 div.outer {
10 width: 100px;
11 height: 100px;
12 overflow: hidden;
13 }
14 /* We want the following constraints to be satisfied:
15 1) Entire inner div content area is contained inside the 100px square.
16 2) Entire 100px square is contained inside the outer circle of the inner
17 div's border.
19 This requires that the inner div width/height be < 100px and that the
20 radius of the outer circle be at least 50 * sqrt(2). Let's go with a 75px
21 radius for that outer circle. We then need to shift our inner div up and
22 to the left by 25px to center it in the clipping region.
23 */
25 div.inner {
26 width: 50px;
27 height: 50px;
28 border: 50px solid black;
29 background: black;
30 border-radius: 100px;
31 position: relative;
32 top: -25px;
33 left: -25px;
34 }
35 </style>
36 <div class="outer"><div class="inner"></div></div>
