font-inflation-1.html 4.2 KB

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