1 <!DOCTYPE html>
2 <html lang="en"><head><meta charset="utf-8">
3 <title>CSS-UI test: outline-color:invert</title>
4 <link href="http://florian.rivoal.net" rel="author" title="Florian Rivoal">
5 <meta content="" name="flags">
6 <meta content="outline-color:invert must do pixel-level color invertion OR fail to parse, in which case the initial value must be currentcolor" name="assert">
7 <link href="reference/outline-006-ref.htm" rel="match">
8 <link href="https://drafts.csswg.org/css-ui-3/#outline-props" rel="help">
9 <style>
10 body > div {
11 width: 100px;
12 height: 100px;
13 display: table-cell; /* Make a BFC */
14 background: rgb(255,128,255); /* inverse of rgb(0,127,0) */
15 }
16 div > div {
17 color: rgb(0,127,0);
18 background: rgb(0,127,0);
19 margin: 25px;
20 width: 50px;
21 height: 50px;
22 outline: solid 25px;
23 outline-color: invert;
24 }
25
26 </style>
27
28 </head><body><p>Test passes if there is a filled green square and <strong>no pink</strong>.</p>
29 <div><div></div></div>
30
31 </body></html>