4 <meta name=
"viewport" content=
"width=800">
6 html { font-size:
16px; }
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; }
11 <script src=
"resources/autosizingTest.js"></script>
14 <ul style=
"width: 400px">
15 <li style=
"width: 600px">
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 other, and the width of UL tag is used for autosizing.
<br>
17 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
20 This element is autosized to computed font size of
20px similarly to the first list item.
<br>
21 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
23 <li style=
"float: left; width: 800px">
24 This list element becomes a separate autosizing cluster since it's floating. Hence its computed font size is
40px (
16 *
800 /
320).
<br>
25 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
27 <li style=
"position: absolute; overflow: auto; margin-top: 280px; width: 800px">
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 *
800 /
320).
<br>
29 Margin is added so it doesn't overlap with the previous element.
<br>
30 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.