Skip to content

Commit 4b41123

Browse files
PsychpsyoPsychpsyo
authored
Replace a css-contain test with a better version (#52321)
These seem to test that 'contain: paint' and 'will-change: contain' actually establish stacking contexts. Since they were overcomplicated and hard to understand, this replaces them with simpler versions that test for the same thing.
1 parent 14df8c5 commit 4b41123

3 files changed

Lines changed: 74 additions & 191 deletions

File tree

‎css/css-contain/contain-paint-stacking-context-001-ref.html‎

Lines changed: 12 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,13 @@
11
<!DOCTYPE HTML>
2-
<html>
3-
<head>
4-
<meta charset="utf-8">
5-
<title>CSS Reftest Reference</title>
6-
<link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
7-
<style>
8-
div {
9-
position: relative;
10-
width: 100px;
11-
}
12-
#div1,
13-
#div3 {
14-
background-color: #cfc;
15-
}
16-
#div1 {
17-
z-index: 5;
18-
}
19-
#div2 {
20-
z-index: 1;
21-
background-color: #fdd;
22-
height: 100px;
23-
top: -20px;
24-
}
25-
#div2_1 {
26-
background-color: #ffc;
27-
z-index: 6;
28-
top: -10px;
29-
}
30-
#div2_2 {
31-
z-index: 3;
32-
position: absolute;
33-
top: -15px;
34-
width: 40px;
35-
height: 100px;
36-
background-color: #ddf;
37-
}
38-
#div3 {
39-
z-index: 2;
40-
top: -50px;
41-
}
42-
</style>
43-
</head>
44-
<body>
45-
<div id="div1">
46-
<br/><br/>
47-
</div>
48-
49-
<div id="div2">
50-
<div id="div2_1">
51-
<br/><br/>
52-
</div>
53-
54-
<div id="div2_2">
55-
</div>
56-
</div>
57-
58-
<div id="div3">
59-
<br/><br/>
60-
</div>
61-
</body>
62-
</html>
2+
<meta charset="utf-8">
3+
<title>Paint Containment Stacking Context Reference</title>
4+
<link rel="author" title="Psychpsyo" href="mailto:psychpsyo@gmail.com">
5+
<style>
6+
div {
7+
width: 100px;
8+
height: 100px;
9+
background-color: green;
10+
}
11+
</style>
12+
<div></div>
13+
Test succeeds if there is no red.

‎css/css-contain/contain-paint-stacking-context-001a.html‎

Lines changed: 31 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,32 @@
11
<!DOCTYPE HTML>
2-
<html>
3-
<head>
4-
<meta charset="utf-8">
5-
<title>CSS Test: 'contain: paint' with stacking contents. Z-index is defined only for siblings and children.</title>
6-
<link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
7-
8-
<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#x43">
9-
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">
10-
<link rel="match" href="contain-paint-stacking-context-001-ref.html">
11-
<style>
12-
div {
13-
position: relative;
14-
width: 100px;
15-
}
16-
#div1,
17-
#div3 {
18-
background-color: #cfc;
19-
}
20-
#div1 {
21-
z-index: 5;
22-
}
23-
#div2 {
24-
contain: paint;
25-
background-color: #fdd;
26-
height: 100px;
27-
top: -20px;
28-
}
29-
#div2_1 {
30-
background-color: #ffc;
31-
z-index: 6;
32-
top: -10px;
33-
}
34-
#div2_2 {
35-
z-index: 3;
36-
position: absolute;
37-
top: -15px;
38-
width: 40px;
39-
height: 100px;
40-
background-color: #ddf;
41-
}
42-
#div3 {
43-
z-index: 2;
44-
top: -50px;
45-
}
46-
</style>
47-
</head>
48-
<body>
49-
<div id="div1">
50-
<br/><br/>
51-
</div>
52-
53-
<div id="div2">
54-
<div id="div2_1">
55-
<br/><br/>
56-
</div>
57-
58-
<div id="div2_2">
59-
</div>
60-
</div>
61-
62-
<div id="div3">
63-
<br/><br/>
64-
</div>
65-
</body>
66-
</html>
2+
<title>'contain: paint' establishes stacking context.</title>
3+
<link rel="author" title="Psychpsyo" href="mailto:psychpsyo@gmail.com">
4+
<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#x43">
5+
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">
6+
<link rel="match" href="contain-paint-stacking-context-001-ref.html">
7+
<style>
8+
div {
9+
width: 100px;
10+
height: 100px;
11+
}
12+
#front {
13+
background-color: green;
14+
/* makes a stacking context and puts this on top */
15+
position: absolute;
16+
z-index: 10;
17+
}
18+
#back {
19+
contain: paint;
20+
}
21+
#notOnTop {
22+
background-color: red;
23+
/* z-index is higher than on #front, but this should still be covered up because it is inside #back, which has 'contain: paint' */
24+
position: absolute;
25+
z-index: 1000;
26+
}
27+
</style>
28+
<div id="front"></div>
29+
<div id="back">
30+
<div id="notOnTop"></div>
31+
</div>
32+
Test succeeds if there is no red.

‎css/css-contain/contain-paint-stacking-context-001b.html‎

Lines changed: 31 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,32 @@
11
<!DOCTYPE HTML>
2-
<html>
3-
<head>
4-
<meta charset="utf-8">
5-
<title>CSS Test: 'will-change: contain' with stacking contents. Z-index is defined only for siblings and children.</title>
6-
<link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
7-
8-
<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#x43">
9-
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">
10-
<link rel="match" href="contain-paint-stacking-context-001-ref.html">
11-
<style>
12-
div {
13-
position: relative;
14-
width: 100px;
15-
}
16-
#div1,
17-
#div3 {
18-
background-color: #cfc;
19-
}
20-
#div1 {
21-
z-index: 5;
22-
}
23-
#div2 {
24-
will-change: contain;
25-
background-color: #fdd;
26-
height: 100px;
27-
top: -20px;
28-
}
29-
#div2_1 {
30-
background-color: #ffc;
31-
z-index: 6;
32-
top: -10px;
33-
}
34-
#div2_2 {
35-
z-index: 3;
36-
position: absolute;
37-
top: -15px;
38-
width: 40px;
39-
height: 100px;
40-
background-color: #ddf;
41-
}
42-
#div3 {
43-
z-index: 2;
44-
top: -50px;
45-
}
46-
</style>
47-
</head>
48-
<body>
49-
<div id="div1">
50-
<br/><br/>
51-
</div>
52-
53-
<div id="div2">
54-
<div id="div2_1">
55-
<br/><br/>
56-
</div>
57-
58-
<div id="div2_2">
59-
</div>
60-
</div>
61-
62-
<div id="div3">
63-
<br/><br/>
64-
</div>
65-
</body>
66-
</html>
2+
<title>'will-change: contain' establishes stacking context.</title>
3+
<link rel="author" title="Psychpsyo" href="mailto:psychpsyo@gmail.com">
4+
<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#x43">
5+
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">
6+
<link rel="match" href="contain-paint-stacking-context-001-ref.html">
7+
<style>
8+
div {
9+
width: 100px;
10+
height: 100px;
11+
}
12+
#front {
13+
background-color: green;
14+
/* makes a stacking context and puts this on top */
15+
position: absolute;
16+
z-index: 10;
17+
}
18+
#back {
19+
will-change: contain;
20+
}
21+
#notOnTop {
22+
background-color: red;
23+
/* z-index is higher than on #front, but this should still be covered up because it is inside #back, which has 'will-change: contain' */
24+
position: absolute;
25+
z-index: 1000;
26+
}
27+
</style>
28+
<div id="front"></div>
29+
<div id="back">
30+
<div id="notOnTop"></div>
31+
</div>
32+
Test succeeds if there is no red.

0 commit comments

Comments
 (0)