The Tor Browser: layout/reftests/border-radius/curved-border-background-nogap.html@a63d609f5ebe (annotated)

layout/reftests/border-radius/curved-border-background-nogap.html@a63d609f5ebe (annotated)

Thu, 15 Jan 2015 15:55:04 +0100

Back out 97036ab72558 which inappropriately compared turds to third parties.

 <!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:
 )  Entire inner div content area is contained inside the 100px square.
 )  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>