interpolation.html (2181B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <meta name="assert" 4 content="This test checks if the inerpolation on clip-path is correct" /> 5 <title>Tests for the output of the interpolation of clip-path</title> 6 <link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-path"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <body> 10 <div id='log'></div> 11 <script type='text/javascript'> 12 'use strict'; 13 14 function createDiv(test) { 15 var element = document.createElement('div'); 16 document.body.appendChild(element); 17 test.add_cleanup(function() { 18 element.remove(); 19 }); 20 return element; 21 } 22 23 test(function(t) { 24 var div = createDiv(t); 25 div.style.clipPath = 'circle(25px)'; 26 // The radius becomes negative between 60%~61%, so we set the delay to -61s. 27 div.style.transition = 'all 100s cubic-bezier(0, 0, 1, -60) -61s'; 28 getComputedStyle(div).clipPath; 29 30 div.style.clipPath = 'circle(26px)'; 31 assert_equals(getComputedStyle(div).clipPath, 'circle(0px)', 32 'The radius of circle is clamped to zero at 61%'); 33 }, 'Test circle with negative easing on clip-path'); 34 35 test(function(t) { 36 var div = createDiv(t); 37 div.style.clipPath = 'ellipse(25px 25px)'; 38 // The radius becomes negative between 60%~61%, so we set the delay to -61s. 39 div.style.transition = 'all 100s cubic-bezier(0, 0, 1, -60) -61s'; 40 getComputedStyle(div).clipPath; 41 42 div.style.clipPath = 'ellipse(26px 26px)'; 43 assert_equals(getComputedStyle(div).clipPath, 'ellipse(0px 0px)', 44 'The radius of ellipse is clamped to zero at 61%'); 45 }, 'Test ellipse with negative easing on clip-path'); 46 47 test(function(t) { 48 var div = createDiv(t); 49 div.style.clipPath = 'inset(10% round 25px)'; 50 // The radius becomes negative between 60%~61%, so we set the delay to -61s. 51 div.style.transition = 'all 100s cubic-bezier(0, 0, 1, -60) -61s'; 52 getComputedStyle(div).clipPath; 53 54 div.style.clipPath = 'inset(10% round 26px)'; 55 assert_equals(getComputedStyle(div).clipPath, 'inset(10%)', 56 'The radius of inset is clamped to zero at 61%'); 57 }, 'Test inset with negative easing on clip-path'); 58 59 </script> 60 </html>