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: -webkit-flexbox;
  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     -webkit-flex-flow: row;
  39 }
  40 .row-reverse {
  41     -webkit-flex-flow: row-reverse;
  42 }
  43 .column {
  44     -webkit-flex-flow: column;
  45 }
  46 .column-reverse {
  47     -webkit-flex-flow: column-reverse;
  48 }
  49 .flexbox > :nth-child(1) {
  50     background-color: blue;
  51 }
  52 </style>
  53 <script>
  54 if (window.layoutTestController)
  55     layoutTestController.dumpAsText();
  56 </script>
  57 <script src="resources/flexbox.js"></script>
  58 <body onload="checkFlexBoxen()">
  59
  60 <script>
  61 function positionAsString(position)
  62 {
  63     return 'data-offset-x="' + position[0] + '" data-offset-y="' + position[1] + '"';
  64 }
  65
  66 function sizeAsString(size)
  67 {
  68     return 'data-expected-width="' + size[0] + '" data-expected-height="' + size[1] + '"';
  69 }
  70
  71 var containerSize = [100, 100];
  72
  73 var expectations = {
  74     'horizontal-tb': {
  75         rtl: [-5, 0],
  76         ltr: [0, 0]
  77     },
  78     'horizontal-bt': {
  79         rtl: [-5, -5],
  80         ltr: [0, -5]
  81     },
  82     'vertical-lr': {
  83         rtl: [0, -5],
  84         ltr: [0, 0]
  85     },
  86     'vertical-rl': {
  87         rtl: [-5, -5],
  88         ltr: [-5, 0]
  89     }
  90 }
  91
  92 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-rl'];
  93 // FIXME: Test column-reverse.
  94 var flexFlows = ['row', 'column', 'row-reverse'];
  95 var directions = ['rtl', 'ltr'];
  96
  97 writingModes.forEach(function(writingMode) {
  98     flexFlows.forEach(function(flexFlow) {
  99         directions.forEach(function(direction) {
 100             var flexboxClassName = writingMode + ' ' + direction + ' ' + flexFlow;
 101             var title = document.createElement('div');
 102             title.className = 'title';
 103             title.innerHTML = flexboxClassName;
 104             document.body.appendChild(title);
 105
 106             var container = document.createElement('div');
 107             container.className = 'container';
 108             container.setAttribute('data-expected-width', containerSize[0]);
 109             container.setAttribute('data-expected-height', containerSize[1]);
 110
 111             var flowDirection = direction;
 112             if (flexFlow.indexOf("-reverse") != -1)
 113                 flowDirection = direction == "rtl" ? "ltr" : "rtl";
 114
 115             container.innerHTML = '\n<div class="flexbox ' + flexboxClassName + '" ' + sizeAsString(containerSize) + '>\n' +
 116                 '<div style="width: -webkit-flex(1 105px); height: -webkit-flex(1 105px);" ' + sizeAsString([105, 105])  + ' ' + positionAsString(expectations[writingMode][flowDirection]) + '></div>\n' +
 117             '</div>\n';
 118
 119             document.body.appendChild(container);
 120         })
 121     })
 122 })
 123 </script>
 124 </body>
 125 </html>