box-decoration-break-03.xhtml (984B)
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 and filter</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 filter: blur(0px); 21 } 22 br { 23 line-height: 0; 24 } 25 </style> 26 </head> 27 <body> 28 <h2>Box-Decoration-Break: Clone</h2> 29 <span class="clone">The<br />quick<br />orange fox</span> 30 31 <h2>Box-Decoration-Break: Slice</h2> 32 <span>The<br />quick<br />orange fox</span> 33 34 <svg xmlns="http://www.w3.org/2000/svg" height="0"> 35 <defs> 36 <clipPath id="path" clipPathUnits="objectBoundingBox"> 37 <rect x="0" y="0" width="1" height="0.3"/> 38 </clipPath> 39 </defs> 40 </svg> 41 </body> 42 </html>