third_party/WebKit/LayoutTests/css3/flexbox/alignContent-applies-with-flexWrap-wrap-with-single-line.html

   1 <!doctype html>
   2 <html>
   3 <head>
   4 <style>
   5 .default {
   6     display: flex;
   7     flex-wrap: wrap;
   8     position: relative;
   9     height: 75px;
  10     border: 1px solid red;
  11     margin: 5px;
  12 }
  13
  14 .verticalWriting {
  15     display: flex;
  16     flex-wrap: wrap;
  17     position: relative;
  18     width: 75px;
  19     border: 1px solid red;
  20     margin: 5px;
  21     -webkit-writing-mode: vertical-lr;
  22 }
  23 </style>
  24 <script src="../../resources/check-layout.js"></script>
  25 </head>
  26 <body onload="checkLayout('.default'); checkLayout('.verticalWriting'); ">
  27 <p>Test for BUG=324178: Chrome incorrectly honors "align-content" in "flex-wrap: wrap" flex containers that only have a single line</p>
  28 <div class="default" style="align-content: flex-start">
  29 <div data-offset-y="0">This text should be at the top of it's container</div>
  30 </div>
  31 <div class="default" style="align-content: flex-end">
  32 <div data-offset-y="0">This text should be at the top of it's container</div>
  33 </div>
  34 <div class="default" style="align-content: center">
  35 <div data-offset-y="0">This text should be at the top of it's container</div>
  36 </div>
  37 <div class="default" style="align-content: space-between">
  38 <div data-offset-y="0">This text should be at the top of it's container</div>
  39 </div>
  40 <div class="default" style="align-content: space-around">
  41 <div data-offset-y="0">This text should be at the top of it's container</div>
  42 </div>
  43 <div class="default" style="align-content: stretch">
  44 <div data-offset-y="0">This text should be at the top of it's container</div>
  45 </div>
  46 <div class="verticalWriting" style="align-content: flex-start">
  47 <div data-offset-x="0">This text should be at the left of it's container</div>
  48 </div>
  49 <div class="verticalWriting" style="align-content: flex-end">
  50 <div data-offset-x="0">This text should be at the left of it's container</div>
  51 </div>
  52 <div class="verticalWriting" style="align-content: center">
  53 <div data-offset-x="0">This text should be at the left of it's container</div>
  54 </div>
  55 <div class="verticalWriting" style="align-content: space-between">
  56 <div data-offset-x="0">This text should be at the left of it's container</div>
  57 </div>
  58 <div class="verticalWriting" style="align-content: space-around">
  59 <div data-offset-x="0">This text should be at the left of it's container</div>
  60 </div>
  61 <div class="verticalWriting" style="align-content: stretch">
  62 <div data-offset-x="0">This text should be at the left of it's container</div>
  63 </div>
  64 </body>
  65 </html>