Increase opacity of stretched operators in mo-stacked-glyphs.html
[WebKit-https.git] / LayoutTests / mathml / presentation / mo-stacked-glyphs.html
1 <!doctype html>
2 <html>
3   <head>
4     <title>mo stacked glyphs</title>
5     <meta charset="utf-8"/>
6   </head>
7   <body>
8
9     <!-- Test some stretchy operators requiring stacked glyphs at large sizes. -->
10     <div style="position: absolute; top: 25px; left: 0; opacity: 0.75;">
11       <math>
12         <mrow>
13           <mo>(</mo>
14           <mo>)</mo>
15           <mo>{</mo>
16           <mo>}</mo>
17           <mo>[</mo>
18           <mo>]</mo>
19           <mo>|</mo>
20           <mo stretchy="true">&#x222b;</mo>
21           <mspace height="200px" depth="200px"/>
22         </mrow>
23       </math>
24     </div>
25
26     <!-- Same operators, but shifted vertically by one pixel. -->
27     <div style="position: absolute; top: 26px; left: 0; opacity: 0.75;">
28       <math>
29         <mrow>
30           <mo>(</mo>
31           <mo>)</mo>
32           <mo>{</mo>
33           <mo>}</mo>
34           <mo>[</mo>
35           <mo>]</mo>
36           <mo>|</mo>
37           <mo stretchy="true">&#x222b;</mo>
38           <mspace height="200px" depth="200px"/>
39         </mrow>
40       </math>
41     </div>
42     
43     <!-- Some horizontal bands to hide the top/middle/bottom parts of the
44          operators and only show the straight lines. Note that the two previous
45          <div> elements have opacity>0.5 and are only shifted vertically by
46          one pixel. Hence the overlapped <div>'s should look like one <div> of
47          opacity=1, provided there are no gaps between the stacked glyphs and
48          that these glyphs are perfectly aligned. -->
49         <div style="position: absolute; top: 0px; left: 0; width: 100%; height: 150px; background: red;"></div>
50         <div style="position: absolute; top: 200px; left: 0; width: 100%; height: 150px; background: red;"></div>
51         <div style="position: absolute; top: 400px; left: 0; width: 100%; height: 150px; background: red;"></div>
52
53   </body>
54 </html>