Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(124)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/css3/flexbox/multiline-shrink-to-fit-expected.html

Issue 289903007: Inline flexbox width is wrongly calculated when wrapping vertically (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Addressing comments of patch set 7 Created 6 years, 5 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
« no previous file with comments | « LayoutTests/css3/flexbox/multiline-shrink-to-fit.html ('k') | Source/core/rendering/RenderFlexibleBox.cpp » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <style> 3 <style>
4 .testcase { 4 .testcase {
5 float: left; 5 float: left;
6 background-color: #aaa; 6 background-color: #aaa;
7 } 7 }
8 8
9 .testcase > :nth-child(1) { 9 .testcase > :nth-child(1) {
10 background-color: lightblue; 10 background-color: lightblue;
(...skipping 15 matching lines...) Expand all
26 26
27 td { 27 td {
28 padding: 0; 28 padding: 0;
29 width: 100px; 29 width: 100px;
30 } 30 }
31 31
32 </style> 32 </style>
33 <body> 33 <body>
34 <p>Test to make sure that multiline column flexboxes shrink-to-fit properly.</p> 34 <p>Test to make sure that multiline column flexboxes shrink-to-fit properly.</p>
35 35
36 <div class="testcase" style="height: 60px; width: 400px"> 36 <div class="testcase" style="height: 60px; width: 100px">
37 <div style="width: 100px; height: 20px"></div> 37 <div style="width: 100px; height: 20px"></div>
38 <div style="width: 100px; height: 10px"></div> 38 <div style="width: 100px; height: 10px"></div>
39 <div style="width: 100px; height: 10px"></div> 39 <div style="width: 100px; height: 10px"></div>
40 <div style="width: 100px; height: 20px"></div> 40 <div style="width: 100px; height: 20px"></div>
41 </div> 41 </div>
42 <p style="clear:left">The grey background should be 400px wide.</p> 42 <p style="clear:left">The grey background should be 100px wide.</p>
43 43
44 <div class="testcase" style="height: 30px; width: 400px"> 44 <div class="testcase" style="height: 30px; width: 100px">
45 <table> 45 <table>
46 <td> 46 <td>
47 <div style="width: 100px; height: 20px"></div> 47 <div style="width: 100px; height: 20px"></div>
48 <div style="width: 100px; height: 10px; background-color: lightgreen"></di v> 48 <div style="width: 100px; height: 10px; background-color: lightgreen"></di v>
49 </td> 49 </td>
50 <td> 50 <td>
51 <div style="width: 100px; height: 10px; background-color: pink"></div> 51 <div style="width: 100px; height: 10px; background-color: pink"></div>
52 <div style="width: 100px; height: 20px; background-color: yellow"></div> 52 <div style="width: 100px; height: 20px; background-color: yellow"></div>
53 </td> 53 </td>
54 </table> 54 </table>
55 </div> 55 </div>
56 <p style="clear:left">The grey background should be 400px wide.</p> 56 <p style="clear:left">The grey background should be 100px wide.</p>
57 57
58 <div style="width: 150px"> 58 <div style="width: 150px">
59 <div class="testcase" style="height: 60px; width: 150px"> 59 <div class="testcase" style="height: 60px; width: 100px">
60 <div style="width: 100px; height: 20px"></div> 60 <div style="width: 100px; height: 20px"></div>
61 <div style="width: 100px; height: 10px"></div> 61 <div style="width: 100px; height: 10px"></div>
62 <div style="width: 100px; height: 10px"></div> 62 <div style="width: 100px; height: 10px"></div>
63 <div style="width: 100px; height: 20px"></div> 63 <div style="width: 100px; height: 20px"></div>
64 </div> 64 </div>
65 </div> 65 </div>
66 <p style="clear:left">The grey background should be 150px wide.</p> 66 <p style="clear:left">The grey background should be 100px wide.</p>
67 67
68 <div style="width: 150px"> 68 <div style="width: 150px">
69 <div class="testcase" style="height: 35px; width: 150px;"> 69 <div class="testcase" style="height: 35px; width: 100px;">
70 <table> 70 <table>
71 <td> 71 <td>
72 <div style="width: 100px; height: 20px"></div> 72 <div style="width: 100px; height: 20px"></div>
73 <div style="width: 100px; height: 10px; background-color: lightgreen"></di v> 73 <div style="width: 100px; height: 10px; background-color: lightgreen"></di v>
74 </td> 74 </td>
75 <td> 75 <td>
76 <div style="width: 100px; height: 10px; background-color: pink"></div> 76 <div style="width: 100px; height: 10px; background-color: pink"></div>
77 <div style="width: 100px; height: 20px; background-color: yellow"></div> 77 <div style="width: 100px; height: 20px; background-color: yellow"></div>
78 </td> 78 </td>
79 </table> 79 </table>
80 </div> 80 </div>
81 </div> 81 </div>
82 <p style="clear:left">The grey background should be 150px wide and 5px should 82 <p style="clear:left">The grey background should be 100px wide and 5px should
83 stick out the bottom.</p> 83 stick out the bottom.</p>
84 84
85 </body> 85 </body>
86 </html> 86 </html>
OLDNEW
« no previous file with comments | « LayoutTests/css3/flexbox/multiline-shrink-to-fit.html ('k') | Source/core/rendering/RenderFlexibleBox.cpp » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698