clip.html (1383B)
1 <!DOCTYPE html> 2 <script src="/resources/testharness.js"></script> 3 <script src="/resources/testharnessreport.js"></script> 4 <div id='container'> 5 <div id='element'></div> 6 </div> 7 <script> 8 9 var container = document.getElementById('container'); 10 var element = document.getElementById('element'); 11 12 test(function() { 13 var keyframes = [ 14 {clip: 'inherit'}, 15 {clip: 'rect(10px, 20px, 30px, 40px)'} 16 ]; 17 18 container.style.clip = 'rect(10px, 20px, 30px, 40px)'; 19 var player = element.animate(keyframes, 20); 20 21 player.pause(); 22 player.currentTime = 5; 23 assert_equals(getComputedStyle(element).clip, 'rect(10px, 20px, 30px, 40px)'); 24 25 container.style.clip = 'rect(10px, 20px, 430px, 440px)'; 26 assert_equals(getComputedStyle(element).clip, 'rect(10px, 20px, 330px, 340px)'); 27 }, 'clip responsive to inherited clip changes'); 28 29 test(function() { 30 var keyframes = [ 31 {clip: 'inherit'}, 32 {clip: 'rect(10px, 20px, 30px, auto)'} 33 ]; 34 35 container.style.clip = 'auto'; 36 var player = element.animate(keyframes, 20); 37 38 player.pause(); 39 player.currentTime = 5; 40 assert_equals(getComputedStyle(element).clip, 'auto'); 41 42 container.style.clip = 'rect(410px, 420px, 30px, auto)'; 43 assert_equals(getComputedStyle(element).clip, 'rect(310px, 320px, 30px, auto)'); 44 }, 'clip responsive to inherited clip changes from auto'); 45 </script>