overconstrained-3.html (1371B)
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 - left+right, overconstrained</title> 7 <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com"> 8 <link rel="match" href="overconstrained-3-ref.html"> 9 <meta name="flags" content="dom"> 10 <meta name="assert" content="Left+right-sticky with a wide element in an RTL container: left inset should decrease"> 11 <style> 12 #scroll { 13 width: 100px; 14 height: 100px; 15 overflow: hidden; 16 border: 1px solid black; 17 white-space: nowrap; 18 direction: rtl; 19 } 20 #scroll div { 21 display: inline-block; 22 } 23 .fill { 24 width: 99px; 25 height: 1px; 26 } 27 #contain { 28 width: 200px; 29 height: 10px; 30 background-color: gray; 31 } 32 #sticky { 33 position: sticky; 34 left: 10px; 35 right: 10px; 36 width: 81px; 37 height: 10px; 38 background-color: black; 39 } 40 </style> 41 <body> 42 <div id="scroll"> 43 <div class="fill"></div 44 ><div id="sticky"></div 45 ><div class="fill"></div> 46 </div> 47 <script type="text/javascript"> 48 document.getElementById("scroll").scrollLeft = 179; 49 </script> 50 </body> 51 </html>