OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <script src="../../resources/check-layout.js"></script> |
3 » <head> | 3 <p>Test that text-shadow doesn't mess up the line positions.</p> |
4 » » <style> | 4 <div style="position:relative; font:20px/1 Ahem; width:420px; -webkit-columns:2;
-webkit-column-gap:20px; text-shadow:1px 100px 50px;"> |
5 p { | 5 <span class="testee" data-offset-y="0" data-offset-x="0">line</span><br> |
6 » » » » position:absolute; | 6 <span class="testee" data-offset-y="0" data-offset-x="220">line</span><br> |
7 border:2px solid black; | 7 </div> |
8 » » » » max-width:420px; | 8 <p id="result"></p> |
9 » » » » -webkit-column-gap:20px; | 9 <script> |
10 » » » » -webkit-column-width:200px; | 10 checkLayout('.testee', document.getElementById('result')); |
11 » » » » -webkit-column-rule:1px dotted white; | 11 </script> |
12 » » » » font-size:16px; | |
13 » » » » top:20px; | |
14 » » » » left:20px; | |
15 » » » » text-align:justify; | |
16 font-weight:bold; | |
17 » » » » text-shadow:1px 1px 10px black; | |
18 » » » } | |
19 » » » | |
20 » » » p:first-letter { | |
21 » » » » font-size:36px; | |
22 » » » » margin-right:4px; | |
23 » » » » margin-bottom:-6px; | |
24 » » » » float:left; | |
25 » » » } | |
26 » » » | |
27 » » » | |
28 » » » | |
29 » » </style> | |
30 » </head> | |
31 » | |
32 » <body> | |
33 » » <div class="mag"> | |
34 » » » <p>Lorem ipsum dolor sit amet, consectetur adipiscing el
it. Cras pharetra mollis pharetra. Suspendisse lacinia orci et felis tristique s
it amet semper massa tempus. Suspendisse consectetur tempor pulvinar. Proin dui
eros, ultricies vel malesuada vel, tempor at ante. Nam eget nisl dui. Donec mole
stie lectus a nunc scelerisque blandit. Nam non ligula massa, sed suscipit turpi
s. Etiam eget ligula sit amet turpis venenatis dictum in eleifend augue. Duis te
llus lectus, volutpat et adipiscing a, pellentesque eu metus. Aenean suscipit co
ngue mauris at gravida. Integer lectus ligula, consectetur sit amet venenatis id
, scelerisque eget nisl. Nunc dapibus posuere risus, vitae tempor nibh iaculis e
t.</p> | |
35 » » </div> | |
36 » </body> | |
37 </html> | |
OLD | NEW |