Fix behaviour of shadow interpolation with mismatched list lengths

third_party/WebKit/LayoutTests/animations/composition/box-shadow-composition.html

Index: third_party/WebKit/LayoutTests/animations/composition/box-shadow-composition.html
diff --git a/third_party/WebKit/LayoutTests/animations/composition/box-shadow-composition.html b/third_party/WebKit/LayoutTests/animations/composition/box-shadow-composition.html
index 1805c13ff617d03d61d8297c64ab106a35d89a9d..98955aa12a6b4f27bd65496610030a6b8077aa52 100644
--- a/third_party/WebKit/LayoutTests/animations/composition/box-shadow-composition.html
+++ b/third_party/WebKit/LayoutTests/animations/composition/box-shadow-composition.html
@@ -45,11 +45,24 @@ assertComposition({
   addFrom: 'rgb(100, 100, 100) 10px 20px 30px 40px',
   addTo: 'rgb(200, 200, 200) 20px 40px 60px 80px',
 }, [
-  {at: -0.3, is: 'rgb(80, 90, 100) 8px 16px 24px 32px, rgb(90, 110, 130) 9px 18px 27px 36px'},
-  {at: 0, is: 'rgb(110, 120, 130) 11px 22px 33px 44px, rgb(120, 140, 160) 12px 24px 36px 48px'},
-  {at: 0.5, is: 'rgb(160, 170, 180) 16px 32px 48px 64px, rgb(170, 190, 210) 17px 34px 51px 68px'},
-  {at: 1, is: 'rgb(210, 220, 230) 21px 42px 63px 84px, rgb(220, 240, 255) 22px 44px 66px 88px'},
-  {at: 1.5, is: 'rgb(255, 255, 255) 26px 52px 78px 104px, rgb(255, 255, 255) 27px 54px 81px 108px'},
+  {at: -0.3, is: 'rgb(80, 90, 100) 8px 16px 24px 32px, rgb(20, 40, 60) 2px 4px 6px 8px'},
+  {at: 0, is: 'rgb(110, 120, 130) 11px 22px 33px 44px, rgb(20, 40, 60) 2px 4px 6px 8px'},
+  {at: 0.5, is: 'rgb(160, 170, 180) 16px 32px 48px 64px, rgb(20, 40, 60) 2px 4px 6px 8px'},
+  {at: 1, is: 'rgb(210, 220, 230) 21px 42px 63px 84px, rgb(20, 40, 60) 2px 4px 6px 8px'},
+  {at: 1.5, is: 'rgb(255, 255, 255) 26px 52px 78px 104px, rgb(20, 40, 60) 2px 4px 6px 8px'},
+]);
+
+assertComposition({
+  property: 'box-shadow',
+  underlying: 'rgb(10, 20, 30) 1px 2px 3px 4px',
+  addFrom: 'rgb(100, 100, 100) 10px 20px 30px 40px, rgb(100, 100, 100) 10px 20px 30px 40px inset',
+  addTo: 'rgb(200, 200, 200) 20px 40px 60px 80px, rgb(200, 200, 200) 20px 40px 60px 80px inset',
+}, [
+  {at: -0.3, is: 'rgb(80, 90, 100) 8px 16px 24px 32px, rgb(70, 70, 70) 7px 14px 21px 28px inset'},
+  {at: 0, is: 'rgb(110, 120, 130) 11px 22px 33px 44px, rgb(100, 100, 100) 10px 20px 30px 40px inset'},
+  {at: 0.5, is: 'rgb(160, 170, 180) 16px 32px 48px 64px, rgb(150, 150, 150) 15px 30px 45px 60px inset'},
+  {at: 1, is: 'rgb(210, 220, 230) 21px 42px 63px 84px, rgb(200, 200, 200) 20px 40px 60px 80px inset'},
+  {at: 1.5, is: 'rgb(255, 255, 255) 26px 52px 78px 104px, rgb(250, 250, 250) 25px 50px 75px 100px inset'},
 ]);
 
 assertComposition({
@@ -58,11 +71,11 @@ assertComposition({
   addFrom: 'rgb(100, 100, 100) 10px 20px 30px 40px',
   replaceTo: 'rgb(200, 200, 200) 20px 40px 60px 80px',
 }, [
-  {at: -0.3, is: 'rgb(83, 96, 109) 8.3px 16.6px 24.9px 33.2px, rgb(96, 122, 148) 9.6px 19.2px 28.8px 38.4px'},
-  {at: 0, is: 'rgb(110, 120, 130) 11px 22px 33px 44px, rgb(120, 140, 160) 12px 24px 36px 48px'},
-  {at: 0.5, is: 'rgb(155, 160, 165) 15.5px 31px 46.5px 62px, rgb(160, 170, 180) 16px 32px 48px 64px'},
+  {at: -0.3, is: 'rgb(83, 96, 109) 8.3px 16.6px 24.9px 33.2px, rgb(26, 52, 78) 2.6px 5.2px 7.8px 10.4px'},
+  {at: 0, is: 'rgb(110, 120, 130) 11px 22px 33px 44px, rgb(20, 40, 60) 2px 4px 6px 8px'},
+  {at: 0.5, is: 'rgb(155, 160, 165) 15.5px 31px 46.5px 62px, rgba(20, 40, 60, 0.5) 1px 2px 3px 4px'},
   {at: 1, is: 'rgb(200, 200, 200) 20px 40px 60px 80px'},
-  {at: 1.5, is: 'rgba(255, 255, 255, 0.5) 24.5px 49px 73.5px 98px, rgba(255, 255, 255, 0.5) 24px 48px 72px 96px'},
+  {at: 1.5, is: 'rgba(255, 255, 255, 0.5) 24.5px 49px 73.5px 98px, rgba(0, 0, 0, 0) -1px -2px 0px -4px'},
 ]);
 
 assertComposition({
@@ -71,11 +84,11 @@ assertComposition({
   replaceFrom: 'rgb(100, 100, 100) 10px 20px 30px 40px',
   addTo: 'rgb(200, 200, 200) 20px 40px 60px 80px',
 }, [
-  {at: -0.3, is: 'rgba(96, 91, 87, 0.701961) 6.7px 13.4px 20.1px 26.8px, rgba(91, 83, 74, 0.701961) 6.4px 12.8px 19.2px 25.6px'},
+  {at: -0.3, is: 'rgba(96, 91, 87, 0.7) 6.7px 13.4px 20.1px 26.8px, rgba(0, 0, 0, 0) -0.6px -1.2px 0px -2.4px'},
   {at: 0, is: 'rgb(100, 100, 100) 10px 20px 30px 40px'},
-  {at: 0.5, is: 'rgb(155, 160, 165) 15.5px 31px 46.5px 62px, rgb(160, 170, 180) 16px 32px 48px 64px'},
-  {at: 1, is: 'rgb(210, 220, 230) 21px 42px 63px 84px, rgb(220, 240, 255) 22px 44px 66px 88px'},
-  {at: 1.5, is: 'rgb(255, 255, 255) 26.5px 53px 79.5px 106px, rgb(255, 255, 255) 28px 56px 84px 112px'},
+  {at: 0.5, is: 'rgb(155, 160, 165) 15.5px 31px 46.5px 62px, rgba(20, 40, 60, 0.5) 1px 2px 3px 4px'},
+  {at: 1, is: 'rgb(210, 220, 230) 21px 42px 63px 84px, rgb(20, 40, 60) 2px 4px 6px 8px'},
+  {at: 1.5, is: 'rgb(255, 255, 255) 26.5px 53px 79.5px 106px, rgb(30, 60, 90) 3px 6px 9px 12px'},
 ]);
 
 assertComposition({
@@ -84,11 +97,11 @@ assertComposition({
   addFrom: 'rgb(100, 100, 100) 10px 20px 30px 40px, rgb(200, 200, 200) 20px 40px 60px 80px',
   replaceTo: 'rgb(200, 200, 200) 20px 40px 60px 80px',
 }, [
-  {at: -0.3, is: 'rgb(83, 96, 109) 8.3px 16.6px 24.9px 33.2px, rgb(226, 252, 255) 22.6px 45.2px 67.8px 90.4px, rgb(122, 174, 226) 12.2px 24.4px 36.6px 48.8px, rgb(213, 226, 239) 21.3px 42.6px 63.9px 85.2px, rgb(96, 122, 148) 9.6px 19.2px 28.8px 38.4px, rgb(252, 255, 255) 25.2px 50.4px 75.6px 100.8px'},
-  {at: 0, is: 'rgb(110, 120, 130) 11px 22px 33px 44px, rgb(220, 240, 255) 22px 44px 66px 88px, rgb(140, 180, 220) 14px 28px 42px 56px, rgb(210, 220, 230) 21px 42px 63px 84px, rgb(120, 140, 160) 12px 24px 36px 48px, rgb(240, 255, 255) 24px 48px 72px 96px'},
-  {at: 0.5, is: 'rgb(155, 160, 165) 15.5px 31px 46.5px 62px, rgb(210, 220, 230) 21px 42px 63px 84px, rgb(170, 190, 210) 17px 34px 51px 68px, rgb(205, 210, 215) 20.5px 41px 61.5px 82px, rgb(160, 170, 180) 16px 32px 48px 64px, rgb(220, 240, 255) 22px 44px 66px 88px'},
+  {at: -0.3, is: 'rgb(83, 96, 109) 8.3px 16.6px 24.9px 33.2px, rgb(255, 255, 255) 28.6px 57.2px 85.8px 114.4px, rgb(52, 104, 156) 5.2px 10.4px 15.6px 20.8px'},
+  {at: 0, is: 'rgb(110, 120, 130) 11px 22px 33px 44px, rgb(220, 240, 255) 22px 44px 66px 88px, rgb(40, 80, 120) 4px 8px 12px 16px'},
+  {at: 0.5, is: 'rgb(155, 160, 165) 15.5px 31px 46.5px 62px, rgb(110, 120, 130) 11px 22px 33px 44px, rgba(40, 80, 120, 0.5) 2px 4px 6px 8px'},
   {at: 1, is: 'rgb(200, 200, 200) 20px 40px 60px 80px'},
-  {at: 1.5, is: 'rgba(255, 255, 255, 0.5) 24.5px 49px 73.5px 98px, rgba(255, 255, 255, 0.5) 19px 38px 57px 76px, rgba(255, 255, 255, 0.5) 23px 46px 69px 92px, rgba(255, 255, 255, 0.5) 19.5px 39px 58.5px 78px, rgba(255, 255, 255, 0.5) 24px 48px 72px 96px, rgba(255, 255, 255, 0.5) 18px 36px 54px 72px'},
+  {at: 1.5, is: 'rgba(255, 255, 255, 0.5) 24.5px 49px 73.5px 98px, rgba(0, 0, 0, 0) -11px -22px 0px -44px, rgba(0, 0, 0, 0) -2px -4px 0px -8px'},
 ]);
 </script>
 </body>