row-compat-001.html (3979B)
1 <!DOCTYPE html> 2 <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> 3 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes"> 4 <link rel="help" href="https://crbug.com/1445937"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/resources/check-layout-th.js"></script> 8 <meta name="assert" 9 content="Changing flex intrinsic sizing algorithm doesn't break any of these cases." /> 10 11 <style> 12 section.bugreport { 13 outline: 1px solid grey; 14 margin-bottom: 25px; 15 padding: 3px; 16 } 17 18 #wrapping-broke .flex { 19 display: flex; 20 width: min-content; 21 outline: 2px solid; 22 margin-bottom: 10px; 23 } 24 25 #wrapping-broke span.orange100 { 26 float: left; 27 height: 25px; 28 width: 100px; 29 background: orange; 30 } 31 32 #bug1454306 .fourUpList { 33 display: grid; 34 grid-template-columns: repeat(4, 1fr); 35 grid-template-rows: 1fr; 36 width: 800px; 37 background: yellow; 38 } 39 40 #bug1454306 .thumbnail-list--item { 41 display: flex; 42 width: 100%; 43 outline: 1px solid; 44 } 45 46 #bug1454306 .thumbnail-list--item-photo { 47 height: 50px; 48 width: 50px; 49 } 50 51 #bug1454306 .thumbnail-list--item-header { 52 flex: 1 0 calc(70% - 10.5px) 53 } 54 </style> 55 56 <section id="wrapping-broke" class="bugreport"> 57 <p>https://crbug.com/1445937 We need to see a 100x100 orange square, not a 58 400x25 orange rectangle.</p> 59 <div class="flex" data-expected-width="100"> 60 <!-- one item with very negative desired flex fraction --> 61 <div> 62 <span class="orange100"></span> 63 <span class="orange100"></span> 64 <span class="orange100"></span> 65 <span class="orange100"></span> 66 </div> 67 <!-- second item with desired flex fraction 0 --> 68 <div></div> 69 </div> 70 </section> 71 72 <section id="bug1454306" class="bugreport"> 73 <p>https://crbug.com/1454306 The boxes each must be 1/4 the size of the yellow 74 containing block. No overflow.</p> 75 76 <!-- This compat case needs the item in the example below to contribute its 77 min-content to container's min-content. In one of our earlier 78 implementations, the item contributed its flex-basis (aka max-content). 79 80 <item style="flex: 1 0 calc(70% - 10.5px)"> 81 max-content larger than flex basis 82 </item> 83 --> 84 85 <div class=fourUpList> 86 87 <div class=thumbnail-list--item data-expected-width="200"> 88 <div class=thumbnail-list--item-header>Some News Headline</div> 89 <div class=thumbnail-list--item-photo></div> 90 </div> 91 92 <div class=thumbnail-list--item data-expected-width="200"> 93 <div class=thumbnail-list--item-header>Some Other News Headline 2</div> 94 <div class=thumbnail-list--item-photo></div> 95 </div> 96 97 <div class=thumbnail-list--item data-expected-width="200"> 98 <div class=thumbnail-list--item-header>Even another Headline 3</div> 99 <div class=thumbnail-list--item-photo></div> 100 </div> 101 102 <div class=thumbnail-list--item data-expected-width="200"> 103 <div class=thumbnail-list--item-header> 104 Peets Coffee announces plans to move Oakland 105 </div> 106 <div class=thumbnail-list--item-photo></div> 107 </div> 108 109 </div> 110 </section> 111 112 <section id="gmail-tables" class="bugreport"> 113 <p>https://bugs.chromium.org/p/chromium/issues/detail?id=1457103 We need a 114 100x100 green square here.</p> 115 <!-- This case requires that the %-width fixed table has a large flex basis, which means the table's intrinsic max width has to be large.--> 116 <div style="width: 100px;"> 117 <div style="display: table;"> 118 <div style="display: table-cell"> 119 <div class=flex style="display: flex; height: 100px; background: green;" 120 data-expected-width="100"> 121 <table style="width: 100%; table-layout: fixed;"></table> 122 </div> 123 </div> 124 </div> 125 </div> 126 </section> 127 128 <script> 129 checkLayout('#wrapping-broke .flex'); 130 checkLayout('#bug1454306'); 131 checkLayout('#gmail-tables .flex'); 132 </script>