box-decoration-break-01.xhtml (948B)
1 <!-- 2 Any copyright is dedicated to the Public Domain. 3 http://creativecommons.org/publicdomain/zero/1.0/ 4 --> 5 6 <html xmlns="http://www.w3.org/1999/xhtml"> 7 <head> 8 <meta charset="utf-8" /> 9 <title>Test of box-decoration-break with clip-path: url</title> 10 <style> 11 .clone { 12 box-decoration-break: clone; 13 } 14 span { 15 font: 24px sans-serif; 16 line-height: 2; 17 color: lime; 18 background: lime; 19 clip-path: url(#path); 20 } 21 br { 22 line-height: 0; 23 } 24 </style> 25 </head> 26 <body> 27 <h2>Box-Decoration-Break: Clone</h2> 28 <span class="clone">The<br />quick<br />orange fox</span> 29 30 <h2>Box-Decoration-Break: Slice</h2> 31 <span>The<br />quick<br />orange fox</span> 32 33 <svg xmlns="http://www.w3.org/2000/svg" height="0"> 34 <defs> 35 <clipPath id="path" clipPathUnits="objectBoundingBox"> 36 <rect x="0" y="0" width="1" height="0.3"/> 37 </clipPath> 38 </defs> 39 </svg> 40 </body> 41 </html>