wpt/css/css-contain/contain-paint-clip-016.html at master · web-platform-tests/wpt · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Containment Test: 'contain: paint' and clipping descendants at padding edge</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">
  <!--
  This test fails in Chromium 66.0.3359.117
  -->

  <meta content="This test checks that the paint of the descendant (a red square image) and its geometry is clipped to the padding edge of the element's principal box, taking corner clipping into account." name="assert">
  <meta name="fuzzy" content="maxDifference=0-99;totalPixels=0-410">

  <!--

  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#red-container-circle
    {
      background-color: red;
      border-radius: 50%;
      contain: paint;
      height: 50px;
      padding: 25px 0px;
      width: 100px;
    }

  img
    {
      vertical-align: bottom;
    }

  div#green-overlapping-reference
    {
      background-color: green;
      border-radius: 50%;
      bottom: 100px;
      height: 100px;
      position: relative;
      width: 100px;
    }
  </style>

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

  <div id="red-container-circle"><img src="support/swatch-red.png" width="100" height="175" alt="Image download support must be enabled"></div>

  <div id="green-overlapping-reference"></div>