| 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 |