direction-overall-002.html (4120B)
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 elements."> 9 <link rel="match" href="direction-overall-002-ref.html"> 10 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 11 <style> 12 math { 13 font: 25px/1 Ahem; 14 } 15 </style> 16 </head> 17 18 </head> 19 <body style="background: white;"> 20 21 <!-- The visible part of the formulas below should be covered by the 22 black rectangle when dir=rtl --> 23 24 <div style="position: absolute; top: 5px; left: 5px;"> 25 <!-- msup --> 26 <math dir="rtl"> 27 <msup> 28 <mspace width="20px" height="20px"/> 29 <mspace width="20px" height="20px" mathbackground="red"/> 30 </msup> 31 </math><br/> 32 <!-- msub --> 33 <math dir="rtl"> 34 <msub> 35 <mspace width="20px" height="20px"/> 36 <mspace width="20px" height="20px" mathbackground="orange"/> 37 </msub> 38 </math><br/> 39 <!-- msubsup --> 40 <math dir="rtl"> 41 <msubsup> 42 <mspace width="20px" height="20px"/> 43 <mspace width="20px" height="20px" mathbackground="green"/> 44 <mspace width="20px" height="20px" mathbackground="blue"/> 45 </msubsup> 46 </math><br/> 47 <!-- mmultiscripts --> 48 <math dir="rtl"> 49 <mmultiscripts> 50 <mspace/> 51 <mspace width="20px" height="20px" mathbackground="cyan"/> 52 <mspace width="20px" height="20px" mathbackground="yellow"/> 53 <mprescripts/> 54 <mspace width="20px" height="20px"/> 55 <mspace width="20px" height="20px"/> 56 </mmultiscripts> 57 </math><br/> 58 <!-- munder (mo with movablelimits=true and displaystyle=false) --> 59 <math dir="rtl"> 60 <munder> 61 <mpadded width="20px"> 62 <mphantom> 63 <mo movablelimits="true" displaystyle="false">|</mo> 64 </mphantom> 65 </mpadded> 66 <mspace width="20px" height="20px" mathbackground="magenta"/> 67 </munder> 68 </math><br/> 69 <!-- mover (mo with movablelimits=true and displaystyle=false) --> 70 <math dir="rtl"> 71 <mover> 72 <mpadded width="20px"> 73 <mphantom> 74 <mo movablelimits="true" displaystyle="false">|</mo> 75 </mphantom> 76 </mpadded> 77 <mspace width="20px" height="20px" mathbackground="cyan"/> 78 </mover> 79 </math><br/> 80 <!-- munderover (mo with movablelimits=true and displaystyle=false) --> 81 <math dir="rtl"> 82 <munderover> 83 <mpadded width="20px"> 84 <mphantom> 85 <mo movablelimits="true" displaystyle="false">|</mo> 86 </mphantom> 87 </mpadded> 88 <mspace width="20px" height="20px" mathbackground="yellow"/> 89 <mspace width="20px" height="20px" mathbackground="grey"/> 90 </munderover> 91 </math><br/> 92 <!-- mroot --> 93 <math dir="rtl"> 94 <mstyle mathcolor="white"> 95 <mroot> 96 <mspace width="20px" height="20px" mathbackground="orange"/> 97 <mspace width="20px" height="20px"/> 98 </mroot> 99 </mstyle> 100 </math><br/> 101 <!-- msqrt --> 102 <math dir="rtl"> 103 <mstyle mathcolor="white"> 104 <msqrt> 105 <!-- Here, we assume that (width of radical + width of mspace) 106 is greater than the width of the black rectangle (i.e. 107 width of radical > 30 - 25 = 5px), so the test fails if the 108 radical is placed on the left. --> 109 <mspace width="25px" height="20px" mathbackground="grey"/> 110 </msqrt> 111 </mstyle> 112 </math> 113 </div> 114 115 <div style="position: absolute; top: 0px; left: 0px;"> 116 <div style="width: 40px; height: 3000px; background: black"></div> 117 </div> 118 119 </body> 120 </html>