clip-path-svg-text-font-loading.html (925B)
1 <!doctype html> 2 <html class="reftest-wait"> 3 <link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path"> 4 <link rel="help" href="https://drafts.csswg.org/css-font-loading/#font-face-load"> 5 <link rel="help" href="https://crbug.com/1222734"> 6 <link rel="match" href="reference/green-100x100.html"> 7 <script src="/common/rendering-utils.js"></script> 8 <script src="/common/reftest-wait.js"></script> 9 <style> 10 #target { 11 width: 100px; 12 height: 100px; 13 border-right: 100px solid red; 14 clip-path: url(#clip); 15 background: green; 16 } 17 </style> 18 <div id="target"></div> 19 <svg height="0"> 20 <clipPath id="clip"> 21 <text y="80" font-size="100" font-family="DelayedAhem, serif">X</text> 22 </clipPath> 23 </svg> 24 <script> 25 waitForAtLeastOneFrame().then(() => { 26 let font = new FontFace('DelayedAhem', 'url("/fonts/Ahem.ttf")'); 27 document.fonts.add(font); 28 font.load().then(takeScreenshot); 29 }); 30 </script>