| OLD | NEW | 
|   1 <!DOCTYPE html> |   1 <!DOCTYPE html> | 
|   2 <html> |   2 <html> | 
|   3 <style> |   3 <style> | 
|   4 .container { |   4 .container { | 
|   5     position: relative; |   5     position: relative; | 
|   6     background-color: pink; |   6     background-color: pink; | 
|   7     outline: 1px solid black; |   7     outline: 1px solid black; | 
|   8     display: inline-block; |   8     display: inline-block; | 
|   9 } |   9 } | 
|  10 .flexbox { |  10 .flexbox { | 
|  11     display: flex; |  11     display: flex; | 
|  12     background-color: grey; |  12     background-color: grey; | 
|  13     margin: 10px 20px 30px 40px; |  13     margin: 10px 20px 30px 40px; | 
|  14 } |  14 } | 
|  15 .title { |  15 .title { | 
|  16     margin-top: 1em; |  16     margin-top: 1em; | 
|  17 } |  17 } | 
|  18 .ltr { |  18 .ltr { | 
|  19     direction: ltr; |  19     direction: ltr; | 
|  20 } |  20 } | 
|  21 .rtl { |  21 .rtl { | 
|  22     direction: rtl; |  22     direction: rtl; | 
|  23 } |  23 } | 
|  24 .horizontal-tb { |  24 .horizontal-tb { | 
|  25     -webkit-writing-mode: horizontal-tb; |  25     -webkit-writing-mode: horizontal-tb; | 
|  26 } |  26 } | 
|  27 .horizontal-bt { |  | 
|  28     -webkit-writing-mode: horizontal-bt; |  | 
|  29 } |  | 
|  30 .vertical-rl { |  27 .vertical-rl { | 
|  31     -webkit-writing-mode: vertical-rl; |  28     -webkit-writing-mode: vertical-rl; | 
|  32 } |  29 } | 
|  33 .vertical-lr { |  30 .vertical-lr { | 
|  34     -webkit-writing-mode: vertical-lr; |  31     -webkit-writing-mode: vertical-lr; | 
|  35 } |  32 } | 
|  36 .row { |  33 .row { | 
|  37     flex-flow: row; |  34     flex-flow: row; | 
|  38 } |  35 } | 
|  39 .row-reverse { |  36 .row-reverse { | 
|  40     flex-flow: row-reverse; |  37     flex-flow: row-reverse; | 
|  41 } |  38 } | 
|  42 .column { |  39 .column { | 
|  43     flex-flow: column; |  40     flex-flow: column; | 
|  44 } |  41 } | 
|  45 .column-reverse { |  42 .column-reverse { | 
|  46     flex-flow: column-reverse; |  43     flex-flow: column-reverse; | 
|  47 } |  44 } | 
|  48 .flexbox > div { |  45 .flexbox > div { | 
|  49     margin: 13px 2px 17px 8px; |  46     margin: 13px 2px 17px 8px; | 
|  50     background-color: blue; |  47     background-color: blue; | 
|  51 } |  48 } | 
|  52 </style> |  49 </style> | 
|  53 <script src="../../resources/check-layout.js"></script> |  50 <script src="../../resources/check-layout.js"></script> | 
|  54 <body onload="checkLayout('.flexbox')"> |  51 <body onload="checkLayout('.flexbox')"> | 
|  55  |  52  | 
|  56 <script> |  53 <script> | 
|  57  |  54  | 
|  58 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-r
    l']; |  55 var writingModes = ['horizontal-tb', 'vertical-lr', 'vertical-rl']; | 
|  59 var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse']; |  56 var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse']; | 
|  60 var directions = ['rtl', 'ltr']; |  57 var directions = ['rtl', 'ltr']; | 
|  61  |  58  | 
|  62 writingModes.forEach(function(writingMode) { |  59 writingModes.forEach(function(writingMode) { | 
|  63     flexFlows.forEach(function(flexFlow) { |  60     flexFlows.forEach(function(flexFlow) { | 
|  64         directions.forEach(function(direction) { |  61         directions.forEach(function(direction) { | 
|  65             var flexboxClassName = writingMode + ' ' + direction + ' ' + flexFlo
    w; |  62             var flexboxClassName = writingMode + ' ' + direction + ' ' + flexFlo
    w; | 
|  66             var title = document.createElement('div'); |  63             var title = document.createElement('div'); | 
|  67             title.className = 'title'; |  64             title.className = 'title'; | 
|  68             title.innerHTML = flexboxClassName; |  65             title.innerHTML = flexboxClassName; | 
| (...skipping 11 matching lines...) Expand all  Loading... | 
|  80                 '<div style="flex: 1 auto; width: 20px; height: 20px;" ' + flexI
    temExpectations + '></div>\n' + |  77                 '<div style="flex: 1 auto; width: 20px; height: 20px;" ' + flexI
    temExpectations + '></div>\n' + | 
|  81             '</div>'; |  78             '</div>'; | 
|  82  |  79  | 
|  83             document.body.appendChild(container); |  80             document.body.appendChild(container); | 
|  84         }) |  81         }) | 
|  85     }) |  82     }) | 
|  86 }) |  83 }) | 
|  87 </script> |  84 </script> | 
|  88 </body> |  85 </body> | 
|  89 </html> |  86 </html> | 
| OLD | NEW |