diff options
Diffstat (limited to 'testing/web-platform/tests/mathml/presentation-markup/mpadded')
15 files changed, 985 insertions, 0 deletions
diff --git a/testing/web-platform/tests/mathml/presentation-markup/mpadded/legacy-orthogonal-pseudo-units.html b/testing/web-platform/tests/mathml/presentation-markup/mpadded/legacy-orthogonal-pseudo-units.html new file mode 100644 index 0000000000..6eebac1df9 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/mpadded/legacy-orthogonal-pseudo-units.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Legacy mpadded pseudo-units relying on orthogonal metrics</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#adjust-space-around-content-mpadded"> +<link rel="help" href="https://www.w3.org/TR/MathML3/chapter3.html#presm.mpadded"> +<meta name="assert" content="Legacy pseudo-units depending on orthogonal metrics"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/mathml/support/feature-detection.js"></script> +<script src="/mathml/support/layout-comparison.js"></script> +<style> + .testedElement { + background: red; + } +</style> +</head> +<body> + <div id="log"></div> + + <p> + <math> + <mpadded id="reference"> + <mspace width="10px" height="20px" depth="30px" + style="background: blue"/> + </mpadded> + </math> + </p> + + <p> + <!-- width cannot use vertical pseudo-units --> + <math> + <mpadded class="testedElement" width="200%height"> + <mspace width="10px" height="20px" depth="30px" + style="background: blue"/> + </mpadded> + </math> + <math> + <mpadded class="testedElement" width="200%depth"> + <mspace width="10px" height="20px" depth="30px" + style="background: blue"/> + </mpadded> + </math> + </p> + + <p> + <!-- lspace cannot use vertical pseudo-units --> + <math> + <mpadded class="testedElement" lspace="200%height"> + <mspace width="10px" height="20px" depth="30px" + style="background: blue"/> + </mpadded> + </math> + <math> + <mpadded class="testedElement" lspace="200%depth"> + <mspace width="10px" height="20px" depth="30px" + style="background: blue"/> + </mpadded> + </math> + </p> + <p> + <!-- height cannot use horizontal pseudo-units --> + <math> + <mpadded class="testedElement" height="200%width"> + <mspace width="10px" height="20px" depth="30px" + style="background: blue"/> + </mpadded> + </math> + </p> + <p> + <!-- depth cannot use horizontal pseudo-units --> + <math> + <mpadded class="testedElement" depth="200%width"> + <mspace width="10px" height="20px" depth="30px" + style="background: blue"/> + </mpadded> + </math> + </p> + <p> + <!-- voffset cannot use horizontal pseudo-units --> + <math> + <mpadded class="testedElement" voffset="200%width"> + <mspace width="10px" height="20px" depth="30px" + style="background: blue"/> + </mpadded> + </math> + </p> +<script type="text/javascript"> + Array.from(document.getElementsByClassName("testedElement")).forEach(mpadded => { + var reference = document.getElementById("reference"); + const name = ["width", "depth", "height", "lspace", "voffset"].find(attr => mpadded.hasAttribute(attr)); + const epsilon = 1; + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + compareLayout(mpadded, reference, epsilon); + }, `${mpadded.getAttribute(name)} is not allowed on ${name}`); + }); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/mpadded/mpadded-001.html b/testing/web-platform/tests/mathml/presentation-markup/mpadded/mpadded-001.html new file mode 100644 index 0000000000..e61dc5af72 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/mpadded/mpadded-001.html @@ -0,0 +1,147 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>mpadded</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#adjust-space-around-content-mpadded"> +<meta name="assert" content="Verify metrics of empty mpadded element 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) { + return document.getElementById(aId).getBoundingClientRect(); + } + + setup({ explicit_done: true }); + window.addEventListener("load", runTests); + + function runTests() { + test(function() { + var none = getBox("none"); + assert_equals(none.width, 0, "zero width"); + assert_approx_equals(getBox("baseline").bottom - none.top, 0, epsilon, "zero depth"); + assert_approx_equals(none.bottom - getBox("baseline").bottom, 0, epsilon, "zero depth"); + }, "mpadded (no attributes)"); + + test(function() { + for (var i = 0; i <= 2; i++) { + var mpadded = getBox("width" + i); + assert_approx_equals(mpadded.width, 25*(i+1), epsilon, "width " + i); + assert_approx_equals(getBox("baseline").bottom - mpadded.top, 0, epsilon, "height" + i); + assert_approx_equals(mpadded.bottom - getBox("baseline").bottom, 0, epsilon, "depth" + i); + } + }, "Different widths"); + + test(function() { + for (var i = 0; i <= 2; i++) { + var mpadded = getBox("height" + i); + assert_equals(mpadded.width, 0, "width" + i); + assert_approx_equals(getBox("baseline").bottom - mpadded.top, 25*(i+1), epsilon, "height" + i); + assert_approx_equals(mpadded.bottom - getBox("baseline").bottom, 0, epsilon, "depth" + i); + } + }, "Different heights"); + + test(function() { + for (var i = 0; i <= 2; i++) { + var mpadded = getBox("depth" + i); + assert_equals(mpadded.width, 0, "width" + i); + assert_approx_equals(getBox("baseline").bottom - mpadded.top, 0, epsilon, "height" + i); + assert_approx_equals(mpadded.bottom - getBox("baseline").bottom, 25*(i+1), epsilon, "depth" + i); + } + }, "Different depths"); + + test(function() { + 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(mpadded.bottom - getBox("baseline").bottom, 25*(1+(i+2)%3), epsilon, "depth" + i); + } + }, "Various combinations of height, depth and width."); + + test(function() { + var container = document.getElementById("containerForPreferredWidth"); + var mpadded = container.getElementsByTagName("mpadded")[0]; + var containerWidth = container.getBoundingClientRect().width; + var mpaddedWidth = mpadded.getBoundingClientRect().width; + assert_approx_equals(containerWidth, mpaddedWidth, epsilon); + }, "Preferred width"); + + // Dynamically set attributes. + ["width", "height", "depth"].forEach(function (name, index) { + document.getElementById("dynamic-remove").removeAttribute(name); + let length = `${50 + index * 10}px`; + document.getElementById("dynamic-attach").setAttribute(name, length); + document.getElementById("dynamic-modify").setAttribute(name, length); + }); + let baseline = getBox("baseline2").bottom; + + test(function() { + let remove = getBox("dynamic-remove"); + assert_approx_equals(remove.width, 0, epsilon); + assert_approx_equals(remove.height, 0, epsilon); + assert_approx_equals(remove.top, baseline, epsilon); + }, "dynamic attributes (remove)"); + + test(function() { + let attach = getBox("dynamic-attach"); + assert_approx_equals(attach.width, 50, epsilon); + assert_approx_equals(attach.height, 60 + 70, epsilon); + assert_approx_equals(baseline - attach.top, 60, epsilon); + }, "dynamic attributes (attach)"); + + test(function() { + let modify = getBox("dynamic-modify"); + assert_approx_equals(modify.width, 50, epsilon); + assert_approx_equals(modify.height, 60 + 70, epsilon); + assert_approx_equals(baseline - modify.top, 60, epsilon); + }, "dynamic attributes (modify)"); + + done(); + } +</script> +<style> +div.shrink-wrap { + background: yellow; + display: inline-block; + margin-top: 5px; + padding-top: 5px; +} +</style> +</head> +<body> + <div id="log"></div> + <p> + <span id="baseline" style="display: inline-block; width: 30px; height: 5px; background: blue"></span> + <math> + <mpadded id="none"/> + <mpadded id="width0" width="25px"/> + <mpadded id="width1" width="50px"/> + <mpadded id="width2" width="75px"/> + <mpadded id="height0" height="25px"/> + <mpadded id="height1" height="50px"/> + <mpadded id="height2" height="75px"/> + <mpadded id="depth0" depth="25px"/> + <mpadded id="depth1" depth="50px"/> + <mpadded id="depth2" depth="75px"/> + <mpadded id="mpadded0" width="25px" height="50px" depth="75px" style="background: green"/> + <mpadded id="mpadded1" width="50px" height="75px" depth="25px" style="background: blue"/> + <mpadded id="mpadded2" width="75px" height="25px" depth="50px" style="background: green"/> + </math> + </p> + <div> + <div id="containerForPreferredWidth" class="shrink-wrap"> + <math><mpadded width="75px" height="25px" depth="50px" style="background: green"/></math> + </div> + </div> + <p> + <span id="baseline2" style="display: inline-block; width: 30px; height: 5px; background: blue"></span> + <math> + <mpadded id="dynamic-attach" style="background: lightgreen"/> + <mpadded id="dynamic-remove" width="10px" height="20px" depth="30px" style="background: lightyellow"/> + <mpadded id="dynamic-modify" width="100px" height="200px" depth="300px" style="background: pink"/> + </math> + </p> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/mpadded/mpadded-002.html b/testing/web-platform/tests/mathml/presentation-markup/mpadded/mpadded-002.html new file mode 100644 index 0000000000..93f2d594c7 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/mpadded/mpadded-002.html @@ -0,0 +1,164 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>mpadded</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#adjust-space-around-content-mpadded"> +<meta name="assert" content="Verify metrics of nonempty mpadded element 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) { + return document.getElementById(aId).getBoundingClientRect(); + } + + setup({ explicit_done: true }); + window.addEventListener("load", runTests); + + function runTests() { + const contentWidth = 100; + const contentDepth = 125; + const contentHeight = 150; + + test(function() { + var none = getBox("none"); + assert_equals(none.width, contentWidth, "content width"); + assert_approx_equals(getBox("baseline").bottom - none.top, contentHeight, epsilon, "content height"); + assert_approx_equals(none.bottom - getBox("baseline").bottom, contentDepth, epsilon, "content height"); + }, "mpadded with no attributes"); + + test(function() { + for (var i = 0; i <= 2; i++) { + var mpadded = getBox("width" + i); + assert_approx_equals(mpadded.width, 25*(i+1), epsilon, "width " + i); + assert_approx_equals(getBox("baseline").bottom - mpadded.top, contentHeight, epsilon, "height" + i); + assert_approx_equals(mpadded.bottom - getBox("baseline").bottom, contentDepth, epsilon, "depth" + i); + } + }, "Different widths"); + + test(function() { + for (var i = 0; i <= 2; i++) { + var mpadded = getBox("height" + i); + assert_equals(mpadded.width, contentWidth, "width" + i); + assert_approx_equals(getBox("baseline").bottom - mpadded.top, 25*(i+1), epsilon, "height" + i); + assert_approx_equals(mpadded.bottom - getBox("baseline").bottom, contentDepth, epsilon, "depth" + i); + } + }, "Different heights"); + + test(function() { + var mpadded = getBox("percentages"); + assert_equals(mpadded.width, contentWidth, "width"); + assert_approx_equals(getBox("baseline").bottom - mpadded.top, contentHeight, epsilon, "height"); + assert_approx_equals(mpadded.bottom - getBox("baseline").bottom, contentDepth, epsilon, "depth"); + }, "Percentage calculation for width, height and depth"); + + test(function() { + for (var i = 0; i <= 2; i++) { + var mpadded = getBox("depth" + i); + assert_equals(mpadded.width, contentWidth, "width" + i); + assert_approx_equals(getBox("baseline2").bottom - mpadded.top, contentHeight, epsilon, "height" + i); + assert_approx_equals(mpadded.bottom - getBox("baseline2").bottom, 25*(i+1), epsilon, "depth" + i); + } + }, "Different depths"); + + test(function() { + 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("baseline2").bottom - mpadded.top, 25*(1+(i+1)%3), epsilon, "height" + i); + assert_approx_equals(mpadded.bottom - getBox("baseline2").bottom, 25*(1+(i+2)%3), epsilon, "depth" + i); + } + }, "Various combinations of height, depth and width."); + + test(function() { + var container = document.getElementById("containerForPreferredWidth"); + var mpadded = container.getElementsByTagName("mpadded")[0]; + var containerWidth = container.getBoundingClientRect().width; + var mpaddedWidth = mpadded.getBoundingClientRect().width; + assert_approx_equals(containerWidth, mpaddedWidth, epsilon); + }, "Preferred width"); + + // Dynamically set attributes. + ["width", "height", "depth"].forEach(function (name, index) { + document.getElementById("dynamic-remove").removeAttribute(name); + let length = `${50 + index * 10}px`; + document.getElementById("dynamic-attach").setAttribute(name, length); + document.getElementById("dynamic-modify").setAttribute(name, length); + }); + let baseline = getBox("baseline3").bottom; + + test(function() { + let remove = getBox("dynamic-remove"); + assert_approx_equals(remove.width, contentWidth, epsilon); + assert_approx_equals(remove.height, contentHeight + contentDepth, epsilon); + assert_approx_equals(baseline - remove.top, contentHeight, epsilon); + }, "dynamic attributes (remove)"); + + test(function() { + let attach = getBox("dynamic-attach"); + assert_approx_equals(attach.width, 50, epsilon); + assert_approx_equals(attach.height, 60 + 70, epsilon); + assert_approx_equals(baseline - attach.top, 60, epsilon); + }, "dynamic attributes (attach)"); + + test(function() { + let modify = getBox("dynamic-modify"); + assert_approx_equals(modify.width, 50, epsilon); + assert_approx_equals(modify.height, 60 + 70, epsilon); + assert_approx_equals(baseline - modify.top, 60, epsilon); + }, "dynamic attributes (modify)"); + + done(); + } +</script> +<style> +div.shrink-wrap { + background: yellow; + display: inline-block; + margin-top: 5px; + padding-top: 5px; +} +</style> +</head> +<body> + <div id="log"></div> + <p> + <span id="baseline" style="display: inline-block; width: 30px; height: 5px; background: blue"></span> + <math> + <mpadded id="none"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded> + <mpadded id="width0" width="25px"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded> + <mpadded id="width1" width="50px"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded> + <mpadded id="width2" width="75px"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded> + <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> + <mpadded id="percentages" width="50%" height="33%" depth="10%"><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> + <mpadded id="mpadded0" width="25px" height="50px" depth="75px" style="background: green"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded> + <mpadded id="mpadded1" width="50px" height="75px" depth="25px" style="background: blue"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded> + <mpadded id="mpadded2" width="75px" height="25px" depth="50px" style="background: green"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded> + </math> + </p> + <div> + <div id="containerForPreferredWidth" class="shrink-wrap"> + <math><mpadded width="75px" height="25px" depth="50px" style="background: green"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded></math> + </div> + </div> + <p> + <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> + <mpadded id="dynamic-modify" width="100px" height="200px" depth="300px" style="background: pink"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded> + </math> + </p> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/mpadded/mpadded-003.html b/testing/web-platform/tests/mathml/presentation-markup/mpadded/mpadded-003.html new file mode 100644 index 0000000000..e0c24307f4 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/mpadded/mpadded-003.html @@ -0,0 +1,230 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>mpadded</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#adjust-space-around-content-mpadded"> +<meta name="assert" content="Verify metrics of mpadded element with voffset and lspace"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + setup({ explicit_done: true }); + window.addEventListener("load", runTests); + + function runTests() { + const contentWidth = 10; + const contentDepth = 15; + const contentHeight = 20; + const epsilon = 1; + + test(function() { + Array.from(document.getElementsByClassName("shrink-wrap")).forEach(container => { + assert_approx_equals(container.getBoundingClientRect().width, contentWidth, epsilon); + }); + }, "lspace/voffset shifts don't affect mpadded preferred width"); + + function GetShifts(mpadded) { + let mpadded_box = mpadded.getBoundingClientRect(); + let mspace_box = mpadded.firstElementChild.getBoundingClientRect(); + return { lspace: mspace_box.left - mpadded_box.left, + voffset: mpadded_box.top - mspace_box.top }; + } + + let mpaddeds = document.getElementById("static_tests").getElementsByTagName("mpadded"); + test(function() { + let baseline = document.getElementById("baseline").getBoundingClientRect().bottom; + Array.from(mpaddeds).forEach(e => { + let mpadded = e.getBoundingClientRect(); + assert_approx_equals(mpadded.width, contentWidth, epsilon); + assert_approx_equals(baseline - mpadded.top, contentHeight, epsilon); + assert_approx_equals(mpadded.bottom - baseline, contentDepth, epsilon); + + }); + }, "lspace/voffset shifts don't affect mpadded size"); + + + test(function() { + let shifts = GetShifts(mpaddeds[0]); + assert_approx_equals(shifts.lspace, 5, epsilon, "positive lspace"); + assert_approx_equals(shifts.voffset, 0, epsilon); + + shifts = GetShifts(mpaddeds[1]); + assert_approx_equals(shifts.lspace, 0, epsilon, "negative lspace is clmaped to zero"); + assert_approx_equals(shifts.voffset, 0, epsilon); + + shifts = GetShifts(mpaddeds[2]); + assert_approx_equals(shifts.lspace, 0, epsilon, "positive lspace percentage"); + assert_approx_equals(shifts.voffset, 0, epsilon); + + shifts = GetShifts(mpaddeds[3]); + assert_approx_equals(shifts.lspace, 0, epsilon, "negative lspace percentage"); + assert_approx_equals(shifts.voffset, 0, epsilon); + + shifts = GetShifts(mpaddeds[4]); + assert_approx_equals(shifts.lspace, 0, epsilon); + assert_approx_equals(shifts.voffset, 10, epsilon, "positive voffset"); + + shifts = GetShifts(mpaddeds[5]); + assert_approx_equals(shifts.lspace, 0, epsilon); + assert_approx_equals(shifts.voffset, -10, epsilon, "negative voffset"); + + shifts = GetShifts(mpaddeds[6]); + assert_approx_equals(shifts.lspace, 0, epsilon); + assert_approx_equals(shifts.voffset, 0, epsilon, "positive voffset percentage"); + + shifts = GetShifts(mpaddeds[7]); + assert_approx_equals(shifts.lspace, 0, epsilon); + assert_approx_equals(shifts.voffset, 0, epsilon, "negative voffset percentage"); + + shifts = GetShifts(mpaddeds[8]); + assert_approx_equals(shifts.lspace, 5, epsilon); + assert_approx_equals(shifts.voffset, 10, epsilon); + + shifts = GetShifts(mpaddeds[9]); + assert_approx_equals(shifts.lspace, 5, epsilon); + assert_approx_equals(shifts.voffset, -10, epsilon); + }, "content is shifted by the specified lspace/voffset"); + + mpaddeds = document.getElementById("static_tests_rtl").getElementsByTagName("mpadded"); + test(function() { + let shifts = GetShifts(mpaddeds[0]); + assert_approx_equals(shifts.lspace, -5, epsilon, "positive lspace"); + assert_approx_equals(shifts.voffset, 0, epsilon); + + shifts = GetShifts(mpaddeds[1]); + assert_approx_equals(shifts.lspace, 0, epsilon, "negative lspace is clmaped to zero"); + assert_approx_equals(shifts.voffset, 0, epsilon); + + shifts = GetShifts(mpaddeds[2]); + assert_approx_equals(shifts.lspace, 0, epsilon); + assert_approx_equals(shifts.voffset, 10, epsilon, "positive voffset"); + + shifts = GetShifts(mpaddeds[3]); + assert_approx_equals(shifts.lspace, 0, epsilon); + assert_approx_equals(shifts.voffset, -10, epsilon, "negative voffset"); + + shifts = GetShifts(mpaddeds[4]); + assert_approx_equals(shifts.lspace, -5, epsilon); + assert_approx_equals(shifts.voffset, 10, epsilon); + + shifts = GetShifts(mpaddeds[5]); + assert_approx_equals(shifts.lspace, -5, epsilon); + assert_approx_equals(shifts.voffset, -10, epsilon); + }, "content is shifted by the specified lspace/voffset (RTL)"); + + mpaddeds = document.getElementById("dynamic_tests").getElementsByTagName("mpadded"); + test(function() { + mpaddeds[0].setAttribute("lspace", "5px") + let shifts = GetShifts(mpaddeds[0]); + assert_approx_equals(shifts.lspace, 5, epsilon, "attach lspace"); + assert_approx_equals(shifts.voffset, 0, epsilon); + + mpaddeds[1].setAttribute("voffset", "10px") + shifts = GetShifts(mpaddeds[1]); + assert_approx_equals(shifts.lspace, 0, epsilon); + assert_approx_equals(shifts.voffset, 10, epsilon, "attach voffset"); + + mpaddeds[2].removeAttribute("lspace") + shifts = GetShifts(mpaddeds[2]); + assert_approx_equals(shifts.lspace, 0, epsilon, "remove lspace"); + assert_approx_equals(shifts.voffset, 10, epsilon); + + mpaddeds[3].removeAttribute("voffset") + shifts = GetShifts(mpaddeds[3]); + assert_approx_equals(shifts.lspace, 5, epsilon); + assert_approx_equals(shifts.voffset, 0, epsilon, "remove voffset"); + + mpaddeds[4].setAttribute("lspace", "15px") + shifts = GetShifts(mpaddeds[4]); + assert_approx_equals(shifts.lspace, 15, epsilon, "modify lspace"); + assert_approx_equals(shifts.voffset, 10, epsilon); + + mpaddeds[5].setAttribute("voffset", "-10px") + shifts = GetShifts(mpaddeds[5]); + assert_approx_equals(shifts.lspace, 5, epsilon); + assert_approx_equals(shifts.voffset, -10, epsilon, "modify voffset"); + }, "dynamic changes of lspace/voffset"); + + done(); + } +</script> +<style> +div.shrink-wrap { + background: yellow; + display: inline-block; + margin-top: 5px; + padding-top: 5px; +} +</style> +</head> +<body> + <div id="log"></div> + <div id="static_tests"> + <span id="baseline" style="display: inline-block; width: 30px; height: 5px; background: blue"></span> + <math> + <mpadded lspace="5px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded> + <mpadded lspace="-5px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded> + <mpadded lspace="5%" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded> + <mpadded lspace="-5%" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded> + <mpadded voffset="10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded> + <mpadded voffset="-10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded> + <mpadded voffset="10%" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded> + <mpadded voffset="-10%" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded> + <mpadded lspace="5px" voffset="10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded> + <mpadded lspace="5px" voffset="-10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded> + </math> + </div> + <div id="static_tests_rtl"> + <math dir="rtl"> + <mpadded lspace="5px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded> + <mpadded lspace="-5px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded> + <mpadded voffset="10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded> + <mpadded voffset="-10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded> + <mpadded lspace="5px" voffset="10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded> + <mpadded lspace="5px" voffset="-10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded> + </math> + </div> + <div id="dynamic_tests"> + <math> + <mpadded style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded> + <mpadded style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded> + <mpadded lspace="5px" voffset="10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded> + <mpadded lspace="5px" voffset="10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded> + <mpadded lspace="5px" voffset="10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded> + <mpadded lspace="5px" voffset="10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded> + </math> + </div> + <div> + <div class="shrink-wrap"> + <math> + <mpadded lspace="5px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded> + </math> + </div> + <div class="shrink-wrap"> + <math> + <mpadded lspace="-5px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded> + </math> + </div> + <div class="shrink-wrap"> + <math> + <mpadded voffset="10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded> + </math> + </div> + <div class="shrink-wrap"> + <math> + <mpadded voffset="-10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded> + </math> + </div> + <div class="shrink-wrap"> + <math> + <mpadded lspace="5px" voffset="10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded> + </math> + </div> + <div class="shrink-wrap"> + <math> + <mpadded lspace="5px" voffset="-10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded> + </math> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/mpadded/mpadded-010-ref.html b/testing/web-platform/tests/mathml/presentation-markup/mpadded/mpadded-010-ref.html new file mode 100644 index 0000000000..84104dec03 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/mpadded/mpadded-010-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test mpadded</title> + <style type="text/css"> + div#bigsquare { + position: absolute; + width: 100px; + height: 100px; + background: blue; + } + + div#smallsquare { + position:absolute; + width: 20px; + height: 20px; + left: 20px; + top: 10px; + background: red; + } + /*left = lspace = 20px; + top = heightBig - voffset - heightSmall; + = 50 - 30 - 10 + = 10px */ + </style> + </head> + <body> + <div id="bigsquare"> + <div id="smallsquare"> + </div> + </div> + </body> +<html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/mpadded/mpadded-010.html b/testing/web-platform/tests/mathml/presentation-markup/mpadded/mpadded-010.html new file mode 100644 index 0000000000..bc0b73788b --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/mpadded/mpadded-010.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test mpadded</title> + <link rel="help" href="https://w3c.github.io/mathml-core/#inner-box-and-requested-parameters"> + <meta name="assert" content="Verify basic rendering of mpadded."> + <link rel="match" href="mpadded-010-ref.html"> + </head> + <body> + <math> + <mpadded mathbackground="blue" width="100px" height="50px" depth="50px" + lspace="20px" voffset="30px"> + <mpadded mathbackground="red" width="20px" height="10px" + depth="10px"> + </mpadded> + </mpadded> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/mpadded/mpadded-011-ref.html b/testing/web-platform/tests/mathml/presentation-markup/mpadded/mpadded-011-ref.html new file mode 100644 index 0000000000..36122687e1 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/mpadded/mpadded-011-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test mpadded</title> + <style type="text/css"> + div#bigsquare { + position: absolute; + width: 100px; + height: 100px; + background: blue; + } + + div#smallsquare { + position:absolute; + width: 20px; + height: 20px; + left: 20px; + top: 60px; + background: red; + } + /*left = lspace = 20px; + top = heightBig - voffset - heightSmall; + = 50 + 20 - 10 + = 60px */ + </style> + </head> + <body> + <div id="bigsquare"> + <div id="smallsquare"> + </div> + </div> + </body> +<html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/mpadded/mpadded-011.html b/testing/web-platform/tests/mathml/presentation-markup/mpadded/mpadded-011.html new file mode 100644 index 0000000000..4bcdd13f77 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/mpadded/mpadded-011.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test mpadded</title> + <link rel="help" href="https://w3c.github.io/mathml-core/#inner-box-and-requested-parameters"> + <meta name="assert" content="Verify basic rendering of mpadded."> + <link rel="match" href="mpadded-011-ref.html"> + </head> + <body> + <math> + <mpadded mathbackground="blue" width="100px" height="50px" depth="50px" + lspace="20px" voffset="-20px"> + <mpadded mathbackground="red" width="20px" height="10px" + depth="10px"> + </mpadded> + </mpadded> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/mpadded/mpadded-012-ref.html b/testing/web-platform/tests/mathml/presentation-markup/mpadded/mpadded-012-ref.html new file mode 100644 index 0000000000..12f65c46f7 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/mpadded/mpadded-012-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test mpadded</title> + <style type="text/css"> + div#square1 { + position: absolute; + width: 100px; + height: 100px; + background: blue; + } + + div#square2 { + position:absolute; + width: 20px; + height: 20px; + left: 10px; + top: 55px; + background: red; + } + /* left = lspace = 10; + top = heightBig - heightSmall - voffset; + top = 50 - 10 + 15 = 55px */ + </style> + </head> + <body> + <div id="square1"> + <div id="square2"> + </div> + </div> + </body> +<html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/mpadded/mpadded-012.html b/testing/web-platform/tests/mathml/presentation-markup/mpadded/mpadded-012.html new file mode 100644 index 0000000000..f6ce585010 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/mpadded/mpadded-012.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test mpadded</title> + <link rel="help" href="https://w3c.github.io/mathml-core/#inner-box-and-requested-parameters"> + <meta name="assert" content="Verify basic rendering of mpadded."> + <link rel="match" href="mpadded-012-ref.html"> + </head> + <body> + <math> + <mpadded mathbackground="blue" width="100px" height="50px" depth="50px" + lspace="10px" voffset="-15px"> + <mpadded mathbackground="red" width="20px" height="10px" + depth="10px"> + </mpadded> + </mpadded> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/mpadded/mpadded-013-ref.html b/testing/web-platform/tests/mathml/presentation-markup/mpadded/mpadded-013-ref.html new file mode 100644 index 0000000000..6ecda3e401 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/mpadded/mpadded-013-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test mpadded height depth</title> + <style type="text/css"> + div#bigsquare1 { + position: absolute; + width: 100px; + height: 50px; + background: blue; + } + + div#smallsquare1 { + position:absolute; + width: 20px; + height: 20px; + left: 0px; + top: 30px; + background: red; + } + /* left = lspace = 0; + top = heightBig - heightSmall - voffset; + = 50 - 10 - 10*/ + </style> + </head> + <body> + <div id="bigsquare1"> + <div id="smallsquare1"> + </div> + </div> + + <div id="bigsquare2"> + <div id="smallsquare2"> + </div> + </div> + </body> +<html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/mpadded/mpadded-013.html b/testing/web-platform/tests/mathml/presentation-markup/mpadded/mpadded-013.html new file mode 100644 index 0000000000..3720911edc --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/mpadded/mpadded-013.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test mpadded height depth</title> + <link rel="help" href="https://w3c.github.io/mathml-core/#inner-box-and-requested-parameters"> + <meta name="assert" content="Verify basic rendering of mpadded."> + <link rel="match" href="mpadded-013-ref.html"> + </head> + <body> + <math> + <mpadded mathbackground="blue" width="100px" height="50px" depth="0px" + lspace="0px" voffset="10px"> + <mpadded mathbackground="red" width="20px" height="10px" + depth="10px"> + </mpadded> + </mpadded> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/mpadded/mpadded-percentage-001-ref.html b/testing/web-platform/tests/mathml/presentation-markup/mpadded/mpadded-percentage-001-ref.html new file mode 100644 index 0000000000..79d7df39d0 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/mpadded/mpadded-percentage-001-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>mpadded percentages (reference)</title> + <style> + .red { + background: red; + } + </style> + </head> + <body> + <p>This test passes if there is a green square with no red.</p> + <math display="block" + style="width: 200px; height: 200px; background: green"> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/mpadded/mpadded-percentage-001.html b/testing/web-platform/tests/mathml/presentation-markup/mpadded/mpadded-percentage-001.html new file mode 100644 index 0000000000..ef2391c42b --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/mpadded/mpadded-percentage-001.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>mpadded percentages</title> + <link rel="help" href="https://w3c.github.io/mathml-core/#inner-box-and-requested-parameters"> + <meta name="assert" content="Verify that percentage values for mpadded do not use refer to the containing block"> + <link rel="match" href="mpadded-percentage-001-ref.html"> + <style> + .red { + background: red; + } + </style> + </head> + <body> + <p>This test passes if there is a green square with no red.</p> + <math display="block" + style="width: 200px; height: 200px; background: green"> + <mpadded width="5%" height="10px" class="red"></mpadded> + <mpadded width=" 5%" height="10px" class="red"></mpadded> + <mpadded width="5% " height="10px" class="red"></mpadded> + <mpadded width="10px" height="5%" class="red"></mpadded> + <mpadded width="10px" height=" 5%" class="red"></mpadded> + <mpadded width="10px" height="5% " class="red"></mpadded> + <mpadded width="10px" depth="5%" class="red"></mpadded> + <mpadded width="10px" depth=" 5%" class="red"></mpadded> + <mpadded width="10px" depth="5% " class="red"></mpadded> + <mpadded width="10px" height="5%" depth="5%" class="red"></mpadded> + <mpadded width="10px" height=" 5%" depth=" 5%" class="red"></mpadded> + <mpadded width="10px" height="5% " depth="5% " class="red"></mpadded> + </math> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/mpadded/mpadded-percentage-002.html b/testing/web-platform/tests/mathml/presentation-markup/mpadded/mpadded-percentage-002.html new file mode 100644 index 0000000000..36d1b4f389 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/mpadded/mpadded-percentage-002.html @@ -0,0 +1,81 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title></title> + <link rel="help" href="https://w3c.github.io/mathml-core/#adjust-space-around-content-mpadded"> + <meta name="assert" content="Percentage values are interpreted as the default value"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/mathml/support/feature-detection.js"></script> + <script src="/mathml/support/layout-comparison.js"></script> + <style> + .testedElement { + background: red; + } + </style> + </head> + <body> + <div id="log"></div> + + <p> + <math> + <mpadded id="reference"> + <mspace width="10px" height="20px" depth="30px" + style="background: blue"/> + </mpadded> + </math> + </p> + <p> + <math> + <mpadded class="testedElement" width="200%"> + <mspace width="10px" height="20px" depth="30px" + style="background: blue"/> + </mpadded> + </math> + </p> + <p> + <math> + <mpadded class="testedElement" height="200%"> + <mspace width="10px" height="20px" depth="30px" + style="background: blue"/> + </mpadded> + </math> + </p> + <p> + <math> + <mpadded class="testedElement" depth="200%"> + <mspace width="10px" height="20px" depth="30px" + style="background: blue"/> + </mpadded> + </math> + </p> + <p> + <math> + <mpadded class="testedElement" lspace="200%"> + <mspace width="10px" height="20px" depth="30px" + style="background: blue"/> + </mpadded> + </math> + </p> + <p> + <math> + <mpadded class="testedElement" voffset="200%"> + <mspace width="10px" height="20px" depth="30px" + style="background: blue"/> + </mpadded> + </math> + </p> + <script type="text/javascript"> + Array.from(document.getElementsByClassName("testedElement")).forEach(mpadded => { + var reference = document.getElementById("reference"); + const name = ["width", "depth", "height", "lspace", "voffset"].find(attr => mpadded.hasAttribute(attr)); + const epsilon = 1; + test(function() { + assert_true(MathMLFeatureDetection.has_mspace()); + compareLayout(mpadded, reference, epsilon); + }, `${name}='${mpadded.getAttribute(name)}' is interpreted as the default value`); + }); + </script> + </body> +</html> |