progress-computed.html (2997B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-values-5/#progress"> 3 <link rel="author" title="sakhapov@chromuim.org"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="../support/numeric-testcommon.js"></script> 7 <style> 8 :root { 9 font-size: 10px; 10 } 11 #target { 12 font-size: 10px; 13 } 14 </style> 15 <div id="target"></div> 16 <script> 17 18 // Identity tests 19 test_math_used('progress(1, 0, 1)', '1', {type:'number'}); 20 21 // Nestings 22 test_math_used('progress(progress(1, 0, 1), progress(0px, 0px, 1px), progress(1deg, 0deg, 1deg))', '1', {type:'number'}); 23 test_math_used('progress(sign(-10px) * 10px, (10px - 10px), 10px * progress(1deg, 0deg, 1deg))', '0', {type:'number'}); 24 25 // General calculations 26 test_math_used('calc(progress(100px, 0px, 50px) * 10px + 100px)', '110px'); 27 test_math_used('calc(progress(100, 0, sign(50px)))', '1', {type:'number'}); 28 test_math_used('calc(progress(abs(5%), hypot(3%, 4%), 10%))', '0', {type:'number', approx:0.001}); 29 test_math_used('progress(50em, 10em, 110em)', '0.4', {type:'number', approx:0.1}); 30 test_math_used('progress(1000em, 10em, 110em)', '1', {type:'number', approx:0.1}); 31 test_math_used('scale(progress(50em, 10rem, 110em))', 'scale(1)', {prop:'transform', type:'number', approx:0.1}); 32 test_math_used('scale(progress(1000em, 10rem, 110em))', 'scale(1)', {prop:'transform', type:'number', approx:0.1}); 33 test_math_used('scale(progress(0em, 0rem, 0em))', 'scale(0)', {prop:'transform', type:'number'}); 34 test_math_used('scale(progress(sign(1em - 1rem) * 1ex, 0rem, 0em))', 'scale(0)', {prop:'transform', type:'number'}); 35 36 // Type checking 37 test_math_used('calc(progress(1, 0, 1) * 10px)', '10px'); 38 test_math_used('calc(progress(1, 0, 1) * 1s)', '1s', {type:'time'}); 39 test_math_used('calc(progress(1, 0, 1) * 1deg)', '1deg', {type:'angle', approx:0.001}); 40 41 // Test different number accepting properties 42 test_math_used('calc(progress(sign(1001em - 10lh * progress(100px, 2rex, 10ex)) * 10em, 2rem, 12em) / 2)', '0.4', {prop:'opacity', type:'number'}); 43 test_math_used('calc(progress(sign(1001em - 10lh * progress(100px, 2rex, 10ex)) * 20em, 2rem, 12em) * 10)', '10', {prop:'order', type:'number'}); 44 test_math_used('calc(progress(sign(1001em - 10lh * progress(100px, 2rex, 10ex)) * 20em, 2rem, 12em) * 30)', '30', {prop:'flex-grow', type:'number'}); 45 test_math_used('calc(progress(sign(1001em - 10lh * progress(100px, 2rex, 10ex)) * 20em, 2rem, 12em) / 4)', '0.25', {prop:'flex-grow', type:'number'}); 46 test_math_used('calc(progress(sign(1001em - 10lh * progress(100px, 2rex, 10ex)) * 20em, 2rem, 12em) * 4)', '4', {prop:'column-count', type:'number'}); 47 test_math_used('calc(progress(sign(1001em - 10lh * progress(100px, 2rex, 10ex)) * 20em, 2rem, 12em) * 2)', '2', {prop:'scale'}); 48 test_math_used('rotate3d(progress(21em, 1rem, 11em), progress(21em, 1rem, 11em), progress(21em, 1rem, 11em), calc(progress(11em, 1rem, 11em) * 2deg))', 'rotate3d(2, 2, 2, 2deg)', {prop:'transform'}); 49 </script>