Split mpadded-002.html first paragraph (#24603)

Due to lack of line-breaking, on narrow pages the first math element will be positioned below the baseline reference. A lot of test frameworks use narrow widths for testing and calculations will fail, therefore split the first math element in half, giving a higher chance for the test framework to pass this test.
web-platform-tests · Jul 15, 2020 · 2155d26 · 2155d26
1 parent 2e85d3f
commit 2155d26
Showing 1 changed file with 9 additions and 4 deletions.
diff --git a/mathml/presentation-markup/mpadded/mpadded-002.html b/mathml/presentation-markup/mpadded/mpadded-002.html
@@ -50,7 +50,7 @@
       for (var i = 0; i <= 2; i++) {
         var mpadded = getBox("depth" + i);
         assert_equals(mpadded.width, contentWidth, "width" + i);
-        assert_approx_equals(getBox("baseline").bottom - mpadded.top, contentHeight, epsilon, "height" + i);
+        assert_approx_equals(getBox("baseline2").bottom - mpadded.top, contentHeight, epsilon, "height" + i);
         assert_approx_equals(mpadded.bottom - getBox("baseline").bottom, 25*(i+1), epsilon, "depth" + i);
       }
     }, "Different depths");
@@ -59,7 +59,7 @@
       for (var i = 0; i <= 2; i++) {
         var mpadded = getBox("mpadded" + i);
         assert_approx_equals(mpadded.width, 25*(1+i%3), epsilon, "width" + i);
-        assert_approx_equals(getBox("baseline").bottom - mpadded.top, 25*(1+(i+1)%3), epsilon, "height" + i);
+        assert_approx_equals(getBox("baseline2").bottom - mpadded.top, 25*(1+(i+1)%3), epsilon, "height" + i);
         assert_approx_equals(mpadded.bottom - getBox("baseline").bottom, 25*(1+(i+2)%3), epsilon, "depth" + i);
       }
     }, "Various combinations of height, depth and width.");
@@ -79,7 +79,7 @@
         document.getElementById("dynamic-attach").setAttribute(name, length);
         document.getElementById("dynamic-modify").setAttribute(name, length);
     });
-    let baseline = getBox("baseline2").bottom;
+    let baseline = getBox("baseline3").bottom;
 
     test(function() {
         let remove = getBox("dynamic-remove");
@@ -126,6 +126,11 @@
       <mpadded id="height0" height="25px"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded>
       <mpadded id="height1" height="50px"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded>
       <mpadded id="height2" height="75px"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded>
+    </math>
+  </p>
+  <p>
+    <span id="baseline2" style="display: inline-block; width: 30px; height: 5px; background: blue"></span>
+    <math>
       <mpadded id="depth0" depth="25px"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded>
       <mpadded id="depth1" depth="50px"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded>
       <mpadded id="depth2" depth="75px"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded>
@@ -140,7 +145,7 @@
     </div>
   </div>
   <p>
-    <span id="baseline2" style="display: inline-block; width: 30px; height: 5px; background: blue"></span>
+    <span id="baseline3" style="display: inline-block; width: 30px; height: 5px; background: blue"></span>
     <math>
       <mpadded id="dynamic-attach" style="background: lightgreen"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded>
       <mpadded id="dynamic-remove" width="10px" height="20px" depth="30px" style="background: lightyellow"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded>