mpadded-rendering-from-in-flow.html (2000B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>mpadded rendering from in-flow children</title> 6 <link rel="help" href="https://w3c.github.io/mathml-core/#adjust-space-around-content-mpadded"> 7 <meta name="assert" content="Verify rendering of mpadded is only affected by in-flow children."> 8 <style> 9 .oof1 { 10 position: absolute; 11 } 12 .oof2 { 13 position: fixed; 14 } 15 .nobox { 16 display: none; 17 } 18 </style> 19 <script src="/resources/testharness.js"></script> 20 <script src="/resources/testharnessreport.js"></script> 21 <script src="/mathml/support/layout-comparison.js"></script> 22 <script> 23 setup({ explicit_done: true }); 24 window.addEventListener("load", runTests); 25 26 function runTests() { 27 let math = document.querySelector("#mpadded"); 28 let element = math.firstElementChild; 29 let reference = element.nextElementSibling; 30 const epsilon = 1; 31 32 test(function() { 33 compareLayout(element, reference, epsilon); 34 }, "Rendering of mpadded should only be affected by in-flow children"); 35 36 done(); 37 } 38 </script> 39 </head> 40 <body> 41 <div id="log"></div> 42 <div> 43 <math id="mpadded"> 44 <mpadded lspace="3em" voffset="-1em" height="1em" depth="2em" width="8em" style="background: lightblue"> 45 <mspace width="32px" class="oof1"/> 46 <mspace width="16px" class="oof2"/> 47 <mspace width="8px" class="nobox"/> 48 <mspace width="64px" height="8px" style="background: lightgreen"/> 49 <mspace width="32px" class="oof1"/> 50 <mspace width="16px" class="oof2"/> 51 <mspace width="8px" class="nobox"/> 52 </mpadded> 53 54 <mpadded lspace="3em" voffset="-1em" height="1em" depth="2em" width="8em" style="background: lightblue"> 55 <mspace width="64px" height="8px" style="background: lightgreen"/> 56 </mpadded> 57 </math> 58 </div> 59 </body> 60 </html>