| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <head> |
| 4 <meta charset="utf-8"> |
| 5 <title>Space</title> |
| 6 <link rel="help" href="http://www.mathml-association.org/MathMLinHTML5/S3.html#S
S2.SSS6"> |
| 7 <meta name="assert" content="Verify mspace metrics for different values of heigh
t, depth and width"> |
| 8 <script src="/resources/testharness.js"></script> |
| 9 <script src="/resources/testharnessreport.js"></script> |
| 10 <script> |
| 11 var epsilon = 1; |
| 12 function getBox(aId) { |
| 13 var box = document.getElementById(aId).getBoundingClientRect(); |
| 14 box.middle = (box.bottom + box.top) / 2; |
| 15 box.center = (box.left + box.right) / 2; |
| 16 return box; |
| 17 } |
| 18 |
| 19 setup({ explicit_done: true }); |
| 20 window.addEventListener("load", runTests); |
| 21 |
| 22 function runTests() { |
| 23 test(function() { |
| 24 var empty = getBox("empty"); |
| 25 assert_equals(empty.width, 0, "zero width"); |
| 26 assert_approx_equals(getBox("baseline").bottom - empty.top, 0, epsilon, "z
ero depth"); |
| 27 assert_approx_equals(empty.bottom - getBox("baseline").bottom, 0, epsilon,
"zero depth"); |
| 28 }, "Empty mspace"); |
| 29 |
| 30 test(function() { |
| 31 for (var i = 0; i <= 2; i++) { |
| 32 var space = getBox("width" + i); |
| 33 assert_approx_equals(space.width, 25*(i+1), epsilon, "width " + i); |
| 34 assert_approx_equals(getBox("baseline").bottom - space.top, 0, epsilon,
"height" + i); |
| 35 assert_approx_equals(space.bottom - getBox("baseline").bottom, 0, epsilo
n, "depth" + i); |
| 36 } |
| 37 }, "Different widths"); |
| 38 |
| 39 test(function() { |
| 40 for (var i = 0; i <= 2; i++) { |
| 41 var space = getBox("height" + i); |
| 42 assert_equals(space.width, 0, "width" + i); |
| 43 assert_approx_equals(getBox("baseline").bottom - space.top, 25*(i+1), ep
silon, "height" + i); |
| 44 assert_approx_equals(space.bottom - getBox("baseline").bottom, 0, epsilo
n, "depth" + i); |
| 45 } |
| 46 }, "Different heights"); |
| 47 |
| 48 test(function() { |
| 49 for (var i = 0; i <= 2; i++) { |
| 50 var space = getBox("depth" + i); |
| 51 assert_equals(space.width, 0, "width" + i); |
| 52 assert_approx_equals(getBox("baseline").bottom - space.top, 0, epsilon,
"height" + i); |
| 53 assert_approx_equals(space.bottom - getBox("baseline").bottom, 25*(i+1),
epsilon, "depth" + i); |
| 54 } |
| 55 }, "Different depths"); |
| 56 |
| 57 test(function() { |
| 58 for (var i = 0; i <= 2; i++) { |
| 59 var space = getBox("mspace" + i); |
| 60 assert_approx_equals(space.width, 25*(1+i%3), epsilon, "width" + i); |
| 61 assert_approx_equals(getBox("baseline").bottom - space.top, 25*(1+(i+1)%
3), epsilon, "height" + i); |
| 62 assert_approx_equals(space.bottom - getBox("baseline").bottom, 25*(1+(i+
2)%3), epsilon, "depth" + i); |
| 63 } |
| 64 }, "Various combinations of height, depth and width."); |
| 65 |
| 66 done(); |
| 67 } |
| 68 </script> |
| 69 </head> |
| 70 <body> |
| 71 <p> |
| 72 <span id="baseline" style="display: inline-block; width: 30px; height: 5px;
background: blue"></span> |
| 73 <math> |
| 74 <mspace id="empty"/> |
| 75 <mspace id="width0" width="25px"/> |
| 76 <mspace id="width1" width="50px"/> |
| 77 <mspace id="width2" width="75px"/> |
| 78 <mspace id="height0" height="25px"/> |
| 79 <mspace id="height1" height="50px"/> |
| 80 <mspace id="height2" height="75px"/> |
| 81 <mspace id="depth0" depth="25px"/> |
| 82 <mspace id="depth1" depth="50px"/> |
| 83 <mspace id="depth2" depth="75px"/> |
| 84 <mspace id="mspace0" width="25px" height="50px" depth="75px" mathbackgroun
d="green"/> |
| 85 <mspace id="mspace1" width="50px" height="75px" depth="25px" mathbackgroun
d="blue"/> |
| 86 <mspace id="mspace2" width="75px" height="25px" depth="50px" mathbackgroun
d="green"/> |
| 87 </math> |
| 88 </p> |
| 89 <hr/> |
| 90 </body> |
| 91 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2434253002:
Import wpt@7e8373f4bd144e66c88535983aa735b28c934cfe (Closed)
