OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 | |
5 <meta name="viewport" content="width=800"> | 4 <meta name="viewport" content="width=800"> |
6 <style> | 5 <style> |
7 html { font-size: 16px; } | 6 html { font-size: 16px; } |
8 body { width: 800px; margin: 0; overflow-y: hidden; } | 7 body { width: 800px; margin: 0; overflow-y: hidden; } |
| 8 /* crbug.com/339157: bullet margins are not correctly inflated. */ |
| 9 ul { list-style: none; padding-left: 0; } |
9 </style> | 10 </style> |
10 | |
11 <script src="resources/autosizingTest.js"></script> | 11 <script src="resources/autosizingTest.js"></script> |
12 | |
13 </head> | 12 </head> |
14 <body> | 13 <body> |
15 | |
16 <ul style="width: 400px"> | 14 <ul style="width: 400px"> |
17 <li style="width: 600px"> | 15 <li style="width: 600px"> |
18 This element is only autosized to 20px computed font size (16 *
400/320), since we don't want list items to be autosized differently from each o
ther, and the width of UL tag is used for autosizing.<br> | 16 This element is only autosized to 20px computed font size (16 *
400/320), since we don't want list items to be autosized differently from each o
ther, and the width of UL tag is used for autosizing.<br> |
19 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. | 17 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. |
20 </li> | 18 </li> |
21 <li> | 19 <li> |
22 This element is autosized to computed font size of 20px similarl
y to the first list item.<br> | 20 This element is autosized to computed font size of 20px similarl
y to the first list item.<br> |
23 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. | 21 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. |
24 </li> | 22 </li> |
25 <li style="float: left; width: 800px"> | 23 <li style="float: left; width: 800px"> |
26 This list element becomes a separate autosizing cluster since it
's floating. Hence its computed font size is 40px (16 * 800 / 320).<br> | 24 This list element becomes a separate autosizing cluster since it
's floating. Hence its computed font size is 40px (16 * 800 / 320).<br> |
27 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. | 25 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. |
28 </li> | 26 </li> |
29 <li style="position: absolute; overflow: auto; margin-top: 280px; width:
800px"> | 27 <li style="position: absolute; overflow: auto; margin-top: 280px; width:
800px"> |
30 This list element becomes a separate autosizing cluster since it
's positioned out of the list flow. Hence its computed font size is 40px (16 * 8
00 / 320).<br> | 28 This list element becomes a separate autosizing cluster since it
's positioned out of the list flow. Hence its computed font size is 40px (16 * 8
00 / 320).<br> |
31 Margin is added so it doesn't overlap with the previous element.
<br> | 29 Margin is added so it doesn't overlap with the previous element.
<br> |
32 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. | 30 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. |
33 </li> | 31 </li> |
34 </ul> | 32 </ul> |
35 </body> | 33 </body> |
36 </head> | 34 </head> |
OLD | NEW |