grid-gap-parsing-001.html (9775B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Box Alignment Test: gap shorthand parsing</title> 4 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> 5 <link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <style> 9 .gapPx { grid-gap: 12px; } 10 #gapPxTwo { grid-gap: 12px 8px; } 11 #gapPxPercent { grid-gap: 12px 10%; } 12 #gapEm { grid-gap: 2em; font: 10px/1 Monospace; } 13 #gapEmTwo { grid-gap: 2em 4em; font: 10px/1 Monospace; } 14 #gapVw { grid-gap: 2vw; } 15 #gapVwTwo { grid-gap: 2vw 1vh; } 16 #gapPercent { grid-gap: 15%; } 17 #gapPercentTwo { grid-gap: 15% 10%; } 18 #gapCalc { grid-gap: calc(10px + 4px); } 19 #gapCalcFixedPercent { grid-gap: calc(5px + 10%); } 20 #gapCalcTwo { grid-gap: calc(10px + 4px) calc(20px - 8px); } 21 .gapInitial { grid-gap: initial; } 22 .gapInherit { grid-gap: inherit; } 23 24 #invalidGridGapNegative { grid-gap: -10px; } 25 #invalidGridGapMaxContent { grid-gap: max-content; } 26 #invalidGridGapNone { grid-gap: none; } 27 #invalidGridGapAngle { grid-gap: 3rad; } 28 #invalidGridGapResolution { grid-gap: 2dpi; } 29 #invalidGridGapTime { grid-gap: 200ms; } 30 #invalidGridGapThree { grid-gap: 10px 1px 5px; } 31 #invalidGridGapSlash { grid-gap: 10px / 5px; } 32 #invalidGridGapOneWrong { grid-gap: 10px -5px; } 33 </style> 34 <body> 35 <div id="log"></div> 36 37 <div id="default"></div> 38 <div id="gapPx" class="gapPx"></div> 39 <div id="gapPxTwo"></div> 40 <div id="gapPxPercent"></div> 41 <div id="gapEm"></div> 42 <div id="gapEmTwo"></div> 43 <div id="gapVw"></div> 44 <div id="gapVwTwo"></div> 45 <div id="gapPercent"></div> 46 <div id="gapPercentTwo"></div> 47 <div id="gapCalc"></div> 48 <div id="gapCalcFixedPercent"></div> 49 <div id="gapCalcTwo"></div> 50 <div id="gapInitial" class="gapInitial"></div> 51 <div class="gapPx"> 52 <div id="gapInitialPx" class="gapInitial"></div> 53 </div> 54 <div id="gapInherit" class="gapInherit"></div> 55 <div class="gapPx"> 56 <div id="gapInheritPx" class="gapInherit"></div> 57 </div> 58 59 <div id="invalidGridGapNegative"></div> 60 <div id="invalidGridGapMaxContent"></div> 61 <div id="invalidGridGapNone"></div> 62 <div id="invalidGridGapAngle"></div> 63 <div id="invalidGridGapResolution"></div> 64 <div id="invalidGridGapTime"></div> 65 <div id="invalidGridGapThree"></div> 66 <div id="invalidGridGapSlash"></div> 67 <div id="invalidGridGapOneWrong"></div> 68 69 <script> 70 test( 71 function(){ 72 var target = document.getElementById("default"); 73 assert_equals(getComputedStyle(target).rowGap, "normal"); 74 assert_equals(getComputedStyle(target).columnGap, "normal"); 75 }, "Default grid-gap is 'normal'"); 76 test( 77 function(){ 78 var target = document.getElementById("gapPx"); 79 assert_equals(getComputedStyle(target).rowGap, "12px"); 80 assert_equals(getComputedStyle(target).columnGap, "12px"); 81 }, "grid-gap accepts pixels"); 82 test( 83 function(){ 84 var target = document.getElementById("gapPxTwo"); 85 assert_equals(getComputedStyle(target).rowGap, "12px"); 86 assert_equals(getComputedStyle(target).columnGap, "8px"); 87 }, "grid-gap accepts pixels 2"); 88 test( 89 function(){ 90 var target = document.getElementById("gapPxPercent"); 91 assert_equals(getComputedStyle(target).rowGap, "12px"); 92 assert_equals(getComputedStyle(target).columnGap, "10%"); 93 }, "grid-gap accepts pixels combined with percentage"); 94 test( 95 function(){ 96 var target = document.getElementById("gapEm"); 97 assert_equals(getComputedStyle(target).rowGap, "20px"); 98 assert_equals(getComputedStyle(target).columnGap, "20px"); 99 }, "grid-gap accepts em"); 100 test( 101 function(){ 102 var target = document.getElementById("gapEmTwo"); 103 assert_equals(getComputedStyle(target).rowGap, "20px"); 104 assert_equals(getComputedStyle(target).columnGap, "40px"); 105 }, "grid-gap accepts em 2"); 106 test( 107 function(){ 108 var target = document.getElementById("gapVw"); 109 // The gap size would depend on the viewport width, so to make the test pass 110 // in any window size we just check it's not "normal". 111 assert_not_equals(getComputedStyle(target).rowGap, "normal"); 112 assert_not_equals(getComputedStyle(target).columnGap, "normal"); 113 }, "grid-gap accepts vw"); 114 test( 115 function(){ 116 var target = document.getElementById("gapVwTwo"); 117 // The gap size would depend on the viewport width, so to make the test pass 118 // in any window size we just check it's not "normal". 119 assert_not_equals(getComputedStyle(target).rowGap, "normal"); 120 assert_not_equals(getComputedStyle(target).columnGap, "normal"); 121 }, "grid-gap accepts vw and vh"); 122 test( 123 function(){ 124 var target = document.getElementById("gapPercent"); 125 assert_equals(getComputedStyle(target).rowGap, "15%"); 126 assert_equals(getComputedStyle(target).columnGap, "15%"); 127 }, "grid-gap accepts percentage"); 128 test( 129 function(){ 130 var target = document.getElementById("gapPercentTwo"); 131 assert_equals(getComputedStyle(target).rowGap, "15%"); 132 assert_equals(getComputedStyle(target).columnGap, "10%"); 133 }, "grid-gap accepts percentage 2"); 134 test( 135 function(){ 136 var target = document.getElementById("gapCalc"); 137 assert_equals(getComputedStyle(target).rowGap, "14px"); 138 assert_equals(getComputedStyle(target).columnGap, "14px"); 139 }, "grid-gap accepts calc()"); 140 test( 141 function(){ 142 var target = document.getElementById("gapCalcFixedPercent"); 143 assert_equals(getComputedStyle(target).rowGap, "calc(10% + 5px)"); 144 assert_equals(getComputedStyle(target).columnGap, "calc(10% + 5px)"); 145 }, "grid-gap accepts calc() mixing fixed and percentage values"); 146 test( 147 function(){ 148 var target = document.getElementById("gapCalcTwo"); 149 assert_equals(getComputedStyle(target).rowGap, "14px"); 150 assert_equals(getComputedStyle(target).columnGap, "12px"); 151 }, "grid-gap accepts calc() 2"); 152 test( 153 function(){ 154 var target = document.getElementById("gapInitial"); 155 assert_equals(getComputedStyle(target).rowGap, "normal"); 156 assert_equals(getComputedStyle(target).columnGap, "normal"); 157 }, "Initial grid-gap is 'normal'"); 158 test( 159 function(){ 160 var target = document.getElementById("gapInitialPx"); 161 assert_equals(getComputedStyle(target).rowGap, "normal"); 162 assert_equals(getComputedStyle(target).columnGap, "normal"); 163 }, "Initial grid-gap is 'normal' 2"); 164 test( 165 function(){ 166 var target = document.getElementById("gapInherit"); 167 assert_equals(getComputedStyle(target).rowGap, "normal"); 168 assert_equals(getComputedStyle(target).columnGap, "normal"); 169 }, "Initial inherited grid-gap is 'normal'"); 170 test( 171 function(){ 172 var target = document.getElementById("gapInheritPx"); 173 assert_equals(getComputedStyle(target).rowGap, "12px"); 174 assert_equals(getComputedStyle(target).columnGap, "12px"); 175 }, "grid-gap is inheritable"); 176 177 test( 178 function(){ 179 var target = document.getElementById("invalidGridGapNegative"); 180 assert_equals(getComputedStyle(target).rowGap, "normal"); 181 assert_equals(getComputedStyle(target).columnGap, "normal"); 182 }, "Negative grid-gap is invalid"); 183 test( 184 function(){ 185 var target = document.getElementById("invalidGridGapMaxContent"); 186 assert_equals(getComputedStyle(target).rowGap, "normal"); 187 assert_equals(getComputedStyle(target).columnGap, "normal"); 188 }, "'max-content' grid-gap is invalid"); 189 test( 190 function(){ 191 var target = document.getElementById("invalidGridGapNone"); 192 assert_equals(getComputedStyle(target).rowGap, "normal"); 193 assert_equals(getComputedStyle(target).columnGap, "normal"); 194 }, "'none' grid-gap is invalid"); 195 test( 196 function(){ 197 var target = document.getElementById("invalidGridGapAngle"); 198 assert_equals(getComputedStyle(target).rowGap, "normal"); 199 assert_equals(getComputedStyle(target).columnGap, "normal"); 200 }, "Angle grid-gap is invalid"); 201 test( 202 function(){ 203 var target = document.getElementById("invalidGridGapResolution"); 204 assert_equals(getComputedStyle(target).rowGap, "normal"); 205 assert_equals(getComputedStyle(target).columnGap, "normal"); 206 }, "Resolution grid-gap is invalid"); 207 test( 208 function(){ 209 var target = document.getElementById("invalidGridGapTime"); 210 assert_equals(getComputedStyle(target).rowGap, "normal"); 211 assert_equals(getComputedStyle(target).columnGap, "normal"); 212 }, "Time grid-gap is invalid"); 213 test( 214 function(){ 215 var target = document.getElementById("invalidGridGapThree"); 216 assert_equals(getComputedStyle(target).rowGap, "normal"); 217 assert_equals(getComputedStyle(target).columnGap, "normal"); 218 }, "grid-gap with three values is invalid"); 219 test( 220 function(){ 221 var target = document.getElementById("invalidGridGapSlash"); 222 assert_equals(getComputedStyle(target).rowGap, "normal"); 223 assert_equals(getComputedStyle(target).columnGap, "normal"); 224 }, "grid-gap with slash is invalid"); 225 test( 226 function(){ 227 var target = document.getElementById("invalidGridGapOneWrong"); 228 assert_equals(getComputedStyle(target).rowGap, "normal"); 229 assert_equals(getComputedStyle(target).columnGap, "normal"); 230 }, "grid-gap with one wrong value is invalid"); 231 </script> 232 </body>