blob: 5b36a06e17a7bc897ed5709df1cf9217087eb36b (
plain)
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
|
<!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>
|
