starting-style-size-container.html (2802B)
1 <!DOCTYPE html> 2 <title>CSS Transitions Test: @starting-style inside size @container</title> 3 <link rel="help" href="https://drafts.csswg.org/css-transitions-2/#defining-before-change-style-the-starting-style-rule"> 4 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#animated-containers"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/css/css-transitions/support/helper.js"></script> 8 <body> 9 </body> 10 <style> 11 #container { 12 container-type: inline-size; 13 width: 100px; 14 } 15 #target { 16 transition-property: background-color; 17 transition-duration: 100s; 18 transition-timing-function: steps(2, start); 19 background-color: lime; 20 display: none; 21 } 22 @container (width > 300px) { 23 @starting-style { 24 #target { background-color: white; } 25 } 26 } 27 @container ((width > 200px) and (width < 300px)) { 28 #target { 29 display: block; 30 } 31 @starting-style { 32 #target { background-color: white; } 33 } 34 } 35 @container (width < 200px) { 36 @starting-style { 37 #target { background-color: red; } 38 } 39 } 40 </style> 41 <script> 42 function setup(test) { 43 let container = document.createElement("div"); 44 container.id = "container"; 45 document.body.appendChild(container); 46 47 let target = document.createElement("div"); 48 target.id = "target"; 49 container.appendChild(target); 50 51 test.add_cleanup(() => { 52 target.remove(); 53 container.remove(); 54 }); 55 return [container, target]; 56 } 57 58 promise_test(async t => { 59 let [container, target] = setup(t); 60 await waitForAnimationFrames(2); 61 assert_equals(getComputedStyle(target).backgroundColor, "rgb(0, 255, 0)", 62 "No transition while display:none"); 63 container.style.width = "400px"; 64 target.style.display = "block"; 65 await waitForAnimationFrames(2); 66 assert_equals(getComputedStyle(target).backgroundColor, "rgb(128, 255, 128)", 67 "@starting-style based on the size query evaluation from " + 68 "the same frame"); 69 }, "Triggered transition from first style update based on up-to-date " + 70 "container query"); 71 72 promise_test(async t => { 73 let [container, target] = setup(t); 74 await waitForAnimationFrames(2); 75 assert_equals(getComputedStyle(target).backgroundColor, "rgb(0, 255, 0)", 76 "No transition while display:none"); 77 container.style.width = "250px"; 78 await waitForAnimationFrames(2); 79 assert_equals(getComputedStyle(target).backgroundColor, "rgb(128, 255, 128)", 80 "@starting-style based on the size query evaluation from " + 81 "the same frame"); 82 }, "Triggered transition from the display change inside the up-to-date " + 83 "container query"); 84 </script>