| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"/> |
| <title>mpadded rendering from in-flow children</title> |
| <link rel="help" href="https://w3c.github.io/mathml-core/#adjust-space-around-content-mpadded"> |
| <meta name="assert" content="Verify rendering of mpadded is only affected by in-flow children."> |
| <style> |
| .oof1 { |
| position: absolute; |
| } |
| .oof2 { |
| position: fixed; |
| } |
| .nobox { |
| display: none; |
| } |
| </style> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/mathml/support/layout-comparison.js"></script> |
| <script> |
| setup({ explicit_done: true }); |
| window.addEventListener("load", runTests); |
| |
| function runTests() { |
| let math = document.querySelector("#mpadded"); |
| let element = math.firstElementChild; |
| let reference = element.nextElementSibling; |
| const epsilon = 1; |
| |
| test(function() { |
| compareLayout(element, reference, epsilon); |
| }, "Rendering of mpadded should only be affected by in-flow children"); |
| |
| done(); |
| } |
| </script> |
| </head> |
| <body> |
| <div id="log"></div> |
| <div> |
| <math id="mpadded"> |
| <mpadded lspace="3em" voffset="-1em" height="1em" depth="2em" width="8em" style="background: lightblue"> |
| <mspace width="32px" class="oof1"/> |
| <mspace width="16px" class="oof2"/> |
| <mspace width="8px" class="nobox"/> |
| <mspace width="64px" height="8px" style="background: lightgreen"/> |
| <mspace width="32px" class="oof1"/> |
| <mspace width="16px" class="oof2"/> |
| <mspace width="8px" class="nobox"/> |
| </mpadded> |
| |
| <mpadded lspace="3em" voffset="-1em" height="1em" depth="2em" width="8em" style="background: lightblue"> |
| <mspace width="64px" height="8px" style="background: lightgreen"/> |
| </mpadded> |
| </math> |
| </div> |
| </body> |
| </html> |
