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

   1 <!DOCTYPE html>
   2 <html>
   3     <head>
   4         <style>
   5             div { width: 250px; }
   6             .container {:
   7                 background: green;
   8                 position: relative;
   9                 height: 600px;
  10                 max-height: 300px;
  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
  28     <body>
  29         <p>https://bugs.webkit.org/show_bug.cgi?id=106479: There should be no red below.</p>
  30         <div class="container">
  31             <div class="ref"></div>
  32             <div class="box" data-total-y="150"></div>
  33         </div>
  34         <script>
  35             checkLayout('.box')
  36         </script>
  37     </body>
  38 </html>