font-inflation-1.html (4394B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <title>Font Inflation</title> 5 <meta charset="utf-8"/> 6 <link rel="match" href="font-inflation-1-ref.html"/> 7 <style> 8 @font-face { 9 font-family: "dtls-1"; 10 src: url(dtls-1.otf); 11 } 12 p, math { 13 font-family: serif; 14 } 15 </style> 16 <script type="text/javascript"> 17 function almostEqual(aX, aY) { 18 var epsilon = 2.6; 19 return Math.abs(aX - aY) < epsilon; 20 } 21 22 function verifySize(aElement, aReference) { 23 /* Verify if the size of the element matches the reference, and 24 otherwise paint the element in red. */ 25 if (!almostEqual(aElement.getBoundingClientRect().height, 26 aReference.getBoundingClientRect().height) || 27 !almostEqual(aElement.getBoundingClientRect().width, 28 aReference.getBoundingClientRect().width)) { 29 aElement.setAttribute("mathcolor", "red"); 30 } 31 } 32 33 function verifySizes() { 34 /* Compare the size of the elements in the inline and display equations 35 against the reference mtext elements. */ 36 var ref = document.getElementById("ref"); 37 var inline = document.getElementById("inline"); 38 var cell = document.getElementById("cell"); 39 for (var i = 0; i < ref.children.length; i++) { 40 verifySize(inline.children[i], ref.children[i]); 41 verifySize(cell.children[i], ref.children[i]); 42 } 43 44 document.documentElement.removeAttribute("class"); 45 } 46 47 document.documentElement.addEventListener("TestRendered", verifySizes); 48 </script> 49 </head> 50 <body> 51 52 <p>The text 53 '<math> 54 <mrow id="ref"> 55 <mtext style="font-family: dtls-1">𝔞</mtext> 56 <mtext>+</mtext> 57 </mrow> 58 </math>' 59 should have the same size as inline math 60 '<math> 61 <mrow id="inline"> 62 <mtext style="font-family: dtls-1">𝔞<!-- MATHEMATICAL FRAKTUR SMALL A--></mtext> 63 <mo>+</mo> 64 </mrow> 65 </math>' 66 or math in a table: '<math><mtable><mtr> 67 <mtd> 68 <mrow id="cell"> 69 <mtext style="font-family: dtls-1">𝔞<!-- MATHEMATICAL FRAKTUR SMALL A--></mtext> 70 <mo>+</mo> 71 </mrow> 72 </mtd> 73 </mtr></mtable></math>' 74 (but not necessarily the same size as block-level math 75 <math display="block"> 76 <mrow id="display"> 77 <mtext style="font-family: dtls-1">𝔞<!-- MATHEMATICAL FRAKTUR SMALL A--></mtext> 78 <mo>+</mo> 79 </mrow> 80 </math> 81 because it forms a BFC and hence is its own inflation container.) 82 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 83 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 84 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 85 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 86 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 87 proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem 88 ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 89 incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 90 nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 91 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore 92 eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt 93 in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor 94 sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut 95 labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 96 exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis 97 aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 98 fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 99 culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit 100 amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 101 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation 102 ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 103 in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 104 pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui 105 officia deserunt mollit anim id est laborum.</p> 106 107 </body> 108 </html>