direction-overall-003.html (4000B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>Verify dir attribute on various containers</title> 6 <link rel="help" href="https://w3c.github.io/mathml-core/#attributes-common-to-html-and-mathml-elements"> 7 <link rel="help" href="https://w3c.github.io/mathml-core/#css-styling"> 8 <meta name="assert" content="Verify dir attribute on various mmultiscripts."> 9 <link rel="match" href="direction-overall-003-ref.html"> 10 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 11 <style> 12 math { 13 /* Ensure the space after script is 30px */ 14 font: 10px spaceafterscript3000; 15 } 16 @font-face { 17 font-family: spaceafterscript3000; 18 src: url("/fonts/math/scripts-spaceafterscript3000.woff"); 19 } 20 </style> 21 </head> 22 <body> 23 24 <!-- mmultiscripts. The formulas 25 26 1 3 3 1 27 X in dir=ltr and X in dir=rtl 28 2 4 4 2 29 30 do not match perfectly, so we use an alternative == reftest here 31 which is less strict. --> 32 33 <!-- five vertical bands: red, green, magenta, blue and yellow --> 34 <div style="position: absolute; 35 top: 5px; left: 5px; width: 200px; height: 200px;"> 36 <div style="position: absolute; width: 70px; height: 200px; 37 left: 0px; background: red;"></div> 38 <div style="position: absolute; width: 70px; height: 200px; 39 left: 70px; background: green;"></div> 40 <div style="position: absolute; width: 70px; height: 200px; 41 left: 140px; background: magenta;"></div> 42 <div style="position: absolute; width: 70px; height: 200px; 43 left: 210px; background: blue;"></div> 44 <div style="position: absolute; width: 70px; height: 200px; 45 left: 280px; background: yellow;"></div>--> 46 </div> 47 48 <!-- a mmultiscripts element whose children are squares of different 49 colors. In dir=rtl, the color of each square should match the one of 50 the band over which the square is positioned. Hence, this 51 mmultiscripts should not be visible. --> 52 <div style="position: absolute; 53 top: 5px; left: 5px; width: 200px; height: 200px;"> 54 <math dir="rtl"> 55 <mmultiscripts> 56 <mspace width="40px" height="40px" mathbackground="magenta"/> 57 58 <mspace width="40px" height="40px" mathbackground="green"/> 59 <mspace width="40px" height="40px" mathbackground="green"/> 60 61 <mspace width="40px" height="40px" mathbackground="red"/> 62 <mspace width="40px" height="40px" mathbackground="red"/> 63 64 <mprescripts/> 65 66 <mspace width="40px" height="40px" mathbackground="yellow"/> 67 <mspace width="40px" height="40px" mathbackground="yellow"/> 68 69 <mspace width="40px" height="40px" mathbackground="blue"/> 70 <mspace width="40px" height="40px" mathbackground="blue"/> 71 </mmultiscripts> 72 </math> 73 </div> 74 75 <!-- We add black vertical bands to cover spaces between the children of 76 mmultiscripts. --> 77 <div style="position: absolute; 78 top: 5px; left: 5px; width: 200px; height: 200px;"> 79 <div style="position: absolute; width: 10px; height: 200px; 80 left: -5px; background: black;"></div> 81 <div style="position: absolute; width: 10px; height: 200px; 82 left: 65px; background: black;"></div> 83 <div style="position: absolute; width: 10px; height: 200px; 84 left: 135px; background: black;"></div> 85 <div style="position: absolute; width: 10px; height: 200px; 86 left: 205px; background: black;"></div> 87 <div style="position: absolute; width: 10px; height: 200px; 88 left: 275px; background: black;"></div> 89 <div style="position: absolute; width: 10px; height: 200px; 90 left: 345px; background: black;"></div> 91 </div> 92 93 </body> 94 </html>