third_party/WebKit/LayoutTests/css3/flexbox/true-centering.html

   1 <!DOCTYPE html>
   2 <html>
   3 <style>
   4 .flexbox {
   5     width: 100px;
   6     height: 100px;
   7     display: flex;
   8     background-color: #aaa;
   9     position: relative;
  10 }
  11 .flexbox > div {
  12     height: 110px;
  13     width: 60px;
  14     flex: none;
  15 }
  16 .vertical > div {
  17     width: 110px;
  18     height: 60px;
  19 }
  20 .flexbox :nth-child(1) {
  21     background-color: blue;
  22 }
  23 .flexbox :nth-child(2) {
  24     background-color: green;
  25 }
  26 .ltr {
  27     direction: ltr;
  28 }
  29 .rtl {
  30     direction: rtl;
  31 }
  32 .horizontal-tb {
  33     -webkit-writing-mode: horizontal-tb;
  34 }
  35 .horizontal-bt {
  36     -webkit-writing-mode: horizontal-bt;
  37 }
  38 .vertical-rl {
  39     -webkit-writing-mode: vertical-rl;
  40 }
  41 .vertical-lr {
  42     -webkit-writing-mode: vertical-lr;
  43 }
  44 .row-reverse {
  45     flex-flow: row-reverse;
  46 }
  47 .column {
  48     flex-flow: column;
  49 }
  50 .column-reverse {
  51     flex-flow: column-reverse;
  52 }
  53 </style>
  54 <script src="../../resources/check-layout.js"></script>
  55 <body onload="checkLayout('.flexbox')">
  56
  57 <div class="flexbox" style="align-items: center; justify-content: center;">
  58     <div data-offset-x="-10" data-offset-y="-5"></div>
  59     <div data-offset-x="50" data-offset-y="-5"></div>
  60 </div>
  61
  62 <div class="flexbox row-reverse" style="align-items: center; justify-content: center;">
  63     <div data-offset-x="50" data-offset-y="-5"></div>
  64     <div data-offset-x="-10" data-offset-y="-5"></div>
  65 </div>
  66
  67 <div class="flexbox column vertical" style="align-items: center; justify-content: center;">
  68     <div data-offset-x="-5" data-offset-y="-10"></div>
  69     <div data-offset-x="-5" data-offset-y="50"></div>
  70 </div>
  71
  72 <div class="flexbox column-reverse vertical" style="align-items: center; justify-content: center;">
  73     <div data-offset-x="-5" data-offset-y="50"></div>
  74     <div data-offset-x="-5" data-offset-y="-10"></div>
  75 </div>
  76
  77 <div class="flexbox" style="align-items: center; justify-content: space-around;">
  78     <div data-offset-x="-10" data-offset-y="-5"></div>
  79     <div data-offset-x="50" data-offset-y="-5"></div>
  80 </div>
  81
  82 <div class="flexbox" style="align-items: flex-start; justify-content: flex-start;">
  83     <div data-offset-x=0 data-offset-y=0></div>
  84     <div data-offset-x=60 data-offset-y=0></div>
  85 </div>
  86
  87 <div class="flexbox" style="align-items: flex-start; justify-content: space-between;">
  88     <div data-offset-x=0 data-offset-y=0></div>
  89     <div data-offset-x=60 data-offset-y=0></div>
  90 </div>
  91
  92 <script>
  93 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-rl'];
  94 var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse'];
  95 var directions = ['ltr', 'rtl'];
  96
  97 var verticalFirstChildExpected = 'data-offset-x="-5" data-offset-y="-10"';
  98 var verticalLastChildExpected = 'data-offset-x="-5" data-offset-y="50"';
  99 var horizontalFirstChildExpected = 'data-offset-x="-10" data-offset-y="-5"';
 100 var horizontalLastChildExpected = 'data-offset-x="50" data-offset-y="-5"';
 101
 102 writingModes.forEach(function(writingMode) {
 103     flexFlows.forEach(function(flexFlow) {
 104         directions.forEach(function(direction) {
 105             var flexboxClassName = writingMode + ' ' + direction + ' ' + flexFlow;
 106
 107             var title = document.createElement('div');
 108             title.className = 'title';
 109             title.innerHTML = flexboxClassName;
 110             document.body.appendChild(title);
 111
 112             var isColumn = flexFlow.indexOf('column') != -1;
 113             var isHorizontal = (writingMode.indexOf('horizontal') != -1) ? !isColumn : isColumn;
 114             if (!isHorizontal)
 115                 flexboxClassName += ' vertical';
 116
 117             var isReverse;
 118             switch (flexFlow) {
 119                 case 'row':
 120                     isReverse = direction == 'rtl';
 121                     break;
 122                 case 'row-reverse':
 123                     isReverse = direction == 'ltr';
 124                     break;
 125                 case 'column':
 126                     isReverse = writingMode == 'vertical-rl' || writingMode == 'horizontal-bt';
 127                     break;
 128                 case 'column-reverse':
 129                     isReverse = writingMode == 'vertical-lr' || writingMode == 'horizontal-tb';
 130                     break;
 131             }
 132
 133             var firstChildExpected, lastChildExpected;
 134             if (isHorizontal) {
 135                 firstChildExpected = isReverse ? horizontalLastChildExpected : horizontalFirstChildExpected;
 136                 lastChildExpected = isReverse ? horizontalFirstChildExpected : horizontalLastChildExpected;
 137             } else {
 138                 firstChildExpected = isReverse ? verticalLastChildExpected : verticalFirstChildExpected;
 139                 lastChildExpected = isReverse ? verticalFirstChildExpected : verticalLastChildExpected;
 140             }
 141
 142             var container = document.createElement('div');
 143             container.innerHTML = '<div class="flexbox ' + flexboxClassName + '" style="align-items: center; justify-content: center;">\n' +
 144                 '<div ' + firstChildExpected + '></div>\n' +
 145                 '<div ' + lastChildExpected + '></div>\n' +
 146             '</div>';
 147
 148             document.body.appendChild(container);
 149         })
 150     })
 151 })
 152 </script>
 153
 154 </body>
 155 </html>