1 <!DOCTYPE html>
2 <html lang="en"><head><meta charset="utf-8">
3 <title>CSS-UI test: outline-offset width negative values — long box</title>
4 <link href="http://florian.rivoal.net" rel="author" title="Florian Rivoal">
5 <meta content="should" name="flags">
6 <meta 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 separately for each shape if there are several shapes." 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 span {
11 outline: solid green 25px;
12 outline-offset: -35px; /* Any value that makes sure the outlines collide ( < -25px )
13 would make the test valid,
14 -35px is just one such value that happens to make the failures pretty.
15 I recommend looking at this test in as many UAs as possible,
16 the results are quite astonishing.
17 */
18 color: red;
19 }
20 div {
21 width: 50px;
22 height: 50px;
23 padding: 25px;
24 background: green;
25 line-height: 25px;
26 font-size: 25px;
27 font-family: ahem;
28 }
29 </style>
30
31 </head><body><p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
32 <div><span>xx<br>xx</span></div>
33
34 </body></html>