legacy-mrow-like-elements-001.html (6724B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Legacy maction and semantics elements</title> 6 <link rel="help" href="https://www.w3.org/TR/MathML3/chapter3.html#presm.maction"> 7 <link rel="help" href="https://w3c.github.io/mathml-core/#enlivening-expressions"> 8 <link rel="help" href="https://www.w3.org/TR/MathML3/chapter3.html#presm.semantics"> 9 <link rel="help" href="https://w3c.github.io/mathml-core/#semantics-and-presentation"> 10 <meta name="assert" content="Legacy maction and semantics elements are handled as mrow with special style"> 11 <script src="/resources/testharness.js"></script> 12 <script src="/resources/testharnessreport.js"></script> 13 <script src="/mathml/support/feature-detection.js"></script> 14 <script src="/mathml/support/layout-comparison.js"></script> 15 <script type="text/javascript"> 16 setup({ explicit_done: true }); 17 window.addEventListener("load", runTests); 18 function runTests() 19 { 20 Array.from(document.getElementsByClassName("TestContainer")).forEach(container => { 21 const id = container.id; 22 const math = container.getElementsByTagName("math"); 23 test(function() { 24 assert_true(MathMLFeatureDetection.has_mspace(), "<mspace> is supported"); 25 const epsilon = 1; 26 compareLayout(math[0], math[1], epsilon); 27 }, `Element is laid out as an mrow with only first child displayed (id=${id})`); 28 29 test(function() { 30 assert_true(MathMLFeatureDetection.has_mspace(), "<mspace> is supported"); 31 let firstChild = math[0].firstElementChild.firstElementChild; 32 for (var child = firstChild; child; child = child.nextElementSibling) { 33 var style = window.getComputedStyle(child).getPropertyValue("display"); 34 if (child == firstChild) { 35 assert_equals(style, "block math", "First child has computed display value 'block math'"); 36 } else { 37 assert_equals(style, "none", "Other children have computed display value 'none'"); 38 } 39 } 40 }, `Computed display of children (id=${id})`); 41 }); 42 done(); 43 } 44 </script> 45 <style> 46 mspace:nth-child(2n) { 47 background: lightblue; 48 } 49 mspace:nth-child(2n+1) { 50 background: lightgreen; 51 } 52 mrow.onlyShowFirstChild > :not(:first-child) { 53 display: none; 54 } 55 </style> 56 </head> 57 <body> 58 <div id="log"></div> 59 <p class="TestContainer" id="semantics"> 60 <math> 61 <semantics> 62 <mspace width="10px" height="10px"></mspace> 63 <mspace width="10px" depth="10px"></mspace> 64 <mspace width="10px" height="15px" depth="5px"></mspace> 65 <mspace width="10px" height="5px" depth="15px"></mspace> 66 </semantics> 67 </math> 68 <math> 69 <mrow class="onlyShowFirstChild"> 70 <mspace width="10px" height="10px"></mspace> 71 <mspace width="10px" depth="10px"></mspace> 72 <mspace width="10px" height="15px" depth="5px"></mspace> 73 <mspace width="10px" height="5px" depth="15px"></mspace> 74 </mrow> 75 </math> 76 </p> 77 <p class="TestContainer" id="semantics-annotations"> 78 <math> 79 <semantics> 80 <mspace width="10px" height="10px"></mspace> 81 <annotation>ANNOTATION</annotation> 82 <annotation-xml>ANNOTATION-XML</annotation-xml> 83 </semantics> 84 </math> 85 <math> 86 <mrow class="onlyShowFirstChild"> 87 <mspace width="10px" height="10px"></mspace> 88 <annotation>ANNOTATION</annotation> 89 <annotation-xml>ANNOTATION-XML</annotation-xml> 90 </mrow> 91 </math> 92 </p> 93 <p class="TestContainer" id="maction"> 94 <math> 95 <maction> 96 <mspace width="10px" height="10px"></mspace> 97 <mspace width="10px" depth="10px"></mspace> 98 <mspace width="10px" height="15px" depth="5px"></mspace> 99 <mspace width="10px" height="5px" depth="15px"></mspace> 100 </maction> 101 </math> 102 <math> 103 <mrow class="onlyShowFirstChild"> 104 <mspace width="10px" height="10px"></mspace> 105 <mspace width="10px" depth="10px"></mspace> 106 <mspace width="10px" height="15px" depth="5px"></mspace> 107 <mspace width="10px" height="5px" depth="15px"></mspace> 108 </mrow> 109 </math> 110 </p> 111 <p class="TestContainer" id="maction-toggle"> 112 <math> 113 <maction actiontype="toggle"> 114 <mspace width="10px" height="10px"></mspace> 115 <mspace width="10px" depth="10px"></mspace> 116 <mspace width="10px" height="15px" depth="5px"></mspace> 117 <mspace width="10px" height="5px" depth="15px"></mspace> 118 </maction> 119 </math> 120 <math> 121 <mrow class="onlyShowFirstChild"> 122 <mspace width="10px" height="10px"></mspace> 123 <mspace width="10px" depth="10px"></mspace> 124 <mspace width="10px" height="15px" depth="5px"></mspace> 125 <mspace width="10px" height="5px" depth="15px"></mspace> 126 </mrow> 127 </math> 128 </p> 129 <p class="TestContainer" id="maction-toggle-selection"> 130 <math> 131 <maction actiontype="toggle" selection="3"> 132 <mspace width="10px" height="10px"></mspace> 133 <mspace width="10px" depth="10px"></mspace> 134 <mspace width="10px" height="15px" depth="5px"></mspace> 135 <mspace width="10px" height="5px" depth="15px"></mspace> 136 </maction> 137 </math> 138 <math> 139 <mrow class="onlyShowFirstChild"> 140 <mspace width="10px" height="10px"></mspace> 141 <mspace width="10px" depth="10px"></mspace> 142 <mspace width="10px" height="15px" depth="5px"></mspace> 143 <mspace width="10px" height="5px" depth="15px"></mspace> 144 </mrow> 145 </math> 146 </p> 147 <p class="TestContainer" id="maction-statusline"> 148 <math> 149 <maction actiontype="statusline"> 150 <mspace width="10px" height="10px"></mspace> 151 <mtext>MESSAGE</mtext> 152 </maction> 153 </math> 154 <math> 155 <mrow class="onlyShowFirstChild"> 156 <mspace width="10px" height="10px"></mspace> 157 <mtext>MESSAGE</mtext> 158 </mrow> 159 </math> 160 </p> 161 <p class="TestContainer" id="maction-tooltip"> 162 <math> 163 <maction actiontype="tooltip"> 164 <mspace width="10px" height="10px"></mspace> 165 <mtext>MESSAGE</mtext> 166 </maction> 167 </math> 168 <math> 169 <mrow class="onlyShowFirstChild"> 170 <mspace width="10px" height="10px"></mspace> 171 <mtext>MESSAGE</mtext> 172 </mrow> 173 </math> 174 </p> 175 <p class="TestContainer" id="maction-input"> 176 <math> 177 <maction actiontype="input"> 178 <mspace width="10px" height="10px"></mspace> 179 </maction> 180 </math> 181 <math> 182 <mrow class="onlyShowFirstChild"> 183 <mspace width="10px" height="10px"></mspace> 184 </mrow> 185 </math> 186 </p> 187 </body> 188 </html>