webkit-box-item-shrink-002.html (3676B)
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 column-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-inline-box; 19 -webkit-box-orient: vertical; 20 width: 50px; 21 height: 50px; 22 border: 1px solid black; 23 margin-bottom: 5px; 24 } 25 .webkit-box > * { 26 /* Make the child block-level, to ensure that it's a flex item (otherwise it 27 * may get wrapped in an anonymous box which becomes the flex item). */ 28 display: block; 29 /* Allow the child to shrink. */ 30 -webkit-box-flex: 1; 31 32 writing-mode: vertical-rl; 33 font: 20px/1 Ahem; 34 background: lightblue; 35 36 /* Get rid of UA default styles. */ 37 border: 0; 38 padding: 0; 39 margin: 0; 40 } 41 </style> 42 43 <body onload="checkLayout('.webkit-box')"> 44 <div class="webkit-box"> 45 <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 30'></svg>" 46 data-expected-height="50"> 47 </div> 48 49 <div class="webkit-box"> 50 <img src="data:image/svg+xml,<svg width='100' height='300' xmlns='http://www.w3.org/2000/svg'></svg>" 51 data-expected-height="50"> 52 </div> 53 54 <div class="webkit-box"> 55 <svg width="100" height="300" data-expected-client-height="50"></svg> 56 </div> 57 58 <div class="webkit-box"> 59 <input type="text" data-expected-height="50"> 60 </div> 61 62 <div class="webkit-box"> 63 <input type="range" data-expected-height="50"> 64 </div> 65 66 <div class="webkit-box"> 67 <input type="button" value="XXXXXXX" data-expected-height="50"> 68 </div> 69 70 <div class="webkit-box"> 71 <input type="submit" value="XXXXXXX" data-expected-height="50"> 72 </div> 73 74 <div class="webkit-box"> 75 <input type="reset" value="XXXXXXX" data-expected-height="50"> 76 </div> 77 78 <div class="webkit-box"> 79 <textarea data-expected-height="50">XXXXXXX</textarea> 80 </div> 81 82 <div class="webkit-box"> 83 <select data-expected-height="50"> 84 <option>XXXXXXX</option> 85 </select> 86 </div> 87 88 <div class="webkit-box"> 89 <!-- This is a special case: <fieldset> is not compressible 90 in blink, webkit, or gecko. --> 91 <fieldset data-expected-height="140">XXXXXXX</fieldset> 92 </div> 93 94 <div class="webkit-box"> 95 <iframe data-expected-height="50"></iframe> 96 </div> 97 98 <div class="webkit-box"> 99 <button data-expected-height="50">XXXXXXX</button> 100 </div> 101 102 <div class="webkit-box"> 103 <canvas width="100" height="300" data-expected-height="50"></canvas> 104 </div> 105 106 <!-- We are not testing <video controls> and <audio controls> 107 because they work only horizontally. --> 108 109 <div class="webkit-box"> 110 <progress data-expected-height="50"></progress> 111 </div> 112 113 <div class="webkit-box"> 114 <meter data-expected-height="50"></meter> 115 </div> 116 117 <div class="webkit-box"> 118 <details data-expected-height="50">XXXXXXX</details> 119 </div> 120 121 <div class="webkit-box"> 122 <div style="height: 200px" data-expected-height="50">XXXXXXX</div> 123 </div> 124 </body>