| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <style> |
| 3 .mc { width:520px; height:80px; font-size:12px; line-height:20px; background
:#ddd; } |
| 4 .mc span { font-size:2em; line-height:30px; } |
| 5 </style> |
| 6 |
| 7 <p>The big text should be in the first column, and baseline-aligned with the lin
e in its neighbor cell on the left:</p> |
| 8 <div class="mc"> |
| 9 <div style="float:left; padding-left:10px; padding-top:10px; width:270px;"> |
| 10 <div style="display:inline-block; width:30px;"> |
| 11 line<br> |
| 12 <!-- The baseline of an inline-block is the baseline of the last in-
flow line. So make |
| 13 sure the first line is also the last in-flow line :-P --> |
| 14 <div style="position:absolute;"> |
| 15 line<br> |
| 16 line |
| 17 </div> |
| 18 </div><span style="margin-left:15px;">1st column</span> |
| 19 </div> |
| 20 <div style="float:left;"> |
| 21 line<br> |
| 22 line<br> |
| 23 line<br> |
| 24 </div> |
| 25 </div> |
| 26 |
| 27 <hr> |
| 28 |
| 29 <p>The big text should be near the top in the first column:</p> |
| 30 <div class="mc"> |
| 31 <div style="float:left; padding-left:10px; padding-top:10px; width:270px;"> |
| 32 <div style="float:left; width:30px;">line<br>line<br>line</div> |
| 33 <span style="margin-left:15px;">1st column</span> |
| 34 </div> |
| 35 <div style="float:left;"> |
| 36 line<br> |
| 37 line<br> |
| 38 line<br> |
| 39 </div> |
| 40 </div> |
| 41 |
| 42 <hr> |
| 43 |
| 44 <p>The big text should be at the top in the second column:</p> |
| 45 <div class="mc"> |
| 46 <div style="float:left; padding-left:10px; padding-top:10px; width:270px;"> |
| 47 line<br> |
| 48 line<br> |
| 49 line<br> |
| 50 </div> |
| 51 <div style="float:left; width:220px;"> |
| 52 <div style="float:left; width:30px;">line<br>line<br>line</div> |
| 53 <span style="margin-left:15px;">2nd column</span> |
| 54 </div> |
| 55 </div> |
| 56 |
| 57 <hr> |
| 58 |
| 59 <p>The big text should be near the bottom in the second column:</p> |
| 60 <div class="mc"> |
| 61 <div style="float:left; padding-left:10px; padding-top:10px; width:270px;"> |
| 62 line<br> |
| 63 line<br> |
| 64 line<br> |
| 65 </div> |
| 66 <div style="float:left; width:200px;"> |
| 67 <div style="float:left; width:30px;">line<br>line<br>line</div> |
| 68 <div style="height:35px;"></div> |
| 69 <span style="margin-left:15px;">2nd column</span> |
| 70 </div> |
| 71 </div> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 929293002:
Rewrite fast/multicol/table-vertical-align.html as a reftest. (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master