shapeOutside.html (2145B)
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 container.style.fontSize = '10px'; 14 15 var keyframes = [ 16 {shapeOutside: 'circle(10em at 50% 50%)'}, 17 {shapeOutside: 'circle(10em at 50% 50%)'} 18 ]; 19 var player = element.animate(keyframes, 10); 20 player.pause(); 21 player.currentTime = 5; 22 23 var shapeOutside = getComputedStyle(element).shapeOutside; 24 container.style.fontSize = '20px'; 25 assert_not_equals(getComputedStyle(element).shapeOutside, shapeOutside); 26 }, 'shapeOutside responsive to style changes'); 27 28 test(function() { 29 var keyframes = [ 30 {shapeOutside: 'inherit'}, 31 {shapeOutside: 'circle(200px at 50% 50%)'} 32 ]; 33 34 container.style.shapeOutside = 'circle(100px at 50% 50%)'; 35 var player = element.animate(keyframes, 10); 36 37 player.pause(); 38 player.currentTime = 5; 39 assert_equals(getComputedStyle(element).shapeOutside, 'circle(150px at 50% 50%)'); 40 41 container.style.shapeOutside = 'inset(100%)'; 42 assert_equals(getComputedStyle(element).shapeOutside, 'circle(200px at 50% 50%)'); 43 44 container.style.shapeOutside = 'circle(400px at 50% 50%)'; 45 assert_equals(getComputedStyle(element).shapeOutside, 'circle(300px at 50% 50%)'); 46 47 container.style.shapeOutside = 'circle(800px at 50% 50%)'; 48 assert_equals(getComputedStyle(element).shapeOutside, 'circle(500px at 50% 50%)'); 49 50 container.style.shapeOutside = 'inset(100%)'; 51 assert_equals(getComputedStyle(element).shapeOutside, 'circle(200px at 50% 50%)'); 52 53 container.style.shapeOutside = 'circle(800px at 50% 50%)'; 54 assert_equals(getComputedStyle(element).shapeOutside, 'circle(500px at 50% 50%)'); 55 56 container.style.shapeOutside = 'circle(400px at 50% 50%)'; 57 assert_equals(getComputedStyle(element).shapeOutside, 'circle(300px at 50% 50%)'); 58 }, 'shapeOutside responsive to inherited shapeOutside changes'); 59 </script>