layout/reftests/position-sticky/block-in-inline-1-ref.html

   1 <!DOCTYPE html>
   2 <!-- Any copyright is dedicated to the Public Domain.
   3    - http://creativecommons.org/publicdomain/zero/1.0/ -->
   4 <html>
   5   <head>
   6     <title>CSS Test: Sticky Positioning - block inside inline, normal position</title>
   7     <link rel="author" title="L. David Baron" href="mailto:dbaron@mozilla.com">
   8     <link rel="stylesheet" type="text/css" href="ahem.css">
   9     <style>
  10       #scroll {
  11         height: 100px;
  12         overflow: hidden;
  13         font: 20px/1 Ahem;
  14       }
  15       #contain {
  16         height: 100px;
  17       }
  18       .sticky {
  19         position: relative;
  20         top: 0;
  21       }
  22       .notsticky {
  23         position: relative;
  24         top: 0;
  25       }
  26     </style>
  27   </head>
  28   <body>
  29     <div id="scroll">
  30       <div style="height: 20px"></div>
  31       <div id="contain">
  32         <span class="notsticky">before inline</span>
  33         <span class="sticky">before block</span>
  34         <div><span class="sticky">in block</span></div>
  35         <span class="sticky">after block</span>
  36         <span class="notsticky">after inline</span>
  37       </div>
  38       <div style="height: 100px"></div>
  39     </div>
  40   </body>
  41 </html>