opacity.html (1370B)
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 'use strict'; 10 var container = document.getElementById('container'); 11 var element = document.getElementById('element'); 12 13 var properties = [ 14 'fillOpacity', 15 'floodOpacity', 16 'opacity', 17 'shapeImageThreshold', 18 'stopOpacity', 19 'strokeOpacity', 20 ]; 21 22 for (var property of properties) { 23 test(function() { 24 var initialKeyframe = {}; 25 initialKeyframe[property] = 'inherit'; 26 var finalKeyframe = {}; 27 finalKeyframe[property] = '0.5'; 28 var keyframes = [ initialKeyframe, finalKeyframe ]; 29 30 container.style[property] = 1; 31 var player = element.animate(keyframes, 10); 32 33 player.pause(); 34 player.currentTime = 5; 35 assert_equals(getComputedStyle(element)[property], '0.75'); 36 37 container.style[property] = 0.25; 38 assert_equals(getComputedStyle(element)[property], '0.375'); 39 40 container.style[property] = -0.5; // clamps to 0 41 assert_equals(getComputedStyle(element)[property], '0.25'); 42 43 container.style[property] = 2; // clamps to 1 44 assert_equals(getComputedStyle(element)[property], '0.75'); 45 }, property + ' responsive to inherited changes'); 46 } 47 48 </script>