third_party/WebKit/LayoutTests/css3/flexbox/flex-align-end.html

   1 <!DOCTYPE html>
   2 <html>
   3 <link href="resources/flexbox.css" rel="stylesheet">
   4 <style>
   5 .flexbox {
   6     margin: 120px;
   7     width: 100px;
   8     height: 100px;
   9     background-color: #aaa;
  10     position: relative;
  11     outline: 2px solid red;
  12 }
  13 .title {
  14     margin-bottom: 10px;
  15 }
  16 .flexbox > div {
  17     height: 110px;
  18     width: 110px;
  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 </style>
  45 <script src="../../resources/check-layout.js"></script>
  46 <body onload="checkLayout('.flexbox')">
  47
  48 <script>
  49 function positionAsString(position)
  50 {
  51     return 'data-offset-x="' + position[0] + '" data-offset-y="' + position[1] + '"';
  52 }
  53
  54 var expectations = {
  55     'horizontal-tb': {
  56         'row': { rtl: [-10, -10], ltr: [0, -10]},
  57         'row-reverse': { rtl: [0, -10], ltr: [-10, -10]},
  58         'column': { rtl: [0, 0], ltr: [-10, 0]},
  59         'column-reverse': { rtl: [0, -10], ltr: [-10, -10]}
  60     },
  61     'horizontal-bt': {
  62         'row': { rtl: [-10, 0], ltr: [0, 0]},
  63         'row-reverse': { rtl: [0, 0], ltr: [-10, 0]},
  64         'column': { rtl: [0, -10], ltr: [-10, -10]},
  65         'column-reverse': { rtl: [0, 0], ltr: [-10, 0]}
  66     },
  67     'vertical-lr': {
  68         'row': { rtl: [-10, -10], ltr: [-10, 0]},
  69         'row-reverse': { rtl: [-10, 0], ltr: [-10, -10]},
  70         'column': { rtl: [0, 0], ltr: [0, -10]},
  71         'column-reverse': { rtl: [-10, 0], ltr: [-10, -10]}
  72     },
  73     'vertical-rl': {
  74         'row': { rtl: [0, -10], ltr: [0, 0]},
  75         'row-reverse': { rtl: [0, 0], ltr: [0, -10]},
  76         'column': { rtl: [-10, 0], ltr: [-10, -10]},
  77         'column-reverse': { rtl: [0, 0], ltr: [0, -10]}
  78     }
  79 }
  80
  81 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-rl'];
  82 var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse'];
  83 var directions = ['ltr', 'rtl'];
  84
  85 writingModes.forEach(function(writingMode) {
  86     flexFlows.forEach(function(flexFlow) {
  87         directions.forEach(function(direction) {
  88             var flexboxClassName = writingMode + ' ' + direction + ' ' + flexFlow;
  89
  90             var title = document.createElement('div');
  91             title.className = 'title';
  92             title.innerHTML = flexboxClassName;
  93             document.body.appendChild(title);
  94
  95             var container = document.createElement('div');
  96             container.innerHTML = '<div class="flexbox align-items-flex-end ' + flexboxClassName + '">\n' +
  97                 '<div class="flex-none" ' + positionAsString(expectations[writingMode][flexFlow][direction]) + '></div><div class="flex-none"></div>\n' +
  98             '</div>';
  99
 100             document.body.appendChild(container);
 101         })
 102     })
 103 })
 104 </script>
 105
 106 </body>
 107 </html>