| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <link href="resources/flexbox.css" rel="stylesheet"> | 3 <link href="resources/flexbox.css" rel="stylesheet"> |
| 4 <style> | 4 <style> |
| 5 body { | 5 body { |
| 6 margin: 0; | 6 margin: 0; |
| 7 } | 7 } |
| 8 | 8 |
| 9 .flexbox { | 9 .flexbox { |
| 10 background-color: #aaa; | 10 background-color: #aaa; |
| (...skipping 26 matching lines...) Expand all Loading... |
| 37 .flexbox > :nth-child(4) { | 37 .flexbox > :nth-child(4) { |
| 38 background-color: orange; | 38 background-color: orange; |
| 39 } | 39 } |
| 40 .child-div { | 40 .child-div { |
| 41 background-color: yellow; | 41 background-color: yellow; |
| 42 } | 42 } |
| 43 </style> | 43 </style> |
| 44 <script src="../../resources/check-layout.js"></script> | 44 <script src="../../resources/check-layout.js"></script> |
| 45 <body onload="checkLayout('.flexbox')"> | 45 <body onload="checkLayout('.flexbox')"> |
| 46 <div class="flexbox column horizontal"> | 46 <div class="flexbox column horizontal"> |
| 47 <div data-expected-height="10" data-offset-y="0" style="-webkit-flex: 1 0 10px
; -moz-flex: 1 0 10px"></div> | 47 <div data-expected-height="10" data-offset-y="0" style="flex: 1 0 10px; -moz-f
lex: 1 0 10px"></div> |
| 48 <div data-expected-height="10" data-offset-y="10" style="height: 10px;"></div> | 48 <div data-expected-height="10" data-offset-y="10" style="height: 10px;"></div> |
| 49 <div data-expected-height="10" data-offset-y="20"><div data-expected-height="1
0" data-offset-y="20" style="height: 10px"></div></div> | 49 <div data-expected-height="10" data-offset-y="20"><div data-expected-height="1
0" data-offset-y="20" style="height: 10px"></div></div> |
| 50 </div> | 50 </div> |
| 51 | 51 |
| 52 <!-- The last div is sized to 0 because there is no available space, however its
child overflows. --> | 52 <!-- The last div is sized to 0 because there is no available space, however its
child overflows. --> |
| 53 <div class="flexbox column horizontal"> | 53 <div class="flexbox column horizontal"> |
| 54 <div data-expected-height="0" data-offset-y="0" style="-webkit-flex: 1; -moz-f
lex: 1"></div> | 54 <div data-expected-height="0" data-offset-y="0" style="flex: 1; -moz-flex: 1">
</div> |
| 55 <div data-expected-height="10" data-offset-y="0" style="height: 10px;"></div> | 55 <div data-expected-height="10" data-offset-y="0" style="height: 10px;"></div> |
| 56 <div data-expected-height="10" data-offset-y="10" style="-webkit-flex: 1 auto;
-moz-flex: 1 auto"><div style="height: 10px"></div></div> | 56 <div data-expected-height="10" data-offset-y="10" style="flex: 1 auto; -moz-fl
ex: 1 auto"><div style="height: 10px"></div></div> |
| 57 <div data-expected-height="10" data-offset-y="20" style="min-height: 0; -webki
t-flex: 1; -moz-flex: 1"><div data-expected-height="10" data-offset-y="20" class
="child-div" style="height: 10px"></div></div> | 57 <div data-expected-height="10" data-offset-y="20" style="min-height: 0; flex:
1; -moz-flex: 1"><div data-expected-height="10" data-offset-y="20" class="child-
div" style="height: 10px"></div></div> |
| 58 </div> | 58 </div> |
| 59 | 59 |
| 60 <div class="flexbox column horizontal"> | 60 <div class="flexbox column horizontal"> |
| 61 <div data-expected-height="10" data-offset-y="10" style="-webkit-flex: 1 0 10p
x; -moz-flex: 1 0 10px; margin-top: 10px;"></div> | 61 <div data-expected-height="10" data-offset-y="10" style="flex: 1 0 10px; -moz-
flex: 1 0 10px; margin-top: 10px;"></div> |
| 62 <div data-expected-height="10" data-offset-y="20" style="height: 10px; margin-
bottom: 20px;"></div> | 62 <div data-expected-height="10" data-offset-y="20" style="height: 10px; margin-
bottom: 20px;"></div> |
| 63 <div data-expected-height="20" data-offset-y="50" style="padding-top: 10px"><d
iv data-expected-height="10" data-offset-y="60" style="height: 10px"></div></div
> | 63 <div data-expected-height="20" data-offset-y="50" style="padding-top: 10px"><d
iv data-expected-height="10" data-offset-y="60" style="height: 10px"></div></div
> |
| 64 </div> | 64 </div> |
| 65 | 65 |
| 66 <!-- Same as previous test case but with a justify-content set. Since there's n
o | 66 <!-- Same as previous test case but with a justify-content set. Since there's n
o |
| 67 available space, it should layout the same. --> | 67 available space, it should layout the same. --> |
| 68 <div class="flexbox column horizontal justify-content-space-between"> | 68 <div class="flexbox column horizontal justify-content-space-between"> |
| 69 <div data-expected-height="10" data-offset-y="10" style="-webkit-flex: 1 0 10p
x; -moz-flex: 1 0 10px; margin-top: 10px;"></div> | 69 <div data-expected-height="10" data-offset-y="10" style="flex: 1 0 10px; -moz-
flex: 1 0 10px; margin-top: 10px;"></div> |
| 70 <div data-expected-height="10" data-offset-y="20" style="height: 10px; margin-
bottom: 20px;"></div> | 70 <div data-expected-height="10" data-offset-y="20" style="height: 10px; margin-
bottom: 20px;"></div> |
| 71 <div data-expected-height="20" data-offset-y="50" style="padding-top: 10px"><d
iv data-expected-height="10" data-offset-y="60" style="height: 10px"></div></div
> | 71 <div data-expected-height="20" data-offset-y="50" style="padding-top: 10px"><d
iv data-expected-height="10" data-offset-y="60" style="height: 10px"></div></div
> |
| 72 </div> | 72 </div> |
| 73 | 73 |
| 74 <div class="flexbox column horizontal" data-expected-height="20"> | 74 <div class="flexbox column horizontal" data-expected-height="20"> |
| 75 <div data-expected-height="10" data-offset-y="0" style="-webkit-flex: 0 1 auto
; -moz-flex: 0 1 auto"><div style="height: 10px"></div></div> | 75 <div data-expected-height="10" data-offset-y="0" style="flex: 0 1 auto; -moz-f
lex: 0 1 auto"><div style="height: 10px"></div></div> |
| 76 <div data-expected-height="10" data-offset-y="10" style="-webkit-flex: 0 2 aut
o; -moz-flex: 0 2 auto"><div style="height: 10px"></div></div> | 76 <div data-expected-height="10" data-offset-y="10" style="flex: 0 2 auto; -moz-
flex: 0 2 auto"><div style="height: 10px"></div></div> |
| 77 </div> | 77 </div> |
| 78 | 78 |
| 79 <div class="flexbox column horizontal" style="min-height: 10px" data-expected-he
ight="20"> | 79 <div class="flexbox column horizontal" style="min-height: 10px" data-expected-he
ight="20"> |
| 80 <div data-expected-height="10" data-offset-y="0" style="-webkit-flex: 0 1 auto
; -moz-flex: 0 1 auto"><div style="height: 10px"></div></div> | 80 <div data-expected-height="10" data-offset-y="0" style="flex: 0 1 auto; -moz-f
lex: 0 1 auto"><div style="height: 10px"></div></div> |
| 81 <div data-expected-height="10" data-offset-y="10" style="-webkit-flex: 0 2 aut
o; -moz-flex: 0 2 auto"><div style="height: 10px"></div></div> | 81 <div data-expected-height="10" data-offset-y="10" style="flex: 0 2 auto; -moz-
flex: 0 2 auto"><div style="height: 10px"></div></div> |
| 82 </div> | 82 </div> |
| 83 | 83 |
| 84 <div class="flexbox column horizontal" style="min-height: 5px; max-height: 17px;
" data-expected-height="17"> | 84 <div class="flexbox column horizontal" style="min-height: 5px; max-height: 17px;
" data-expected-height="17"> |
| 85 <div data-expected-height="9" data-offset-y="0" style="min-height: 0; -webkit-
flex: 0 1 auto; -moz-flex: 0 1 auto"><div style="height: 10px"></div></div> | 85 <div data-expected-height="9" data-offset-y="0" style="min-height: 0; flex: 0
1 auto; -moz-flex: 0 1 auto"><div style="height: 10px"></div></div> |
| 86 <div data-expected-height="8" data-offset-y="9" style="min-height: 0; -webkit-
flex: 0 2 auto; -moz-flex: 0 2 auto"><div style="height: 10px"></div></div> | 86 <div data-expected-height="8" data-offset-y="9" style="min-height: 0; flex: 0
2 auto; -moz-flex: 0 2 auto"><div style="height: 10px"></div></div> |
| 87 </div> | 87 </div> |
| 88 | 88 |
| 89 <div class="flexbox column horizontal" style="min-height: 5px; max-height: 30px;
padding-top: 1px; padding-bottom: 2px;" data-expected-height="33"> | 89 <div class="flexbox column horizontal" style="min-height: 5px; max-height: 30px;
padding-top: 1px; padding-bottom: 2px;" data-expected-height="33"> |
| 90 <div data-expected-height="15" data-offset-y="1" style="min-height: 0; -webkit
-flex: 0 1 auto; -moz-flex: 0 1 auto"><div style="height: 20px"></div></div> | 90 <div data-expected-height="15" data-offset-y="1" style="min-height: 0; flex: 0
1 auto; -moz-flex: 0 1 auto"><div style="height: 20px"></div></div> |
| 91 <div data-expected-height="15" data-offset-y="16" style="min-height: 0; -webki
t-flex: 0 1 auto; -moz-flex: 0 1 auto"><div style="height: 20px"></div></div> | 91 <div data-expected-height="15" data-offset-y="16" style="min-height: 0; flex:
0 1 auto; -moz-flex: 0 1 auto"><div style="height: 20px"></div></div> |
| 92 </div> | 92 </div> |
| 93 | 93 |
| 94 <div class="flexbox column horizontal"> | 94 <div class="flexbox column horizontal"> |
| 95 <div data-expected-client-height="10" data-offset-y="0" style="overflow: scrol
l"><div data-expected-height=10 style="height: 10px"></div></div> | 95 <div data-expected-client-height="10" data-offset-y="0" style="overflow: scrol
l"><div data-expected-height=10 style="height: 10px"></div></div> |
| 96 </div> | 96 </div> |
| 97 | 97 |
| 98 <div class="flexbox column vertical"> | 98 <div class="flexbox column vertical"> |
| 99 <div data-expected-width="10" data-offset-x="20" style="-webkit-flex: 1 0 10px
; -moz-flex: 1 0 10px"></div> | 99 <div data-expected-width="10" data-offset-x="20" style="flex: 1 0 10px; -moz-f
lex: 1 0 10px"></div> |
| 100 <div data-expected-width="10" data-offset-x="10" style="width: 10px;"></div> | 100 <div data-expected-width="10" data-offset-x="10" style="width: 10px;"></div> |
| 101 <div data-expected-width="10" data-offset-x="0"><div data-expected-width="10"
data-offset-x="0" style="width: 10px"></div></div> | 101 <div data-expected-width="10" data-offset-x="0"><div data-expected-width="10"
data-offset-x="0" style="width: 10px"></div></div> |
| 102 </div> | 102 </div> |
| 103 | 103 |
| 104 <!-- The first div overflows to the left, so give it a margin-left so we can see
box it paints. --> | 104 <!-- The first div overflows to the left, so give it a margin-left so we can see
box it paints. --> |
| 105 <div class="flexbox column vertical" style="margin-left: 100px;"> | 105 <div class="flexbox column vertical" style="margin-left: 100px;"> |
| 106 <div data-expected-width="50" data-offset-x="20" style="min-width: 0; -webkit-
flex: 1; -moz-flex: 1"><div data-expected-width="50" data-offset-x="20" class="c
hild-div" style="width: 50px"></div></div> | 106 <div data-expected-width="50" data-offset-x="20" style="min-width: 0; flex: 1;
-moz-flex: 1"><div data-expected-width="50" data-offset-x="20" class="child-div
" style="width: 50px"></div></div> |
| 107 <div data-expected-width="0" data-offset-x="20" style="-webkit-flex: 1; -moz-f
lex: 1"></div> | 107 <div data-expected-width="0" data-offset-x="20" style="flex: 1; -moz-flex: 1">
</div> |
| 108 <div data-expected-width="10" data-offset-x="10" style="width: 10px;"></div> | 108 <div data-expected-width="10" data-offset-x="10" style="width: 10px;"></div> |
| 109 <div data-expected-width="10" data-offset-x="0" style="-webkit-flex: 1 auto; -
moz-flex: 1 auto"><div style="width: 10px"></div></div> | 109 <div data-expected-width="10" data-offset-x="0" style="flex: 1 auto; -moz-flex
: 1 auto"><div style="width: 10px"></div></div> |
| 110 </div> | 110 </div> |
| 111 | 111 |
| 112 </body> | 112 </body> |
| 113 </html> | 113 </html> |
| OLD | NEW |