grid-content-alignment-with-span-001.html (7221B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Grid Layout Test: content alignment and items spanning multiple tracks.</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." /> 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: 300px; 30 height: 200px; 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 <div style="position: relative"> 62 <p>direction: LTR | distribution: 'space-between'</p> 63 <div class="grid contentSpaceBetween" data-expected-width="300" data-expected-height="200"> 64 <div class="a" data-offset-x="0" data-offset-y="0" data-expected-width="160" data-expected-height="40"></div> 65 <div class="b" data-offset-x="280" data-offset-y="0" data-expected-width="20" data-expected-height="200"></div> 66 <div class="c" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> 67 <div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> 68 </div> 69 </div> 70 71 <div style="position: relative"> 72 <p>direction: LTR | distribution: 'space-around'</p> 73 <div class="grid contentSpaceAround" data-expected-width="300" data-expected-height="200"> 74 <div class="a" data-offset-x="40" data-offset-y="30" data-expected-width="120" data-expected-height="40"></div> 75 <div class="b" data-offset-x="240" data-offset-y="30" data-expected-width="20" data-expected-height="140"></div> 76 <div class="c" data-offset-x="40" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> 77 <div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> 78 </div> 79 </div> 80 81 <div style="position: relative"> 82 <p>direction: LTR | distribution: 'space-evenly'</p> 83 <div class="grid contentSpaceEvenly" data-expected-width="300" data-expected-height="200"> 84 <div class="a" data-offset-x="60" data-offset-y="40" data-expected-width="100" data-expected-height="40"></div> 85 <div class="b" data-offset-x="220" data-offset-y="40" data-expected-width="20" data-expected-height="120"></div> 86 <div class="c" data-offset-x="60" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div> 87 <div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div> 88 </div> 89 </div> 90 91 <div style="position: relative"> 92 <p>direction: LTR | distribution: 'stretch'</p> 93 <div class="grid stretchedGrid contentStretch" data-expected-width="300" data-expected-height="200"> 94 <div class="a" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div> 95 <div class="b" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> 96 <div class="c" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div> 97 <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div> 98 </div> 99 </div> 100 101 <!-- RTL direction. --> 102 <div style="position: relative"> 103 <p>direction: RTL | distribution: 'space-between'</p> 104 <div class="grid contentSpaceBetween directionRTL" data-expected-width="300" data-expected-height="200"> 105 <div class="a" data-offset-x="140" data-offset-y="0" data-expected-width="160" data-expected-height="40"></div> 106 <div class="b" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="200"></div> 107 <div class="c" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> 108 <div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> 109 </div> 110 </div> 111 112 <div style="position: relative"> 113 <p>direction: RTL | distribution: 'space-around'</p> 114 <div class="grid contentSpaceAround directionRTL" data-expected-width="300" data-expected-height="200"> 115 <div class="a" data-offset-x="140" data-offset-y="30" data-expected-width="120" data-expected-height="40"></div> 116 <div class="b" data-offset-x="40" data-offset-y="30" data-expected-width="20" data-expected-height="140"></div> 117 <div class="c" data-offset-x="240" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> 118 <div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> 119 </div> 120 </div> 121 122 <div style="position: relative"> 123 <p>direction: RTL | distribution: 'space-evenly''</p> 124 <div class="grid contentSpaceEvenly directionRTL" data-expected-width="300" data-expected-height="200"> 125 <div class="a" data-offset-x="140" data-offset-y="40" data-expected-width="100" data-expected-height="40"></div> 126 <div class="b" data-offset-x="60" data-offset-y="40" data-expected-width="20" data-expected-height="120"></div> 127 <div class="c" data-offset-x="220" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div> 128 <div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div> 129 </div> 130 </div> 131 132 <div style="position: relative"> 133 <p>direction: RTL | distribution: 'stretch'</p> 134 <div class="grid stretchedGrid contentStretch directionRTL" data-expected-width="300" data-expected-height="200"> 135 <div class="a" data-offset-x="100" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div> 136 <div class="b" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> 137 <div class="c" data-offset-x="200" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div> 138 <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div> 139 </div> 140 </div> 141 142 </body> 143 </html>