Skip to content

Commit b5c0a67

Browse files
tabatkinstabatkins
committed
Test overflow-clip-margin keywords, negative offsets, and effect on scrollers.
1 parent 002db17 commit b5c0a67

10 files changed

+326
-0
lines changed

‎css/css-overflow/overflow-clip-margin-013.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!doctype html>
2+
<html class="reftest">
3+
<meta charset="utf-8">
4+
<title>overflow-clip-margin: border-box</title>
5+
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin">
6+
<link rel="author" title="Tab Atkins-Bittner" href="mailto:jackalmage@gmail.com">
7+
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
8+
<style>
9+
.clip {
10+
width: 80px;
11+
height: 80px;
12+
border: 10px solid transparent;
13+
overflow: clip;
14+
overflow-clip-margin: border-box;
15+
background: red;
16+
}
17+
.big {
18+
width: 100px;
19+
height: 100px;
20+
border: 50px solid red;
21+
position: relative;
22+
top: -60px;
23+
left: -60px;
24+
z-index: 1;
25+
background: green;
26+
}
27+
</style>
28+
<p>Test passes if there is a filled green square.</p>
29+
<div class=clip>
30+
<div class=big></div>
31+
</div>

‎css/css-overflow/overflow-clip-margin-014.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!doctype html>
2+
<html class="reftest">
3+
<meta charset="utf-8">
4+
<title>overflow-clip-margin: content-box</title>
5+
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin">
6+
<link rel="author" title="Tab Atkins-Bittner" href="mailto:jackalmage@gmail.com">
7+
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
8+
<style>
9+
.clip {
10+
width: 100px;
11+
height: 100px;
12+
border: 10px solid transparent;
13+
padding: 10px;
14+
margin: -20px 0 0 -20px;
15+
overflow: clip;
16+
overflow-clip-margin: content-box;
17+
}
18+
.big {
19+
width: 100px;
20+
height: 100px;
21+
border: 50px solid red;
22+
position: relative;
23+
top: -50px;
24+
left: -50px;
25+
z-index: 1;
26+
background: green;
27+
}
28+
</style>
29+
<p>Test passes if there is a filled green square.</p>
30+
<div class=clip>
31+
<div class=big></div>
32+
</div>

‎css/css-overflow/overflow-clip-margin-015.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!doctype html>
2+
<html class="reftest">
3+
<meta charset="utf-8">
4+
<title>overflow-clip-margin: keyword + positive length</title>
5+
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin">
6+
<link rel="author" title="Tab Atkins-Bittner" href="mailto:jackalmage@gmail.com">
7+
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
8+
<style>
9+
.clip {
10+
width: 80px;
11+
height: 80px;
12+
border: 10px solid transparent;
13+
overflow: clip;
14+
overflow-clip-margin: padding-box 10px;
15+
background: red;
16+
}
17+
.big {
18+
width: 100px;
19+
height: 100px;
20+
border: 50px solid red;
21+
position: relative;
22+
top: -60px;
23+
left: -60px;
24+
z-index: 1;
25+
background: green;
26+
}
27+
</style>
28+
<p>Test passes if there is a filled green square.</p>
29+
<div class=clip>
30+
<div class=big></div>
31+
</div>

‎css/css-overflow/overflow-clip-margin-016.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!doctype html>
2+
<html class="reftest">
3+
<meta charset="utf-8">
4+
<title>overflow-clip-margin: keyword + negative length</title>
5+
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin">
6+
<link rel="author" title="Tab Atkins-Bittner" href="mailto:jackalmage@gmail.com">
7+
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
8+
<style>
9+
.clip {
10+
width: 100px;
11+
height: 100px;
12+
padding: 10px;
13+
margin: -10px 0 0 -10px;
14+
overflow: clip;
15+
overflow-clip-margin: padding-box -10px;
16+
background: red;
17+
background-clip: content-box;
18+
}
19+
.big {
20+
width: 100px;
21+
height: 100px;
22+
border: 50px solid red;
23+
position: relative;
24+
top: -50px;
25+
left: -50px;
26+
z-index: 1;
27+
background: green;
28+
}
29+
</style>
30+
<p>Test passes if there is a filled green square.</p>
31+
<div class=clip>
32+
<div class=big></div>
33+
</div>

‎css/css-overflow/overflow-clip-margin-017.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!doctype html>
2+
<html class="reftest">
3+
<meta charset="utf-8">
4+
<title>overflow-clip-margin: just a negative length</title>
5+
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin">
6+
<link rel="author" title="Tab Atkins-Bittner" href="mailto:jackalmage@gmail.com">
7+
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
8+
<style>
9+
.clip {
10+
width: 100px;
11+
height: 100px;
12+
padding: 10px;
13+
margin: -10px 0 0 -10px;
14+
overflow: clip;
15+
overflow-clip-margin: -10px;
16+
background: red;
17+
background-clip: content-box;
18+
}
19+
.big {
20+
width: 100px;
21+
height: 100px;
22+
border: 50px solid red;
23+
position: relative;
24+
top: -50px;
25+
left: -50px;
26+
z-index: 1;
27+
background: green;
28+
}
29+
</style>
30+
<p>Test passes if there is a filled green square.</p>
31+
<div class=clip>
32+
<div class=big></div>
33+
</div>

‎css/css-overflow/overflow-clip-margin-018.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!doctype html>
2+
<html class="reftest">
3+
<meta charset="utf-8">
4+
<title>overflow-clip-margin: content-box on a scroller</title>
5+
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin">
6+
<link rel="author" title="Tab Atkins-Bittner" href="mailto:jackalmage@gmail.com">
7+
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
8+
<style>
9+
.clip {
10+
width: 100px;
11+
height: 100px;
12+
border: 10px solid transparent;
13+
padding: 10px;
14+
margin: -20px 0 0 -20px;
15+
overflow: hidden;
16+
overflow-clip-margin: content-box;
17+
}
18+
.big {
19+
width: 100px;
20+
height: 100px;
21+
border: 50px solid red;
22+
position: relative;
23+
top: -50px;
24+
left: -50px;
25+
z-index: 1;
26+
background: green;
27+
}
28+
</style>
29+
<p>Test passes if there is a filled green square.</p>
30+
<div class=clip>
31+
<div class=big></div>
32+
</div>

‎css/css-overflow/overflow-clip-margin-019.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!doctype html>
2+
<html class="reftest">
3+
<meta charset="utf-8">
4+
<title>overflow-clip-margin: keyword + negative length on a scroller</title>
5+
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin">
6+
<link rel="author" title="Tab Atkins-Bittner" href="mailto:jackalmage@gmail.com">
7+
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
8+
<style>
9+
.clip {
10+
width: 100px;
11+
height: 100px;
12+
padding: 10px;
13+
margin: -10px 0 0 -10px;
14+
overflow: hidden;
15+
overflow-clip-margin: padding-box -10px;
16+
background: red;
17+
background-clip: content-box;
18+
}
19+
.big {
20+
width: 100px;
21+
height: 100px;
22+
border: 50px solid red;
23+
position: relative;
24+
top: -50px;
25+
left: -50px;
26+
z-index: 1;
27+
background: green;
28+
}
29+
</style>
30+
<p>Test passes if there is a filled green square.</p>
31+
<div class=clip>
32+
<div class=big></div>
33+
</div>

‎css/css-overflow/overflow-clip-margin-020.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!doctype html>
2+
<html class="reftest">
3+
<meta charset="utf-8">
4+
<title>overflow-clip-margin: just a negative length on a scroller</title>
5+
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin">
6+
<link rel="author" title="Tab Atkins-Bittner" href="mailto:jackalmage@gmail.com">
7+
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
8+
<style>
9+
.clip {
10+
width: 100px;
11+
height: 100px;
12+
padding: 10px;
13+
margin: -10px 0 0 -10px;
14+
overflow: hidden;
15+
overflow-clip-margin: -10px;
16+
background: red;
17+
background-clip: content-box;
18+
}
19+
.big {
20+
width: 100px;
21+
height: 100px;
22+
border: 50px solid red;
23+
position: relative;
24+
top: -50px;
25+
left: -50px;
26+
z-index: 1;
27+
background: green;
28+
}
29+
</style>
30+
<p>Test passes if there is a filled green square.</p>
31+
<div class=clip>
32+
<div class=big></div>
33+
</div>

‎css/css-overflow/overflow-clip-margin-021.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!doctype html>
2+
<html class="reftest">
3+
<meta charset="utf-8">
4+
<title>overflow-clip-margin: border-box is ignored on a scroller</title>
5+
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin">
6+
<link rel="author" title="Tab Atkins-Bittner" href="mailto:jackalmage@gmail.com">
7+
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
8+
<style>
9+
.clip {
10+
width: 80px;
11+
height: 80px;
12+
padding: 10px;
13+
border: 10px solid transparent;
14+
margin: -10px 0 0 -10px;
15+
overflow: hidden;
16+
overflow-clip-margin: border-box;
17+
background: red;
18+
background-clip: content-box;
19+
}
20+
.big {
21+
width: 100px;
22+
height: 100px;
23+
border: 50px solid red;
24+
position: relative;
25+
top: -60px;
26+
left: -60px;
27+
z-index: 1;
28+
background: green;
29+
}
30+
</style>
31+
<p>Test passes if there is a filled green square.</p>
32+
<div class=clip>
33+
<div class=big></div>
34+
</div>

‎css/css-overflow/overflow-clip-margin-022.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!doctype html>
2+
<html class="reftest">
3+
<meta charset="utf-8">
4+
<title>overflow-clip-margin: border-box is ignored on a scroller, including the offset</title>
5+
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin">
6+
<link rel="author" title="Tab Atkins-Bittner" href="mailto:jackalmage@gmail.com">
7+
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
8+
<style>
9+
.clip {
10+
width: 80px;
11+
height: 80px;
12+
padding: 10px;
13+
border: 10px solid transparent;
14+
margin: -10px 0 0 -10px;
15+
overflow: hidden;
16+
overflow-clip-margin: border-box -1000px;
17+
background: red;
18+
background-clip: content-box;
19+
}
20+
.big {
21+
width: 100px;
22+
height: 100px;
23+
border: 50px solid red;
24+
position: relative;
25+
top: -60px;
26+
left: -60px;
27+
z-index: 1;
28+
background: green;
29+
}
30+
</style>
31+
<p>Test passes if there is a filled green square.</p>
32+
<div class=clip>
33+
<div class=big></div>
34+
</div>

0 commit comments

Comments
 (0)