outline-016.html (1502B)
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 separately for each shape if there are several shapes."> 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 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 11 <style> 12 span { 13 outline: solid green 25px; 14 outline-offset: -35px; /* Any value that makes sure the outlines collide ( < -25px ) 15 would make the test valid, 16 -35px is just one such value that happens to make the failures pretty. 17 I recommend looking at this test in as many UAs as possible, 18 the results are quite astonishing. 19 */ 20 color: red; 21 } 22 div { 23 width: 50px; 24 height: 50px; 25 padding: 25px; 26 background: green; 27 line-height: 25px; 28 font-size: 25px; 29 font-family: Ahem; 30 } 31 </style> 32 33 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 34 <div><span>xx<br>xx</span></div>