/
contain-paint-clip-016.html
69 lines (48 loc) · 2.3 KB
/
contain-paint-clip-016.html
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>