canvas.2d.lang.inherit.html (1872B)
1 <!doctype HTML> 2 <html lang="en" class="reftest-wait"> 3 <meta charset="utf-8"> 4 <title>HTML5 Canvas Test: The lang attribute inherits from the canvas rather than the document</title> 5 <link rel="match" href="canvas.2d.lang-ref.html" /> 6 <link rel="author" href="mailto:schenney@chromium.org"/> 7 <link rel="help" href="https://html.spec.whatwg.org/multipage/canvas.html#text-styles"/> 8 <meta name="assert" content="When the canvas element has a lang attribute, override the document." /> 9 <script src="/common/reftest-wait.js"></script> 10 <style> 11 #canvas-tr { 12 position: absolute; 13 top: 10px; 14 left: 10px; 15 } 16 #canvas-en { 17 position: absolute; 18 top: 120px; 19 left: 10px; 20 } 21 </style> 22 <script> 23 function runTest() { 24 let test_font = new FontFace( 25 // Lato-Medium is a font with language specific ligatures. 26 "Lato-Medium", 27 "url(/fonts/Lato-Medium.ttf)" 28 ); 29 30 test_font.load().then((font) => { 31 document.fonts.add(font); 32 // The 'canvas-tr' element has a lang attribute, use it. 33 var canvasTR = document.getElementById('canvas-tr'); 34 var ctxTR = canvasTR.getContext('2d'); 35 36 ctxTR.font = '25px Lato-Medium'; 37 ctxTR.fillText('fi', 5, 50); 38 39 // The 'canvas-en' element has no lang attribute, use the document lang. 40 var canvasEN = document.getElementById('canvas-en'); 41 var ctxEN = canvasEN.getContext('2d'); 42 43 ctxEN.font = '25px Lato-Medium'; 44 ctxEN.fillText('fi', 5, 50); 45 takeScreenshot(); 46 }); 47 } 48 </script> 49 <body onload="runTest()"> 50 <canvas lang="tr" id="canvas-tr" width="300" height="100"> 51 Browser does not support HTML5 Canvas. 52 </canvas> 53 <canvas id="canvas-en" width="300" height="100"> 54 Browser does not support HTML5 Canvas. 55 </canvas> 56 </body> 57 </html>