position-sticky-writing-modes.html (1877B)
1 <!DOCTYPE html> 2 <title>position:sticky constraints are independent of writing mode</title> 3 <link rel="match" href="position-sticky-writing-modes-ref.html" /> 4 <link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" /> 5 <meta name="assert" content="This test checks that position:sticky constraints are independent of the writing mode" /> 6 7 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 8 9 <script src="../resources/ref-rectangle.js"></script> 10 11 <style> 12 .group { 13 display: inline-block; 14 position: relative; 15 width: 180px; 16 height: 250px; 17 } 18 19 .scroller { 20 position: relative; 21 width: 130px; 22 height: 200px; 23 overflow: hidden; 24 font: 30px/1 Ahem; 25 } 26 27 .contents { 28 height: 500px; 29 width: 200px; 30 } 31 32 .indicator { 33 position: absolute; 34 color: red; 35 } 36 37 .sticky { 38 display: inline; 39 color: green; 40 position: sticky; 41 top: 50px; 42 } 43 </style> 44 45 <script> 46 window.addEventListener('load', function() { 47 document.getElementById('scroller1').scrollTop = 50; 48 document.getElementById('scroller1').scrollLeft = 20; 49 document.getElementById('scroller2').scrollTop = 50; 50 document.getElementById('scroller2').scrollLeft = -25; 51 createIndicatorForStickyElements(document.querySelectorAll('.sticky')); 52 }); 53 </script> 54 55 <div>You should see two green blocks below. No red or blue should be visible.</div> 56 57 <div class="group"> 58 <div id="scroller1" class="scroller" style="writing-mode: vertical-lr;"> 59 <div class="indicator" style="left: 40px; top: 100px;">XXX</div> 60 <div class="contents"> 61 <div class="sticky" style="left: 20px;">XXX</div> 62 </div> 63 </div> 64 </div> 65 66 <div class="group"> 67 <div id="scroller2" class="scroller" style="writing-mode: vertical-rl;"> 68 <div class="indicator" style="left: 55px; top: 100px;">XXX</div> 69 <div class="contents"> 70 <div class="sticky" style="right: 20px;">XXX</div> 71 </div> 72 </div> 73 </div>