third_party/WebKit/LayoutTests/css3/flexbox/flex-align-baseline.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>
  46 if (window.testRunner)
  47     testRunner.dumpAsText();
  48 </script>
  49 <script src="../../resources/js-test.js"></script>
  50 <body>
  51 <script>
  52 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-rl'];
  53 var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse'];
  54 var directions = ['ltr', 'rtl'];
  55
  56 writingModes.forEach(function(writingMode) {
  57     flexFlows.forEach(function(flexFlow) {
  58         directions.forEach(function(direction) {
  59             var flexboxClassName = writingMode + ' ' + direction + ' ' + flexFlow;
  60
  61             var title = document.createElement('div');
  62             title.className = 'title';
  63             title.innerHTML = flexboxClassName;
  64             document.body.appendChild(title);
  65
  66             var isColumn = flexFlow.indexOf('column') != -1;
  67             var isHorizontalFlow = (writingMode.indexOf('horizontal') != -1) ? !isColumn : isColumn;
  68
  69             var container = document.createElement('div');
  70             container.innerHTML = '<div class="flexbox ' + flexboxClassName + '" style="align-items: baseline;">' +
  71                 '<div><div style="display:inline-block;"></div></div>' +
  72                 '<div style="margin-top:20px;"><div style="display:inline-block;"></div></div>' +
  73             '</div>';
  74
  75             container.firstChild.isHorizontal = writingMode.indexOf('horizontal') != -1;
  76             container.firstChild.isHorizontalFlow = isHorizontalFlow;
  77             container.firstChild.isColumn = isColumn;
  78             container.firstChild.isLTR = direction == 'ltr';
  79             document.body.appendChild(container);
  80         })
  81     })
  82 })
  83
  84 // Sanity check that the align-items:baseline flex items align to the same cross-axis position.
  85 var flexboxen = document.getElementsByClassName('flexbox');
  86 for (var i = 0, len = flexboxen.length; i < len; i++) {
  87     var flexbox = flexboxen[i];
  88     firstChild = flexbox.firstChild;
  89     lastChild = flexbox.lastChild;
  90     if (!flexbox.isHorizontal && flexbox.isColumn && flexbox.isLTR) {
  91         shouldBe('firstChild.offsetTop', "0");
  92         shouldBe('lastChild.offsetTop', "20");
  93     } else if (flexbox.isHorizontalFlow)
  94         shouldBe('firstChild.offsetTop', 'lastChild.offsetTop');
  95     else
  96         shouldBe('firstChild.offsetLeft', 'lastChild.offsetLeft');
  97 }
  98 </script>
  99 </body>
 100 </html>