gap-animation-002.html (1206B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Box Alignment Test: gap normal 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-align-3/#column-row-gap"> 6 <link rel="help" href="https://www.w3.org/TR/css-animations-1/#keyframes"> 7 <meta name="assert" content="This test checks that 'normal' value for gap property is not interpolable."> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <style> 11 @keyframes gap-normal-to-100 { 12 from { gap: normal; } 13 to { gap: 100px; } 14 } 15 16 #target { 17 animation-name: gap-normal-to-100; 18 animation-duration: 2s; 19 animation-delay: -1s; 20 animation-play-state: paused; 21 } 22 </style> 23 <body> 24 <div id="target"></div> 25 <div id="log"></div> 26 27 <script> 28 test( 29 function(){ 30 var target = document.getElementById("target"); 31 assert_equals(getComputedStyle(target).gap, "100px"); 32 assert_equals(getComputedStyle(target).rowGap, "100px"); 33 assert_equals(getComputedStyle(target).columnGap, "100px"); 34 }, "gap: normal is not interpolable"); 35 </script> 36 </body>