layout/reftests/border-radius/curved-border-background-nogap.html
author Serban Stanca <sstanca@mozilla.com>
Thu, 17 Jul 2025 20:21:32 +0300 (7 hours ago)
changeset 797003 7ec5a911287f51bc177058928bb102163a3b656e
parent 81490 85358854403fbd5c6b1731e2eda2722deea51d98
permissions -rw-r--r--
Revert "Bug 1977690 - Remove unused AppRequestInterceptor in androidTests r=aaronmt" for causing fenix-debug failures. This reverts commit bc9dc5f4296482e17560627acaacd2797e462211.
<!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>