Skip to content

Commit 314ebc0

Browse files
frivoalfrivoal
authored
Tests for outwards propagation from body with containement (#29057)
See w3c/csswg-drafts#5913
1 parent b09e7e2 commit 314ebc0

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+1304
-0
lines changed

‎css/css-contain/contain-body-bg-001.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
>
2+
<html lang=en>
3+
<meta charset=utf-8>
4+
<title>CSS-contain test: layout containment on body prevents background propagationtitle>
5+
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6+
<meta name=flags content="">
7+
<meta name=assert content="layout containment on body prevents background propagation">
8+
<link rel="match" href="reference/contain-body-bg-001-ref.html">
9+
<link rel=help href="https://drafts.csswg.org/css-contain-1/#contain-property">
10+
11+
<style>
12+
html, body, p {
13+
margin: 0;
14+
width: 300px;
15+
height: 200px;
16+
}
17+
p {
18+
background: white;
19+
}
20+
body {
21+
background: red;
22+
contain: layout;
23+
}
24+
style>
25+
26+
<p>Test passes if there is no red.

‎css/css-contain/contain-body-bg-002.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
>
2+
<html lang=en>
3+
<meta charset=utf-8>
4+
<title>CSS-contain test: paint containment on body prevents background propagationtitle>
5+
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6+
<meta name=flags content="">
7+
<meta name=assert content="paint containment on body prevents background propagation">
8+
<link rel="match" href="reference/contain-body-bg-001-ref.html">
9+
<link rel=help href="https://drafts.csswg.org/css-contain-1/#contain-property">
10+
11+
<style>
12+
html, body, p {
13+
margin: 0;
14+
width: 300px;
15+
height: 200px;
16+
}
17+
p {
18+
background: white;
19+
}
20+
body {
21+
background: red;
22+
contain: paint;
23+
}
24+
style>
25+
26+
<p>Test passes if there is no red.

‎css/css-contain/contain-body-bg-003.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
>
2+
<html lang=en>
3+
<meta charset=utf-8>
4+
<title>CSS-contain test: size containment on body prevents background propagationtitle>
5+
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6+
<meta name=flags content="">
7+
<meta name=assert content="size containment on body prevents background propagation">
8+
<link rel="match" href="reference/contain-body-bg-001-ref.html">
9+
<link rel=help href="https://drafts.csswg.org/css-contain-1/#contain-property">
10+
11+
<style>
12+
html, body, p {
13+
margin: 0;
14+
width: 300px;
15+
height: 200px;
16+
}
17+
p {
18+
background: white;
19+
}
20+
body {
21+
background: red;
22+
contain: size;
23+
}
24+
style>
25+
26+
<p>Test passes if there is no red.

‎css/css-contain/contain-body-bg-004.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
>
2+
<html lang=en>
3+
<meta charset=utf-8>
4+
<title>CSS-contain test: style containment on body prevents background propagationtitle>
5+
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6+
<meta name=flags content="">
7+
<meta name=assert content="style containment on body prevents background propagation">
8+
<link rel="match" href="reference/contain-body-bg-001-ref.html">
9+
<link rel=help href="https://drafts.csswg.org/css-contain-2/#contain-property">
10+
11+
<style>
12+
html, body, p {
13+
margin: 0;
14+
width: 300px;
15+
height: 200px;
16+
}
17+
p {
18+
background: white;
19+
}
20+
body {
21+
background: red;
22+
contain: style;
23+
}
24+
style>
25+
26+
<p>Test passes if there is no red.

‎css/css-contain/contain-body-dir-001.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
>
2+
<html lang=en>
3+
<meta charset=utf-8>
4+
<title>CSS-contain test: layout containment on body prevents direction propagationtitle>
5+
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6+
<meta name=flags content="">
7+
<meta name=assert content="layout containment on body prevents direction propagation">
8+
<link rel="match" href="reference/contain-body-w-m-001-ref.html">
9+
<link rel=help href="https://drafts.csswg.org/css-contain-1/#contain-property">
10+
11+
<style>
12+
html::before {
13+
content: "";
14+
width: 100px;
15+
height: 100px;
16+
background: orange;
17+
display: block;
18+
}
19+
p { direction: ltr; }
20+
body {
21+
margin: 0 auto 0 0;
22+
width: 200px;
23+
height: 200px;
24+
direction: rtl;
25+
contain: layout;
26+
}
27+
style>
28+
29+
<p>Test passes if the orange square is in the upper-left corner.

‎css/css-contain/contain-body-dir-002.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
>
2+
<html lang=en>
3+
<meta charset=utf-8>
4+
<title>CSS-contain test: paint containment on body prevents direction propagationtitle>
5+
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6+
<meta name=flags content="">
7+
<meta name=assert content="paint containment on body prevents direction propagation">
8+
<link rel="match" href="reference/contain-body-w-m-001-ref.html">
9+
<link rel=help href="https://drafts.csswg.org/css-contain-1/#contain-property">
10+
11+
<style>
12+
html::before {
13+
content: "";
14+
width: 100px;
15+
height: 100px;
16+
background: orange;
17+
display: block;
18+
}
19+
p { direction: ltr; }
20+
body {
21+
margin: 0 auto 0 0;
22+
width: 200px;
23+
height: 200px;
24+
direction: rtl;
25+
contain: paint;
26+
}
27+
style>
28+
29+
<p>Test passes if the orange square is in the upper-left corner.

‎css/css-contain/contain-body-dir-003.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
>
2+
<html lang=en>
3+
<meta charset=utf-8>
4+
<title>CSS-contain test: size containment on body prevents direction propagationtitle>
5+
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6+
<meta name=flags content="">
7+
<meta name=assert content="size containment on body prevents direction propagation">
8+
<link rel="match" href="reference/contain-body-w-m-001-ref.html">
9+
<link rel=help href="https://drafts.csswg.org/css-contain-1/#contain-property">
10+
11+
<style>
12+
html::before {
13+
content: "";
14+
width: 100px;
15+
height: 100px;
16+
background: orange;
17+
display: block;
18+
}
19+
p { direction: ltr; }
20+
body {
21+
margin: 0 auto 0 0;
22+
width: 200px;
23+
height: 200px;
24+
direction: rtl;
25+
contain: size;
26+
}
27+
style>
28+
29+
<p>Test passes if the orange square is in the upper-left corner.

‎css/css-contain/contain-body-dir-004.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
>
2+
<html lang=en>
3+
<meta charset=utf-8>
4+
<title>CSS-contain test: style containment on body prevents direction propagationtitle>
5+
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6+
<meta name=flags content="">
7+
<meta name=assert content="style containment on body prevents direction propagation">
8+
<link rel="match" href="reference/contain-body-w-m-001-ref.html">
9+
<link rel=help href="https://drafts.csswg.org/css-contain-1/#contain-property">
10+
11+
<style>
12+
html::before {
13+
content: "";
14+
width: 100px;
15+
height: 100px;
16+
background: orange;
17+
display: block;
18+
}
19+
p { direction: ltr; }
20+
body {
21+
margin: 0 auto 0 0;
22+
width: 200px;
23+
height: 200px;
24+
direction: rtl;
25+
contain: style;
26+
}
27+
style>
28+
29+
<p>Test passes if the orange square is in the upper-left corner.

‎css/css-contain/contain-body-overflow-001.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
>
2+
<html lang=en>
3+
<meta charset=utf-8>
4+
<title>CSS-contain test: layout containment on body prevents overflow propagationtitle>
5+
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6+
<meta name=flags content="">
7+
<meta name=assert content="layout containment on body prevents overflow propagation">
8+
<link rel="match" href="reference/contain-body-overflow-001-ref.html">
9+
<link rel=help href="https://drafts.csswg.org/css-contain-1/#contain-property">
10+
11+
<style>
12+
html, body, p, div {
13+
margin: 0;
14+
width: 200px;
15+
height: 200px;
16+
}
17+
div { background: red; }
18+
body {
19+
overflow: hidden;
20+
contain: layout;
21+
}
22+
style>
23+
24+
<p>Test passes if there is no red.
25+
26+
<div>div>

‎css/css-contain/contain-body-overflow-002.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
>
2+
<html lang=en>
3+
<meta charset=utf-8>
4+
<title>CSS-contain test: paint containment on body prevents overflow propagationtitle>
5+
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6+
<meta name=flags content="">
7+
<meta name=assert content="paint containment on body prevents overflow propagation">
8+
<link rel="match" href="reference/contain-body-overflow-001-ref.html">
9+
<link rel=help href="https://drafts.csswg.org/css-contain-1/#contain-property">
10+
11+
<style>
12+
html, body, p, div {
13+
margin: 0;
14+
width: 200px;
15+
height: 200px;
16+
}
17+
div { background: red; }
18+
body {
19+
overflow: hidden;
20+
contain: paint;
21+
}
22+
:focus {
23+
outline: none;
24+
}
25+
style>
26+
27+
<div>div>
28+
<p tabindex=1 id=target>Test passes if there is no red.
29+
<script>
30+
window.onload = function() {
31+
document.getElementById("target").focus()
32+
}
33+
script>

‎css/css-contain/contain-body-overflow-003.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
>
2+
<html lang=en>
3+
<meta charset=utf-8>
4+
<title>CSS-contain test: size containment on body prevents overflow propagationtitle>
5+
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6+
<meta name=flags content="">
7+
<meta name=assert content="size containment on body prevents overflow propagation">
8+
<link rel="match" href="reference/contain-body-overflow-001-ref.html">
9+
<link rel=help href="https://drafts.csswg.org/css-contain-1/#contain-property">
10+
11+
<style>
12+
html, body, p, div {
13+
margin: 0;
14+
width: 200px;
15+
height: 200px;
16+
}
17+
div { background: red; }
18+
body {
19+
overflow: hidden;
20+
contain: size;
21+
}
22+
style>
23+
24+
<p>Test passes if there is no red.
25+
26+
<div>div>

‎css/css-contain/contain-body-overflow-004.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
>
2+
<html lang=en>
3+
<meta charset=utf-8>
4+
<title>CSS-contain test: style containment on body prevents overflow propagationtitle>
5+
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6+
<meta name=flags content="">
7+
<meta name=assert content="style containment on body prevents overflow propagation">
8+
<link rel="match" href="reference/contain-body-overflow-001-ref.html">
9+
<link rel=help href="https://drafts.csswg.org/css-contain-2/#contain-property">
10+
11+
<style>
12+
html, body, p, div {
13+
margin: 0;
14+
width: 200px;
15+
height: 200px;
16+
}
17+
div { background: red; }
18+
body {
19+
overflow: hidden;
20+
contain: style;
21+
}
22+
style>
23+
24+
<p>Test passes if there is no red.
25+
26+
<div>div>

‎css/css-contain/contain-body-t-o-001.html

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
>
2+
<html lang=en>
3+
<meta charset=utf-8>
4+
<title>CSS-contain test: layout containment on body prevents text-orientation propagationtitle>
5+
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
6+
<meta name=flags content="">
7+
<meta name=assert content="layout containment on body prevents text-orientation propagation">
8+
<link rel="match" href="reference/contain-body-t-o-001-ref.html">
9+
<link rel=help href="https://drafts.csswg.org/css-contain-1/#contain-property">
10+
11+
<style>
12+
html {
13+
writing-mode: vertical-lr;
14+
direction: rtl;
15+
width: 100vw;
16+
height: 100vh;
17+
overflow: hidden;
18+
}
19+
body {
20+
margin: 0;
21+
border-top: 100px solid red;
22+
border-bottom: 100px solid green;
23+
width: 100vw;
24+
height: 100vh;
25+
text-orientation: upright;
26+
contain: layout;
27+
}
28+
p {
29+
margin: auto;
30+
padding: 150px 0;
31+
writing-mode: horizontal-tb;
32+
direction: ltr;
33+
}
34+
style>
35+
36+
<p>Test passes if there is no red.

0 commit comments

Comments
 (0)