flexbox-justify-content-horiz-006-ref.xhtml (5194B)
1 <?xml version="1.0" encoding="UTF-8"?> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html xmlns="http://www.w3.org/1999/xhtml"> 7 <head> 8 <title>CSS Reftest Reference</title> 9 <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"/> 10 <style> 11 body { line-height: 0; } 12 13 div.flexbox { 14 width: 200px; 15 margin-bottom: 2px; 16 direction: rtl; 17 } 18 div.flexbox > * { 19 display: inline-block; 20 } 21 div.a { 22 height: 20px; 23 width: 10px; 24 background: lightgreen; 25 } 26 div.b { 27 height: 20px; 28 width: 50px; 29 background: pink; 30 } 31 div.c { 32 height: 20px; 33 width: 100px; 34 background: orange; 35 } 36 .centerParent { 37 text-align: center; 38 } 39 .center { 40 display: inline-block; 41 } 42 </style> 43 </head> 44 <body> 45 46 <!-- default (start) --> 47 <div class="flexbox"> 48 <div class="a"/> 49 </div> 50 <div class="flexbox"> 51 <div class="a"/><div class="b"></div> 52 </div> 53 <div class="flexbox"> 54 <div class="a"/><div class="b"/><div class="c"/> 55 </div> 56 57 <!-- flex-start --> 58 <div class="flexbox"> 59 <div class="a"/> 60 </div> 61 <div class="flexbox"> 62 <div class="a"/><div class="b"/> 63 </div> 64 <div class="flexbox"> 65 <div class="a"/><div class="b"/><div class="c"/> 66 </div> 67 68 <!-- flex-end --> 69 <div class="flexbox" style="text-align: left"> 70 <div class="a"/> 71 </div> 72 <div class="flexbox" style="text-align: left;"> 73 <div class="a"/><div class="b"/> 74 </div> 75 <div class="flexbox" style="text-align: left;"> 76 <div class="a"/><div class="b"/><div class="c"/> 77 </div> 78 79 <!-- center --> 80 <div class="centerParent"> 81 <div class="flexbox"> 82 <div class="a"/> 83 </div> 84 </div> 85 <div class="centerParent"> 86 <div class="flexbox"> 87 <div class="a"/><div class="b"/> 88 </div> 89 </div> 90 <div class="centerParent"> 91 <div class="flexbox"> 92 <div class="a"/><div class="b"/><div class="c"/> 93 </div> 94 </div> 95 96 <!-- space-between --> 97 <div class="flexbox"> 98 <div class="a"/> 99 </div> 100 <div class="flexbox"> 101 <div class="a"/><div class="b" style="float: left"/> 102 </div> 103 <div class="flexbox"> 104 <div class="a" style="display:block; float: right"/> 105 <div class="c" style="float:left"/> 106 <!-- Use fixed-size margins to subtract space for "a" and "c", and then 107 use auto margins to center 'b' within the remaining space --> 108 <div style="display: block; margin-right: 10px; margin-left: 100px"> 109 <div class="b" style="margin: auto"/> 110 </div> 111 </div> 112 113 <!-- space-around --> 114 <!-- Center "a" here just as we did above in the "center" case. --> 115 <div class="centerParent"> 116 <div class="flexbox"> 117 <div class="a"/> 118 </div> 119 </div> 120 <!-- For the rest, we'll use a flex container with invisible flexible items 121 instead of packing space. That's simpler than trying to hack up 122 a width-independent reference case for "justify-content: space-around". 123 (There are other reftests to ensure that basic flex container 124 behavior is correct, so it's safe to rely on it here.) --> 125 <div class="flexbox" style="display: flex"> 126 <div style="flex: 0.5"/> 127 <div class="a"/> 128 <div style="flex: 1"/> 129 <div class="b"/> 130 <div style="flex: 0.5"/> 131 </div> 132 <div class="flexbox" style="display: flex"> 133 <div style="flex: 0.5"/> 134 <div class="a"/> 135 <div style="flex: 1"/> 136 <div class="b"/> 137 <div style="flex: 1"/> 138 <div class="c"/> 139 <div style="flex: 0.5"/> 140 </div> 141 142 <!-- space-evenly --> 143 <!-- Center "a" here just as we did above in the "center" case. --> 144 <div class="centerParent"> 145 <div class="flexbox"> 146 <div class="a"/> 147 </div> 148 </div> 149 <!-- As above with space-around, we'll use a flex container with invisible 150 flexible items instead of packing space. --> 151 <div class="flexbox" style="display: flex"> 152 <div style="flex: 1"/> 153 <div class="a"/> 154 <div style="flex: 1"/> 155 <div class="b"/> 156 <div style="flex: 1"/> 157 </div> 158 <div class="flexbox" style="display: flex"> 159 <div style="flex: 1"/> 160 <div class="a"/> 161 <div style="flex: 1"/> 162 <div class="b"/> 163 <div style="flex: 1"/> 164 <div class="c"/> 165 <div style="flex: 1"/> 166 </div> 167 168 169 <!-- left --> 170 <div class="flexbox" style="text-align:left"> 171 <div class="a"/> 172 </div> 173 <div class="flexbox" style="text-align:left"> 174 <div class="a"/><div class="b"/> 175 </div> 176 <div class="flexbox" style="text-align:left"> 177 <div class="a"/><div class="b"/><div class="c"/> 178 </div> 179 180 <!-- right --> 181 <div class="flexbox"> 182 <div class="a"/> 183 </div> 184 <div class="flexbox"> 185 <div class="a"/><div class="b"/> 186 </div> 187 <div class="flexbox"> 188 <div class="a"/><div class="b"/><div class="c"/> 189 </div> 190 191 </body> 192 </html>