| <!DOCTYPE html> |
| <html class=reftest-wait> |
| <meta charset=utf-8> |
| <title>CSS Font Loading test: modification of descriptors</title> |
| <link rel="author" title="Jonathan Kew" href="jkew@mozilla.com"> |
| <link rel="help" href="https://drafts.csswg.org/css-font-loading/#fontface-interface"> |
| <meta name="assert" content="If descriptors of a FontFace are modified, the new values should take effect"> |
| <link rel="match" href="fontface-descriptor-updates-ref.html"> |
| <style> |
| body { font-family: sans-serif; } |
| #test1 { font-family: test1, sans-serif; } |
| #test2 { font-family: test2, monospace; } |
| #test3 { font-family: test3, sans-serif; } |
| #test4 { font-family: test4, monospace; } |
| </style> |
| <script> |
| function run() { |
| let f1 = new FontFace("test1", "url(resources/GenR102.woff2)"); |
| document.fonts.add(f1); |
| let f2 = new FontFace("to_be_updated", "url(resources/GenR102.woff2)"); |
| document.fonts.add(f2); |
| let f3 = new FontFace("test3", "url(resources/GenR102.woff2)", { weight: 700 }); |
| document.fonts.add(f3); |
| let f4 = new FontFace("test3", "url(resources/GenI102.woff2)"); |
| document.fonts.add(f4); |
| let f5 = new FontFace("test4", "url(resources/GenR102.woff2)", { unicodeRange: "U+002?" }); |
| document.fonts.add(f5); |
| let f6 = new FontFace("test4", "url(resources/GenI102.woff2)", { unicodeRange: "U+00??" }); |
| document.fonts.add(f6); |
| |
| // Change family name to make f2 match #test2 |
| f2.family = "test2"; |
| |
| // Swap weight descriptors so that f3 is regular and f4 (italic face) is regarded as bold |
| f3.weight = 400; |
| f4.weight = 700; |
| |
| // Update unicode-range so that f5 will be used for all characters in #test4 |
| f5.unicodeRange = "U+00??"; |
| f6.unicodeRange = "U+0000"; |
| |
| document.fonts.ready.then(function() { |
| document.documentElement.classList.remove("reftest-wait"); |
| }) |
| } |
| </script> |
| <body onload="run()"> |
| <div> |
| All lines below should use the same serif font, with the word "weight" in italics: |
| <p id=test1>Using original family name of a FontFace</p> |
| <p id=test2>Using updated family name of a FontFace</p> |
| <p id=test3>Using updated <b>weight</b> descriptors</p> |
| <p id=test4>Using updated unicode-range descriptors</p> |
| </div> |
| </body> |
| </html> |
