flexbox-flex-basis-content-003-ref.html (2524B)
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 <title>CSS Reftest Reference</title> 9 <meta charset="utf-8"> 10 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 11 <style> 12 .container { 13 clear: both; /* In this reference case, we use floats instead of 14 flex items (see below), so the container just 15 needs to reset the float state for each example. */ 16 } 17 18 .item { 19 border: 2px solid teal; 20 float: left; /* Use floated elements as a reference for (hopefully) 21 max-content sized flex items in testcase. */ 22 } 23 ib { 24 display: inline-block; 25 background: blue; 26 border: 1px solid gray; 27 width: 15px; 28 height: 10px; 29 } 30 float { 31 float: left; 32 background: fuchsia; 33 border: 1px solid gray; 34 width: 15px; 35 height: 10px; 36 } 37 canvas { 38 background: brown; 39 border: 1px solid gray; 40 } 41 .innerFlex { 42 display: flex; 43 } 44 innerItem { 45 background: salmon; 46 border: 1px solid gray; 47 height: 10px; 48 width: 15px; 49 flex: none; 50 } 51 </style> 52 </head> 53 <body> 54 <!-- In testcase, flex item has several inline-blocks 55 (no spaces, to avoid any text-layout dependency): --> 56 <div class="container"> 57 <div class="item"><ib></ib><ib></ib><ib></ib></div> 58 </div> 59 60 <!-- In testcase, flex item has several floats: --> 61 <div class="container"> 62 <div class="item"> 63 <float></float> 64 <float></float> 65 <float></float> 66 </div> 67 </div> 68 69 <!-- In testcase, flex item has several inline replaced elements: 70 (no spaces, to avoid any text-layout dependency): --> 71 <div class="container"> 72 <div class="item"> 73 <canvas width="15" height="10"></canvas 74 ><canvas width="15" height="10"></canvas 75 ><canvas width="15" height="10"></canvas> 76 </div> 77 </div> 78 79 <!-- In testcase, flex item *is* a replaced element: --> 80 <div class="container"> 81 <canvas class="item" width="25" height="10"></canvas> 82 </div> 83 84 <!-- In testcase, flex item is itself a flex container: --> 85 <div class="container"> 86 <div class="item innerFlex"> 87 <innerItem></innerItem> 88 <innerItem></innerItem> 89 <innerItem></innerItem> 90 </div> 91 </div> 92 93 <!-- In testcase, flex item is itself a multi-line flex container: --> 94 <div class="container"> 95 <div class="item innerFlex" style="flex-wrap: wrap"> 96 <innerItem></innerItem> 97 <innerItem></innerItem> 98 <innerItem></innerItem> 99 </div> 100 </div> 101 102 </body> 103 </html>