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