outline-005.html (1044B)
1 <!doctype html> 2 <html lang=en> 3 <meta charset=utf-8> 4 <title>CSS-UI test: outline & border-radius</title> 5 <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net"> 6 <meta name=flags content="should"> 7 <meta name=assert content="To the extent that the outline follows the border edge, it should follow the border-radius curve."> 8 <!-- Allow slight color differences where the outline and the background intersect --> 9 <meta name=fuzzy content="0-2;0-100"> 10 <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> 11 <link rel=help href="https://drafts.csswg.org/css-ui-3/#outline-props"> 12 <style> 13 body > div { 14 width: 100px; 15 height: 100px; 16 overflow: hidden; 17 background: red; 18 display: table-cell; /* Make a BFC */ 19 } 20 div > div { 21 width: 50px; 22 height: 50px; 23 margin: 25px; 24 background: green; 25 border-radius: 100%; 26 outline: solid green 100px; 27 outline-offset: -1px; 28 } 29 </style> 30 31 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 32 <div><div></div></div>