table-default-styles-001.html (2529B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Tabular math elements default styles</title> 4 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> 5 <link rel="help" href="https://w3c.github.io/mathml-core/#tabular-math"> 6 <link rel="help" href="https://w3c.github.io/mathml-core/#user-agent-stylesheet"> 7 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 8 <meta name="assert" content="Check default styles for mtable, mtr and mtd."> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <style> 12 math { 13 font: 25px/1 Ahem; 14 } 15 </style> 16 <div id="log"></div> 17 <div> 18 <math> 19 <mrow id="reference"><mspace width="20px" height="10px" style="background: lightblue;"></mrow> 20 <mtable id="mtable"><mtr id="mtr"><mtd id="mtd"><mspace width="20px" height="10px" style="background: lightblue;"></mtd></mtr></mtable> 21 </math> 22 </div> 23 <script> 24 setup({ explicit_done: true }); 25 26 document.fonts.load("25px Ahem").then(() => { 27 test(() => assert_equals(window.getComputedStyle(mtable).mathStyle, "compact"), 28 "Default math-style value on mtable"); 29 test(() => assert_equals(window.getComputedStyle(mtable).display, "inline-table"), 30 "Default display value on mtable"); 31 test(() => assert_equals(window.getComputedStyle(mtr).display, "table-row"), 32 "Default display value on mtr"); 33 test(() => assert_equals(window.getComputedStyle(mtd).display, "table-cell"), 34 "Default display value on mtd"); 35 test(() => assert_equals(window.getComputedStyle(mtd).textAlign, "center"), 36 "Default text-align value on mtd"); 37 test(() => assert_equals(window.getComputedStyle(mtd).paddingLeft, "10px"), 38 "Default padding-left value on mtd"); 39 test(() => assert_equals(window.getComputedStyle(mtd).paddingRight, "10px"), 40 "Default padding-right value on mtd"); 41 test(() => assert_equals(window.getComputedStyle(mtd).paddingTop, "10px"), 42 "Default padding-top value on mtd"); 43 test(() => assert_equals(window.getComputedStyle(mtd).paddingBottom, "10px"), 44 "Default padding-bottom value on mtd"); 45 46 test(function () { 47 var mtableBox = document.getElementById("mtable").getBoundingClientRect(); 48 var referenceBox = document.getElementById("reference").getBoundingClientRect(); 49 assert_equals(mtableBox.width, referenceBox.width + 20); 50 assert_equals(mtableBox.height, referenceBox.height + 20); 51 }, "Bounding box is the same as mrow + mtd default padding"); 52 53 done(); 54 }); 55 </script>