src/third_party/WebKit/LayoutTests/fast/regions/positioned-objects-clipped-spanning-regions.html

   1 <!doctype html>
   2
   3 <html style="direction:rtl">
   4 <head>
   5  <style>
   6     #content {
   7         -webkit-flow-into: flow1;
   8         text-align: justify;
   9         padding: 5px;
  10     }
  11
  12     #first-box {
  13         margin:10%
  14     }
  15
  16     #second-box {
  17         position:absolute;
  18         right:0;
  19         top:0;
  20         height:450px;
  21         width:50%;
  22         background-color:green;
  23         border-left:10px solid red;
  24         clip:rect(0 300px 450px 10px)
  25     }
  26
  27     #region1, #region2, #region3 {
  28         border: 1px solid black;
  29         -webkit-flow-from: flow1;
  30     }
  31
  32     #region1 {
  33         width: 200px;
  34         height: 150px;
  35     }
  36
  37     #region2 {
  38         width: 300px;
  39         height: 180px;
  40     }
  41
  42     #region3 {
  43         width: 120px;
  44         height: 120px;
  45     }
  46 </style>
  47 </head>
  48 <body>
  49 <p style="direction:ltr">The green positioned object should span all the regions. It should fill the right half of every region. Its red borders should be clipped.</p>
  50
  51 <div id="content">
  52     <div id="first-box">
  53         <div id="second-box">
  54
  55         </div>
  56     </div>
  57 </div>
  58
  59 <div id="container">
  60     <div id="region1"></div>
  61     <div id="region2"></div>
  62     <div id="region3"></div>
  63 </div>