font-display-failure-fallback.html (1317B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-fonts-4/#font-display-timeline"> 3 <script nonce="abc" src="/resources/testharness.js"></script> 4 <script nonce="abc" src="/resources/testharnessreport.js"></script> 5 <style> 6 @font-face { 7 font-family: 'TestFace'; 8 src: url('/fonts/Ahem.ttf?pipe=trickle(d0.5)'), 9 url('/fonts/Ahem.ttf?fallback-src'); 10 font-display: optional; 11 } 12 13 @font-face { 14 font-family: 'FallbackFace'; 15 src: url('/fonts/Ahem.ttf?fallback-face'); 16 } 17 18 .test { 19 font-family: 'TestFace','FallbackFace'; 20 } 21 </style> 22 <div class="test">hello</div> 23 <script> 24 function numberOfDownloads(url) { 25 assert_true(!!window.PerformanceResourceTiming, "ResourceTiming not supported"); 26 var absoluteURL = new URL(url, location.href).href; 27 return performance.getEntriesByName(absoluteURL).length; 28 } 29 30 promise_test(function() { 31 return document.fonts.ready.then(function() { 32 assert_equals(numberOfDownloads('/fonts/Ahem.ttf?pipe=trickle(d0.5)'), 1, 'first source should be loaded'); 33 assert_equals(numberOfDownloads('/fonts/Ahem.ttf?fallback-src'), 0, 'fallback source should not be loaded'); 34 assert_equals(numberOfDownloads('/fonts/Ahem.ttf?fallback-face'), 1, 'fallback font face should be loaded'); 35 }); 36 }, "Fallback for font failure period"); 37 </script>