grid-container-scrollbar-001-ref.html (1763B)
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 } 12 13 .scrollX { 14 overflow-x: scroll; 15 } 16 17 .scrollY { 18 overflow-y: scroll; 19 } 20 21 .fixedSize { 22 width: 200px; 23 height: 50px; 24 } 25 26 .container > div { 27 background: cyan; 28 width: 100%; 29 height: 100%; 30 } 31 32 .directionRTL { 33 direction: rtl; 34 } 35 </style> 36 37 <p>The test passes if it has the same output as the reference.</p> 38 39 <div style="float: left; width: 350px;"> 40 41 <h2>direction: ltr;</h2> 42 43 <div class="container scrollX"> 44 <div>item</div> 45 </div> 46 47 <div class="container scrollY"> 48 <div>item</div> 49 </div> 50 51 <div class="container scrollX scrollY"> 52 <div>item</div> 53 </div> 54 55 <div class="container fixedSize scrollX"> 56 <div>item</div> 57 </div> 58 59 <div class="container fixedSize scrollY"> 60 <div>item</div> 61 </div> 62 63 <div class="container fixedSize scrollX scrollY"> 64 <div>item</div> 65 </div> 66 67 </div> 68 69 <div style="float: left; width: 350px;"> 70 71 <h2>direction: rtl;</h2> 72 73 <div class="directionRTL container scrollX"> 74 <div>item</div> 75 </div> 76 77 <div class="directionRTL container scrollY"> 78 <div>item</div> 79 </div> 80 81 <div class="directionRTL container scrollX scrollY"> 82 <div>item</div> 83 </div> 84 85 <div class="directionRTL container fixedSize scrollX"> 86 <div>item</div> 87 </div> 88 89 <div class="directionRTL container fixedSize scrollY"> 90 <div>item</div> 91 </div> 92 93 <div class="directionRTL container fixedSize scrollX scrollY"> 94 <div>item</div> 95 </div> 96 97 </div>