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 independenly in each direction." 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 div {
11 width: 100px;
12 height: 100px;
13 /* The borders makes the box rectangular rather than square */
14 border-right: solid white 50px;
15 border-left: solid white 50px;
16 background: red;
17 outline: solid 50px green;
18 outline-offset: -100px;
19 margin-left: -50px;
20 }
21 </style>
22
23 </head><body><p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
24 <div></div>
25
26 </body></html>