outline-018

Outline: inherit with three values

WeasyPrint

This browser

Assertion
Outline with value inherit uses its parent's outline values (3 values).

Source

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html>
 3     <head>
 4         <title>CSS Test: Outline: inherit with three values</title>
 5         <link rel="author" title="Microsoft" href="http://www.microsoft.com/">
 6         <link rel="help" href="http://www.w3.org/TR/CSS21/ui.html#propdef-outline">
 7         <link rel="help" href="http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines">
 8         <meta name="flags" content="">
 9         <meta name="assert" content="Outline with value inherit uses its parent's outline values (3 values).">
10         <style type="text/css">
11             #test
12             {
13                 outline: red solid 15px;
14                 outline: inherit;
15             }
16             #parent
17             {
18                 outline: green 15px dotted;
19                 padding: 50px;
20                 border: solid 2px blue;
21             }
22         </style>
23     </head>
24     <body>
25         <p>Test passes if there is a green outline closely surrounding the "Filler Text". That outline needs to be is the same size, style and color as the outline surrounding the blue box and there is no red visible on the page.</p>
26         <div id="parent">
27             <div id="test">Filler text</div>
28         </div>
29     </body>
30 </html>