mathml/presentation-markup/mrow/mrow-preferred-width.html - external/w3c/web-platform-tests - Git at Google

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>Preferred width of mrow-like elements</title>
 <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#horizontally-group-sub-expressions-mrow">
 <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#style-change-mstyle">
 <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#making-sub-expressions-invisible-mphantom">
 <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#the-top-level-math-element">
 <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#adjust-space-around-content-mpadded">
 <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#operator-fence-separator-or-accent-mo">
 <meta name="assert" content="The preferred width of mrow-like elements is the sum of children's width, modulo extra spacing.">
 <script src="/mathml/support/feature-detection.js"></script>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script type="text/javascript">
   setup({ explicit_done: true });
   window.addEventListener("load", runTests);
   function runTests()
   {
     var epsilon = 1;

     function MrowWidthFromChildren(mrow) {
       var first = mrow.firstElementChild.getBoundingClientRect();
       var last = mrow.lastElementChild.getBoundingClientRect();
       return last.right - first.left;
     }

     test(function() {
       assert_true(MathMLFeatureDetection.has_mspace());

       Array.from(document.getElementById("mspace-tests").getElementsByClassName("shrink-wrap")).forEach((container) => {
         var containerWidth = container.getBoundingClientRect().width;
         var mrow = container.getElementsByClassName("mrow-like")[0];
         var mrowWidth = MrowWidthFromChildren(mrow);
           assert_approx_equals(containerWidth, mrowWidth, epsilon, mrow.tagName);
       });
     }, "Preferred width of mrow with mspace children");

     test(function() {
       assert_true(MathMLFeatureDetection.has_operator_spacing());

       Array.from(document.getElementById("tokens-tests").getElementsByClassName("shrink-wrap")).forEach((container) => {
         var containerWidth = container.getBoundingClientRect().width;
         var mrow = container.getElementsByClassName("mrow-like")[0];
         var mrowWidth = MrowWidthFromChildren(mrow);
         assert_approx_equals(containerWidth, mrowWidth, epsilon, mrow.tagName);
       });
     }, "Preferred width of mrow with mn and mo children");

     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="mspace-tests">
     <div><div class="shrink-wrap">
       <math><mrow class="mrow-like"><mspace width="30px" height="15px" style="background: blue"/><mspace width="20px" depth="30px" style="background: green"/><mspace width="15px" height="5px" depth="10px" style="background: black"/></mrow></math>
     </div></div>
     <div>
       <div class="shrink-wrap">
       <math><mstyle class="mrow-like"><mspace width="30px" height="15px" style="background: blue"/><mspace width="20px" depth="30px" style="background: green"/><mspace width="15px" height="5px" depth="10px" style="background: black"/></mstyle></math>
       </div>
     </div>
     <div>
       <div class="shrink-wrap">
       <math><mphantom class="mrow-like"><mspace width="30px" height="15px" style="background: blue"/><mspace width="20px" depth="30px" style="background: green"/><mspace width="15px" height="5px" depth="10px" style="background: black"/></mphantom></math>
       </div>
     </div>
     <div>
       <div class="shrink-wrap">
       <math class="mrow-like"><mspace width="30px" height="15px" style="background: blue"/><mspace width="20px" depth="30px" style="background: green"/><mspace width="15px" height="5px" depth="10px" style="background: black"/></math>
       </div>
     </div>
     <div>
       <div class="shrink-wrap">
       <math><unknown class="mrow-like"><mspace width="30px" height="15px" style="background: blue"/><mspace width="20px" depth="30px" style="background: green"/><mspace width="15px" height="5px" depth="10px" style="background: black"/></unknown></math>
       </div>
     </div>
     <div>
     </div>
   </div>
   <div id="tokens-tests">
     <div>
       <div class="shrink-wrap">
       <math><mrow class="mrow-like"><mtext>blah</mtext><mo lspace="30px" rspace="20px">|</mo><mn>2</mn></mrow></math>
       </div>
     </div>
     <div>
       <div class="shrink-wrap">
       <math><mstyle class="mrow-like"><mtext>blah</mtext><mo lspace="30px" rspace="20px">|</mo><mn>2</mn></mstyle></math>
       </div>
     </div>
     <div>
       <div class="shrink-wrap">
       <math><mphantom class="mrow-like"><mtext>blah</mtext><mo lspace="30px" rspace="20px">|</mo><mn>2</mn></mphantom></math>
       </div>
     </div>
     <div>
       <div class="shrink-wrap">
       <math class="mrow-like"><mtext>blah</mtext><mo lspace="30px" rspace="20px">|</mo><mn>2</mn></math>
       </div>
     </div>
     <div>
       <div class="shrink-wrap">
       <math><unknown class="mrow-like"><mtext>blah</mtext><mo lspace="30px" rspace="20px">|</mo><mn>2</mn></unknown></math>
       </div>
     </div>
   </div>
 </p>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Preferred width of mrow-like elements</title>
	<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#horizontally-group-sub-expressions-mrow">
	<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#style-change-mstyle">
	<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#making-sub-expressions-invisible-mphantom">
	<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#the-top-level-math-element">
	<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#adjust-space-around-content-mpadded">
	<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#operator-fence-separator-or-accent-mo">
	<meta name="assert" content="The preferred width of mrow-like elements is the sum of children's width, modulo extra spacing.">
	<script src="/mathml/support/feature-detection.js"></script>
	<script src="/resources/testharness.js"></script>
	<script src="/resources/testharnessreport.js"></script>
	<script type="text/javascript">
	setup({ explicit_done: true });
	window.addEventListener("load", runTests);
	function runTests()
	{
	var epsilon = 1;

	function MrowWidthFromChildren(mrow) {
	var first = mrow.firstElementChild.getBoundingClientRect();
	var last = mrow.lastElementChild.getBoundingClientRect();
	return last.right - first.left;
	}

	test(function() {
	assert_true(MathMLFeatureDetection.has_mspace());

	Array.from(document.getElementById("mspace-tests").getElementsByClassName("shrink-wrap")).forEach((container) => {
	var containerWidth = container.getBoundingClientRect().width;
	var mrow = container.getElementsByClassName("mrow-like")[0];
	var mrowWidth = MrowWidthFromChildren(mrow);
	assert_approx_equals(containerWidth, mrowWidth, epsilon, mrow.tagName);
	});
	}, "Preferred width of mrow with mspace children");

	test(function() {
	assert_true(MathMLFeatureDetection.has_operator_spacing());

	Array.from(document.getElementById("tokens-tests").getElementsByClassName("shrink-wrap")).forEach((container) => {
	var containerWidth = container.getBoundingClientRect().width;
	var mrow = container.getElementsByClassName("mrow-like")[0];
	var mrowWidth = MrowWidthFromChildren(mrow);
	assert_approx_equals(containerWidth, mrowWidth, epsilon, mrow.tagName);
	});
	}, "Preferred width of mrow with mn and mo children");

	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="mspace-tests">
	<div><div class="shrink-wrap">
	<math><mrow class="mrow-like"><mspace width="30px" height="15px" style="background: blue"/><mspace width="20px" depth="30px" style="background: green"/><mspace width="15px" height="5px" depth="10px" style="background: black"/></mrow></math>
	</div></div>
	<div>
	<div class="shrink-wrap">
	<math><mstyle class="mrow-like"><mspace width="30px" height="15px" style="background: blue"/><mspace width="20px" depth="30px" style="background: green"/><mspace width="15px" height="5px" depth="10px" style="background: black"/></mstyle></math>
	</div>
	</div>
	<div>
	<div class="shrink-wrap">
	<math><mphantom class="mrow-like"><mspace width="30px" height="15px" style="background: blue"/><mspace width="20px" depth="30px" style="background: green"/><mspace width="15px" height="5px" depth="10px" style="background: black"/></mphantom></math>
	</div>
	</div>
	<div>
	<div class="shrink-wrap">
	<math class="mrow-like"><mspace width="30px" height="15px" style="background: blue"/><mspace width="20px" depth="30px" style="background: green"/><mspace width="15px" height="5px" depth="10px" style="background: black"/></math>
	</div>
	</div>
	<div>
	<div class="shrink-wrap">
	<math><unknown class="mrow-like"><mspace width="30px" height="15px" style="background: blue"/><mspace width="20px" depth="30px" style="background: green"/><mspace width="15px" height="5px" depth="10px" style="background: black"/></unknown></math>
	</div>
	</div>
	<div>
	</div>
	</div>
	<div id="tokens-tests">
	<div>
	<div class="shrink-wrap">
	<math><mrow class="mrow-like"><mtext>blah</mtext><mo lspace="30px" rspace="20px">\|</mo><mn>2</mn></mrow></math>
	</div>
	</div>
	<div>
	<div class="shrink-wrap">
	<math><mstyle class="mrow-like"><mtext>blah</mtext><mo lspace="30px" rspace="20px">\|</mo><mn>2</mn></mstyle></math>
	</div>
	</div>
	<div>
	<div class="shrink-wrap">
	<math><mphantom class="mrow-like"><mtext>blah</mtext><mo lspace="30px" rspace="20px">\|</mo><mn>2</mn></mphantom></math>
	</div>
	</div>
	<div>
	<div class="shrink-wrap">
	<math class="mrow-like"><mtext>blah</mtext><mo lspace="30px" rspace="20px">\|</mo><mn>2</mn></math>
	</div>
	</div>
	<div>
	<div class="shrink-wrap">
	<math><unknown class="mrow-like"><mtext>blah</mtext><mo lspace="30px" rspace="20px">\|</mo><mn>2</mn></unknown></math>
	</div>
	</div>
	</div>
	</p>
	</body>
	</html>