grid-content-alignment-with-span-vertical-rl-001.html (7462B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Grid Layout Test: content alignment and items spanning multiple tracks (vertical-rl).</title> 5 <link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> 6 <link rel="help" href="https://drafts.csswg.org/css-grid/#alignment"> 7 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-tracks"> 8 <link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values"> 9 <link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> 10 <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-content"> 11 <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content"> 12 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=376823"> 13 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=249451"> 14 <link rel="stylesheet" href="/css/support/grid.css"> 15 <link rel="stylesheet" href="/css/support/alignment.css"> 16 <meta name="assert" content="Test that content distribution alignment is applied correctly when items span more than one track with 'writing-mode: vertical-rl'." /> 17 18 <style> 19 body { 20 margin: 0px; 21 } 22 23 .grid { 24 grid-auto-columns: 20px; 25 grid-auto-rows: 40px; 26 grid-template-areas: "a a b" 27 "c d b"; 28 position: relative; 29 width: 200px; 30 height: 300px; 31 } 32 .a { 33 grid-area: a; 34 background-color: blue; 35 } 36 .b { 37 grid-area: b; 38 background-color: lime; 39 } 40 .c { 41 grid-area: c; 42 background-color: purple; 43 } 44 .d { 45 grid-area: d; 46 background-color: orange; 47 } 48 .stretchedGrid { 49 grid-auto-columns: auto; 50 grid-auto-rows: auto; 51 } 52 </style> 53 54 <script src="/resources/testharness.js"></script> 55 <script src="/resources/testharnessreport.js"></script> 56 <script src="/resources/check-layout-th.js"></script> 57 </head> 58 59 <body onload="checkLayout('.grid')"> 60 61 <p>This test checks that Content Distribution alignment is applied correctly when items span more than one track.</p> 62 63 <div style="position: relative"> 64 <p>direction: LTR | distribution: 'space-between'</p> 65 <div class="grid contentSpaceBetween verticalRL" data-expected-width="200" data-expected-height="300"> 66 <div class="a" data-offset-x="160" data-offset-y="0" data-expected-width="40" data-expected-height="160"></div> 67 <div class="b" data-offset-x="0" data-offset-y="280" data-expected-width="200" data-expected-height="20"></div> 68 <div class="c" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> 69 <div class="d" data-offset-x="0" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div> 70 </div> 71 </div> 72 73 <div style="position: relative"> 74 <p>direction: LTR | distribution: 'space-around'</p> 75 <div class="grid contentSpaceAround verticalRL" data-expected-width="200" data-expected-height="300"> 76 <div class="a" data-offset-x="130" data-offset-y="40" data-expected-width="40" data-expected-height="120"></div> 77 <div class="b" data-offset-x="30" data-offset-y="240" data-expected-width="140" data-expected-height="20"></div> 78 <div class="c" data-offset-x="30" data-offset-y="40" data-expected-width="40" data-expected-height="20"></div> 79 <div class="d" data-offset-x="30" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div> 80 </div> 81 </div> 82 83 <div style="position: relative"> 84 <p>direction: LTR | distribution: 'space-evenly'</p> 85 <div class="grid contentSpaceEvenly verticalRL" data-expected-width="200" data-expected-height="300"> 86 <div class="a" data-offset-x="120" data-offset-y="60" data-expected-width="40" data-expected-height="100"></div> 87 <div class="b" data-offset-x="40" data-offset-y="220" data-expected-width="120" data-expected-height="20"></div> 88 <div class="c" data-offset-x="40" data-offset-y="60" data-expected-width="40" data-expected-height="20"></div> 89 <div class="d" data-offset-x="40" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div> 90 </div> 91 </div> 92 93 <div style="position: relative"> 94 <p>direction: LTR | distribution: 'stretch'</p> 95 <div class="grid stretchedGrid contentStretch verticalRL" data-expected-width="200" data-expected-height="300"> 96 <div class="a" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> 97 <div class="b" data-offset-x="0" data-offset-y="200" data-expected-width="200" data-expected-height="100"></div> 98 <div class="c" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div> 99 <div class="d" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div> 100 </div> 101 </div> 102 103 <!-- RTL direction. --> 104 <div style="position: relative"> 105 <p>direction: RTL | distribution: 'space-between'</p> 106 <div class="grid contentSpaceBetween verticalRL directionRTL" data-expected-width="200" data-expected-height="300"> 107 <div class="a" data-offset-x="160" data-offset-y="140" data-expected-width="40" data-expected-height="160"></div> 108 <div class="b" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="20"></div> 109 <div class="c" data-offset-x="0" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> 110 <div class="d" data-offset-x="0" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div> 111 </div> 112 </div> 113 114 <div style="position: relative"> 115 <p>direction: RTL | distribution: 'space-around'</p> 116 <div class="grid contentSpaceAround verticalRL directionRTL" data-expected-width="200" data-expected-height="300"> 117 <div class="a" data-offset-x="130" data-offset-y="140" data-expected-width="40" data-expected-height="120"></div> 118 <div class="b" data-offset-x="30" data-offset-y="40" data-expected-width="140" data-expected-height="20"></div> 119 <div class="c" data-offset-x="30" data-offset-y="240" data-expected-width="40" data-expected-height="20"></div> 120 <div class="d" data-offset-x="30" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div> 121 </div> 122 </div> 123 124 <div style="position: relative"> 125 <p>direction: RTL | distribution: 'space-evenly'</p> 126 <div class="grid contentSpaceEvenly verticalRL directionRTL" data-expected-width="200" data-expected-height="300"> 127 <div class="a" data-offset-x="120" data-offset-y="140" data-expected-width="40" data-expected-height="100"></div> 128 <div class="b" data-offset-x="40" data-offset-y="60" data-expected-width="120" data-expected-height="20"></div> 129 <div class="c" data-offset-x="40" data-offset-y="220" data-expected-width="40" data-expected-height="20"></div> 130 <div class="d" data-offset-x="40" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div> 131 </div> 132 </div> 133 134 <div style="position: relative"> 135 <p>direction: RTL | distribution: 'stretch'</p> 136 <div class="grid stretchedGrid contentStretch verticalRL directionRTL" data-expected-width="200" data-expected-height="300"> 137 <div class="a" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="200"></div> 138 <div class="b" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div> 139 <div class="c" data-offset-x="0" data-offset-y="200" data-expected-width="100" data-expected-height="100"></div> 140 <div class="d" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div> 141 </div> 142 </div> 143 144 </body> 145 </html>