Google Git
Sign in
chromium / external / github.com / web-platform-tests / wpt / refs/heads/DOMParser-interface / . / mathml / presentation-markup / mrow / legacy-mstyle-attributes.html
blob: 0b14ac5334b7dff99205f935b9f042a218111093 [file] [log] [blame] [edit]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Legacy mstyle attributes</title>
<link rel="help" href="https://www.w3.org/TR/MathML3/chapter3.html#presm.mstyle">
<link rel="help" href="https://w3c.github.io/mathml-core/#style-change-mstyle">
<link rel="help" href="https://w3c.github.io/mathml-core/#space-mspace">
<link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac">
<link rel="help" href="https://w3c.github.io/mathml-core/#operator-fence-separator-or-accent-mo">
<link rel="help" href="https://w3c.github.io/mathml-core/#string-literal-ms">
<link rel="help" href="https://www.w3.org/TR/MathML3/chapter3.html#presm.menclose">
<meta name="assert" content="Legacy mstyle attributes are ignored">
<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>
<script type="text/javascript">
setup({ explicit_done: true });
window.addEventListener("load", runTests);
function runTests()
{
Array.from(document.getElementsByClassName("TestContainer")).forEach(container => {
const tag = container.id;
test(function() {
assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);
const epsilon = 1;
const math = container.getElementsByTagName("math");
compareLayout(math[0], math[1], epsilon);
}, `Legacy mstyle attributes do not apply to ${tag}`);
});
done();
}
</script>
</head>
<body>
<div id="log"></div>
<!-- Note: In earlier versions of MathML, putting some attributes on the
mstyle element was supposed to produce the same rendering as putting them
on the all descendants (with some exceptions). In MathML Core, relevant
style attributes are implemented as CSS properties and are no longer
specific to the mstyle element. The tests below verify that attributes
on mstyle that are not mapped to CSS have no effect.
-->
<p class="TestContainer" id="mspace">
<math>
<mstyle width="50px" height="50px" depth="50px">
<mspace style="background: lightblue"></mspace>
</mstyle>
</math>
<math>
<mstyle>
<mspace style="background: lightblue"></mspace>
</mstyle>
</math>
</p>
<p class="TestContainer" id="mfrac">
<math>
<mstyle linethickness="50px">
<mfrac>
<mn>1</mn>
<mn>2</mn>
</mfrac>
</mstyle>
</math>
<math>
<mstyle>
<mfrac>
<mn>1</mn>
<mn>2</mn>
</mfrac>
</mstyle>
</math>
</p>
<p class="TestContainer" id="mo">
<math displaystyle="true">
<mstyle lspace="50px" rspace="50px">
<mn>1</mn>
<mo>A</mo>
<mn>2</mn>
</mstyle>
<mstyle movablelimits="false" largeop="false">
<munder>
<mo>∑</mo>
<mn>3</mn>
</munder>
</mstyle>
<!-- Note: accent was a shared attribute name for mover and mo, so
make mstyle an ancestor of mo but not of mover. -->
<mover>
<mn>4</mn>
<mstyle accent="false"><mo>⇀</mo></mstyle>
</mover>
<mstyle stretchy="false" symmetric="false" maxsize="20px">
<mrow>
<mo>|</mo>
<mspace height="100px"></mspace>
</mrow>
</mstyle>
<mstyle minsize="100px">
<mrow>
<mo>|</mo>
<mn>4</mn>
</mrow>
</mstyle>
<mstyle form="prefix">
<mrow>
<mn>1</mn>
<!-- Infix and prefix forms of − do not have the same lspace/rspace
values in the operator dictionary -->
<mo>−</mo>
<mn>2</mn>
</mrow>
</mstyle>
</math>
<math displaystyle="true">
<mstyle>
<mn>1</mn>
<mo>A</mo>
<mn>2</mn>
</mstyle>
<mstyle>
<munder>
<mo>∑</mo>
<mn>3</mn>
</munder>
</mstyle>
<mover>
<mn>4</mn>
<mstyle><mo>⇀</mo></mstyle>
</mover>
<mstyle>
<mrow>
<mo>|</mo>
<mspace height="100px"></mspace>
</mrow>
</mstyle>
<mstyle>
<mrow>
<mo>|</mo>
<mn>4</mn>
</mrow>
</mstyle>
<mstyle>
<mrow>
<mn>1</mn>
<mo>−</mo>
<mn>2</mn>
</mrow>
</mstyle>
</math>
</p>
<!-- notation attribute is from MathML3's menclose element -->
<p class="TestContainer" id="menclose">
<math>
<mstyle notation="box">
<mn>1</mn>
</mstyle>
</math>
<math>
<mstyle>
<mn>1</mn>
</mstyle>
</math>
</p>
<p class="TestContainer" id="ms">
<math>
<mstyle lquote="AAAA" rquote="BBBB">
<ms>1</ms>
</mstyle>
</math>
<math>
<mstyle>
<ms>1</ms>
</mstyle>
</math>
</p>
<p class="TestContainer" id="mpadded">
<math>
<mstyle width="100px" height="50px" depth="50px"
lspace="10px" voffset="15px">
<mpadded style="background: lightblue">
<mspace width="10px" height="10px" style="background: black"></mspace>
</mpadded>
</mstyle>
</math>
<math>
<mstyle>
<mpadded style="background: lightblue">
<mspace width="10px" height="10px" style="background: black"></mspace>
</mpadded>
</mstyle>
</math>
</p>
<p class="TestContainer" id="mover">
<math>
<mstyle accent="true">
<mover>
<mn>1</mn>
<mn>2</mn>
</mover>
</mstyle>
</math>
<math>
<mstyle>
<mover>
<mn>1</mn>
<mn>2</mn>
</mover>
</mstyle>
</math>
</p>
<p class="TestContainer" id="munder">
<math>
<mstyle accentunder="true">
<munder>
<mn>1</mn>
<mn>2</mn>
</munder>
</mstyle>
</math>
<math>
<mstyle>
<munder>
<mn>1</mn>
<mn>2</mn>
</munder>
</mstyle>
</math>
</p>
<p class="TestContainer" id="munderover">
<math>
<mstyle accent="true">
<munderover>
<mn>1</mn>
<mn>2</mn>
<mn>3</mn>
</munderover>
</mstyle>
<mstyle accentunder="true">
<munderover>
<mn>1</mn>
<mn>2</mn>
<mn>3</mn>
</munderover>
</mstyle>
</math>
<math>
<mstyle>
<munderover>
<mn>1</mn>
<mn>2</mn>
<mn>3</mn>
</munderover>
</mstyle>
<mstyle>
<munderover>
<mn>1</mn>
<mn>2</mn>
<mn>3</mn>
</munderover>
</mstyle>
</math>
</p>
</body>
</html>