| OLD | NEW |
|---|
| 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/x
html1/DTD/xhtml1-strict.dtd"> | 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/x
html1/DTD/xhtml1-strict.dtd"> |
| 2 <html xmlns="http://www.w3.org/1999/xhtml"> | 2 <html xmlns="http://www.w3.org/1999/xhtml"> |
| 3 <head> | 3 <head> |
| 4 <title>CSS Test: line-height of images</title> | 4 <title>CSS Test: line-height of images</title> |
| 5 <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> | 5 <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> |
| 6 <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/fonts/line-hei
ght/007.html" type="text/html"/> | 6 <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/fonts/line-hei
ght/007.html" type="text/html"/> |
| 7 <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#line-height" /> | 7 <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#line-height" /> |
| 8 <link rel="match" href="line-height-127-ref.xht" /> | 8 <link rel="match" href="line-height-127-ref.xht" /> |
| 9 | 9 |
| 10 <meta content="ahem image" name="flags" /> | 10 <meta content="ahem image" name="flags" /> |
| 11 | 11 |
| 12 <style type="text/css"> | 12 <style type="text/css"> |
| 13 table { font: 10em/1 Ahem; border-spacing: 0; } | 13 table { font: 10em/1 Ahem; border-spacing: 0; } |
| 14 td { padding: 0; background: red; } | 14 td { padding: 0; background: red; } |
| 15 img { width: 1em; height: 1px; } | 15 img { width: 1em; height: 1px; } |
| 16 .test { line-height: 0; background: green; } | 16 .test { line-height: 0; background: green; } |
| 17 .control { height: 0.3em; background: green; width: 1em; } | 17 .control { height: 0.3em; background: green; width: 1em; } |
| 18 </style> | 18 </style> |
| 19 </head> | 19 </head> |
| 20 <body> | 20 <body> |
| 21 | 21 |
| 22 <!-- | 22 <!-- |
| 23 ! The 0.3em comes from the following: | 23 ! The 0.3em comes from the following: |
| 24 ! | 24 ! |
| 25 ! * The font is 1em high | 25 ! * The font is 1em high |
| 26 ! * The line height is 0 | 26 ! * The line height is 0 |
| 27 ! * The half leading is therefore -0.5em centered around the middle of th
e font | 27 ! * The half leading is therefore -0.5em centered around the middle of th
e font |
| 28 ! * The baseline is 0.2em from the bottom of the font | 28 ! * The baseline is 0.2em from the bottom of the font |
| 29 ! * Thus the distance from the baseline to the center is 0.3em | 29 ! * Thus the distance from the baseline to the center is 0.3em |
| 30 ! * The image is placed on the baseline | 30 ! * The image is placed on the baseline |
| 31 | * The line box has to include the image and the middle of the font | 31 | * The line box has to include the image and the middle of the font |
| 32 ! * Thus the line box is 0.3em high | 32 ! * Thus the line box is 0.3em high |
| 33 ! | 33 ! |
| 34 ! --> | 34 !--> |
| 35 | 35 |
| 36 <p>Test passes if there is <strong>no red</strong>.</p> | 36 <p>Test passes if there is <strong>no red</strong>.</p> |
| 37 <table> | 37 <table> |
| 38 <tr> | 38 <tr> |
| 39 <td><div class="test"><img src="support/1x1-white.png" alt="FAIL (images req
uired)"/></div></td> | 39 <td><div class="test"><img src="support/1x1-white.png" alt="FAIL (images req
uired)"/></div></td> |
| 40 <td><div class="control"></div></td> | 40 <td><div class="control"></div></td> |
| 41 </tr> | 41 </tr> |
| 42 </table> | 42 </table> |
| 43 </body> | 43 </body> |
| 44 </html> | 44 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2104493003:
Import csswg-test@0589ea025a684e31742740ca3b599230bcc25e5d (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master