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