layout/reftests/border-radius/curved-border-background-nogap.html@deefc01c0e14 (annotated)
layout/reftests/border-radius/curved-border-background-nogap.html
Thu, 15 Jan 2015 21:03:48 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Thu, 15 Jan 2015 21:03:48 +0100
- branch
- TOR_BUG_9701
- changeset 11
- deefc01c0e14
- permissions
- -rw-r--r--
Integrate friendly tips from Tor colleagues to make (or not) 4.5 alpha 3;
This includes removal of overloaded (but unused) methods, and addition of
a overlooked call to DataStruct::SetData(nsISupports, uint32_t, bool.)
| michael@0 | 1 | <!DOCTYPE html> |
| michael@0 | 2 | <style> |
| michael@0 | 3 | /* |
| michael@0 | 4 | Turns out that the antialiasing on the outer edge of a block with |
| michael@0 | 5 | border-radius is not consistent if the width and border-width are changed |
| michael@0 | 6 | even if the resulting shape should look the same. So clip out the part |
| michael@0 | 7 | that's too far from the center |
| michael@0 | 8 | */ |
| michael@0 | 9 | div.outer { |
| michael@0 | 10 | width: 100px; |
| michael@0 | 11 | height: 100px; |
| michael@0 | 12 | overflow: hidden; |
| michael@0 | 13 | } |
| michael@0 | 14 | /* We want the following constraints to be satisfied: |
| michael@0 | 15 | 1) Entire inner div content area is contained inside the 100px square. |
| michael@0 | 16 | 2) Entire 100px square is contained inside the outer circle of the inner |
| michael@0 | 17 | div's border. |
| michael@0 | 18 | |
| michael@0 | 19 | This requires that the inner div width/height be < 100px and that the |
| michael@0 | 20 | radius of the outer circle be at least 50 * sqrt(2). Let's go with a 75px |
| michael@0 | 21 | radius for that outer circle. We then need to shift our inner div up and |
| michael@0 | 22 | to the left by 25px to center it in the clipping region. |
| michael@0 | 23 | */ |
| michael@0 | 24 | |
| michael@0 | 25 | div.inner { |
| michael@0 | 26 | width: 50px; |
| michael@0 | 27 | height: 50px; |
| michael@0 | 28 | border: 50px solid black; |
| michael@0 | 29 | background: black; |
| michael@0 | 30 | border-radius: 100px; |
| michael@0 | 31 | position: relative; |
| michael@0 | 32 | top: -25px; |
| michael@0 | 33 | left: -25px; |
| michael@0 | 34 | } |
| michael@0 | 35 | </style> |
| michael@0 | 36 | <div class="outer"><div class="inner"></div></div> |
