| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <meta charset="UTF-8"> | 2 <meta charset="UTF-8"> |
| 3 <style> |
| 4 .parent { |
| 5 shape-outside: circle(80% at 30% 10%); |
| 6 } |
| 7 .target { |
| 8 shape-outside: circle(60% at 10% 30%); |
| 9 } |
| 10 </style> |
| 3 <body> | 11 <body> |
| 4 <script src="resources/interpolation-test.js"></script> | 12 <script src="resources/interpolation-test.js"></script> |
| 5 <script> | 13 <script> |
| 6 /* TODO: add inset test once blend() works for it */ | 14 /* TODO: add inset test once blend() works for it */ |
| 7 | 15 |
| 8 assertInterpolation({ | 16 assertInterpolation({ |
| 9 property: 'shape-outside', | 17 property: 'shape-outside', |
| 18 from: '', |
| 19 to: 'circle(40% at 20% 20%)', |
| 20 }, [ |
| 21 {at: -0.3, is: 'circle(66% at 7% 33%)'}, |
| 22 {at: 0, is: 'circle(60% at 10% 30%)'}, |
| 23 {at: 0.3, is: 'circle(54% at 13% 27%)'}, |
| 24 {at: 0.6, is: 'circle(48% at 16% 24%)'}, |
| 25 {at: 1, is: 'circle(40% at 20% 20%)'}, |
| 26 {at: 1.5, is: 'circle(30% at 25% 15%)'}, |
| 27 ]); |
| 28 |
| 29 assertNoInterpolation({ |
| 30 property: 'shape-outside', |
| 31 from: 'initial', |
| 32 to: 'circle(40% at 20% 20%)', |
| 33 }); |
| 34 |
| 35 assertInterpolation({ |
| 36 property: 'shape-outside', |
| 37 from: 'inherit', |
| 38 to: 'circle(40% at 20% 20%)', |
| 39 }, [ |
| 40 {at: -0.3, is: 'circle(92% at 33% 7%)'}, |
| 41 {at: 0, is: 'circle(80% at 30% 10%)'}, |
| 42 {at: 0.3, is: 'circle(68% at 27% 13%)'}, |
| 43 {at: 0.6, is: 'circle(56% at 24% 16%)'}, |
| 44 {at: 1, is: 'circle(40% at 20% 20%)'}, |
| 45 {at: 1.5, is: 'circle(20% at 15% 25%)'}, |
| 46 ]); |
| 47 |
| 48 assertNoInterpolation({ |
| 49 property: 'shape-outside', |
| 50 from: 'unset', |
| 51 to: 'circle(40% at 20% 20%)', |
| 52 }); |
| 53 |
| 54 assertInterpolation({ |
| 55 property: 'shape-outside', |
| 10 from: 'circle(100% at 0% 0%)', | 56 from: 'circle(100% at 0% 0%)', |
| 11 to: 'circle(50% at 25% 25%)', | 57 to: 'circle(50% at 25% 25%)', |
| 12 }, [ | 58 }, [ |
| 13 {at: -0.3, is: 'circle(115% at -7.5% -7.5%)'}, | 59 {at: -0.3, is: 'circle(115% at -7.5% -7.5%)'}, |
| 14 {at: 0, is: 'circle(100% at 0% 0%)'}, | 60 {at: 0, is: 'circle(100% at 0% 0%)'}, |
| 15 {at: 0.3, is: 'circle(85% at 7.5% 7.5%)'}, | 61 {at: 0.3, is: 'circle(85% at 7.5% 7.5%)'}, |
| 16 {at: 0.6, is: 'circle(70% at 15% 15%)'}, | 62 {at: 0.6, is: 'circle(70% at 15% 15%)'}, |
| 17 {at: 1, is: 'circle(50% at 25% 25%)'}, | 63 {at: 1, is: 'circle(50% at 25% 25%)'}, |
| 18 {at: 1.5, is: 'circle(25% at 37.5% 37.5%)'} | 64 {at: 1.5, is: 'circle(25% at 37.5% 37.5%)'} |
| 19 ]); | 65 ]); |
| (...skipping 54 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 74 property: 'shape-outside', | 120 property: 'shape-outside', |
| 75 from: 'circle(20% at right 10% bottom 20px)', | 121 from: 'circle(20% at right 10% bottom 20px)', |
| 76 to: 'circle(30% at right 20% bottom 30px)', | 122 to: 'circle(30% at right 20% bottom 30px)', |
| 77 }, [ | 123 }, [ |
| 78 {at: 0, is: 'circle(20% at right 10% bottom 20px)'}, | 124 {at: 0, is: 'circle(20% at right 10% bottom 20px)'}, |
| 79 {at: 0.5, is: 'circle(25% at 85% calc(-25px + 100%))'}, | 125 {at: 0.5, is: 'circle(25% at 85% calc(-25px + 100%))'}, |
| 80 {at: 1, is: 'circle(30% at right 20% bottom 30px)'}, | 126 {at: 1, is: 'circle(30% at right 20% bottom 30px)'}, |
| 81 ]); | 127 ]); |
| 82 </script> | 128 </script> |
| 83 </body> | 129 </body> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1265873002:
Add test coverage for interpolations using CSS wide keywords and neutral keyframes (Closed)
Base URL: svn://svn.chromium.org/blink/trunk