outline-001

outline - create outline likes border property

WeasyPrint

Reference (good) by WeasyPrint

Reference (good) by this browser

This browser

Assertion
Test checks that the outline property creates outlines around visual objects and makes them stand out

Source

 1 <!DOCTYPE html>
 2 <html><head><meta charset="utf-8">
 3 <title>CSS Basic User Interface Test: outline - create outline likes border property</title>
 4 <link href="http://www.intel.com/" rel="author" title="Intel">
 5 <link href="mailto:shiyoux.tan@intel.com" rel="author" title="Shiyou Tan">
 6 <link href="http://www.w3.org/TR/css3-ui/#outline" rel="help" title="7.1. 'outline' property">
 7 <link href="reference/ref-filled-green-100px-square.htm" rel="match">
 8 <meta content="" name="flags">
 9 <meta content="Test checks that the outline property creates outlines around visual objects and makes them stand out" name="assert">
10 <style>
11   #container {
12     background-color: red;
13     height: 100px;
14     width: 100px;
15   }
16   #test {
17     background-color: green;
18     height: 60px;
19     left: 20px;
20     outline: 20px green solid;
21     position: relative;
22     top: 20px;
23     width: 60px;
24   }
25 </style>
26 </head><body>
27   <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
28   <div id="container">
29     <div id="test"></div>
30   </div>
31 
32 </body></html>