interpolate-size-which-value.html (2711B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>test for which value of interpolate-size is used</title> 4 <link rel="help" href="https://drafts.csswg.org/css-values-5/#interpolate-size"> 5 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <body> 9 <script> 10 for (let allow of [false, true]) { 11 for (let from_keyword of [false, true]) { 12 let used_interpolate_size = allow ? "allow-keywords" : "numeric-only"; 13 let other_interpolate_size = allow ? "numeric-only" : "allow-keywords"; 14 let from_width = from_keyword ? "min-content" : "100px"; 15 let to_width = from_keyword ? "100px" : "min-content"; 16 17 test(t => { 18 let e = document.createElement("div"); 19 e.id = "t1"; 20 document.body.append(e); 21 t.add_cleanup(() => e.remove()); 22 23 let s = document.createElement("style"); 24 s.append(` 25 #t1 { 26 interpolate-size: ${other_interpolate_size}; 27 width: ${from_width}; 28 transition: width 10s 1000s step-end; 29 } 30 #t1[title] { 31 width: ${to_width}; 32 interpolate-size: ${used_interpolate_size}; 33 } 34 `); 35 36 document.head.append(s); 37 t.add_cleanup(() => s.remove()); 38 39 let cs = getComputedStyle(e); 40 assert_equals(cs.width, from_keyword ? "0px" : "100px", "width before change"); 41 e.title="a title"; 42 assert_equals(cs.width, (allow ^ from_keyword) ? "100px" : "0px", "width after change"); 43 }, `Use the after-change value of interpolate-size: ${used_interpolate_size} when starting CSS transition from ${from_width} to ${to_width}`); 44 45 test(t => { 46 let e = document.createElement("div"); 47 e.id = "t2"; 48 document.body.append(e); 49 t.add_cleanup(() => e.remove()); 50 51 let s = document.createElement("style"); 52 s.append(` 53 @keyframes kf2 { 54 0% { 55 width: ${from_width}; 56 interpolate-size: ${other_interpolate_size}; 57 } 58 59 100% { 60 width: ${to_width}; 61 interpolate-size: ${other_interpolate_size}; 62 } 63 } 64 #t2 { 65 interpolate-size: ${used_interpolate_size}; 66 animation: kf2 10s -1s linear; 67 } 68 `); 69 70 document.head.append(s); 71 t.add_cleanup(() => s.remove()); 72 73 let cs = getComputedStyle(e); 74 let expected = from_keyword ? 0 : 100; 75 if (allow) { 76 expected = expected * 0.9 + (100 - expected) * 0.1; 77 } 78 assert_equals(cs.width, `${expected}px`, "width with animation"); 79 80 }, `Use the non-animation value of interpolate-size: ${used_interpolate_size} when starting CSS animation from ${from_width} to ${to_width}`); 81 } 82 } 83 </script>