mspace-width-height-001.html (4999B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Space</title> 6 <link rel="help" href="https://w3c.github.io/mathml-core/#space-mspace"> 7 <meta name="assert" content="Verify mspace metrics for different values of height, depth and width"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script> 11 var epsilon = 1; 12 13 setup({ explicit_done: true }); 14 window.addEventListener("load", runTests); 15 16 function getMetrics(aId) { 17 let baseline = document.getElementById("baseline").getBoundingClientRect(); 18 let mspace = document.getElementById(aId).getBoundingClientRect(); 19 return { 20 width: mspace.width, 21 height: mspace.height, 22 line_ascent: (baseline.top + baseline.bottom)/2 - mspace.top 23 }; 24 } 25 26 function runTests() { 27 test(function() { 28 let metrics = getMetrics("widthAttributePlusWidthProperty"); 29 assert_approx_equals(metrics.width, 200, epsilon, 30 "mspace width overridden by inline style"); 31 assert_approx_equals(metrics.height, 200, epsilon, 32 "mspace height as specified by height attribute"); 33 assert_approx_equals(metrics.line_ascent, 200, epsilon, 34 "mspace line-ascent as specified by height attribute"); 35 }, "width attribute + width property"); 36 37 test(function() { 38 let metrics = getMetrics("heightAndDepthAttributesPlusHeightProperty"); 39 assert_approx_equals(metrics.width, 200, epsilon, 40 "mspace width as specified by attribute"); 41 assert_approx_equals(metrics.height, 200, epsilon, 42 "mspace height overridden by inline style"); 43 assert_approx_equals(metrics.line_ascent, 100, epsilon, 44 "mspace line-ascent as specified by height attribute"); 45 }, "height/depth attributes + height property"); 46 47 test(function() { 48 let metrics = getMetrics("heightAttributePlusHeightProperty"); 49 assert_approx_equals(metrics.width, 200, epsilon, 50 "mspace width as specified by attribute"); 51 assert_approx_equals(metrics.height, 200, epsilon, 52 "mspace height overridden by inline style"); 53 assert_approx_equals(metrics.line_ascent, 300, epsilon, 54 "mspace line-ascent as specified by height attribute"); 55 }, "height attribute + height property"); 56 57 test(function() { 58 let metrics = getMetrics("depthAttributePlusHeightProperty"); 59 assert_approx_equals(metrics.width, 200, epsilon, 60 "mspace width as specified by attribute"); 61 assert_approx_equals(metrics.height, 200, epsilon, 62 "mspace height overridden by inline style"); 63 assert_approx_equals(metrics.line_ascent, 0, epsilon, 64 "mspace line-ascent defaults to 0"); 65 }, "depth attribute + height property"); 66 67 done(); 68 } 69 </script> 70 </head> 71 <body> 72 <div id="log"></div> 73 74 <math> 75 <!-- Reference baseline --> 76 <mspace id="baseline" style="background: black" 77 width="10px" height="100px" depth="100px"/> 78 79 <!-- width="500px" is a presentational hint 80 setting the element's width property to the corresponding value, 81 overridden by the inline style width: 200px. 82 height="200px" sets the height/line-ascent to 200px. --> 83 <mspace id="widthAttributePlusWidthProperty" 84 width="500px" height="200px" 85 style="width: 200px; background: green"/> 86 87 <!-- height="100px" + depth="200px" are used as a presentational hint 88 setting the element's height property to calc(100px + 200px), 89 overridden by inline style height: 200px. 90 height="100px" sets the line-ascent to 100px. --> 91 <mspace id="heightAndDepthAttributesPlusHeightProperty" 92 width="200px" height="100px" depth="200px" 93 style="height: 200px; background: blue"/> 94 95 <!-- height="300px" is used as a presentational hint 96 setting the element's height property to the corresponding value, 97 overridden by inline style height: 200px. 98 height="300px" sets the line-ascent to 300px. --> 99 <mspace id="heightAttributePlusHeightProperty" 100 width="200px" height="300px" 101 style="height: 200px; background: magenta"/> 102 103 <!-- depth="300px" is used as a presentational hint 104 setting the element's height property to the corresponding value, 105 overridden by inline style height: 200px. 106 The line-ascent defaults to 0. --> 107 <mspace id="depthAttributePlusHeightProperty" 108 width="200px" depth="300px" 109 style="height: 200px; background: yellow"/> 110 </math> 111 112 </body> 113 </html>