auto-006.html (13972B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Last remembered size</title> 4 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#last-remembered"> 6 <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> 7 <link rel="help" href="https://drafts.csswg.org/css-contain-2/#content-visibility"> 8 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6220"> 9 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7527"> 10 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7532"> 11 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7539"> 12 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7564"> 13 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7606"> 14 <meta name="assert" content="Tests that the last remembered size is properly updated or removed" /> 15 16 <style> 17 #target { 18 width: max-content; 19 height: max-content; 20 } 21 .cis-auto { 22 contain-intrinsic-size: auto 1px auto 2px; 23 } 24 .skip-contents { 25 content-visibility: hidden; 26 } 27 .size-100-50 { 28 width: 100px; 29 height: 50px; 30 } 31 .size-75-25 { 32 width: 75px; 33 height: 25px; 34 } 35 .vertical { 36 writing-mode: vertical-lr; 37 } 38 .hidden { 39 display: none; 40 } 41 .flex { 42 display: flex; 43 } 44 .inline { 45 display: inline; 46 } 47 </style> 48 49 <div id="log"></div> 50 51 <div id="parent"> 52 <div id="target"> 53 <div id="contents"></div> 54 </div> 55 </div> 56 57 <script src="/resources/testharness.js"></script> 58 <script src="/resources/testharnessreport.js"></script> 59 <script> 60 const parent = document.getElementById("parent"); 61 const target = document.getElementById("target"); 62 const contents = document.getElementById("contents"); 63 64 function checkSize(expectedWidth, expectedHeight, msg) { 65 assert_equals(target.clientWidth, expectedWidth, msg + " - clientWidth"); 66 assert_equals(target.clientHeight, expectedHeight, msg + " - clientHeight"); 67 } 68 69 function nextRendering() { 70 return new Promise(resolve => { 71 requestAnimationFrame(() => requestAnimationFrame(() => resolve())); 72 }); 73 } 74 75 function cleanup() { 76 parent.className = ""; 77 target.className = ""; 78 contents.className = ""; 79 checkSize(0, 0, "Sizing after cleanup"); 80 } 81 82 promise_test(async function() { 83 this.add_cleanup(cleanup); 84 target.className = "cis-auto skip-contents"; 85 contents.classList.add("size-100-50"); 86 checkSize(1, 2, "Size containment with no last remembered size"); 87 88 target.classList.remove("skip-contents"); 89 checkSize(100, 50, "Sizing normally"); 90 91 await nextRendering(); 92 target.classList.add("skip-contents"); 93 checkSize(100, 50, "Using last remembered size"); 94 95 contents.classList.remove("size-100-50"); 96 contents.classList.add("size-75-25"); 97 checkSize(100, 50, "Still using last remembered size"); 98 99 target.classList.remove("skip-contents"); 100 checkSize(75, 25, "Sizing normally with different size"); 101 102 target.classList.add("skip-contents"); 103 checkSize(100, 50, "Going back to last remembered size"); 104 105 target.classList.remove("skip-contents"); 106 await nextRendering(); 107 target.classList.add("skip-contents"); 108 checkSize(75, 25, "Using the new last remembered size"); 109 }, "Basic usage"); 110 111 promise_test(async function() { 112 this.add_cleanup(cleanup); 113 target.classList.add("cis-auto"); 114 checkSize(0, 0, "Sizing normally"); 115 116 await nextRendering(); 117 target.classList.add("skip-contents"); 118 contents.classList.add("size-100-50"); 119 checkSize(0, 0, "Using last remembered size"); 120 }, "Last remembered size can be 0"); 121 122 promise_test(async function() { 123 this.add_cleanup(cleanup); 124 target.classList.add("cis-auto"); 125 contents.classList.add("size-100-50"); 126 checkSize(100, 50, "Sizing normally"); 127 128 await nextRendering(); 129 parent.classList.add("hidden"); 130 checkSize(0, 0, "No box"); 131 132 await nextRendering(); 133 parent.classList.remove("hidden"); 134 contents.classList.remove("size-100-50"); 135 checkSize(0, 0, "Sizing normally to 0x0"); 136 137 await nextRendering(); 138 contents.classList.add("size-100-50"); 139 target.classList.add("skip-contents"); 140 checkSize(0, 0, "Using the new last remembered size"); 141 }, "Last remembered size can be set to 0 after losing display:none"); 142 143 promise_test(async function() { 144 this.add_cleanup(cleanup); 145 target.classList.add("cis-auto"); 146 contents.classList.add("size-100-50"); 147 checkSize(100, 50, "Sizing normally"); 148 149 await nextRendering(); 150 target.classList.add("skip-contents"); 151 contents.classList.remove("size-100-50"); 152 checkSize(100, 50, "Using last remembered size"); 153 154 target.classList.add("vertical"); 155 checkSize(50, 100, "Last remembered size is logical"); 156 }, "Last remembered size is logical"); 157 158 promise_test(async function() { 159 this.add_cleanup(cleanup); 160 target.classList.add("cis-auto"); 161 contents.classList.add("size-100-50"); 162 checkSize(100, 50, "Sizing normally"); 163 164 await nextRendering(); 165 target.classList.add("skip-contents"); 166 checkSize(100, 50, "Using last remembered size"); 167 168 parent.classList.add("hidden"); 169 checkSize(0, 0, "No box"); 170 171 await nextRendering(); 172 parent.classList.remove("hidden"); 173 contents.classList.remove("size-100-50"); 174 checkSize(100, 50, "Still using last remembered size"); 175 }, "Last remembered size survives box destruction"); 176 177 promise_test(async function() { 178 this.add_cleanup(cleanup); 179 target.classList.add("cis-auto"); 180 contents.classList.add("size-100-50"); 181 checkSize(100, 50, "Sizing normally"); 182 183 await nextRendering(); 184 target.classList.add("skip-contents"); 185 contents.classList.remove("size-100-50"); 186 checkSize(100, 50, "Using last remembered size"); 187 188 target.classList.add("flex"); 189 checkSize(100, 50, "Still using last remembered size"); 190 }, "Last remembered size survives display type changes"); 191 192 promise_test(async function() { 193 this.add_cleanup(cleanup); 194 target.classList.add("cis-auto"); 195 contents.classList.add("size-100-50"); 196 checkSize(100, 50, "Sizing normally"); 197 198 await nextRendering(); 199 target.classList.add("skip-contents"); 200 checkSize(100, 50, "Using last remembered size"); 201 202 target.classList.remove("cis-auto"); 203 checkSize(0, 0, "Basic size containment"); 204 205 await nextRendering(); 206 target.classList.add("cis-auto"); 207 checkSize(1, 2, "Size containment with no last remembered size"); 208 }, "Losing cis:auto removes last remembered size"); 209 210 promise_test(async function() { 211 this.add_cleanup(cleanup); 212 target.classList.add("cis-auto"); 213 contents.classList.add("size-100-50"); 214 checkSize(100, 50, "Sizing normally"); 215 216 await nextRendering(); 217 target.classList.remove("cis-auto"); 218 checkSize(100, 50, "Sizing normally again"); 219 220 await nextRendering(); 221 target.classList.add("cis-auto"); 222 target.classList.add("skip-contents"); 223 checkSize(1, 2, "Size containment with no last remembered size"); 224 }, "Losing cis:auto removes last remembered size even if size doesn't change"); 225 226 promise_test(async function() { 227 this.add_cleanup(cleanup); 228 target.classList.add("cis-auto"); 229 contents.classList.add("size-100-50"); 230 checkSize(100, 50, "Sizing normally"); 231 232 await nextRendering(); 233 target.classList.add("skip-contents"); 234 checkSize(100, 50, "Using last remembered size"); 235 236 target.classList.remove("cis-auto"); 237 checkSize(0, 0, "Basic size containment"); 238 239 target.classList.add("cis-auto"); 240 checkSize(1, 2, "Size containment with no last remembered size"); 241 }, "Losing cis:auto removes last remembered size immediately"); 242 243 promise_test(async function() { 244 this.add_cleanup(cleanup); 245 target.classList.add("cis-auto"); 246 contents.classList.add("size-100-50"); 247 checkSize(100, 50, "Sizing normally"); 248 249 await nextRendering(); 250 target.classList.add("skip-contents"); 251 contents.classList.remove("size-100-50"); 252 contents.classList.add("size-75-25"); 253 checkSize(100, 50, "Using last remembered size"); 254 255 parent.classList.add("hidden"); 256 target.classList.remove("cis-auto"); 257 target.classList.remove("skip-contents"); 258 checkSize(0, 0, "No box"); 259 260 await nextRendering(); 261 parent.classList.remove("hidden"); 262 target.classList.add("cis-auto"); 263 contents.classList.remove("size-100-50"); 264 contents.classList.add("size-75-25"); 265 checkSize(75, 25, "Sizing normally with different size"); 266 267 target.classList.add("skip-contents"); 268 checkSize(100, 50, "Going back to last remembered size"); 269 }, "Losing cis:auto during display:none doesn't remove last remembered size"); 270 271 promise_test(async function() { 272 this.add_cleanup(cleanup); 273 target.classList.add("cis-auto"); 274 contents.classList.add("size-100-50"); 275 checkSize(100, 50, "Sizing normally"); 276 277 await nextRendering(); 278 target.classList.add("skip-contents"); 279 contents.classList.remove("size-100-50"); 280 contents.classList.add("size-75-25"); 281 checkSize(100, 50, "Using last remembered size"); 282 283 parent.classList.add("hidden"); 284 checkSize(0, 0, "No box"); 285 286 await nextRendering(); 287 parent.classList.remove("hidden"); 288 target.classList.remove("cis-auto"); 289 checkSize(0, 0, "Basic size containment"); 290 291 target.classList.add("cis-auto"); 292 checkSize(1, 2, "Size containment with no last remembered size"); 293 }, "Lack of cis:auto during box creation removes last remembered size"); 294 295 promise_test(async function() { 296 this.add_cleanup(cleanup); 297 target.classList.add("cis-auto"); 298 contents.classList.add("size-100-50"); 299 checkSize(100, 50, "Sizing normally"); 300 301 await nextRendering(); 302 target.classList.add("skip-contents"); 303 contents.classList.remove("size-100-50"); 304 contents.classList.add("size-75-25"); 305 checkSize(100, 50, "Using last remembered size"); 306 307 parent.classList.add("hidden"); 308 target.classList.remove("cis-auto"); 309 checkSize(0, 0, "No box"); 310 311 parent.classList.remove("hidden"); 312 checkSize(0, 0, "Basic size containment"); 313 314 target.classList.add("cis-auto"); 315 checkSize(1, 2, "Size containment with no last remembered size"); 316 }, "Last remembered size can be removed synchronously"); 317 318 promise_test(async function() { 319 this.add_cleanup(cleanup); 320 target.classList.add("cis-auto"); 321 contents.classList.add("size-100-50"); 322 checkSize(100, 50, "Sizing normally"); 323 324 await nextRendering(); 325 target.classList.add("skip-contents"); 326 checkSize(100, 50, "Using last remembered size"); 327 328 target.remove(); 329 checkSize(0, 0, "No box"); 330 331 parent.appendChild(target); 332 checkSize(100, 50, "Still using last remembered size"); 333 }, "Disconnected element can briefly keep last remembered size"); 334 335 promise_test(async function() { 336 this.add_cleanup(cleanup); 337 target.classList.add("cis-auto"); 338 contents.classList.add("size-100-50"); 339 checkSize(100, 50, "Sizing normally"); 340 341 await nextRendering(); 342 target.classList.add("skip-contents"); 343 contents.classList.remove("size-100-50"); 344 contents.classList.add("size-75-25"); 345 checkSize(100, 50, "Using last remembered size"); 346 347 target.remove(); 348 checkSize(0, 0, "No box"); 349 350 await nextRendering(); 351 parent.appendChild(target); 352 checkSize(1, 2, "Size containment with no last remembered size"); 353 }, "Disconnected element ends up losing last remembered size"); 354 355 promise_test(async function () { 356 this.add_cleanup(cleanup); 357 target.classList.add("cis-auto"); 358 contents.classList.add("size-100-50"); 359 checkSize(100, 50, "Sizing normally"); 360 361 await nextRendering(); 362 target.classList.add("skip-contents"); 363 contents.classList.remove("size-100-50"); 364 contents.classList.add("size-75-25"); 365 checkSize(100, 50, "Using last remembered size"); 366 367 parent.innerHTML = ""; 368 checkSize(0, 0, "No box"); 369 370 await nextRendering(); 371 parent.appendChild(target); 372 checkSize(1, 2, "Size containment with no last remembered size"); 373 }, "Disconnected element ends up losing last remembered size, parent removes all children"); 374 375 promise_test(async function () { 376 this.add_cleanup(cleanup); 377 target.classList.add("cis-auto"); 378 contents.classList.add("size-100-50"); 379 checkSize(100, 50, "Sizing normally"); 380 381 await nextRendering(); 382 target.classList.add("skip-contents"); 383 contents.classList.remove("size-100-50"); 384 contents.classList.add("size-75-25"); 385 checkSize(100, 50, "Using last remembered size"); 386 387 parent.remove(); 388 checkSize(0, 0, "No box"); 389 390 await nextRendering(); 391 document.body.appendChild(parent); 392 checkSize(1, 2, "Size containment with no last remembered size"); 393 }, "Disconnected element ends up losing last remembered size, the parent node is removed"); 394 395 promise_test(async function() { 396 this.add_cleanup(cleanup); 397 target.classList.add("cis-auto"); 398 checkSize(0, 0, "Sizing normally"); 399 400 await nextRendering(); 401 target.classList.add("skip-contents"); 402 target.remove(); 403 checkSize(0, 0, "No box"); 404 405 await nextRendering(); 406 parent.appendChild(target); 407 checkSize(1, 2, "Size containment with no last remembered size"); 408 }, "Disconnected element ends up losing last remembered size even if size was 0x0"); 409 410 promise_test(async function() { 411 this.add_cleanup(cleanup); 412 target.classList.add("cis-auto"); 413 contents.classList.add("size-100-50"); 414 checkSize(100, 50, "Sizing normally"); 415 416 await nextRendering(); 417 target.classList.add("inline"); 418 checkSize(0, 0, "Non-atomic inline box"); 419 420 await nextRendering(); 421 target.classList.remove("inline"); 422 target.classList.add("skip-contents"); 423 contents.classList.remove("size-100-50"); 424 checkSize(100, 50, "Still using previous last remembered size"); 425 }, "Last remembered size survives becoming inline"); 426 427 promise_test(async function() { 428 this.add_cleanup(cleanup); 429 target.classList.add("cis-auto"); 430 contents.classList.add("size-100-50"); 431 checkSize(100, 50, "Sizing normally"); 432 433 await nextRendering(); 434 target.classList.add("inline"); 435 checkSize(0, 0, "Non-atomic inline box"); 436 437 await nextRendering(); 438 target.classList.remove("inline"); 439 contents.classList.remove("size-100-50"); 440 checkSize(0, 0, "Sizing normally to 0x0"); 441 442 await nextRendering(); 443 target.classList.add("skip-contents"); 444 contents.classList.add("size-100-50"); 445 checkSize(0, 0, "Last remembered size is now 0x0"); 446 }, "Last remembered size can be set to 0x0 after losing display:inline"); 447 </script>