src/third_party/WebKit/LayoutTests/fast/regions/position-writing-modes-in-variable-width-regions.html

   1 <!doctype html>
   2 <html>
   3 <head>
   4  <style>
   5     #content {
   6         -webkit-flow-into: flow1;
   7     }
   8
   9     #first-box {
  10         margin:50px 10% 0 10%;
  11         position:relative;
  12         height:400px;
  13     }
  14
  15     #region1, #region2 {
  16         -webkit-flow-from: flow1;
  17     }
  18
  19     #region1 {
  20         width: 500px;
  21         height: 50px;
  22     }
  23
  24     #region2 {
  25         width: 320px;
  26         height: 400px;
  27     }
  28
  29     .square {
  30         width:31.25%;
  31         height:20%;
  32         position:absolute;
  33     }
  34
  35     .red { width:80px; height:80px; position:absolute; background-color:red; z-index:-1 }
  36
  37     #topleft { top:0; left:0; -webkit-writing-mode:vertical-rl; background-color:#00ff00;}
  38     #topright { top:0; right:0; -webkit-writing-mode:horizontal-bt; background-color:#00dd00;}
  39     #bottomleft { bottom:0; left:0; -webkit-writing-mode:vertical-lr; background-color:#00bb00;  }
  40     #bottomright { bottom:0; right:0px; -webkit-writing-mode:horizontal-tb; background-color:#009900;}
  41 </style>
  42 </head>
  43
  44 <body>
  45 You should see four 80x80 green squares below and no red should be visible.
  46
  47 <div style="position:relative; width:550px;">
  48
  49 <div id="content">
  50     <div id="first-box">
  51         <div class="square" id="topleft"></div>
  52         <div class="square" id="topright"></div>
  53         <div class="square" id="bottomleft"></div>
  54         <div class="square" id="bottomright"></div>
  55     </div>
  56 </div>
  57
  58 <div id="container">
  59     <div id="region1"></div>
  60     <div id="region2"></div>
  61     <div id="region3"></div>
  62 </div>
  63
  64 <div class=red style="top:50px;left:32px;"></div>
  65
  66 <div class=red style="top:370px;left:32px;"></div>
  67
  68 <div class=red style="top:50px;right:262px;"></div>
  69
  70 <div class=red style="top:370px;right:262px;"></div>
  71 </div>
  72