grid-column-gap-parsing-001.html (6160B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Box Alignment Test: grid-column-gap 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 .columnGapPx { grid-column-gap: 12px; } 10 #columnGapEm { grid-column-gap: 2em; font: 10px/1 Monospace; } 11 #columnGapVw { grid-column-gap: 2vw; } 12 #columnGapPercent { grid-column-gap: 15%; } 13 #columnGapCalc { grid-column-gap: calc(10px + 4px); } 14 #columnGapCalcFixedPercent { grid-column-gap: calc(5px + 10%); } 15 .columnGapInitial { grid-column-gap: initial; } 16 .columnGapInherit { grid-column-gap: inherit; } 17 18 #invalidColumnGapNegative { grid-column-gap: -10px; } 19 #invalidColumnGapMaxContent { grid-column-gap: max-content; } 20 #invalidColumnGapNone { grid-column-gap: none; } 21 #invalidColumnGapMultiple { grid-column-gap: 10px 1px; } 22 #invalidColumnGapAngle { grid-column-gap: 3rad; } 23 #invalidColumnGapResolution { grid-column-gap: 2dpi; } 24 #invalidColumnGapTime { grid-column-gap: 200ms; } 25 </style> 26 <body> 27 <div id="log"></div> 28 29 <div id="default"></div> 30 <div id="columnGapPx" class="columnGapPx"></div> 31 <div id="columnGapEm"></div> 32 <div id="columnGapVw"></div> 33 <div id="columnGapPercent"></div> 34 <div id="columnGapCalc"></div> 35 <div id="columnGapCalcFixedPercent"></div> 36 <div id="columnGapInitial" class="columnGapInitial"></div> 37 <div class="columnGapPx"> 38 <div id="columnGapInitialPx" class="columnGapInitial"></div> 39 </div> 40 <div id="columnGapInherit" class="columnGapInherit"></div> 41 <div class="columnGapPx"> 42 <div id="columnGapInheritPx" class="columnGapInherit"></div> 43 </div> 44 45 <div id="invalidColumnGapNegative"></div> 46 <div id="invalidColumnGapMaxContent"></div> 47 <div id="invalidColumnGapNone"></div> 48 <div id="invalidColumnGapMultiple"></div> 49 <div id="invalidColumnGapAngle"></div> 50 <div id="invalidColumnGapResolution"></div> 51 <div id="invalidColumnGapTime"></div> 52 53 <script> 54 test( 55 function(){ 56 var target = document.getElementById("default"); 57 assert_equals(getComputedStyle(target).columnGap, "normal"); 58 }, "Default grid-column-gap is 'normal'"); 59 test( 60 function(){ 61 var target = document.getElementById("columnGapPx"); 62 assert_equals(getComputedStyle(target).columnGap, "12px"); 63 }, "grid-column-gap accepts pixels"); 64 test( 65 function(){ 66 var target = document.getElementById("columnGapEm"); 67 assert_equals(getComputedStyle(target).columnGap, "20px"); 68 }, "grid-column-gap accepts em"); 69 test( 70 function(){ 71 var target = document.getElementById("columnGapVw"); 72 // The columnGap size would depend on the viewport width, so to make the test pass 73 // in any window size we just check it's not "normal". 74 assert_not_equals(getComputedStyle(target).columnGap, "normal"); 75 }, "grid-column-gap accepts vw"); 76 test( 77 function(){ 78 var target = document.getElementById("columnGapPercent"); 79 assert_equals(getComputedStyle(target).columnGap, "15%"); 80 }, "grid-column-gap accepts percentage"); 81 test( 82 function(){ 83 var target = document.getElementById("columnGapCalc"); 84 assert_equals(getComputedStyle(target).columnGap, "14px"); 85 }, "grid-column-gap accepts calc()"); 86 test( 87 function(){ 88 var target = document.getElementById("columnGapCalcFixedPercent"); 89 assert_equals(getComputedStyle(target).columnGap, "calc(10% + 5px)"); 90 }, "grid-column-gap accepts calc() mixing fixed and percentage values"); 91 test( 92 function(){ 93 var target = document.getElementById("columnGapInitial"); 94 assert_equals(getComputedStyle(target).columnGap, "normal"); 95 }, "Initial grid-column-gap is 'normal'"); 96 test( 97 function(){ 98 var target = document.getElementById("columnGapInitialPx"); 99 assert_equals(getComputedStyle(target).columnGap, "normal"); 100 }, "Initial grid-column-gap is 'normal' 2"); 101 test( 102 function(){ 103 var target = document.getElementById("columnGapInherit"); 104 assert_equals(getComputedStyle(target).columnGap, "normal"); 105 }, "Initial inherited grid-column-gap is 'normal'"); 106 test( 107 function(){ 108 var target = document.getElementById("columnGapInheritPx"); 109 assert_equals(getComputedStyle(target).columnGap, "12px"); 110 }, "grid-column-gap is inheritable"); 111 112 113 test( 114 function(){ 115 var target = document.getElementById("invalidColumnGapNegative"); 116 assert_equals(getComputedStyle(target).columnGap, "normal"); 117 }, "Negative grid-column-gap is invalid"); 118 test( 119 function(){ 120 var target = document.getElementById("invalidColumnGapMaxContent"); 121 assert_equals(getComputedStyle(target).columnGap, "normal"); 122 }, "'max-content' grid-column-gap is invalid"); 123 test( 124 function(){ 125 var target = document.getElementById("invalidColumnGapNone"); 126 assert_equals(getComputedStyle(target).columnGap, "normal"); 127 }, "'none' grid-column-gap is invalid"); 128 test( 129 function(){ 130 var target = document.getElementById("invalidColumnGapMultiple"); 131 assert_equals(getComputedStyle(target).columnGap, "normal"); 132 }, "grid-column-gap with multiple values is invalid"); 133 test( 134 function(){ 135 var target = document.getElementById("invalidColumnGapAngle"); 136 assert_equals(getComputedStyle(target).columnGap, "normal"); 137 }, "Angle grid-column-gap is invalid"); 138 test( 139 function(){ 140 var target = document.getElementById("invalidColumnGapResolution"); 141 assert_equals(getComputedStyle(target).columnGap, "normal"); 142 }, "Resolution grid-column-gap is invalid"); 143 test( 144 function(){ 145 var target = document.getElementById("invalidColumnGapTime"); 146 assert_equals(getComputedStyle(target).columnGap, "normal"); 147 }, "Time grid-column-gap is invalid"); 148 </script> 149 </body>