Update web-platform-tests to revision e8bfc205e36ad699601212cd50083870bad9a75d

This commit is contained in:
Ms2ger 2016-11-14 11:07:09 +01:00
parent 65dd6d4340
commit ccdb0a3458
1428 changed files with 118036 additions and 9786 deletions

View file

@ -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>

View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>space (reference)</title>
</head>
<body>
<p>Test passes if you see a green square and no red.</p>
<div style="position: relative;">
<div style="position: absolute; top: 0px; left: 0px;
background: green; width: 200px; height: 200px;">
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,42 @@
<!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">
<link rel="match" href="space-2-ref.html"/>
<meta name="assert" content="Verify mspace visual rendering for different values of height, depth and width">
</head>
<body>
<p>Test passes if you see a green square and no red.</p>
<div style="position: relative;">
<!-- Some green and red mspaces to draw a square -->
<div style="position: absolute; top: 0px; left: 0px;
width: 200px; height: 200px;">
<math style="position: absolute; top: 0px; left: 0px">
<mspace width="50px" height="100px" depth="100px" mathbackground="green"/>
<mspace width="50px" height="100px" depth="100px" mathbackground="green"/>
<mspace width="25px" depth="100px" mathbackground="green"/>
<mspace width="25px" depth="100px" mathbackground="green"/>
<mspace width="25px" height="100px" mathbackground="green"/>
<mspace width="25px" height="100px" mathbackground="green"/>
</math>
<math style="position: absolute; top: 0px; left: 0px">
<mspace width="100px" height="20px" depth="20px" mathbackground="red"/>
<mspace width="50px" height="100px" mathbackground="red"/>
<mspace width="50px" depth="100px" mathbackground="red"/>
</math>
</div>
<!-- These green divs should cover the red mspace elements -->
<div style="position: absolute; top: 0px; left: 0px;
width: 200px; height: 200px;">
<div style="position: absolute; top: 80px; left: 0px;
width: 100px; height: 40px; background: green"></div>
<div style="position: absolute; top: 0px; left: 100px;
width: 50px; height: 100px; background: green"></div>
<div style="position: absolute; top: 100px; left: 150px;
width: 50px; height: 100px; background: green"></div>
</div>
</div>
</body>
</html>