outline-005

outline & border-radius

WeasyPrint

Reference (good) by WeasyPrint

Reference (good) by this browser

This browser

Flags
should
Assertion
To the extent that the outline follows the border edge, it should follow the border-radius curve.

Source

 1 <!DOCTYPE html>
 2 <html lang="en"><head><meta charset="utf-8">
 3   <title>CSS-UI test: outline &amp; border-radius</title>
 4   <link href="http://florian.rivoal.net" rel="author" title="Florian Rivoal">
 5   <meta content="should" name="flags">
 6   <meta content="To the extent that the outline follows the border edge, it should follow the border-radius curve." name="assert">
 7   <link href="reference/ref-filled-green-100px-square.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   background: red;
14   border-radius: 100%;
15   display: table-cell; /* Make a BFC */
16 }
17 div > div {
18   width: 50px;
19   height: 50px;
20   margin: 25px;
21   background: green;
22   border-radius: 100%;
23   outline: solid green 25px;
24 }
25 </style>
26 
27   </head><body><p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
28   <div><div></div></div>
29 
30 </body></html>