Skip to content

Commit 8eced53

Browse files
frivoalgsnedders
frivoal
authored and
gsnedders
committed
[css-ui-3] Add a bunch of tests for the outline-* properties (w3c#1192)
1 parent b3c6e08 commit 8eced53

19 files changed

+585
-0
lines changed

‎css-ui-3/outline-003.html

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!doctype html>
2+
<html lang=en>
3+
<meta charset=utf-8>
4+
<title>CSS-UI test: outline & layout</title>
5+
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net">
6+
<meta name=flags content="">
7+
<meta name=assert content="Outline does not influence size or position, and has no impact on layout.">
8+
<link rel=help href="https://drafts.csswg.org/css-ui-3/#outline-props">
9+
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
10+
<style>
11+
div {
12+
background: red;
13+
width: 100px;
14+
height: 100px;
15+
}
16+
span:nth-of-type(1) {
17+
float: left;
18+
width: 30px;
19+
height: 30px;
20+
outline: solid 10px green;
21+
background: green;
22+
23+
position: relative;
24+
top: 10px;
25+
left: 10px;
26+
}
27+
span:nth-of-type(2) {
28+
float: left;
29+
width: 0;
30+
height: 0;
31+
outline: solid 25px green;
32+
background: red;
33+
34+
position: relative;
35+
top: 25px;
36+
left: 45px;
37+
}
38+
span:nth-of-type(3) {
39+
float: left;
40+
clear: left;
41+
width: 100px;
42+
height: 50px;
43+
background: green;
44+
45+
position: relative;
46+
top: 20px;
47+
}
48+
</style>
49+
50+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
51+
<div><span></span><span></span><span></span></div>
52+

‎css-ui-3/outline-004.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!doctype html>
2+
<html lang=en>
3+
<meta charset=utf-8>
4+
<title>CSS-UI test: connected outline parts</title>
5+
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net">
6+
<meta name=flags content="ahem should">
7+
<meta name=assert content="Each part of the outline should be fully connected rather than open on some sides">
8+
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
9+
<link rel=help href="https://drafts.csswg.org/css-ui-3/#outline-props">
10+
<style>
11+
span {
12+
outline: solid green 10px;
13+
color: green;
14+
}
15+
div {
16+
box-sizing: border-box;
17+
width: 100px;
18+
height: 100px;
19+
padding: 10px;
20+
line-height: 40px;
21+
font-size: 40px;
22+
background: red;
23+
font-family: ahem;
24+
}
25+
</style>
26+
27+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
28+
<div><span>xx<br>xx</span></div>
29+

‎css-ui-3/outline-005.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!doctype html>
2+
<html lang=en>
3+
<meta charset=utf-8>
4+
<title>CSS-UI test: outline & border-radius</title>
5+
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net">
6+
<meta name=flags content="should">
7+
<meta name=assert content="To the extent that the outline follows the border edge, it should follow the border-radius curve.">
8+
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
9+
<link rel=help href="https://drafts.csswg.org/css-ui-3/#outline-props">
10+
<style>
11+
body > div {
12+
width: 100px;
13+
height: 100px;
14+
background: red;
15+
border-radius: 100%;
16+
display: table-cell; /* Make a BFC */
17+
}
18+
div > div {
19+
width: 50px;
20+
height: 50px;
21+
margin: 25px;
22+
background: green;
23+
border-radius: 100%;
24+
outline: solid green 25px;
25+
}
26+
</style>
27+
28+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
29+
<div><div></div></div>
30+

‎css-ui-3/outline-006.html

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!doctype html>
2+
<html lang=en>
3+
<meta charset=utf-8>
4+
<title>CSS-UI test: outline-color:invert</title>
5+
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net">
6+
<meta name=flags content="">
7+
<meta name=assert content="outline-color:invert must do pixel-level color invertion OR fail to parse, in which case the initial value must be currentcolor">
8+
<link rel="match" href="reference/outline-006-ref.html">
9+
<link rel=help href="https://drafts.csswg.org/css-ui-3/#outline-props">
10+
<style>
11+
body > div {
12+
width: 100px;
13+
height: 100px;
14+
display: table-cell; /* Make a BFC */
15+
background: rgb(255,128,255); /* inverse of rgb(0,127,0) */
16+
}
17+
div > div {
18+
color: rgb(0,127,0);
19+
background: rgb(0,127,0);
20+
margin: 25px;
21+
width: 50px;
22+
height: 50px;
23+
outline: solid 25px;
24+
outline-color: invert;
25+
}
26+
27+
</style>
28+
29+
<p>Test passes if there is a filled green square and <strong>no pink</strong>.</p>
30+
<div><div></div></div>
31+

‎css-ui-3/outline-007.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!doctype html>
2+
<html lang=en>
3+
<meta charset=utf-8>
4+
<title>CSS-UI test: outline-style: auto</title>
5+
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net">
6+
<meta name=flags content="">
7+
<meta name=assert content="outline-style:auto allows the UA to display any outline it wants, but it must display something.">
8+
<link rel="mismatch" href="reference/outline-007-ref.html">
9+
<link rel=help href="https://drafts.csswg.org/css-ui-3/#outline-props">
10+
<style>
11+
div {
12+
width: 100px;
13+
height: 100px;
14+
outline-style: auto;
15+
16+
/* These values may be ignored by the UA, but just in case they are not,
17+
set them to something that does not result in the outline being invisible */
18+
outline-width: 5px;
19+
outline-color: green;
20+
}
21+
22+
</style>
23+
24+
<p>Test passes if there is an outlined box below. The outline may be any shape or color so long as it is visible.</p>
25+
<div></div>
26+

‎css-ui-3/outline-008.html

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!doctype html>
2+
<html lang=en>
3+
<meta charset=utf-8>
4+
<title>CSS-UI test: computed values ouf outline-width</title>
5+
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net">
6+
<meta name=flags content="">
7+
<meta name=assert content="outline-width values compute to absolute lengths">
8+
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
9+
<link rel=help href="https://drafts.csswg.org/css-ui-3/#outline-props">
10+
<style>
11+
body > div {
12+
width: 100px;
13+
height: 100px;
14+
background: red;
15+
16+
font-size: 10px;
17+
18+
/* stacking of outlines is undefined, so we cannot reliably to have an outline hide another outline.
19+
We are using a border instead,
20+
but still need to create an (invisible) outline to make sure that outline-width does not compute to 0. */
21+
outline: solid 1em transparent;
22+
border: solid 1em red;
23+
margin-left: -10px;
24+
margin-top: -10px;
25+
26+
}
27+
div > div {
28+
width: 100px;
29+
height: 100px;
30+
background: green;
31+
32+
font-size: 5px;
33+
outline-width: inherit;
34+
outline-style: solid;
35+
outline-color: white;
36+
}
37+
</style>
38+
39+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
40+
<div><div></div></div>
41+

‎css-ui-3/outline-009.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!doctype html>
2+
<html lang=en>
3+
<meta charset=utf-8>
4+
<title>CSS-UI test: computed values ouf outline-width when outline-style is none</title>
5+
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net">
6+
<meta name=flags content="">
7+
<meta name=assert content="outline-width computes to 0 when outline-style is none">
8+
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
9+
<link rel=help href="https://drafts.csswg.org/css-ui-3/#outline-props">
10+
<style>
11+
body {
12+
outline-width: 10px;
13+
outline-style: none;
14+
15+
}
16+
div {
17+
width: 100px;
18+
height: 100px;
19+
background: green;
20+
21+
outline-width: inherit;
22+
outline-style: solid;
23+
outline-color: red;
24+
}
25+
</style>
26+
27+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
28+
<div></div>
29+

‎css-ui-3/outline-010.html

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!doctype html>
2+
<html lang=en>
3+
<meta charset=utf-8>
4+
<title>CSS-UI test: computed values ouf outline-width</title>
5+
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net">
6+
<meta name=flags content="">
7+
<meta name=assert content="outline-offset values compute to absolute lengths">
8+
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
9+
<link rel=help href="https://drafts.csswg.org/css-ui-3/#outline-props">
10+
<style>
11+
body > div {
12+
width: 100px;
13+
height: 100px;
14+
15+
font-size: 10px;
16+
17+
/* stacking of outlines is undefined, so we cannot reliably to have an outline hide another outline.
18+
We are using a border instead,
19+
but still need to create an (invisible) outline to make sure that outline-offset does not compute to 0. */
20+
outline: solid 5px transparent;
21+
outline-offset: 1em;
22+
padding: 10px;
23+
border: solid 5px red;
24+
margin-left: -15px;
25+
margin-top: -15px;
26+
27+
}
28+
div > div {
29+
width: 100px;
30+
height: 100px;
31+
background: green;
32+
33+
outline: solid 5px white;
34+
font-size: 5px;
35+
outline-offset: inherit;
36+
}
37+
</style>
38+
39+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
40+
<div><div></div></div>
41+

‎css-ui-3/outline-011.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!doctype html>
2+
<html lang=en>
3+
<meta charset=utf-8>
4+
<title>CSS-UI test: outline-color: currentcolor</title>
5+
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net">
6+
<meta name=flags content="">
7+
<meta name=assert content="currentcolor computes to currentcolor on outline-color">
8+
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
9+
<link rel=help href="https://drafts.csswg.org/css-ui-3/#outline-props">
10+
<style>
11+
body > div {
12+
width: 100px;
13+
height: 100px;
14+
background: red;
15+
color: red;
16+
display: table-cell; /* Make a BFC */
17+
}
18+
div > div {
19+
width: 0;
20+
height: 0;
21+
margin: 50px;
22+
color: green;
23+
outline: solid currentcolor 50px;
24+
}
25+
</style>
26+
27+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
28+
<div><div></div></div>
29+

‎css-ui-3/outline-012.html

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!doctype html>
2+
<html lang=en>
3+
<meta charset=utf-8>
4+
<title>CSS-UI test: outline-offset width negative values</title>
5+
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net">
6+
<meta name=flags content="">
7+
<meta name=assert content="Negative values on outline-offset must cause the outline to shrink into the border box.">
8+
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
9+
<link rel=help href="https://drafts.csswg.org/css-ui-3/#outline-props">
10+
<style>
11+
div {
12+
width: 100px;
13+
height: 100px;
14+
background: red;
15+
outline: solid 50px green;
16+
outline-offset: -50px;
17+
}
18+
</style>
19+
20+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
21+
<div></div>
22+

‎css-ui-3/outline-013.html

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!doctype html>
2+
<html lang=en>
3+
<meta charset=utf-8>
4+
<title>CSS-UI test: outline-offset width negative values</title>
5+
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net">
6+
<meta name=flags content="should">
7+
<meta name=assert content="Negative values on outline-offset should not cause the height and the width of outside of the shape drawn by the outline to become smaller than twice the computed value of the outline-width property">
8+
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
9+
<link rel=help href="https://drafts.csswg.org/css-ui-3/#outline-props">
10+
<style>
11+
div {
12+
width: 100px;
13+
height: 100px;
14+
background: red;
15+
outline: solid 50px green;
16+
outline-offset: -150px;
17+
}
18+
</style>
19+
20+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
21+
<div></div>
22+

‎css-ui-3/outline-014.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!doctype html>
2+
<html lang=en>
3+
<meta charset=utf-8>
4+
<title>CSS-UI test: outline-offset width negative values — long box</title>
5+
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net">
6+
<meta name=flags content="should">
7+
<meta name=assert content="Negative values on outline-offset should not cause the height and the width of outside of the shape drawn by the outline to become smaller than twice the computed value of the outline-width property, applying this constrain independenly in each direction.">
8+
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
9+
<link rel=help href="https://drafts.csswg.org/css-ui-3/#outline-props">
10+
<style>
11+
div {
12+
width: 100px;
13+
height: 100px;
14+
/* The borders makes the box rectangular rather than square */
15+
border-right: solid white 50px;
16+
border-left: solid white 50px;
17+
background: red;
18+
outline: solid 50px green;
19+
outline-offset: -100px;
20+
margin-left: -50px;
21+
}
22+
</style>
23+
24+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
25+
<div></div>
26+

0 commit comments

Comments
 (0)