1<!doctype html> 2<style> 3 4.target { 5 font-size: 16px; 6 width: 60px; 7 height: 60px; 8 display: inline-block; 9 border: 2px solid black; 10 margin-right: 2px; 11} 12.replica { 13 background-color: green; 14 margin-right: 15px; 15} 16 17</style> 18<body> 19<script src="../testharness/testharness.js"></script> 20<script src="../testharness/testharnessreport.js"></script> 21<script src="resources/interpolation-test.js"></script> 22<script> 23 24function vw(x) { 25 return (x * window.innerWidth / 100); 26} 27 28function calc(x) { 29 return Math.max(16 + (vw(10) - 16) * x, 0).toFixed(2) + "px"; 30} 31 32assertInterpolation({ 33 property: 'width', 34 from: '1em', 35 to: '10vw' 36}, [ 37 {at: -0.3, is: calc(-0.3)}, 38 {at: 0, is: calc(0)}, 39 {at: 0.3, is: calc(0.3)}, 40 {at: 0.6, is: calc(0.6)}, 41 {at: 1, is: calc(1)}, 42 {at: 1.5, is: calc(1.5)} 43]); 44</script> 45</body> 46