largeop-hit-testing.html (1871B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Test hit testing on large operators</title> 6 <meta name="assert" content="Verify that hit testing works on large operators."> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/mathml/support/feature-detection.js"></script> 10 <script src="/mathml/support/fonts.js"></script> 11 <style> 12 @font-face { 13 font-family: TestFont; 14 src: url("/fonts/math/largeop-displayoperatorminheight5000.woff"); 15 } 16 mo { 17 font-family: TestFont; 18 font-size: 16px; 19 } 20 </style> 21 <script> 22 function getBox(aId) { 23 return document.getElementById(aId).getBoundingClientRect(); 24 } 25 26 setup({ explicit_done: true }); 27 window.addEventListener("load", () => { loadAllFonts().then(runTests); }); 28 29 function runTests() { 30 31 test(function() { 32 assert_true(MathMLFeatureDetection.has_operator_spacing()); 33 34 let bbox = getBox("largeop"); 35 let hit = document.getElementById("largeop"); 36 let reference = getBox("reference"); 37 assert_true(bbox.height > reference.height, "height of large op is bigger than the equivalent normal operator"); 38 assert_equals(hit, document.elementFromPoint(bbox.left + 1, bbox.top + 1), "hit testing top-left corner of large op works"); 39 assert_equals(hit, document.elementFromPoint(bbox.right - 1, bbox.bottom - 1), "hit testing bottom-right corner of large op works"); 40 }, "Large op hit testing"); 41 42 done(); 43 } 44 </script> 45 </head> 46 <body> 47 <math> 48 <mtable> 49 <mtr> 50 <mtd> 51 <mstyle displaystyle="false"> 52 <mo id="reference">⫿</mo> 53 </mstyle> 54 </mtd> 55 <mtd> 56 <mstyle displaystyle="true"> 57 <mo id="largeop">⫿</mo> 58 </mstyle> 59 </mtd> 60 </mtr> 61 </mtable> 62 </math> 63 </body> 64 </html>