flexbox-flex-basis-content-004-ref.html (2570B)
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 height: 50px; 17 } 18 19 .item { 20 border: 2px solid teal; 21 float: left; /* Use floated elements as a reference for (hopefully) 22 max-content sized flex items in testcase. */ 23 } 24 ib { 25 display: inline-block; 26 background: blue; 27 border: 1px solid gray; 28 width: 15px; 29 height: 10px; 30 } 31 float { 32 float: left; 33 background: fuchsia; 34 border: 1px solid gray; 35 width: 15px; 36 height: 10px; 37 } 38 canvas { 39 background: brown; 40 border: 1px solid gray; 41 } 42 .innerFlex { 43 display: flex; 44 flex-direction: column; 45 } 46 innerItem { 47 background: salmon; 48 border: 1px solid gray; 49 height: 10px; 50 width: 15px; 51 flex: none; 52 } 53 </style> 54 </head> 55 <body> 56 <!-- In testcase, flex item has several inline-blocks 57 (no spaces, to avoid any text-layout dependency): --> 58 <div class="container"> 59 <div class="item"><ib></ib><ib></ib><ib></ib></div> 60 </div> 61 62 <!-- In testcase, flex item has several floats: --> 63 <div class="container"> 64 <div class="item"> 65 <float></float> 66 <float></float> 67 <float></float> 68 </div> 69 </div> 70 71 <!-- In testcase, flex item has several inline replaced elements: 72 (no spaces, to avoid any text-layout dependency): --> 73 <div class="container"> 74 <div class="item"> 75 <canvas width="15" height="10"></canvas 76 ><canvas width="15" height="10"></canvas 77 ><canvas width="15" height="10"></canvas> 78 </div> 79 </div> 80 81 <!-- In testcase, flex item *is* a replaced element: --> 82 <div class="container"> 83 <canvas class="item" width="25" height="10"></canvas> 84 </div> 85 86 <!-- In testcase, flex item is itself a flex container: --> 87 <div class="container"> 88 <div class="item innerFlex"> 89 <innerItem></innerItem> 90 <innerItem></innerItem> 91 <innerItem></innerItem> 92 </div> 93 </div> 94 95 <!-- In testcase, flex item is itself a multi-line flex container: --> 96 <div class="container"> 97 <div class="item innerFlex" style="flex-wrap: wrap"> 98 <innerItem></innerItem> 99 <innerItem></innerItem> 100 <innerItem></innerItem> 101 </div> 102 </div> 103 104 </body> 105 </html>