mrow-painting-order.html (1603B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>mrow painting order</title> 6 <link rel="help" href="https://www.w3.org/TR/MathML3/chapter3.html#presm.mfenced"> 7 <link rel="help" href="https://w3c.github.io/mathml-core/#stacking-contexts"> 8 <link rel="help" href="https://w3c.github.io/mathml-core/#horizontally-group-sub-expressions-mrow"> 9 <meta name="assert" content="Verify in which order the children paint"> 10 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 11 <link rel="match" href="mrow-painting-order-ref.html"> 12 <style> 13 .container { 14 position: absolute; 15 left: 2em; 16 top: 10em; 17 } 18 math { 19 font: 50px/1 Ahem; 20 } 21 </style> 22 </head> 23 <body> 24 <p>This test passes if there is no red and content is stacked such that</p> 25 <ul> 26 <li>foreground (dark colors) is above background (light colors)</li> 27 <li>yellow foreground is above green foreground which is itself above blue foreground</li> 28 <li>yellow background is above green background which is itself above blue background</li> 29 </ul> 30 <div class="container"> 31 <math> 32 <mrow> 33 <mn style="color: blue; background: lightblue">XXÉ</mn> 34 <mn style="color: red">X</mn> 35 <mn style="color: green; background: lightgreen; margin-inline-start: -3em">p XXÉ</mn> 36 <mn style="color: red">X</mn> 37 <mn style="color: yellow; background: lightyellow; margin-inline-start: -3em">p X</mn> 38 </mrow> 39 </math> 40 </div> 41 </body> 42 </html>