| OLD | NEW | 
|---|
| (Empty) |  | 
|  | 1 <!DOCTYPE html> | 
|  | 2 <meta charset="UTF-8"> | 
|  | 3 <style> | 
|  | 4 .target { | 
|  | 5   display: inline-block; | 
|  | 6   width: 60px; | 
|  | 7   height: 60px; | 
|  | 8   font-size: 3px; | 
|  | 9   border: 2px solid; | 
|  | 10   margin-right: 20px; | 
|  | 11   margin-bottom: 30px; | 
|  | 12 } | 
|  | 13 .replica { | 
|  | 14   margin-right: 40px; | 
|  | 15 } | 
|  | 16 </style> | 
|  | 17 <body> | 
|  | 18 <script src="../testharness/testharness.js"></script> | 
|  | 19 <script src="../testharness/testharnessreport.js"></script> | 
|  | 20 <script src="resources/interpolation-test.js"></script> | 
|  | 21 <script> | 
|  | 22 // Test basic functionality, and clipping blur at 0 | 
|  | 23 assertInterpolation({ | 
|  | 24   property: 'box-shadow', | 
|  | 25   from: '15px 10px 5px 6px black', | 
|  | 26   to: '-15px -10px 25px -4px orange' | 
|  | 27 }, [ | 
|  | 28   {at: -0.3, is: '24px 16px 0px 9px black'}, | 
|  | 29   {at: 0, is: '15px 10px 5px 6px black'}, | 
|  | 30   {at: 0.3, is: '6px 4px 11px 3px rgb(77, 50, 0)'}, | 
|  | 31   {at: 0.6, is: '-3px -2px 17px 0px rgb(153, 99, 0)'}, | 
|  | 32   {at: 1, is: '-15px -10px 25px -4px orange'}, | 
|  | 33   {at: 1.5, is: '-30px -20px 35px -9px rgb(255, 248, 0)'}, | 
|  | 34 ]); | 
|  | 35 | 
|  | 36 // Test padding shorter lists | 
|  | 37 assertInterpolation({ | 
|  | 38   property: 'box-shadow', | 
|  | 39   from: '10px 20px rgba(255, 255, 0, 0.5), inset 5px 10em #008000', | 
|  | 40   to: 'none' | 
|  | 41 }, [ | 
|  | 42   {at: -0.3, is: '13px 26px rgba(255, 255, 0, 0.65), inset 6.5px 39px rgb(0, 128
    , 0)'}, | 
|  | 43   {at: 0, is: '10px 20px rgba(255, 255, 0, 0.5), inset 5px 30px #008000'}, | 
|  | 44   {at: 0.3, is: '7px 14px rgba(255, 255, 0, 0.35), inset 3.5px 21px rgba(0, 128,
     0, 0.7)'}, | 
|  | 45   {at: 0.6, is: '4px 8px rgba(255, 255, 0, 0.2), inset 2px 12px rgba(0, 128, 0, 
    0.4)'}, | 
|  | 46   {at: 1, is: '0px 0px 0px 0px transparent'}, | 
|  | 47   {at: 1.5, is: '-5px -10px rgba(255,255, 0, 0), inset -2.5px -15px rgba(0, 128,
     0, 0)'}, | 
|  | 48 ]); | 
|  | 49 | 
|  | 50 // Test unmatched inset | 
|  | 51 assertInterpolation({ | 
|  | 52   property: 'box-shadow', | 
|  | 53   from: '10px 20px yellow, 5px 10px green', | 
|  | 54   to: 'inset 5px 10px green, 15px 20px blue' | 
|  | 55 }, [ | 
|  | 56   {at: -0.3, is: '10px 20px yellow, 5px 10px green'}, | 
|  | 57   {at: 0, is: '10px 20px yellow, 5px 10px green'}, | 
|  | 58   {at: 0.3, is: '10px 20px yellow, 5px 10px green'}, | 
|  | 59   {at: 0.6, is: 'inset 5px 10px green, 15px 20px blue'}, | 
|  | 60   {at: 1, is: 'inset 5px 10px green, 15px 20px blue'}, | 
|  | 61   {at: 1.5, is: 'inset 5px 10px green, 15px 20px blue'}, | 
|  | 62 ]); | 
|  | 63 </script> | 
|  | 64 </body> | 
| OLD | NEW | 
|---|