border-image-slice-percentage

'border-image-slice' set by percentage

WeasyPrint

Reference (good) by WeasyPrint

Reference (good) by this browser

This browser

Assertion
diamonds in corners should be red, and other diamonds should be orange, it should be 4 orange diamonds on each side.

Source

 1 <!DOCTYPE html>
 2 <html><head>
 3     <title>CSS Backgrounds and Borders Test: 'border-image-slice' set by percentage</title>
 4     <link href="mailto:reni2046@gmail.com" rel="author" title="Ren Jing">
 5     <link href="http://www.w3.org/TR/css3-background/#border-images" rel="help">
 6     <link href="reference/border-image-slice-percentage-ref.htm" rel="match">
 7     <meta content="diamonds in corners should be red, and other diamonds should be orange, it should be 4 orange diamonds on each side." name="assert">
 8     <style type="text/css">
 9         .container {
10             border: double red 1em;
11             border-image: url("support/border.png") 33.3% round;
12             height:64px;
13             width:64px;
14         }
15     </style>
16 </head>
17 <body>
18     <p>The test passes if diamonds in corners are red, and other diamonds are orange, there are 4 orange diamonds on each side.</p>
19     <div class="container"></div>
20 
21 
22 </body></html>