multicol-gap-animation-001.html (1577B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Multi-column Layout Test: column-gap test animation</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-multicol-1/#column-gap"> 6 <link rel="help" href="https://www.w3.org/TR/web-animations-1/#dom-animatable-animate"> 7 <meta name="assert" content="Test checks that column-gap is an animatable property, and that the computed values during the animation are the expected ones."> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <style> 11 #multicol { 12 column-gap: 0px; 13 } 14 </style> 15 <body> 16 <div id="multicol"></div> 17 <div id="log"></div> 18 19 <script> 20 test( 21 function(){ 22 var multicol = document.getElementById("multicol"); 23 assert_equals(getComputedStyle(multicol).columnGap, "0px"); 24 25 var keyframes = [ 26 { columnGap: "100px" }, 27 { columnGap: "200px" } 28 ]; 29 var options = { 30 duration: 10, 31 fill: "forwards", 32 easing: "linear" 33 }; 34 35 var player = multicol.animate(keyframes, options); 36 player.pause(); 37 player.currentTime = 0; 38 assert_equals(getComputedStyle(multicol).columnGap, "100px"); 39 player.currentTime = 5; 40 assert_equals(getComputedStyle(multicol).columnGap, "150px"); 41 player.currentTime = 10; 42 assert_equals(getComputedStyle(multicol).columnGap, "200px"); 43 }, "column-gap property is animatable"); 44 </script> 45 </body>