third_party/WebKit/LayoutTests/css3/flexbox/flex-flow-overflow.html

   1 <!DOCTYPE html>
   2 <html>
   3 <style>
   4 .container {
   5     position: relative;
   6     background-color: pink;
   7     outline: 1px solid red;
   8     display: inline-block;
   9 }
  10 .flexbox {
  11     display: flex;
  12     background-color: grey;
  13     width: 100px;
  14     height: 100px;
  15 }
  16 .title {
  17     margin-top: 1em;
  18 }
  19 .ltr {
  20     direction: ltr;
  21 }
  22 .rtl {
  23     direction: rtl;
  24 }
  25 .horizontal-tb {
  26     -webkit-writing-mode: horizontal-tb;
  27 }
  28 .horizontal-bt {
  29     -webkit-writing-mode: horizontal-bt;
  30 }
  31 .vertical-rl {
  32     -webkit-writing-mode: vertical-rl;
  33 }
  34 .vertical-lr {
  35     -webkit-writing-mode: vertical-lr;
  36 }
  37 .row {
  38     flex-flow: row;
  39 }
  40 .row-reverse {
  41     flex-flow: row-reverse;
  42 }
  43 .column {
  44     flex-flow: column;
  45 }
  46 .column-reverse {
  47     flex-flow: column-reverse;
  48 }
  49 .flexbox > :nth-child(1) {
  50     background-color: blue;
  51 }
  52 </style>
  53 <script src="../../resources/check-layout.js"></script>
  54 <body onload="checkLayout('.flexbox')">
  55
  56 <script>
  57 function positionAsString(position)
  58 {
  59     return 'data-offset-x="' + position[0] + '" data-offset-y="' + position[1] + '"';
  60 }
  61
  62 function sizeAsString(size)
  63 {
  64     return 'data-expected-width="' + size[0] + '" data-expected-height="' + size[1] + '"';
  65 }
  66
  67 var containerSize = [100, 100];
  68
  69 var expectations = {
  70     'horizontal-tb': {
  71         rtl: [-5, 0],
  72         ltr: [0, 0],
  73         'rtl-column-reverse': [-5, -5],
  74         'ltr-column-reverse': [0, -5],
  75     },
  76     'horizontal-bt': {
  77         rtl: [-5, -5],
  78         ltr: [0, -5],
  79         'rtl-column-reverse': [-5, 0],
  80         'ltr-column-reverse': [0, 0],
  81     },
  82     'vertical-lr': {
  83         rtl: [0, -5],
  84         ltr: [0, 0],
  85         'rtl-column-reverse': [-5, -5],
  86         'ltr-column-reverse': [-5, 0],
  87     },
  88     'vertical-rl': {
  89         rtl: [-5, -5],
  90         ltr: [-5, 0],
  91         'rtl-column-reverse': [0, -5],
  92         'ltr-column-reverse': [0, 0],
  93     }
  94 }
  95
  96 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-rl'];
  97 var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse'];
  98 var directions = ['rtl', 'ltr'];
  99
 100 writingModes.forEach(function(writingMode) {
 101     flexFlows.forEach(function(flexFlow) {
 102         directions.forEach(function(direction) {
 103             var flexboxClassName = writingMode + ' ' + direction + ' ' + flexFlow;
 104             var title = document.createElement('div');
 105             title.className = 'title';
 106             title.innerHTML = flexboxClassName;
 107             document.body.appendChild(title);
 108
 109             var container = document.createElement('div');
 110             container.className = 'container';
 111             container.setAttribute('data-expected-width', containerSize[0]);
 112             container.setAttribute('data-expected-height', containerSize[1]);
 113
 114             var flowDirection = direction;
 115             // row-reverse is the same as flipping the writing direction.
 116             if (flexFlow == "row-reverse")
 117                 flowDirection = direction == "rtl" ? "ltr" : "rtl";
 118             else if (flexFlow == "column-reverse")
 119                 flowDirection = direction + "-column-reverse";
 120
 121             container.innerHTML = '\n<div class="flexbox ' + flexboxClassName + '" ' + sizeAsString(containerSize) + '>\n' +
 122                 '<div style="flex: 1 0 auto; width: 105px; height: 105px;" ' + sizeAsString([105, 105])  + ' ' + positionAsString(expectations[writingMode][flowDirection]) + '></div>\n' +
 123             '</div>\n';
 124
 125             document.body.appendChild(container);
 126         })
 127     })
 128 })
 129 </script>
 130 </body>
 131 </html>