css/css-contain/contain-paint-clip-018.html

<!DOCTYPE html>

 <meta charset="UTF-8">

  <title>CSS Containment Test: 'contain: paint' and clipping at padding edge (generated ::after content)</title>

  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-paint">
  <link rel="match" href="reference/contain-paint-clip-015-ref.html">

  <meta content="This test checks that the paint containment of an element clips at its padding edge. In this test, the generated element (a red square image) is located outside the content edge, into what would have been the padding belt of the element." name="assert">

  <!--

  contain-paint-clip-011: content overflows horizontally, principal box has no padding

  contain-paint-clip-012: content overflows vertically, principal box has no padding

  contain-paint-clip-013: content overflows horizontally, principal box has horizontal padding

  contain-paint-clip-014: content overflows vertically, principal box has vertical padding

  contain-paint-clip-015: content overflow horizontally, principal box has horizontal padding and corner clipping is involved

  contain-paint-clip-016: content overflow vertically, principal box has vertical padding and corner clipping is involved

  contain-paint-clip-017: principal box has horizontal and vertical padding, generated ::before content is inside top-right corner

  contain-paint-clip-018: principal box has horizontal and vertical padding, generated ::after content is inside top-left corner

  -->


  <style>
  div
    {
      background-color: green;
      border-radius: 100px;
      contain: paint;
      height: 50px;
      padding: 25px;
      width: 50px;
    }

  div::after
    {
      background-color: red;
      content: "";
      display: block;
      height: 18px;
      margin-left: -29px;
      margin-top: -28px;
      width: 18px;
    }
  </style>

  <p>Test passes if there is a filled green circle and <strong>no red</strong>.

  <div></div>