grid-container-scrollbar-vertical-rl-001-ref.html (1794B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS container Layout Test Reference</title> 4 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> 5 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 6 <style> 7 .container { 8 font: 10px/1 Ahem; 9 margin: 10px; 10 background: grey; 11 writing-mode: vertical-rl; 12 } 13 14 .scrollX { 15 overflow-x: scroll; 16 } 17 18 .scrollY { 19 overflow-y: scroll; 20 } 21 22 .fixedSize { 23 width: 200px; 24 height: 50px; 25 } 26 27 .container > div { 28 background: cyan; 29 width: 100%; 30 height: 100%; 31 } 32 33 .directionRTL { 34 direction: rtl; 35 } 36 </style> 37 38 <p>The test passes if it has the same output as the reference.</p> 39 40 <div style="float: left; width: 350px;"> 41 42 <h2>direction: ltr;</h2> 43 44 <div class="container scrollX"> 45 <div>item</div> 46 </div> 47 48 <div class="container scrollY"> 49 <div>item</div> 50 </div> 51 52 <div class="container scrollX scrollY"> 53 <div>item</div> 54 </div> 55 56 <div class="container fixedSize scrollX"> 57 <div>item</div> 58 </div> 59 60 <div class="container fixedSize scrollY"> 61 <div>item</div> 62 </div> 63 64 <div class="container fixedSize scrollX scrollY"> 65 <div>item</div> 66 </div> 67 68 </div> 69 70 <div style="float: left; width: 350px;"> 71 72 <h2>direction: rtl;</h2> 73 74 <div class="directionRTL container scrollX"> 75 <div>item</div> 76 </div> 77 78 <div class="directionRTL container scrollY"> 79 <div>item</div> 80 </div> 81 82 <div class="directionRTL container scrollX scrollY"> 83 <div>item</div> 84 </div> 85 86 <div class="directionRTL container fixedSize scrollX"> 87 <div>item</div> 88 </div> 89 90 <div class="directionRTL container fixedSize scrollY"> 91 <div>item</div> 92 </div> 93 94 <div class="directionRTL container fixedSize scrollX scrollY"> 95 <div>item</div> 96 </div> 97 98 </div>