LayoutTests/fast/text-autosizing/cluster-list-item-expected.html - Issue 16019004: Text Autosizing: Treat position:absolute/fixed as constrained height.

Side by Side Diff: LayoutTests/fast/text-autosizing/cluster-list-item-expected.html

Issue 16019004: Text Autosizing: Treat position:absolute/fixed as constrained height. (Closed) Base URL: svn://svn.chromium.org/blink/trunk

Patch Set: Created 7 years, 7 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch | Annotate | Revision Log

« no previous file with comments | « LayoutTests/fast/text-autosizing/cluster-list-item.html ('k') | LayoutTests/fast/text-autosizing/clusters-insufficient-text.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
1 <!DOCTYPE html>	1 <!DOCTYPE html>

2 <html>	2 <html>

3 <head>	3 <head>

4	4

5 <meta name="viewport" content="width=800">	5 <meta name="viewport" content="width=800">

6 <style>	6 <style>

7 html { font-size: 16px; }	7 html { font-size: 16px; }

8 body { width: 800px; margin: 0; overflow-y: hidden; }	8 body { width: 800px; margin: 0; overflow-y: hidden; }

9 </style>	9 </style>

10	10

11 </head>	11 </head>

12 <body>	12 <body>

13	13

14 <ul style="width: 400px">	14 <ul style="width: 400px">

15 <li style="width: 600px; font-size: 1.25rem">	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 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>

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

18 </li>	18 </li>

19 <li style="font-size: 1.25rem">	19 <li style="font-size: 1.25rem">

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

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

22 </li>	22 </li>

23 <li style="float: left; width: 800px; font-size: 2.5rem">	23 <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>	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.	25 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

26 </li>	26 </li>

27 » <li style="position: absolute; margin-top: 280px; width: 800px; font-siz e: 2.5rem">	27 » <li style="position: absolute; overflow: auto; 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 * 4 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 * 4 00 / 320).<br>

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

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

31 </li>	31 </li>

32 </ul>	32 </ul>

33 </body>	33 </body>

34 </head>	34 </head>

OLD	NEW