Text decorations do not contribute to visual overflow
[WebKit-https.git] / LayoutTests / fast / css3-text / css3-text-decoration / repaint / underline-outside-of-layout-rect-expected.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 @font-face {
6     font-family: 'Litherum';
7     src: url("./resources/Litherum.svg") format(svg)
8 }
9 div {
10     font-family: 'Litherum';
11     -webkit-text-decoration-skip: none;
12     -webkit-text-decoration-color: green;
13     width: 1px;
14     height: 1px;
15 }
16 </style>
17 </head>
18 <body>
19 This test makes sure that underlines contribute to visual overflow.
20 The SVG font has a descent of 0, which means that underlines will
21 lie outside of the glyph boundaries. The test makes sure that
22 drawing underlined text ends up the same as drawing text that has
23 had the underline retroactively applied to it with javascript.
24 <div style="position: relative; height: 45px;">
25 <div id="underline" style="position: absolute; left: 0px; top: 0px; text-decoration: underline;">|</div>
26 <div id="underlineunder" style="position: absolute; left: 20px; top: 0px; -webkit-text-underline-position: under; text-decoration: underline">|</div>
27 <div id="linethrough" style="position: absolute; left: 40px; top: 0px; text-decoration: line-through;">|</div>
28 <div id="overline" style="position: absolute; left: 60px; top: 0px; text-decoration: overline;">|</div>
29
30 <div id="wavyunderline" style="position: absolute; left: 0px; top: 20px; -webkit-text-decoration-style: wavy; text-decoration: underline;">|</div>
31 <div id="wavyunderlineunder" style="position: absolute; left: 20px; top: 20px; -webkit-text-underline-position: under; -webkit-text-decoration-style: wavy; text-decoration: underline;">|</div>
32 <div id="wavylinethrough" style="font-size: 1px; position: absolute; left: 40px; top: 20px; -webkit-text-decoration-style: wavy; text-decoration: line-through;">-</div>
33 <div id="wavyoverline" style="position: absolute; left: 60px; top: 20px; -webkit-text-decoration-style: wavy; text-decoration: overline;">|</div>
34 </div>
35 </body>
36 </html>