space-2.html (2020B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>space</title> 6 <link rel="help" href="https://w3c.github.io/mathml-core/#space-mspace"> 7 <link rel="match" href="space-2-ref.html"/> 8 <meta name="assert" content="Verify mspace visual rendering for different values of height, depth and width"> 9 </head> 10 <body> 11 <p>Test passes if you see a green square and no red.</p> 12 <div style="position: relative;"> 13 <!-- Some green and red mspaces to draw a square --> 14 <div style="position: absolute; top: 0px; left: 0px; 15 width: 200px; height: 200px;"> 16 <math style="position: absolute; top: 0px; left: 0px"> 17 <mspace width="50px" height="100px" depth="100px" style="background: green"/> 18 <mspace width="50px" height="100px" depth="100px" style="background: green"/> 19 <mspace width="25px" depth="100px" style="background: green"/> 20 <mspace width="25px" depth="100px" style="background: green"/> 21 <mspace width="25px" height="100px" style="background: green"/> 22 <mspace width="25px" height="100px" style="background: green"/> 23 </math> 24 <math style="position: absolute; top: 0px; left: 0px"> 25 <mspace width="100px" height="20px" depth="20px" style="background: red"/> 26 <mspace width="50px" height="100px" style="background: red"/> 27 <mspace width="50px" depth="100px" style="background: red"/> 28 </math> 29 </div> 30 <!-- These green divs should cover the red mspace elements --> 31 <div style="position: absolute; top: 0px; left: 0px; 32 width: 200px; height: 200px;"> 33 <div style="position: absolute; top: 80px; left: 0px; 34 width: 100px; height: 40px; background: green"></div> 35 <div style="position: absolute; top: 0px; left: 100px; 36 width: 50px; height: 100px; background: green"></div> 37 <div style="position: absolute; top: 100px; left: 150px; 38 width: 50px; height: 100px; background: green"></div> 39 </div> 40 </div> 41 </body> 42 </html>