blob: dcd6252080112a27f383d3c146eeaf7724a3cb81 [file] [log] [blame]
commit-queue@webkit.orge5aab252012-11-28 21:02:30 +00001<!DOCTYPE html>
2<html>
3<head>
4
5<meta name="viewport" content="width=800">
6<style>
7html { font-size: 16px; }
8body { width: 800px; margin: 0; overflow-y: hidden; }
9</style>
10
11</head>
12<body>
13
14<ul style="width: 400px">
15 <li style="width: 600px; font-size: 1.25rem">
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.
18 </li>
commit-queue@webkit.orge5aab252012-11-28 21:02:30 +000019 <li style="font-size: 1.25rem">
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.
22 </li>
commit-queue@webkit.org578721e2012-12-03 18:21:57 +000023 <li style="float: left; width: 800px; font-size: 2.5rem">
24 This list element becomes a separate autosizing cluster since it's floating. Hence its computed font size is 40px (16 * 400 / 320).<br>
25 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
26 </li>
27 <li style="position: absolute; margin-top: 280px; width: 800px; font-size: 2.5rem">
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 * 400 / 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.
31 </li>
commit-queue@webkit.orge5aab252012-11-28 21:02:30 +000032</ul>
33</body>
34</head>