Replace multiscripts-positions.html reftest with script tests
[WebKit-https.git] / LayoutTests / mathml / presentation / scripts-height.html
1 <!doctype html>
2 <html>
3   <head>
4     <title>scripts-height</title>
5     <meta charset="utf-8"/>
6     <style>
7       math {
8       padding: 0;
9       border: 0;
10       }
11       td {
12       border: 1px solid black;
13       text-align: center; width: 100px; height: 100px;
14       vertical-align: middle;
15       }
16       span {
17       display: inline-block;
18       background: black;
19       border: 0;
20       margin: 0;
21       padding: 0;
22       }
23     </style>
24   </head>
25   <body>
26
27     <!-- base with large height: the script are shifted to the top/bottom
28          of the cell and should be hidden by the black rectangles -->
29     <div style="position: absolute; top: 10px; left: 10px;">
30       <table>
31         <tr>
32           <td>
33             <math>
34               <msubsup>
35                 <mspace height="40px" depth="40px"/>
36                 <mspace width="10px" height="5px" depth="5px"
37                         mathbackground="red"/>
38                 <mspace width="10px" height="5px" depth="5px"
39                         mathbackground="blue"/>
40               </msubsup>
41             </math>
42           </td>
43         </tr>
44       </table>
45     </div>
46     <div style="position: absolute; top: 10px; left: 10px;">
47       <table>
48         <tr>
49           <td style="vertical-align: top">
50             <span style="width: 20px; height: 20px;"></span>
51           </td>
52         </tr>
53       </table>
54     </div>
55     <div  style="position: absolute; top: 10px; left: 10px;">
56       <table>
57         <tr>
58           <td style="vertical-align: bottom">
59             <span style="width: 20px; height: 20px;"></span>
60           </td>
61         </tr>
62       </table>
63     </div>
64
65     <!-- scripts of different heights: they should all be aligned in the
66          middle of the cell -->
67     <div style="position: absolute; top: 10px; left: 120px;">
68       <table>
69         <tr>
70           <td style="width: 14em; height: 14em;">
71             <math>
72               <mspace height="7em" depth="7em"/>
73               <mspace width="10px" height="1em" depth="1em" mathbackground="red"/>
74               <msubsup>
75                 <mspace width="10px" height="1em" depth="1em" mathbackground="green"/>
76                 <mspace height="4em"/>
77                 <mspace height="1em"/>
78               </msubsup>
79               <msubsup>
80                 <mspace width="10px" height="1em" depth="1em" mathbackground="blue"/>
81                 <mspace height="1em"/>
82                 <mspace height="4em"/>
83               </msubsup>
84               <msubsup>
85                 <mspace width="10px" height="1em" depth="1em" mathbackground="yellow"/>
86                 <mspace height="4em"/>
87                 <mspace height="4em"/>
88               </msubsup>
89             </math>
90           </td>
91         </tr>
92       </table>
93     </div>
94     
95   </body>
96 </html>