third_party/WebKit/LayoutTests/fast/block/percent-top-parent-respects-min-height.html

   1 <!DOCTYPE html>
   2 <html>
   3     <head>
   4         <style>
   5             div { width: 250px; }
   6             .container {
   7                 background: green;
   8                 position: relative;
   9                 min-height: 200px;
  10                 height: 10%;
  11             }
  12             .box {
  13                 height: 100px;
  14                 position: relative;
  15                 top: 50%;
  16                 background: blue;
  17             }
  18             .ref {
  19                 height: 100px;
  20                 position: absolute;
  21                 top: 150px;
  22                 background: red;
  23             }
  24         </style>
  25         <script src="../../resources/check-layout.js"></script>
  26     </head>
  27     <body onload="checkLayout('.box')">
  28         <p>https://bugs.webkit.org/show_bug.cgi?id=14762: There should be no red below.</p>
  29         <div class="container">
  30             <div class="ref"></div>
  31             <div class="box" data-total-y="0"></div>
  32         </div>
  33         <div class="container" style="-webkit-writing-mode: vertical-lr">
  34             <div class="ref"></div>
  35             <div class="box" data-total-y="100"></div>
  36         </div>
  37     </body>
  38 </html>