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