LayoutTests/css3/flexbox/flexitem.html

   1 <!DOCTYPE html>
   2 <html>
   3 <style>
   4 .flexbox {
   5     width: 600px;
   6     display: -webkit-flex;
   7     background-color: #aaa;
   8     position: relative;
   9     min-height: 10px;
  10 }
  11 .flexbox > * {
  12     -webkit-flex: 1 0 0;
  13     margin: 0;
  14     border: 0;
  15     padding: 0;
  16     font-size: 12px;
  17 }
  18 </style>
  19 <script>
  20 if (window.layoutTestController)
  21     layoutTestController.dumpAsText();
  22 </script>
  23 <script src="resources/flexbox.js"></script>
  24 <body onload="checkFlexBoxen()">
  25 <div class="flexbox">
  26   <button data-expected-display="block" data-expected-width="100">button</button>
  27   <canvas data-expected-display="block" data-expected-width="100">canvas</canvas>
  28   <iframe data-expected-display="block" data-expected-width="100" src="data:text/html,<body bgcolor=#fff>iframe</body>"></iframe>
  29   <object data-expected-display="block" data-expected-width="100">object</object>
  30   <select data-expected-display="block" data-expected-width="100">
  31     <option>select</option>
  32   </select>
  33   <textarea data-expected-display="block" data-expected-width="100">textarea</textarea>
  34 </div>
  35
  36
  37 <div class="flexbox">
  38   <input data-expected-display="block" data-expected-width="75" type="checkbox" value="radio"></input>
  39   <input data-expected-display="block" data-expected-width="75" type="file" value="file"></input>
  40   <input data-expected-display="block" data-expected-width="75" type="image" value="image"></input>
  41   <input data-expected-display="block" data-expected-width="75" type="password" value="password"></input>
  42   <input data-expected-display="block" data-expected-width="75" type="radio" value="radio"></input>
  43   <input data-expected-display="block" data-expected-width="75" type="reset" value="reset"></input>
  44   <input data-expected-display="block" data-expected-width="75" type="submit" value="submit"></input>
  45   <input data-expected-display="block" data-expected-width="75" type="text" value="text"></input>
  46 </div>
  47
  48 <div class="flexbox">
  49   <img data-expected-display="block" data-expected-width="345" style="-webkit-flex: 1 0 auto;" src="../images/resources/blue-100.png">
  50   <!-- FIXME: The image should stretch in the cross direction. -->
  51   <img data-expected-display="block" data-expected-width="255" data-expected-height="100" style="-webkit-flex: 1 0 auto;" src="../images/resources/green-10.png">
  52 </div>
  53
  54 <div class="flexbox">
  55   <img data-expected-display="block" data-expected-width="200" style="-webkit-flex: 1 0 auto;" src="../images/resources/blue-100.png">
  56   <!-- FIXME: The missing image placeholders should stretch in the cross direction. -->
  57   <img data-expected-display="block" data-expected-width="200" data-expected-height="100" style="-webkit-flex: 2 0 0;" src="doesnotexist.png">
  58   <img data-expected-display="block" data-expected-width="200" data-expected-height="100" style="-webkit-flex: 2 0 0;" src="doesnotexist.png" alt="placeholder text">
  59 </div>
  60
  61 <div class="flexbox">
  62   <svg data-expected-display="block" data-expected-width="100" style="-webkit-flex: 1 0 auto; width: 100px; height: 100px">
  63     <circle cx="50" cy="50" r="50" fill="blue">
  64     </circle>
  65   </svg>
  66   <svg data-expected-display="block" data-expected-width="500" style="-webkit-flex: 1 1 auto; height: 100px">
  67     <circle cx="50" cy="50" r="50" fill="green">
  68     </circle>
  69   </svg>
  70 </div>
  71
  72 <div class="flexbox">
  73   <span data-expected-display="block" data-expected-width="200" style="-webkit-flex: 2 0 0"></span>
  74   <button data-expected-display="block" data-expected-width="100" style="-webkit-flex: 1 0 0">button</button>
  75   <span data-expected-display="block" data-expected-width="300" style="-webkit-flex: 2 2 100px"></span>
  76 </div>
  77
  78 <div class="flexbox" style="width: 700px">
  79   <div data-expected-display="block" data-expected-width="100" style="display: inline-block;"></div>
  80   <div data-expected-display="-webkit-box" data-expected-width="100" style="display: -webkit-inline-box;"></div>
  81   <div data-expected-display="-webkit-flex" data-expected-width="100" style="display: -webkit-inline-flex;"></div>
  82   <div data-expected-display="block" data-expected-width="100" style="display: table-cell"></div>
  83   <div data-expected-display="block" data-expected-width="100" style="display: compact"></div>
  84   <div data-expected-display="block" data-expected-width="100" style="display: run-in"></div>
  85   <div data-expected-display="block" data-expected-width="100" style="display: inline;"></div>
  86 </div>
  87
  88 <div class="flexbox">
  89   <!-- FIXME: This table should flex. -->
  90   <div data-expected-display="table" data-expected-width="600" style="display: inline-table"></div>
  91 </div>
  92
  93 </html>