fontfaceset-load-css-wide-keywords.html (2109B)
1 <!DOCTYPE html> 2 <title>SyntaxError thrown when matching CSS-wide keyword</title> 3 <link rel="help" href="https://drafts.csswg.org/css-font-loading/#font-face-set-load"> 4 <link rel="help" href="https://drafts.csswg.org/css-font-loading/#find-the-matching-font-faces"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script> 8 9 function load_on_worker(keyword) { 10 return new Promise((resolve, reject) =>{ 11 var blob = new Blob([` 12 self.fonts.load('${keyword}').then( 13 ()=>{ self.postMessage('success') }, 14 (e)=>{ self.postMessage(e) } 15 ); 16 `]); 17 var blob_url = window.URL.createObjectURL(blob); 18 let worker = new Worker(blob_url); 19 worker.onmessage = msg => { 20 if (msg === 'success') 21 resolve(msg.data) 22 else 23 reject(msg.data) 24 } 25 }); 26 } 27 28 // https://drafts.csswg.org/css-font-loading/#find-the-matching-font-faces 29 // forbids CSS-wide keywords as the value of the font given to the 30 // load method (equivalent to the font shorthand). Note that the test 31 // for this case will also pass when the system-wide keyword simply 32 // isn't supported, since the syntax won't be valid syntax for the 33 // 'font' shorthand. 34 // https://drafts.csswg.org/css-fonts-4/#family-name-syntax also 35 // forbids using the CSS-wide keywords as unquoted keywords within 36 // <font-family>. 37 for (let [description_prefix, syntax_prefix] of [["", ""], ["value with ", "medium "]]) { 38 for (let keyword of ["initial", "inherit", "unset", "default", "revert", "revert-layer"]) { 39 promise_test(test => { 40 return promise_rejects_dom(test, 'SyntaxError', document.fonts.load(`${syntax_prefix}${keyword}`)); 41 }, `Loading ${description_prefix}CSS-wide keyword "${keyword}" causes SyntaxError (document)`) 42 promise_test(test => { 43 return promise_rejects_dom(test, 'SyntaxError', load_on_worker(`${syntax_prefix}${keyword}`)); 44 }, `Loading ${description_prefix}CSS-wide keyword "${keyword}" causes SyntaxError (worker)`) 45 } 46 } 47 48 </script>