third_party/WebKit/LayoutTests/css3/flexbox/perpendicular-writing-modes-inside-flex-item.html

   1 <!DOCTYPE html>
   2 <style>
   3 .flexbox {
   4     display: flex;
   5     flex-direction: column;
   6     height: 300px;
   7     width: 200px;
   8     padding: 3px;
   9     border: 4px solid black;
  10 }
  11 .flexitem {
  12     flex: 1;
  13     padding: 3px;
  14     border: 4px solid cyan;
  15     min-height: 0;
  16 }
  17 .vertical {
  18     position: relative;
  19     -webkit-writing-mode: vertical-lr;
  20     padding: 3px;
  21     border: 4px solid blue;
  22 }
  23 .inlineContent {
  24     display: inline-block;
  25     height: 200px;
  26     width: 20px;
  27     background-color: salmon;
  28 }
  29 </style>
  30
  31 <script src="../../resources/check-layout.js"></script>
  32
  33 <body onload="checkLayout('.flexbox')">
  34     <div class="flexbox">
  35         <div class="flexitem" data-expected-width=200 data-expected-height=300>
  36             <div class="vertical" data-expected-height=286>
  37                 <div class="inlineContent" data-expected-y=3 data-expected-x=3></div>
  38                 <div class="inlineContent" data-expected-y=3></div>
  39             </div>
  40         </div>
  41     </div>
  42 </body>