position-interpolation.html (1995B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>position interpolation</title> 4 <link rel="help" href="https://drafts.csswg.org/css-position-3/#position-property"> 5 <meta name="assert" content="position has discrete animation"> 6 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/css/support/interpolation-testcommon.js"></script> 10 11 <style> 12 .parent { 13 position: relative; 14 display: inline-block; 15 height: 10px; 16 margin: 0px; 17 } 18 .target { 19 width: 10px; 20 height: 10px; 21 background-color: black; 22 left: 10px; 23 position: 10px; 24 } 25 .expected { 26 background-color: green; 27 } 28 </style> 29 30 <body> 31 <template id="target-template"> 32 <div class="parent"> 33 <div class="target"></div> 34 </div> 35 </template> 36 </body> 37 38 <script> 39 // Use default transition-behavior: normal. 40 test_no_interpolation({ 41 property: 'position', 42 from: 'absolute', 43 to: 'static', 44 }); 45 46 test_interpolation({ 47 property: 'position', 48 behavior: 'allow-discrete', 49 from: 'relative', 50 to: 'static', 51 }, [ 52 {at: -1, expect: 'relative'}, 53 {at: 0, expect: 'relative'}, 54 {at: 0.4, expect: 'relative'}, 55 {at: 0.5, expect: 'static'}, 56 {at: 1, expect: 'static'}, 57 {at: 1.5, expect: 'static'}, 58 ]); 59 60 test_interpolation({ 61 property: 'position', 62 behavior: 'allow-discrete', 63 from: 'sticky', 64 to: 'fixed', 65 }, [ 66 {at: -1, expect: 'sticky'}, 67 {at: 0, expect: 'sticky'}, 68 {at: 0.4, expect: 'sticky'}, 69 {at: 0.5, expect: 'fixed'}, 70 {at: 1, expect: 'fixed'}, 71 {at: 1.5, expect: 'fixed'}, 72 ]); 73 74 // This is still discrete interpolation; this test ensures that the neutral 75 // keyframe is defined correctly for position. 76 test_interpolation({ 77 property: 'position', 78 from: neutralKeyframe, 79 to: 'absolute', 80 method: 'CSS Animations', 81 }, [ 82 {at: -1, expect: 'static'}, 83 {at: 0, expect: 'static'}, 84 {at: 0.25, expect: 'static'}, 85 {at: 0.5, expect: 'absolute'}, 86 {at: 0.75, expect: 'absolute'}, 87 {at: 1, expect: 'absolute'}, 88 {at: 2, expect: 'absolute'}, 89 ]); 90 </script>