third_party/WebKit/LayoutTests/css3/flexbox/preferred-widths.html

   1 <!DOCTYPE html>
   2 <html>
   3 <style>
   4 .flexbox {
   5     display: flex;
   6     background-color: grey;
   7     float: left;
   8 }
   9 .flexbox > div {
  10     padding: 2px 13px 8px 17px;
  11     margin: 2px 13px 8px 17px;
  12     flex: none;
  13     flex: none;
  14 }
  15 .title {
  16     margin-top: 1em;
  17 }
  18 .overflowX {
  19     overflow-x: scroll;
  20     overflow-y: hidden;
  21 }
  22 .overflowY {
  23     overflow-x: hidden;
  24     overflow-y: scroll;
  25 }
  26 .auto {
  27     overflow: auto;
  28 }
  29 .horizontal-tb {
  30     -webkit-writing-mode: horizontal-tb;
  31 }
  32 .horizontal-bt {
  33     -webkit-writing-mode: horizontal-bt;
  34 }
  35 .vertical-rl {
  36     -webkit-writing-mode: vertical-rl;
  37 }
  38 .vertical-lr {
  39     -webkit-writing-mode: vertical-lr;
  40 }
  41 .row {
  42     flex-flow: row;
  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 <script>
  58 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-rl'];
  59 var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse'];
  60 var scrollDirections = ['overflowY', 'overflowX'];
  61
  62 var dummyNode = document.createElement('div');
  63 dummyNode.style.overflow = 'scroll';
  64 document.body.appendChild(dummyNode);
  65 var scrollbarWidth = dummyNode.offsetWidth - dummyNode.clientWidth;
  66
  67 writingModes.forEach(function(writingMode) {
  68     flexFlows.forEach(function(flexFlow) {
  69         scrollDirections.forEach(function(scrollDirection) {
  70             var flexboxClassName = writingMode + ' ' + scrollDirection + ' ' + flexFlow;
  71
  72             var title = document.createElement('div');
  73             title.className = 'title';
  74             title.innerHTML = flexboxClassName;
  75             document.body.appendChild(title);
  76
  77             var isColumn = flexFlow.indexOf('column') != -1;
  78             var isHorizontal = (writingMode.indexOf('horizontal') != -1) ? !isColumn : isColumn;
  79
  80             var expectedWidth = isHorizontal ? 220 : 140;
  81             var expectedHeight = isHorizontal ? 60 : 110;
  82             if (scrollDirection == 'overflowY')
  83                 expectedWidth += scrollbarWidth;
  84             if (scrollDirection == 'overflowX')
  85                 expectedHeight += scrollbarWidth;
  86
  87
  88             var container = document.createElement('div');
  89             container.innerHTML = '<div class="flexbox ' + flexboxClassName + '" data-expected-width="' + expectedWidth + '" data-expected-height="' + expectedHeight + '">\n' +
  90                 '<div style="background-color:pink; width: 20px; height: 30px;"></div>\n' +
  91                 '<div style="background-color:red; width: 80px; height: 40px;"></div>\n' +
  92             '</div><div style="clear:both;"></div>';
  93
  94             document.body.appendChild(container);
  95         })
  96     })
  97 })
  98 </script>
  99 </body>
 100 </html>