Google Git
Sign in
webkit / WebKit / 15e4da4b5ce83fcfe6de6863df44c60571019d5f / . / LayoutTests / mathml / presentation / stretchy-depth-height.html
blob: 6f755136156b7ec026352db1016f4e1f65b621d5 [file] [log] [blame]
<html>
<head>
<title>stretch depth/height</title>
<meta charset="utf-8">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script type="text/javascript">
setup({ "explicit_done": true });
var epsilon = 1;
function run() {
test(function() {
var s1 = document.getElementById("s1").getBoundingClientRect();
var c1 = document.getElementById("c1").getBoundingClientRect();
assert_approx_equals(s1.top, c1.top, epsilon);
assert_approx_equals(s1.bottom, c1.bottom, epsilon);
}, "symmetric stretching");
test(function() {
var s2 = document.getElementById("s2").getBoundingClientRect();
var c2 = document.getElementById("c2").getBoundingClientRect();
assert_approx_equals(s2.top, c2.top, epsilon);
assert_approx_equals(s2.bottom, c2.bottom, epsilon);
}, "large depth");
test(function() {
var s3 = document.getElementById("s3").getBoundingClientRect();
var c3 = document.getElementById("c3").getBoundingClientRect();
assert_approx_equals(s3.top, c3.top, epsilon);
assert_approx_equals(s3.bottom, c3.bottom, epsilon);
}, "large height");
test(function() {
var s4 = document.getElementById("s4").getBoundingClientRect();
var c4 = document.getElementById("c4").getBoundingClientRect();
assert_approx_equals(s4.top, c4.top, epsilon);
assert_approx_equals(s4.bottom, c4.bottom, epsilon);
}, "mtable");
test(function() {
var s5 = document.getElementById("s5").getBoundingClientRect();
var c5maxheight = document.getElementById("c5maxheight").getBoundingClientRect();
var c5maxdepth = document.getElementById("c5maxdepth").getBoundingClientRect();
assert_approx_equals(s5.top, c5maxheight.top, epsilon);
assert_approx_equals(s5.bottom, c5maxdepth.bottom, epsilon);
}, "several siblings with different heights/depths");
test(function() {
var c6maxheight = document.getElementById("c6maxheight").getBoundingClientRect();
var c6maxdepth = document.getElementById("c6maxdepth").getBoundingClientRect();
for (var i = 1; i <= 3; i++) {
var s6 = document.getElementById("s6_" + i).getBoundingClientRect();
assert_approx_equals(s6.top, c6maxheight.top, epsilon, "top of operator" + i);
assert_approx_equals(s6.bottom, c6maxdepth.bottom, c6maxheight.top, epsilon, "bottom of operator" + i);
}
}, "testing several operators in one mrow");
test(function() {
var s71 = document.getElementById("s71").getBoundingClientRect();
var c71 = document.getElementById("c71").getBoundingClientRect();
var s72 = document.getElementById("s72").getBoundingClientRect();
var c72 = document.getElementById("c72").getBoundingClientRect();
assert_approx_equals(s71.top, c71.top, epsilon);
assert_approx_equals(s71.bottom, c71.bottom, epsilon);
assert_approx_equals(s72.top, c72.top, epsilon);
assert_approx_equals(s72.bottom, c72.bottom, epsilon);
}, "testing with non-stretchy mo");
done();
}
</script>
</head>
<body onload="run()">
<p>This test passes if the depth and height of braces match the maximum depth and height of its siblings.</p>
<p>
<!-- This tests symmetric stretching. -->
<math>
<mrow>
<mo id="s1" symmetric="false">{</mo>
<mspace id="c1" width="10px" height="150px" depth="150px" mathbackground="blue"/>
</mrow>
</math>
<!-- This tests a large depth. -->
<math>
<mrow>
<mo id="s2" symmetric="false">{</mo>
<mspace id="c2" width="10px" height="50px" depth="250px" mathbackground="blue"/>
</mrow>
</math>
<!-- This tests a large height. -->
<math>
<mrow>
<mo id="s3" symmetric="false">{</mo>
<mspace id="c3" width="10px" height="250px" depth="50px" mathbackground="blue"/>
</mrow>
</math>
<!-- This tests an mtable sibling. -->
<math>
<mrow>
<mo id="s4" symmetric="false">{</mo>
<mtable id="c4">
<mtr><mtd><mi>x</mi></mtd><mtd><mi>y</mi></mtd><mtd><mi>z</mi></mtd></mtr>
<mtr><mtd><mi>x</mi></mtd><mtd><mi>y</mi></mtd><mtd><mi>z</mi></mtd></mtr>
<mtr><mtd><mi>x</mi></mtd><mtd><mi>y</mi></mtd><mtd><mi>z</mi></mtd></mtr>
<mtr><mtd><mi>x</mi></mtd><mtd><mi>y</mi></mtd><mtd><mi>z</mi></mtd></mtr>
<mtr><mtd><mi>x</mi></mtd><mtd><mi>y</mi></mtd><mtd><mi>z</mi></mtd></mtr>
</mtable>
</mrow>
</math>
<!-- This tests several siblings with different heights/depths. -->
<math>
<mrow>
<mo id="s5" symmetric="false">{</mo>
<mfrac>
<mfrac>
<mn>1</mn>
<mn>2</mn>
</mfrac>
<msup>
<mn>3</mn>
<mn>4</mn>
</msup>
</mfrac>
<mo>-</mo>
<msqrt>
<mfrac>
<mn>5</mn>
<mn>6</mn>
</mfrac>
</msqrt>
<mo>*</mo>
<mfrac id="c5maxheight">
<mfrac>
<mfrac>
<mfrac>
<mn>1</mn>
<mn>2</mn>
</mfrac>
<msup>
<mn>3</mn>
<mn>4</mn>
</msup>
</mfrac>
<msqrt>
<mfrac>
<mn>5</mn>
<mn>6</mn>
</mfrac>
</msqrt>
</mfrac>
<mfrac>
<mfrac>
<msub>
<mn>7</mn>
<mn>8</mn>
</msub>
<munder>
<mn>9</mn>
<mn>10</mn>
</munder>
</mfrac>
<mn>11</mn>
</mfrac>
</mfrac>
<mo>+</mo>
<mfrac>
<msub>
<mn>7</mn>
<mn>8</mn>
</msub>
<munder>
<mn>9</mn>
<mn>10</mn>
</munder>
</mfrac>
<mo>/</mo>
<mfrac id="c5maxdepth">
<mfrac>
<mn>1</mn>
<mn>2</mn>
</mfrac>
<mfrac>
<mfrac>
<mfrac>
<mn>1</mn>
<mn>2</mn>
</mfrac>
<msup>
<mn>3</mn>
<mn>4</mn>
</msup>
</mfrac>
<msqrt>
<mfrac>
<mn>5</mn>
<mfrac>
<mn>5</mn>
<mn>6</mn>
</mfrac>
</mfrac>
</msqrt>
</mfrac>
</mfrac>
</mrow>
</math>
<!-- This tests several operators in the same mrow. -->
<math>
<mrow>
<mo id="s6_1" symmetric="false">{</mo>
<mspace id="c6maxdepth" width="10px" height="50px" depth="150px" mathbackground="red"/>
<mo id="s6_2" symmetric="false">|</mo>
<mspace id="c6maxheight" width="10px" height="150px" depth="50px" mathbackground="red"/>
<mo id="s6_3" symmetric="false">}</mo>
</mrow>
</math>
<!-- These tests whether the size of non-stretchy operators is taken into account (bug 126842). -->
<math>
<mrow>
<mo id="s71" symmetric="false">{</mo>
<mo id="c71" mathsize="8em">p</mo>
</mrow>
<mrow>
<mo id="s72" symmetric="false">{</mo>
<mo id="c72" mathsize="8em" stretchy="false">|</mo>
</mrow>
</math>
</p>
</body>
</html>