tokens-rendering-from-in-flow.html (3965B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>tokens rendering from in-flow children</title> 6 <link rel="help" href="https://w3c.github.io/mathml-core/#token-elements"> 7 <meta name="assert" content="Verify rendering of tokens is only affected by in-flow children."> 8 <style> 9 .oof1 { 10 position: absolute; 11 } 12 .oof2 { 13 position: fixed; 14 } 15 .box { 16 display: inline-block; 17 width: 10px; 18 height: 10px; 19 } 20 </style> 21 <script src="/resources/testharness.js"></script> 22 <script src="/resources/testharnessreport.js"></script> 23 <script src="/mathml/support/layout-comparison.js"></script> 24 <script> 25 setup({ explicit_done: true }); 26 window.addEventListener("load", runTests); 27 28 function runTests() { 29 let container = document.querySelector("#container"); 30 const epsilon = 1; 31 32 for (let math of container.children) { 33 let tagName = math.id; 34 let element = math.firstElementChild; 35 let reference = element.nextElementSibling; 36 37 test(function() { 38 compareLayout(element, reference, epsilon); 39 }, `Rendering of ${tagName} should only be affected by in-flow children`); 40 } 41 42 done(); 43 } 44 </script> 45 </head> 46 <body> 47 <div id="log"></div> 48 <div id="container"> 49 <math id="mo"> 50 <mo><span class="box" style="background: lightblue"></span><span class="oof1 box"></span><span class="oof2 box"></span><span class="box" style="background: pink"></span><span class="box" style="background: yellow"></span><span class="oof1 box"></span><span class="oof2 box"></span></mo> 51 <mo><span class="box" style="background: lightblue"></span><span class="box" style="background: pink"></span><span class="box" style="background: yellow"></span></mo> 52 </math> 53 54 <math id="mi"> 55 <mi><span class="box" style="background: lightblue"></span><span class="oof1 box"></span><span class="oof2 box"></span><span class="box" style="background: pink"></span><span class="box" style="background: yellow"></span><span class="oof1 box"></span><span class="oof2 box"></span></mi> 56 <mi><span class="box" style="background: lightblue"></span><span class="box" style="background: pink"></span><span class="box" style="background: yellow"></span></mi> 57 </math> 58 59 <math id="mn"> 60 <mn><span class="box" style="background: lightblue"></span><span class="oof1 box"></span><span class="oof2 box"></span><span class="box" style="background: pink"></span><span class="box" style="background: yellow"></span><span class="oof1 box"></span><span class="oof2 box"></span></mn> 61 <mn><span class="box" style="background: lightblue"></span><span class="box" style="background: pink"></span><span class="box" style="background: yellow"></span></mn> 62 </math> 63 64 <math id="ms"> 65 <ms><span class="box" style="background: lightblue"></span><span class="oof1 box"></span><span class="oof2 box"></span><span class="box" style="background: pink"></span><span class="box" style="background: yellow"></span><span class="oof1 box"></span><span class="oof2 box"></span></ms> 66 <ms><span class="box" style="background: lightblue"></span><span class="box" style="background: pink"></span><span class="box" style="background: yellow"></span></ms> 67 </math> 68 69 <math id="mtext"> 70 <mtext><span class="box" style="background: lightblue"></span><span class="oof1 box"></span><span class="oof2 box"></span><span class="box" style="background: pink"></span><span class="box" style="background: yellow"></span><span class="oof1 box"></span><span class="oof2 box"></span></mtext> 71 <mtext><span class="box" style="background: lightblue"></span><span class="box" style="background: pink"></span><span class="box" style="background: yellow"></span></mtext> 72 </math> 73 </div> 74 </body> 75 </html>