flexbox-dyn-resize-001-ref.html (1433B)
1 <!DOCTYPE html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html> 7 <head> 8 <meta charset="utf-8"> 9 <title> 10 CSS Reftest Reference 11 </title> 12 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 13 <style> 14 .container { 15 width: 100px; 16 display: flex; 17 border: 1px solid purple; 18 margin-bottom: 15px; 19 } 20 .item { 21 margin: 2px; 22 background: lightblue; 23 } 24 .inline-box { 25 display: inline-block; 26 height: 10px; 27 width: 10px; 28 background: lightgray; 29 border: 1px solid black; 30 } 31 #change-width { 32 /* Using hardcoded CSS as reference for testcase's tweak: */ 33 width: 300px; 34 } 35 #change-flex { 36 /* Using hardcoded CSS as reference for testcase's tweak: */ 37 flex: 0 0 75px; 38 } 39 </style> 40 </head> 41 <body> 42 <div class="container"> 43 <div class="item" id="change-width"> 44 <div class="inline-box"></div><div class="inline-box"></div> 45 </div> 46 <div class="item"> 47 <div class="inline-box"></div><div class="inline-box"></div> 48 </div> 49 </div> 50 51 <div class="container"> 52 <div class="item" id="change-flex"> 53 <div class="inline-box"></div><div class="inline-box"></div> 54 </div> 55 <div class="item"> 56 <div class="inline-box"></div><div class="inline-box"></div> 57 </div> 58 </div> 59 </body> 60 </html>