Index: third_party/WebKit/LayoutTests/imported/wpt/mathml/presentation-markup/spaces/space-1.html |
diff --git a/third_party/WebKit/LayoutTests/imported/wpt/mathml/presentation-markup/spaces/space-1.html b/third_party/WebKit/LayoutTests/imported/wpt/mathml/presentation-markup/spaces/space-1.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..adb36377842295e1bf0ec298d7ec19aa5adaeeb4 |
--- /dev/null |
+++ b/third_party/WebKit/LayoutTests/imported/wpt/mathml/presentation-markup/spaces/space-1.html |
@@ -0,0 +1,91 @@ |
+<!DOCTYPE html> |
+<html> |
+<head> |
+<meta charset="utf-8"> |
+<title>Space</title> |
+<link rel="help" href="http://www.mathml-association.org/MathMLinHTML5/S3.html#SS2.SSS6"> |
+<meta name="assert" content="Verify mspace metrics for different values of height, depth and width"> |
+<script src="/resources/testharness.js"></script> |
+<script src="/resources/testharnessreport.js"></script> |
+<script> |
+ var epsilon = 1; |
+ function getBox(aId) { |
+ var box = document.getElementById(aId).getBoundingClientRect(); |
+ box.middle = (box.bottom + box.top) / 2; |
+ box.center = (box.left + box.right) / 2; |
+ return box; |
+ } |
+ |
+ setup({ explicit_done: true }); |
+ window.addEventListener("load", runTests); |
+ |
+ function runTests() { |
+ test(function() { |
+ var empty = getBox("empty"); |
+ assert_equals(empty.width, 0, "zero width"); |
+ assert_approx_equals(getBox("baseline").bottom - empty.top, 0, epsilon, "zero depth"); |
+ assert_approx_equals(empty.bottom - getBox("baseline").bottom, 0, epsilon, "zero depth"); |
+ }, "Empty mspace"); |
+ |
+ test(function() { |
+ for (var i = 0; i <= 2; i++) { |
+ var space = getBox("width" + i); |
+ assert_approx_equals(space.width, 25*(i+1), epsilon, "width " + i); |
+ assert_approx_equals(getBox("baseline").bottom - space.top, 0, epsilon, "height" + i); |
+ assert_approx_equals(space.bottom - getBox("baseline").bottom, 0, epsilon, "depth" + i); |
+ } |
+ }, "Different widths"); |
+ |
+ test(function() { |
+ for (var i = 0; i <= 2; i++) { |
+ var space = getBox("height" + i); |
+ assert_equals(space.width, 0, "width" + i); |
+ assert_approx_equals(getBox("baseline").bottom - space.top, 25*(i+1), epsilon, "height" + i); |
+ assert_approx_equals(space.bottom - getBox("baseline").bottom, 0, epsilon, "depth" + i); |
+ } |
+ }, "Different heights"); |
+ |
+ test(function() { |
+ for (var i = 0; i <= 2; i++) { |
+ var space = getBox("depth" + i); |
+ assert_equals(space.width, 0, "width" + i); |
+ assert_approx_equals(getBox("baseline").bottom - space.top, 0, epsilon, "height" + i); |
+ assert_approx_equals(space.bottom - getBox("baseline").bottom, 25*(i+1), epsilon, "depth" + i); |
+ } |
+ }, "Different depths"); |
+ |
+ test(function() { |
+ for (var i = 0; i <= 2; i++) { |
+ var space = getBox("mspace" + i); |
+ assert_approx_equals(space.width, 25*(1+i%3), epsilon, "width" + i); |
+ assert_approx_equals(getBox("baseline").bottom - space.top, 25*(1+(i+1)%3), epsilon, "height" + i); |
+ assert_approx_equals(space.bottom - getBox("baseline").bottom, 25*(1+(i+2)%3), epsilon, "depth" + i); |
+ } |
+ }, "Various combinations of height, depth and width."); |
+ |
+ done(); |
+ } |
+</script> |
+</head> |
+<body> |
+ <p> |
+ <span id="baseline" style="display: inline-block; width: 30px; height: 5px; background: blue"></span> |
+ <math> |
+ <mspace id="empty"/> |
+ <mspace id="width0" width="25px"/> |
+ <mspace id="width1" width="50px"/> |
+ <mspace id="width2" width="75px"/> |
+ <mspace id="height0" height="25px"/> |
+ <mspace id="height1" height="50px"/> |
+ <mspace id="height2" height="75px"/> |
+ <mspace id="depth0" depth="25px"/> |
+ <mspace id="depth1" depth="50px"/> |
+ <mspace id="depth2" depth="75px"/> |
+ <mspace id="mspace0" width="25px" height="50px" depth="75px" mathbackground="green"/> |
+ <mspace id="mspace1" width="50px" height="75px" depth="25px" mathbackground="blue"/> |
+ <mspace id="mspace2" width="75px" height="25px" depth="50px" mathbackground="green"/> |
+ </math> |
+ </p> |
+ <hr/> |
+</body> |
+</html> |