outline-003.html (1155B)
1 <!doctype html> 2 <html lang=en> 3 <meta charset=utf-8> 4 <title>CSS-UI test: outline & layout</title> 5 <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net"> 6 <meta name=flags content=""> 7 <meta name=assert content="Outline does not influence size or position, and has no impact on layout."> 8 <link rel=help href="https://drafts.csswg.org/css-ui-3/#outline-props"> 9 <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> 10 <style> 11 div { 12 background: red; 13 width: 100px; 14 height: 100px; 15 } 16 span:nth-of-type(1) { 17 float: left; 18 width: 30px; 19 height: 30px; 20 outline: solid 10px green; 21 background: green; 22 23 position: relative; 24 top: 10px; 25 left: 10px; 26 } 27 span:nth-of-type(2) { 28 float: left; 29 width: 0; 30 height: 0; 31 outline: solid 25px green; 32 background: red; 33 34 position: relative; 35 top: 25px; 36 left: 45px; 37 } 38 span:nth-of-type(3) { 39 float: left; 40 clear: left; 41 width: 100px; 42 height: 50px; 43 background: green; 44 45 position: relative; 46 top: 20px; 47 } 48 </style> 49 50 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 51 <div><span></span><span></span><span></span></div>