LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-018.html

   1 <!DOCTYPE html>
   2
   3  <meta charset="UTF-8">
   4
   5   <title>CSS Containment Test: 'contain: paint' and clipping at padding edge (generated ::after content)</title>
   6
   7   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
   8   <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-paint">
   9   <link rel="match" href="reference/contain-paint-clip-015-ref.html">
  10
  11   <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">
  12
  13   <!--
  14
  15   contain-paint-clip-011: content overflows horizontally, principal box has no padding
  16
  17   contain-paint-clip-012: content overflows vertically, principal box has no padding
  18
  19   contain-paint-clip-013: content overflows horizontally, principal box has horizontal padding
  20
  21   contain-paint-clip-014: content overflows vertically, principal box has vertical padding
  22
  23   contain-paint-clip-015: content overflow horizontally, principal box has horizontal padding and corner clipping is involved
  24
  25   contain-paint-clip-016: content overflow vertically, principal box has vertical padding and corner clipping is involved
  26
  27   contain-paint-clip-017: principal box has horizontal and vertical padding, generated ::before content is inside top-right corner
  28
  29   contain-paint-clip-018: principal box has horizontal and vertical padding, generated ::after content is inside top-left corner
  30
  31   -->
  32
  33
  34   <style>
  35   div
  36     {
  37       background-color: green;
  38       border-radius: 100px;
  39       contain: paint;
  40       height: 50px;
  41       padding: 25px;
  42       width: 50px;
  43     }
  44
  45   div::after
  46     {
  47       background-color: red;
  48       content: "";
  49       display: block;
  50       height: 18px;
  51       margin-left: -29px;
  52       margin-top: -28px;
  53       width: 18px;
  54     }
  55   </style>
  56
  57   <p>Test passes if there is a filled green circle and <strong>no red</strong>.
  58
  59   <div></div>