row-gap-parsing-001.html (5667B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Box Alignment Test: row-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/#column-row-gap"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <style> 9 .rowGapPx { row-gap: 12px; } 10 #rowGapEm { row-gap: 2em; font: 10px/1 Monospace; } 11 #rowGapVw { row-gap: 2vw; } 12 #rowGapPercent { row-gap: 15%; } 13 #rowGapCalc { row-gap: calc(10px + 4px); } 14 #rowGapCalcFixedPercent { row-gap: calc(5px + 10%); } 15 .rowGapInitial { row-gap: initial; } 16 .rowGapInherit { row-gap: inherit; } 17 18 #invalidRowGapNegative { row-gap: -10px; } 19 #invalidRowGapMaxContent { row-gap: max-content; } 20 #invalidRowGapNone { row-gap: none; } 21 #invalidRowGapMultiple { row-gap: 10px 1px; } 22 #invalidRowGapAngle { row-gap: 3rad; } 23 #invalidRowGapResolution { row-gap: 2dpi; } 24 #invalidRowGapTime { row-gap: 200ms; } 25 </style> 26 <body> 27 <div id="log"></div> 28 29 <div id="default"></div> 30 <div id="rowGapPx" class="rowGapPx"></div> 31 <div id="rowGapEm"></div> 32 <div id="rowGapVw"></div> 33 <div id="rowGapPercent"></div> 34 <div id="rowGapCalc"></div> 35 <div id="rowGapCalcFixedPercent"></div> 36 <div id="rowGapInitial" class="rowGapInitial"></div> 37 <div class="rowGapPx"> 38 <div id="rowGapInitialPx" class="rowGapInitial"></div> 39 </div> 40 <div id="rowGapInherit" class="rowGapInherit"></div> 41 <div class="rowGapPx"> 42 <div id="rowGapInheritPx" class="rowGapInherit"></div> 43 </div> 44 45 <div id="invalidRowGapNegative"></div> 46 <div id="invalidRowGapMaxContent"></div> 47 <div id="invalidRowGapNone"></div> 48 <div id="invalidRowGapMultiple"></div> 49 <div id="invalidRowGapAngle"></div> 50 <div id="invalidRowGapResolution"></div> 51 <div id="invalidRowGapTime"></div> 52 53 <script> 54 test( 55 function(){ 56 var target = document.getElementById("default"); 57 assert_equals(getComputedStyle(target).rowGap, "normal"); 58 }, "Default row-gap is 'normal'"); 59 test( 60 function(){ 61 var target = document.getElementById("rowGapPx"); 62 assert_equals(getComputedStyle(target).rowGap, "12px"); 63 }, "row-gap accepts pixels"); 64 test( 65 function(){ 66 var target = document.getElementById("rowGapEm"); 67 assert_equals(getComputedStyle(target).rowGap, "20px"); 68 }, "row-gap accepts em"); 69 test( 70 function(){ 71 var target = document.getElementById("rowGapVw"); 72 // The rowGap 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).rowGap, "normal"); 75 }, "row-gap accepts vw"); 76 test( 77 function(){ 78 var target = document.getElementById("rowGapPercent"); 79 assert_equals(getComputedStyle(target).rowGap, "15%"); 80 }, "row-gap accepts percentage"); 81 test( 82 function(){ 83 var target = document.getElementById("rowGapCalc"); 84 assert_equals(getComputedStyle(target).rowGap, "14px"); 85 }, "row-gap accepts calc()"); 86 test( 87 function(){ 88 var target = document.getElementById("rowGapCalcFixedPercent"); 89 assert_equals(getComputedStyle(target).rowGap, "calc(10% + 5px)"); 90 }, "row-gap accepts calc() mixing fixed and percentage values"); 91 test( 92 function(){ 93 var target = document.getElementById("rowGapInitial"); 94 assert_equals(getComputedStyle(target).rowGap, "normal"); 95 }, "Initial row-gap is 'normal'"); 96 test( 97 function(){ 98 var target = document.getElementById("rowGapInitialPx"); 99 assert_equals(getComputedStyle(target).rowGap, "normal"); 100 }, "Initial row-gap is 'normal' 2"); 101 test( 102 function(){ 103 var target = document.getElementById("rowGapInherit"); 104 assert_equals(getComputedStyle(target).rowGap, "normal"); 105 }, "Initial inherited row-gap is 'normal'"); 106 test( 107 function(){ 108 var target = document.getElementById("rowGapInheritPx"); 109 assert_equals(getComputedStyle(target).rowGap, "12px"); 110 }, "row-gap is inheritable"); 111 112 113 test( 114 function(){ 115 var target = document.getElementById("invalidRowGapNegative"); 116 assert_equals(getComputedStyle(target).rowGap, "normal"); 117 }, "Negative row-gap is invalid"); 118 test( 119 function(){ 120 var target = document.getElementById("invalidRowGapMaxContent"); 121 assert_equals(getComputedStyle(target).rowGap, "normal"); 122 }, "'max-content' row-gap is invalid"); 123 test( 124 function(){ 125 var target = document.getElementById("invalidRowGapNone"); 126 assert_equals(getComputedStyle(target).rowGap, "normal"); 127 }, "'none' row-gap is invalid"); 128 test( 129 function(){ 130 var target = document.getElementById("invalidRowGapMultiple"); 131 assert_equals(getComputedStyle(target).rowGap, "normal"); 132 }, "row-gap with multiple values is invalid"); 133 test( 134 function(){ 135 var target = document.getElementById("invalidRowGapAngle"); 136 assert_equals(getComputedStyle(target).rowGap, "normal"); 137 }, "Angle row-gap is invalid"); 138 test( 139 function(){ 140 var target = document.getElementById("invalidRowGapResolution"); 141 assert_equals(getComputedStyle(target).rowGap, "normal"); 142 }, "Resolution row-gap is invalid"); 143 test( 144 function(){ 145 var target = document.getElementById("invalidRowGapTime"); 146 assert_equals(getComputedStyle(target).rowGap, "normal"); 147 }, "Time row-gap is invalid"); 148 </script> 149 </body>