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