webkit-box-item-shrink-001.html (3655B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS -webkit-box Test: Testing no automatic minimum size for flex items in a legacy row-oriented flex container</title> 4 <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> 5 <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> 6 <link rel="help" href="https://compat.spec.whatwg.org/#valdef-flex--webkit-box"> 7 <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#min-size-auto"> 8 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1929178"> 9 <link rel="stylesheet" href="/fonts/ahem.css"> 10 <meta name="assert" content="This test verifies that a flex item in a legacy -webkit-box can be shrunk as if it has no automatic minimum size."> 11 12 <script src="/resources/testharness.js"></script> 13 <script src="/resources/testharnessreport.js"></script> 14 <script src="/resources/check-layout-th.js"></script> 15 16 <style> 17 .webkit-box { 18 display: -webkit-box; 19 width: 50px; 20 height: 50px; 21 border: 1px solid black; 22 margin-bottom: 5px; 23 } 24 .webkit-box > * { 25 /* Make the child block-level, to ensure that it's a flex item (otherwise it 26 * may get wrapped in an anonymous box which becomes the flex item). */ 27 display: block; 28 /* Allow the child to shrink. */ 29 -webkit-box-flex: 1; 30 31 font: 20px/1 Ahem; 32 background: lightblue; 33 34 /* Get rid of UA default styles. */ 35 border: 0; 36 padding: 0; 37 margin: 0; 38 } 39 </style> 40 41 <body onload="checkLayout('.webkit-box')"> 42 <div class="webkit-box"> 43 <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 10'></svg>" 44 data-expected-width="50"> 45 </div> 46 47 <div class="webkit-box"> 48 <img src="data:image/svg+xml,<svg width='300' height='100' xmlns='http://www.w3.org/2000/svg'></svg>" 49 data-expected-width="50"> 50 </div> 51 52 <div class="webkit-box"> 53 <svg width="300" height="100" data-expected-client-width="50"></svg> 54 </div> 55 56 <div class="webkit-box"> 57 <input type="text" data-expected-width="50"> 58 </div> 59 60 <div class="webkit-box"> 61 <input type="range" data-expected-width="50"> 62 </div> 63 64 <div class="webkit-box"> 65 <input type="button" value="XXXXXXX" data-expected-width="50"> 66 </div> 67 68 <div class="webkit-box"> 69 <input type="submit" value="XXXXXXX" data-expected-width="50"> 70 </div> 71 72 <div class="webkit-box"> 73 <input type="reset" value="XXXXXXX" data-expected-width="50"> 74 </div> 75 76 <div class="webkit-box"> 77 <textarea data-expected-width="50">XXXXXXX</textarea> 78 </div> 79 80 <div class="webkit-box"> 81 <select data-expected-width="50"> 82 <option>XXXXXXX</option> 83 </select> 84 </div> 85 86 <div class="webkit-box"> 87 <!-- This is a special case: <fieldset> is not compressible 88 in blink, webkit, or gecko. --> 89 <fieldset data-expected-width="140">XXXXXXX</fieldset> 90 </div> 91 92 <div class="webkit-box"> 93 <iframe data-expected-width="50"></iframe> 94 </div> 95 96 <div class="webkit-box"> 97 <button data-expected-width="50">XXXXXXX</button> 98 </div> 99 100 <div class="webkit-box"> 101 <canvas width="300" height="100" data-expected-width="50"></canvas> 102 </div> 103 104 <div class="webkit-box"> 105 <video controls data-expected-width="50"></video> 106 </div> 107 108 <div class="webkit-box"> 109 <audio controls data-expected-width="50"></audio> 110 </div> 111 112 <div class="webkit-box"> 113 <progress data-expected-width="50"></progress> 114 </div> 115 116 <div class="webkit-box"> 117 <meter data-expected-width="50"></meter> 118 </div> 119 120 <div class="webkit-box"> 121 <details data-expected-width="50">XXXXXXX</details> 122 </div> 123 124 <div class="webkit-box"> 125 <div style="width: 200px" data-expected-width="50">XXXXXXX</div> 126 </div> 127 </body>