font-unicode-PUA.html (2088B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <link rel="author" title="Vitor Roriz" href="https://github.com/vitorroriz"> 5 <link rel="help" href="https://drafts.csswg.org/css-fonts-4/#char-handling-issues"> 6 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"/> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <style> 10 #target { 11 font-family: serif, sans-serif, cursive, fantasy, monospace, system-ui, emoji, math, fangsong, ui-serif, ui-sans-serif, ui-monospace, ui-rounded, 'Ahem'; 12 } 13 p { 14 font-size: 22px; 15 } 16 #ahem { 17 font-family: 'Ahem'; 18 } 19 .box { 20 display: inline-block; 21 } 22 </style> 23 </head> 24 <body> 25 "If a given character is a Private-Use Area Unicode codepoint, user agents must only match font families named in the font-family list that are not generic families. If none of the families named in the font-family list contain a glyph for that codepoint, user agents must display some form of missing glyph symbol for that character rather than attempting installed font fallback for that codepoint." - <a href="https://drafts.csswg.org/css-fonts-4/#char-handling-issues">css-fonts-4</a> 26 <h3>The first line should render as the second. This means that no generic font was used during fallback and the first non generic font was used. </h3> 27 <p id="target"><span class="box"></span><span class="box"></span><span class="box"></span></p> 28 <p id="ahem"><span class="box"></span><span class="box"></span><span class="box"></span></p> 29 <script> 30 promise_setup(_ => Promise.all([...document.fonts].map(f => f.load()))); 31 const target = document.getElementById("target"); 32 const ahem = document.getElementById("ahem"); 33 for (let i = 0; i < target.children.length; i++) { 34 promise_test(async t => { 35 let targetBox = target.children[i].getBoundingClientRect(); 36 let ahemBox = ahem.children[i].getBoundingClientRect(); 37 assert_equals(targetBox.width, ahemBox.width); 38 }, `PUA character U+F00${i} is rendered with a non-generic font.`); 39 } 40 </script> 41 </body> 42 </html>