webkit-box-computed.html (5407B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Overflow: getComputedStyle() for display: -webkit-box in the presence of line-clamp or continue</title> 6 <link rel="help" href="https://drafts.csswg.org/css-overflow-4/#continue"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 </head> 10 <body> 11 <div id="target"></div> 12 <script> 13 14 // Checks the computed value of `display` in an element with the specified 15 // properties in `properties`. If `expectedDisplayComputedValue` is not given, 16 // it will be assumed to be the same as the specified value of `display`. 17 function test_display_computed(properties, expectedDisplayComputedValue) { 18 test((t) => { 19 const target = document.getElementById('target'); 20 21 for (const [prop, value] of Object.entries(properties)) { 22 target.style[prop] = value; 23 } 24 25 t.add_cleanup(() => { 26 for (const prop of Object.keys(properties)) { 27 target.style.removeProperty(prop); 28 } 29 }); 30 31 assert_equals( 32 getComputedStyle(target).display, 33 expectedDisplayComputedValue ?? properties.display 34 ); 35 }, Object.entries(properties).map(([k, v]) => `${k}: ${v};`).join(" ")); 36 } 37 38 test_display_computed({ 39 "display": "-webkit-box" 40 }); 41 test_display_computed({ 42 "display": "-webkit-box", 43 "-webkit-box-orient": "vertical" 44 }); 45 test_display_computed({ 46 "display": "-webkit-box", 47 "-webkit-box-orient": "vertical", 48 "-webkit-line-clamp": "none" 49 }); 50 test_display_computed({ 51 "display": "-webkit-box", 52 "-webkit-line-clamp": "3" 53 }); 54 test_display_computed({ 55 "display": "-webkit-box", 56 "-webkit-box-orient": "horizontal", 57 "-webkit-line-clamp": "3" 58 }); 59 test_display_computed({ 60 "display": "-webkit-box", 61 "-webkit-box-orient": "vertical", 62 "-webkit-line-clamp": "3" 63 }, "flow-root"); 64 65 test_display_computed({ 66 "display": "-webkit-inline-box" 67 }); 68 test_display_computed({ 69 "display": "-webkit-inline-box", 70 "-webkit-box-orient": "vertical" 71 }); 72 test_display_computed({ 73 "display": "-webkit-inline-box", 74 "-webkit-box-orient": "vertical", 75 "-webkit-line-clamp": "none" 76 }); 77 test_display_computed({ 78 "display": "-webkit-inline-box", 79 "-webkit-line-clamp": "3" 80 }); 81 test_display_computed({ 82 "display": "-webkit-inline-box", 83 "-webkit-box-orient": "horizontal", 84 "-webkit-line-clamp": "3" 85 }); 86 test_display_computed({ 87 "display": "-webkit-inline-box", 88 "-webkit-box-orient": "vertical", 89 "-webkit-line-clamp": "3" 90 }, "inline-block"); 91 92 // -webkit-box and -webkit-inline-box are defined in the Compat spec as keyword 93 // mappings to flex and inline-flex, respectively (along with -webkit-flex and 94 // -webkit-inline-flex). However, only -webkit(-inline)-box changes computed 95 // value in the presence of -webkit-line-clamp. 96 test_display_computed({ 97 "display": "flex", 98 "-webkit-box-orient": "vertical", 99 "-webkit-line-clamp": "3" 100 }); 101 test_display_computed({ 102 "display": "inline-flex", 103 "-webkit-box-orient": "vertical", 104 "-webkit-line-clamp": "3" 105 }); 106 test_display_computed({ 107 "display": "-webkit-flex", 108 "-webkit-box-orient": "vertical", 109 "-webkit-line-clamp": "3" 110 }, "flex"); 111 test_display_computed({ 112 "display": "-webkit-inline-flex", 113 "-webkit-box-orient": "vertical", 114 "-webkit-line-clamp": "3" 115 }, "inline-flex"); 116 117 if (CSS.supports("line-clamp: none")) { 118 test_display_computed({ 119 "display": "-webkit-box", 120 "-webkit-box-orient": "vertical", 121 "line-clamp": "none" 122 }); 123 test_display_computed({ 124 "display": "-webkit-inline-box", 125 "-webkit-box-orient": "vertical", 126 "line-clamp": "none" 127 }); 128 } 129 130 if (CSS.supports("line-clamp: 2")) { 131 test_display_computed({ 132 "display": "-webkit-box", 133 "line-clamp": "2" 134 }); 135 test_display_computed({ 136 "display": "-webkit-box", 137 "-webkit-box-orient": "vertical", 138 "line-clamp": "2" 139 }, "flow-root"); 140 test_display_computed({ 141 "display": "-webkit-inline-box", 142 "line-clamp": "2" 143 }); 144 test_display_computed({ 145 "display": "-webkit-inline-box", 146 "-webkit-box-orient": "vertical", 147 "line-clamp": "2" 148 }, "inline-block"); 149 } 150 151 if (CSS.supports("line-clamp: auto")) { 152 test_display_computed({ 153 "display": "-webkit-box", 154 "line-clamp": "auto" 155 }); 156 test_display_computed({ 157 "display": "-webkit-box", 158 "-webkit-box-orient": "vertical", 159 "line-clamp": "auto" 160 }, "flow-root"); 161 test_display_computed({ 162 "display": "-webkit-inline-box", 163 "line-clamp": "auto" 164 }); 165 test_display_computed({ 166 "display": "-webkit-inline-box", 167 "-webkit-box-orient": "vertical", 168 "line-clamp": "auto" 169 }, "inline-block"); 170 } 171 172 if (CSS.supports("continue: none")) { 173 test_display_computed({ 174 "display": "-webkit-box", 175 "-webkit-box-orient": "vertical", 176 "continue": "none" 177 }); 178 test_display_computed({ 179 "display": "-webkit-inline-box", 180 "-webkit-box-orient": "vertical", 181 "continue": "none" 182 }); 183 } 184 185 if (CSS.supports("continue: discard")) { 186 test_display_computed({ 187 "display": "-webkit-box", 188 "continue": "discard" 189 }); 190 test_display_computed({ 191 "display": "-webkit-box", 192 "-webkit-box-orient": "vertical", 193 "continue": "discard" 194 }, "flow-root"); 195 test_display_computed({ 196 "display": "-webkit-inline-box", 197 "continue": "discard" 198 }); 199 test_display_computed({ 200 "display": "-webkit-inline-box", 201 "-webkit-box-orient": "vertical", 202 "continue": "discard" 203 }, "inline-block"); 204 } 205 206 </script> 207 </body> 208 </html>