| OLD | NEW |
| 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> | 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> |
| 2 <html lang="en"> | 2 <html lang="en"> |
| 3 <head> | 3 <head> |
| 4 <title>CSS text-indent: Hyatt's Evil Test Which Mixes Lots Of Stuff</title> | 4 <title>CSS text-indent: Hyatt's Evil Test Which Mixes Lots Of Stuff</title> |
| 5 <script src="../../resources/ahem.js"></script> |
| 5 <style type="text/css"> | 6 <style type="text/css"> |
| 6 p { font: 16px/1 serif; margin: 0; } | 7 p { font: 16px/1 serif; margin: 0; } |
| 7 .prerequisite { display: inline; font: 1em/1 Ahem, sans-serif; background: re
d; color: white; } | 8 .prerequisite { display: inline; font: 1em/1 Ahem, sans-serif; background: re
d; color: white; } |
| 8 .control { background-color: yellow; position: absolute; top: 75px; height: 6
0px; width: 200px; border: 2px solid black; } | 9 .control { background-color: yellow; position: absolute; top: 75px; height: 6
0px; width: 200px; border: 2px solid black; } |
| 9 .control .a { background-color: orange; position: absolute; width: 50px; heig
ht: 50px; } | 10 .control .a { background-color: orange; position: absolute; width: 50px; heig
ht: 50px; } |
| 10 .control .b { background-color: orange; position: absolute; left: 150px; widt
h: 50px; height: 50px; } | 11 .control .b { background-color: orange; position: absolute; left: 150px; widt
h: 50px; height: 50px; } |
| 11 .test { background-color: yellow; text-indent: 100px; position: absolute; top
: 175px; border: 2px solid black; font: 50px/1 Ahem; } | 12 .test { background-color: yellow; text-indent: 100px; position: absolute; top
: 175px; border: 2px solid black; font: 50px/1 Ahem; } |
| 12 .test .a { background-color: orange; width: 50px; height: 50px; float: left;
} | 13 .test .a { background-color: orange; width: 50px; height: 50px; float: left;
} |
| 13 .test .b { background-color: orange; display: inline-block; width: 50px; heig
ht: 50px; } | 14 .test .b { background-color: orange; display: inline-block; width: 50px; heig
ht: 50px; } |
| 14 </style> | 15 </style> |
| 15 </head> | 16 </head> |
| 16 <body> | 17 <body> |
| 17 <p class="prerequisite">Ahem_font_required_for_this_test.</p> | 18 <p class="prerequisite">Ahem_font_required_for_this_test.</p> |
| 18 <p>The following two blocks should be identical.</p> | 19 <p>The following two blocks should be identical.</p> |
| 19 <div class="control"> <!-- this should shrink wrap to the intrinsic, no-line-w
rapping width --> | 20 <div class="control"> <!-- this should shrink wrap to the intrinsic, no-line-w
rapping width --> |
| 20 <div class="a"></div> <!-- that's a float. --> | 21 <div class="a"></div> <!-- that's a float. --> |
| 21 <div class="b"></div> <!-- that's an inline-block. it should be text-indente
d 100px from the left edge of the float. --> | 22 <div class="b"></div> <!-- that's an inline-block. it should be text-indente
d 100px from the left edge of the float. --> |
| 22 <!-- the inline-block should sit on top of the baseline, which should be 0.2e
m from the bottom of the | 23 <!-- the inline-block should sit on top of the baseline, which should be 0.2e
m from the bottom of the |
| 23 block, since the Ahem font has a 0.2em descender. --> | 24 block, since the Ahem font has a 0.2em descender. --> |
| 24 </div> | 25 </div> |
| 25 <div class="test"> | 26 <div class="test"> |
| 26 <div class="a"></div> | 27 <div class="a"></div> |
| 27 <div class="b"></div> | 28 <div class="b"></div> |
| 28 </div> | 29 </div> |
| 29 </body> | 30 </body> |
| 30 </html> | 31 </html> |
| OLD | NEW |