transition-property-017-manual.html (1142B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Transitions Test: transition-property - clip</title> 4 <link rel="author" title="Intel" href="http://www.intel.com"> 5 <link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> 6 <link rel="help" href="https://drafts.csswg.org/web-animations-1/#animation-type"> 7 <link rel="help" href="https://www.w3.org/TR/CSS22/visufx.html#clipping"> 8 <meta name="assert" content="Test checks that the 'clip' property is animatable."> 9 <style> 10 #test { 11 clip: rect(0px, 60px, 60px, 0px); 12 position: absolute; 13 transition-duration: 2s; 14 transition-property: clip; 15 transition-timing-function: linear; 16 } 17 </style> 18 <body> 19 <p>Click the image(half green and half red) below. Test passes if the half red condenses gradually not immediately until only half green left.</p> 20 <image id="test" src="support/60x60-gg-rr.png"></image> 21 <script> 22 (function() { 23 var image = document.querySelector("#test"); 24 image.addEventListener("click", function(evt) { 25 image.setAttribute("style", "clip: rect(0px, 60px, 30px, 0px);"); 26 }, false); 27 })(); 28 </script> 29 </body>