| <!DOCTYPE HTML> |
| <!-- |
| Any copyright is dedicated to the Public Domain. |
| http://creativecommons.org/publicdomain/zero/1.0/ |
| --> |
| <html><head> |
| <meta charset="utf-8"> |
| <title>CSS Grid Test: subgrid inside a parent with repeat(auto-fit) columns</title> |
| <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> |
| <link rel="help" href="https://drafts.csswg.org/css-grid-2/"> |
| <link rel="match" href="parent-repeat-auto-fit-001-ref.html"> |
| <style> |
| html,body { |
| color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; |
| } |
| |
| .grid { |
| display: inline-grid; |
| width: 50px; |
| border: 1px solid; |
| } |
| |
| .subgrid { |
| display: grid; |
| grid-template-columns: subgrid; |
| grid-column: 3 / span 4; |
| grid-auto-rows: 8px; |
| background: grey; |
| } |
| |
| .fit-0a { grid-template-columns: repeat(auto-fit, [y] 30px) [z] 1px [z] 1px [z] 1px [z] 1px [z] } |
| .fit-0b { grid-template-columns: [x] repeat(auto-fit, [y] 30px) [z] 1px [z] 1px [z] 1px [z] } |
| .fit-0c { grid-template-columns: [x] 1px [x] repeat(auto-fit, [y] 10px) [z] 1px [z] 1px [z] } |
| .fit-0d { grid-template-columns: [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) [z] 1px [z] } |
| .fit-0e { grid-template-columns: [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) [z] } |
| .fit-0f { grid-template-columns: [x] 2px [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) } |
| .fit-0g { grid-template-columns: [x] 2px [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) [z] 1px [z] } |
| .fit-0h { grid-template-columns: [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) [z] 1px [z] } |
| .fit-0i { grid-template-columns: [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) [z] } |
| .fit-0j { grid-template-columns: [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) } |
| .fit-0k { grid-template-columns: repeat(auto-fit, [y] 10px) repeat(100, [z] 10px) } |
| .fit-0l { grid-template-columns: [x] repeat(auto-fit, [y] 10px) repeat(100, [z] 10px) } |
| .fit-0m { grid-template-columns: repeat(100, [x] 10px) repeat(auto-fit, [y] 10px) } |
| |
| .fit-1a { grid-template-columns: repeat(auto-fit, [y] 10px) [z] 1px [z] 1px [z] 1px [z] } |
| .fit-1b { grid-template-columns: [x] repeat(auto-fit, [y] 10px) [z] 1px [z] 1px [z] } |
| .fit-1c { grid-template-columns: [x] 2px [x] repeat(auto-fit, [y] 10px) [z] 1px [z] } |
| .fit-1d { grid-template-columns: [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) [z] } |
| .fit-1e { grid-template-columns: [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) } |
| |
| .fit-2a { grid-template-columns: repeat(auto-fit, [y] 10px) [z] 1px [z] 1px [z] } |
| .fit-2b { grid-template-columns: [x] repeat(auto-fit, [y] 10px) [z] 1px [z] } |
| .fit-2c { grid-template-columns: [x] 2px [x] repeat(auto-fit, [y] 10px) [z] } |
| .fit-2d { grid-template-columns: [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) } |
| |
| .fit-3a { grid-template-columns: repeat(auto-fit, [y] 10px) [z] 1px [z] } |
| .fit-3b { grid-template-columns: [x] repeat(auto-fit, [y] 10px) [z] } |
| .fit-3c { grid-template-columns: [x] 2px [x] repeat(auto-fit, [y] 10px) } |
| |
| .fit-4a { grid-template-columns: repeat(auto-fit, [y] 10px) [z] } |
| .fit-4b { grid-template-columns: [x] repeat(auto-fit, [y] 10px) } |
| |
| .fit-5 { grid-template-columns: repeat(auto-fit, [y] 10px) } |
| |
| .subgrid > :nth-child(2n) { background: black; } |
| .subgrid > :nth-child(2n+1) { background: pink; } |
| |
| </style> |
| </head> |
| <body> |
| |
| <div class="grid fit-0a"><div class="subgrid"> |
| <div style="grid-column:y 5"></div> |
| <div style="grid-column:y 4"></div> |
| <div style="grid-column:y 3"></div> |
| <div style="grid-column:y 2"></div> |
| <div style="grid-column:y 1"></div> |
| <div style="grid-column:y -1"></div> |
| <div style="grid-column:y -2"></div> |
| <div style="grid-column:y -3"></div> |
| <div style="grid-column:y -4"></div> |
| <div style="grid-column:y -5"></div> |
| </div></div> |
| |
| <div class="grid fit-0b"><div class="subgrid"> |
| <div style="grid-column:y 5"></div> |
| <div style="grid-column:y 4"></div> |
| <div style="grid-column:y 3"></div> |
| <div style="grid-column:y 2"></div> |
| <div style="grid-column:y 1"></div> |
| <div style="grid-column:y -1"></div> |
| <div style="grid-column:y -2"></div> |
| <div style="grid-column:y -3"></div> |
| <div style="grid-column:y -4"></div> |
| <div style="grid-column:y -5"></div> |
| </div></div> |
| |
| <div class="grid fit-0c"><div class="subgrid"> |
| <div style="grid-column:y 5"></div> |
| <div style="grid-column:y 4"></div> |
| <div style="grid-column:y 3"></div> |
| <div style="grid-column:y 2"></div> |
| <div style="grid-column:y 1"></div> |
| <div style="grid-column:y -1"></div> |
| <div style="grid-column:y -2"></div> |
| <div style="grid-column:y -3"></div> |
| <div style="grid-column:y -4"></div> |
| <div style="grid-column:y -5"></div> |
| </div></div> |
| |
| <div class="grid fit-0d"><div class="subgrid"> |
| <div style="grid-column:y 5"></div> |
| <div style="grid-column:y 4"></div> |
| <div style="grid-column:y 3"></div> |
| <div style="grid-column:y 2"></div> |
| <div style="grid-column:y 1"></div> |
| <div style="grid-column:y -1"></div> |
| <div style="grid-column:y -2"></div> |
| <div style="grid-column:y -3"></div> |
| <div style="grid-column:y -4"></div> |
| <div style="grid-column:y -5"></div> |
| </div></div> |
| |
| <div class="grid fit-0e"><div class="subgrid"> |
| <div style="grid-column:y 5"></div> |
| <div style="grid-column:y 4"></div> |
| <div style="grid-column:y 3"></div> |
| <div style="grid-column:y 2"></div> |
| <div style="grid-column:y 1"></div> |
| <div style="grid-column:y -1"></div> |
| <div style="grid-column:y -2"></div> |
| <div style="grid-column:y -3"></div> |
| <div style="grid-column:y -4"></div> |
| <div style="grid-column:y -5"></div> |
| </div></div> |
| |
| <div class="grid fit-0f"><div class="subgrid"> |
| <div style="grid-column:y 5"></div> |
| <div style="grid-column:y 4"></div> |
| <div style="grid-column:y 3"></div> |
| <div style="grid-column:y 2"></div> |
| <div style="grid-column:y 1"></div> |
| <div style="grid-column:y -1"></div> |
| <div style="grid-column:y -2"></div> |
| <div style="grid-column:y -3"></div> |
| <div style="grid-column:y -4"></div> |
| <div style="grid-column:y -5"></div> |
| </div></div> |
| |
| <div class="grid fit-0g"><div class="subgrid"> |
| <div style="grid-column:y 5"></div> |
| <div style="grid-column:y 4"></div> |
| <div style="grid-column:y 3"></div> |
| <div style="grid-column:y 2"></div> |
| <div style="grid-column:y 1"></div> |
| <div style="grid-column:y -1"></div> |
| <div style="grid-column:y -2"></div> |
| <div style="grid-column:y -3"></div> |
| <div style="grid-column:y -4"></div> |
| <div style="grid-column:y -5"></div> |
| </div></div> |
| |
| <div class="grid fit-0h"><div class="subgrid"> |
| <div style="grid-column:y 5"></div> |
| <div style="grid-column:y 4"></div> |
| <div style="grid-column:y 3"></div> |
| <div style="grid-column:y 2"></div> |
| <div style="grid-column:y 1"></div> |
| <div style="grid-column:y -1"></div> |
| <div style="grid-column:y -2"></div> |
| <div style="grid-column:y -3"></div> |
| <div style="grid-column:y -4"></div> |
| <div style="grid-column:y -5"></div> |
| </div></div> |
| |
| <div class="grid fit-0i"><div class="subgrid"> |
| <div style="grid-column:y 5"></div> |
| <div style="grid-column:y 4"></div> |
| <div style="grid-column:y 3"></div> |
| <div style="grid-column:y 2"></div> |
| <div style="grid-column:y 1"></div> |
| <div style="grid-column:y -1"></div> |
| <div style="grid-column:y -2"></div> |
| <div style="grid-column:y -3"></div> |
| <div style="grid-column:y -4"></div> |
| <div style="grid-column:y -5"></div> |
| </div></div> |
| |
| <div class="grid fit-0j"><div class="subgrid"> |
| <div style="grid-column:y 5"></div> |
| <div style="grid-column:y 4"></div> |
| <div style="grid-column:y 3"></div> |
| <div style="grid-column:y 2"></div> |
| <div style="grid-column:y 1"></div> |
| <div style="grid-column:y -1"></div> |
| <div style="grid-column:y -2"></div> |
| <div style="grid-column:y -3"></div> |
| <div style="grid-column:y -4"></div> |
| <div style="grid-column:y -5"></div> |
| </div></div> |
| |
| <div class="grid fit-0k"><div class="subgrid"> |
| <div style="grid-column:y 5"></div> |
| <div style="grid-column:y 4"></div> |
| <div style="grid-column:y 3"></div> |
| <div style="grid-column:y 2"></div> |
| <div style="grid-column:y 1"></div> |
| <div style="grid-column:y -1"></div> |
| <div style="grid-column:y -2"></div> |
| <div style="grid-column:y -3"></div> |
| <div style="grid-column:y -4"></div> |
| <div style="grid-column:y -5"></div> |
| </div></div> |
| |
| <div class="grid fit-0l"><div class="subgrid"> |
| <div style="grid-column:y 5"></div> |
| <div style="grid-column:y 4"></div> |
| <div style="grid-column:y 3"></div> |
| <div style="grid-column:y 2"></div> |
| <div style="grid-column:y 1"></div> |
| <div style="grid-column:y -1"></div> |
| <div style="grid-column:y -2"></div> |
| <div style="grid-column:y -3"></div> |
| <div style="grid-column:y -4"></div> |
| <div style="grid-column:y -5"></div> |
| </div></div> |
| |
| <div class="grid fit-0m"><div class="subgrid"> |
| <div style="grid-column:y 5"></div> |
| <div style="grid-column:y 4"></div> |
| <div style="grid-column:y 3"></div> |
| <div style="grid-column:y 2"></div> |
| <div style="grid-column:y 1"></div> |
| <div style="grid-column:y -1"></div> |
| <div style="grid-column:y -2"></div> |
| <div style="grid-column:y -3"></div> |
| <div style="grid-column:y -4"></div> |
| <div style="grid-column:y -5"></div> |
| </div></div> |
| |
| <div class="grid fit-1a"><div class="subgrid"> |
| <div style="grid-column:y 5"></div> |
| <div style="grid-column:y 4"></div> |
| <div style="grid-column:y 3"></div> |
| <div style="grid-column:y 2"></div> |
| <div style="grid-column:y 1"></div> |
| <div style="grid-column:y -1"></div> |
| <div style="grid-column:y -2"></div> |
| <div style="grid-column:y -3"></div> |
| <div style="grid-column:y -4"></div> |
| <div style="grid-column:y -5"></div> |
| </div></div> |
| |
| <div class="grid fit-1b"><div class="subgrid"> |
| <div style="grid-column:y 5"></div> |
| <div style="grid-column:y 4"></div> |
| <div style="grid-column:y 3"></div> |
| <div style="grid-column:y 2"></div> |
| <div style="grid-column:y 1"></div> |
| <div style="grid-column:y -1"></div> |
| <div style="grid-column:y -2"></div> |
| <div style="grid-column:y -3"></div> |
| <div style="grid-column:y -4"></div> |
| <div style="grid-column:y -5"></div> |
| </div></div> |
| |
| <div class="grid fit-1c"><div class="subgrid"> |
| <div style="grid-column:y 5"></div> |
| <div style="grid-column:y 4"></div> |
| <div style="grid-column:y 3"></div> |
| <div style="grid-column:y 2"></div> |
| <div style="grid-column:y 1"></div> |
| <div style="grid-column:y -1"></div> |
| <div style="grid-column:y -2"></div> |
| <div style="grid-column:y -3"></div> |
| <div style="grid-column:y -4"></div> |
| <div style="grid-column:y -5"></div> |
| </div></div> |
| |
| <div class="grid fit-1d"><div class="subgrid"> |
| <div style="grid-column:y 5"></div> |
| <div style="grid-column:y 4"></div> |
| <div style="grid-column:y 3"></div> |
| <div style="grid-column:y 2"></div> |
| <div style="grid-column:y 1"></div> |
| <div style="grid-column:y -1"></div> |
| <div style="grid-column:y -2"></div> |
| <div style="grid-column:y -3"></div> |
| <div style="grid-column:y -4"></div> |
| <div style="grid-column:y -5"></div> |
| </div></div> |
| |
| <div class="grid fit-1e"><div class="subgrid"> |
| <div style="grid-column:y 5"></div> |
| <div style="grid-column:y 4"></div> |
| <div style="grid-column:y 3"></div> |
| <div style="grid-column:y 2"></div> |
| <div style="grid-column:y 1"></div> |
| <div style="grid-column:y -1"></div> |
| <div style="grid-column:y -2"></div> |
| <div style="grid-column:y -3"></div> |
| <div style="grid-column:y -4"></div> |
| <div style="grid-column:y -5"></div> |
| </div></div> |
| |
| <div class="grid fit-2a"><div class="subgrid"> |
| <div style="grid-column:y 5"></div> |
| <div style="grid-column:y 4"></div> |
| <div style="grid-column:y 3"></div> |
| <div style="grid-column:y 2"></div> |
| <div style="grid-column:y 1"></div> |
| <div style="grid-column:y -1"></div> |
| <div style="grid-column:y -2"></div> |
| <div style="grid-column:y -3"></div> |
| <div style="grid-column:y -4"></div> |
| <div style="grid-column:y -5"></div> |
| </div></div> |
| |
| <div class="grid fit-2b"><div class="subgrid"> |
| <div style="grid-column:y 5"></div> |
| <div style="grid-column:y 4"></div> |
| <div style="grid-column:y 3"></div> |
| <div style="grid-column:y 2"></div> |
| <div style="grid-column:y 1"></div> |
| <div style="grid-column:y -1"></div> |
| <div style="grid-column:y -2"></div> |
| <div style="grid-column:y -3"></div> |
| <div style="grid-column:y -4"></div> |
| <div style="grid-column:y -5"></div> |
| </div></div> |
| |
| <div class="grid fit-2c"><div class="subgrid"> |
| <div style="grid-column:y 5"></div> |
| <div style="grid-column:y 4"></div> |
| <div style="grid-column:y 3"></div> |
| <div style="grid-column:y 2"></div> |
| <div style="grid-column:y 1"></div> |
| <div style="grid-column:y -1"></div> |
| <div style="grid-column:y -2"></div> |
| <div style="grid-column:y -3"></div> |
| <div style="grid-column:y -4"></div> |
| <div style="grid-column:y -5"></div> |
| </div></div> |
| |
| <div class="grid fit-2d"><div class="subgrid"> |
| <div style="grid-column:y 5"></div> |
| <div style="grid-column:y 4"></div> |
| <div style="grid-column:y 3"></div> |
| <div style="grid-column:y 2"></div> |
| <div style="grid-column:y 1"></div> |
| <div style="grid-column:y -1"></div> |
| <div style="grid-column:y -2"></div> |
| <div style="grid-column:y -3"></div> |
| <div style="grid-column:y -4"></div> |
| <div style="grid-column:y -5"></div> |
| </div></div> |
| |
| <div class="grid fit-3a"><div class="subgrid"> |
| <div style="grid-column:y 5"></div> |
| <div style="grid-column:y 4"></div> |
| <div style="grid-column:y 3"></div> |
| <div style="grid-column:y 2"></div> |
| <div style="grid-column:y 1"></div> |
| <div style="grid-column:y -1"></div> |
| <div style="grid-column:y -2"></div> |
| <div style="grid-column:y -3"></div> |
| <div style="grid-column:y -4"></div> |
| <div style="grid-column:y -5"></div> |
| </div></div> |
| |
| <div class="grid fit-3b"><div class="subgrid"> |
| <div style="grid-column:y 5"></div> |
| <div style="grid-column:y 4"></div> |
| <div style="grid-column:y 3"></div> |
| <div style="grid-column:y 2"></div> |
| <div style="grid-column:y 1"></div> |
| <div style="grid-column:y -1"></div> |
| <div style="grid-column:y -2"></div> |
| <div style="grid-column:y -3"></div> |
| <div style="grid-column:y -4"></div> |
| <div style="grid-column:y -5"></div> |
| </div></div> |
| |
| <div class="grid fit-3c"><div class="subgrid"> |
| <div style="grid-column:y 5"></div> |
| <div style="grid-column:y 4"></div> |
| <div style="grid-column:y 3"></div> |
| <div style="grid-column:y 2"></div> |
| <div style="grid-column:y 1"></div> |
| <div style="grid-column:y -1"></div> |
| <div style="grid-column:y -2"></div> |
| <div style="grid-column:y -3"></div> |
| <div style="grid-column:y -4"></div> |
| <div style="grid-column:y -5"></div> |
| </div></div> |
| |
| <div class="grid fit-4a"><div class="subgrid"> |
| <div style="grid-column:y 5"></div> |
| <div style="grid-column:y 4"></div> |
| <div style="grid-column:y 3"></div> |
| <div style="grid-column:y 2"></div> |
| <div style="grid-column:y 1"></div> |
| <div style="grid-column:y -1"></div> |
| <div style="grid-column:y -2"></div> |
| <div style="grid-column:y -3"></div> |
| <div style="grid-column:y -4"></div> |
| <div style="grid-column:y -5"></div> |
| </div></div> |
| |
| <div class="grid fit-4b"><div class="subgrid"> |
| <div style="grid-column:y 5"></div> |
| <div style="grid-column:y 4"></div> |
| <div style="grid-column:y 3"></div> |
| <div style="grid-column:y 2"></div> |
| <div style="grid-column:y 1"></div> |
| <div style="grid-column:y -1"></div> |
| <div style="grid-column:y -2"></div> |
| <div style="grid-column:y -3"></div> |
| <div style="grid-column:y -4"></div> |
| <div style="grid-column:y -5"></div> |
| </div></div> |
| |
| <div class="grid fit-5"><div class="subgrid"> |
| <div style="grid-column:y 5"></div> |
| <div style="grid-column:y 4"></div> |
| <div style="grid-column:y 3"></div> |
| <div style="grid-column:y 2"></div> |
| <div style="grid-column:y 1"></div> |
| <div style="grid-column:y -1"></div> |
| <div style="grid-column:y -2"></div> |
| <div style="grid-column:y -3"></div> |
| <div style="grid-column:y -4"></div> |
| <div style="grid-column:y -5"></div> |
| </div></div> |
| |
| <script> |
| const expectedResults = [ |
| "[y] 0px [z] 1px [z] 1px [z] 1px [z] 1px [z] 46px", |
| "[x y] 0px [z] 1px [z] 1px [z] 1px [z] 23.5px 23.5px", |
| "[x] 1px [x y] 0px [y] 10px [y] 10px [y] 10px [z] 1px [z] 1px [z]", |
| "[x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 10px [z] 1px [z]", |
| "[x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 0px [z]", |
| "[x] 2px [x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 0px [y] 0px", |
| "[x] 2px [x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 0px [y] 0px [z] 1px [z]", |
| "[x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x y] 0px [y] 0px [y] 0px [z] 1px [z]", |
| "[x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x y] 0px [y] 0px [y] 0px [z]", |
| "[x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x y] 0px [y] 0px [y] 0px", |
| "[y] 0px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px", |
| "[x y] 0px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px", |
| "[x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [y] 0px", |
| "[y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 1px [z] 1px [z]", |
| "[x y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 1px [z]", |
| "[x] 2px [x y] 0px [y] 10px [y] 10px [y] 10px [z] 1px [z]", |
| "[x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 10px [z]", |
| "[x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 0px", |
| "[y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 1px [z]", |
| "[x y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 29px", |
| "[x] 2px [x y] 0px [y] 10px [y] 10px [y] 10px [z] 18px", |
| "[x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 10px", |
| "[y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 29px", |
| "[x y] 0px [y] 0px [y] 10px [y] 10px [y] 10px [z] 20px", |
| "[x] 2px [x y] 0px [y] 10px [y] 10px [y] 10px 18px", |
| "[y] 0px [y] 0px [y] 10px [y] 10px [y] 10px [z] 20px", |
| "[x y] 0px [y] 0px [y] 10px [y] 10px [y] 10px 20px", |
| "[y] 0px [y] 0px [y] 10px [y] 10px [y] 10px 20px", |
| ]; |
| [...document.querySelectorAll('.grid')].forEach(function(grid, i) { |
| let actual = window.getComputedStyle(grid)['grid-template-columns']; |
| let expected = expectedResults[i]; |
| if (actual != expected) { |
| let err = "Unexpected getComputedStyle value for grid " + i + " with className '" + grid.className + "':" + |
| " Actual: \"" + actual + "\", Expected: \"" + expected + "\""; |
| document.body.appendChild(document.createTextNode(err)); |
| } |
| }); |
| </script> |
| |
| </body> |
| </html> |