third_party/WebKit/LayoutTests/css3/flexbox/intrinsic-width-orthogonal-writing-mode.html

   1 <!DOCTYPE html>
   2 <html>
   3 <link href="resources/flexbox.css" rel="stylesheet">
   4 <style>
   5 .vertical {
   6     -webkit-writing-mode: vertical-lr;
   7     writing-mode: vertical-lr;
   8 }
   9 </style>
  10
  11 <script src="../../resources/check-layout.js"></script>
  12 <body onload="checkLayout('.inline-flexbox')">
  13
  14 <p>Tests that we calculate correct intrinsic widths when orthogonal flows are involved.</p>
  15
  16 <div class="inline-flexbox" data-expected-width="20">
  17     <div class="vertical" style="width: 20px; height: 50px;"></div>
  18 </div>
  19
  20 <div class="inline-flexbox" data-expected-width="20">
  21     <div class="vertical" style="line-height: 20px;">Some text</div>
  22 </div>
  23
  24
  25 <!-- This should really have a width of 20. However intrinsic widths with
  26      orthogonal flows are tricky. This now matches behavior of regular
  27      (inline-)blocks.
  28      http://crbug.com/473429
  29   -->
  30 <div class="inline-flexbox" data-expected-width="0">
  31     <span class="vertical" data-expected-width="20" style="line-height: 20px;">Some text</span>
  32 </div>