embellished-operator-dynamic-002.html (6087B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Embellished operators - tree change and relayout</title> 6 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 7 <link rel="help" href="https://w3c.github.io/mathml-core/#embellished-operators"> 8 <link rel="help" href="https://w3c.github.io/mathml-core/#definition-of-space-like-elements"> 9 <link rel="help" href="https://w3c.github.io/mathml-core/#layout-of-mrow"> 10 <link rel="help" href="https://chromium-review.googlesource.com/c/chromium/src/+/3059456"> 11 <meta name="assert" content="Verify relayout of an mrow with a child that has a deeply nested <mo> element."> 12 <script src="/resources/testharness.js"></script> 13 <script src="/resources/testharnessreport.js"></script> 14 <script src="/mathml/support/mathml-fragments.js"></script> 15 <script src="/mathml/support/fonts.js"></script> 16 <style> 17 math, math * { 18 font: 25px/1 Ahem; 19 } 20 mn { 21 color: black; 22 } 23 .relative_positioned_and_fixed_size { 24 position: relative; 25 height: 0px; 26 width: 0px; 27 overflow: scroll; 28 } 29 </style> 30 <script> 31 setup({ explicit_done: true }); 32 window.addEventListener("load", () => { loadAllFonts().then(runTests); }); 33 34 function runTests() { 35 var epsilon = 1; 36 var emToPx = 25; 37 38 function assertCorrectSpacing(container, 39 zero_size_mrow_is_embellished_op) { 40 // The container should add lspace/rspace around the zero size mrow 41 // if and only if that mrow is an embellished operator. 42 let mnBefore = container.children[0].getBoundingClientRect(); 43 let zeroSizeMrow = container.children[1].getBoundingClientRect(); 44 let mnAfter = container.children[2].getBoundingClientRect(); 45 assert_approx_equals(zeroSizeMrow.left - mnBefore.right, 46 zero_size_mrow_is_embellished_op ? 47 emToPx * 1 : 0, epsilon, 48 "lspace"); 49 assert_approx_equals(mnAfter.left - zeroSizeMrow.right, 50 zero_size_mrow_is_embellished_op ? 51 emToPx * 2 : 0, epsilon, 52 "rspace"); 53 } 54 55 let container1 = document.getElementById("container1"); 56 test(function() { 57 assertCorrectSpacing(container1, true); 58 }, "container1: Initially an embellished operator"); 59 60 let container2 = document.getElementById("container2"); 61 test(function() { 62 assertCorrectSpacing(container2, false); 63 }, "container2: Initially not an embellished operator"); 64 65 test(function() { 66 let mrow1 = document.getElementById("change_to_not_embellished_operator"); 67 mrow1.appendChild(FragmentHelper.createElement("mn")); 68 assertCorrectSpacing(container1, false); 69 }, " container1: No longer an embellished operator"); 70 71 test(function() { 72 let mrow2 = document.getElementById("change_to_embellished_operator"); 73 mrow2.removeChild(mrow2.lastElementChild); 74 assertCorrectSpacing(container2, true); 75 }, "container2: Became an embellished operator"); 76 77 let container3 = document.getElementById("container3"); 78 test(function() { 79 assertCorrectSpacing(container3, true); 80 }, "container3: Initially an embellished operator (testing space-like)"); 81 82 let container4 = document.getElementById("container4"); 83 test(function() { 84 assertCorrectSpacing(container4, false); 85 }, "container4/space-like: Initially not an embellished operator (testing space-like)"); 86 87 test(function() { 88 let mrow = document.getElementById("change_to_not_space_like"); 89 mrow.appendChild(FragmentHelper.createElement("mn")); 90 assertCorrectSpacing(container3, false); 91 }, " container3: No longer an embellished operator (testing space-like)"); 92 93 test(function() { 94 let mrow = document.getElementById("change_to_space_like"); 95 mrow.removeChild(mrow.lastElementChild); 96 assertCorrectSpacing(container4, true); 97 }, "container4: Became an embellished operator (testing space-like)"); 98 99 done(); 100 } 101 </script> 102 </head> 103 <body> 104 <div id="log"></div> 105 106 <div> 107 <math display="block"> 108 <mrow id="container1"> 109 <mn>1</mn> 110 <mrow class="relative_positioned_and_fixed_size"> 111 <mrow id="change_to_not_embellished_operator"> 112 <mrow> 113 <mo lspace="1em" rspace="2em"></mo> 114 </mrow> 115 </mrow> 116 </mrow> 117 <mn>2</mn> 118 </mrow> 119 </math> 120 </div> 121 122 <div> 123 <math display="block"> 124 <mrow id="container2"> 125 <mn>3</mn> 126 <mrow class="relative_positioned_and_fixed_size"> 127 <mrow id="change_to_embellished_operator"> 128 <mrow> 129 <mo lspace="1em" rspace="2em"></mo> 130 </mrow> 131 <mn></mn> 132 </mrow> 133 </mrow> 134 <mn>4</mn> 135 </mrow> 136 </math> 137 </div> 138 139 <div> 140 <math display="block"> 141 <mrow id="container3"> 142 <mn>5</mn> 143 <mrow> 144 <mrow> 145 <mrow> 146 <mo lspace="1em" rspace="2em"></mo> 147 </mrow> 148 <mrow class="relative_positioned_and_fixed_size"> 149 <mrow id="change_to_not_space_like"> 150 <mspace></mspace> 151 <mtext></mtext> 152 </mrow> 153 </mrow> 154 </mrow> 155 </mrow> 156 <mn>6</mn> 157 </mrow> 158 </math> 159 </div> 160 161 <div> 162 <math display="block"> 163 <mrow id="container4"> 164 <mn>7</mn> 165 <mrow> 166 <mrow> 167 <mrow> 168 <mo lspace="1em" rspace="2em"></mo> 169 </mrow> 170 <mrow class="relative_positioned_and_fixed_size"> 171 <mrow id="change_to_space_like"> 172 <mspace></mspace> 173 <mtext></mtext> 174 <mn></mn> 175 </mrow> 176 </mrow> 177 </mrow> 178 </mrow> 179 <mn>8</mn> 180 </mrow> 181 </math> 182 </div> 183 184 </body> 185 </html>