object-view-box-interpolation.html (1535B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <meta charset="UTF-8"> 4 <title>clip-path-interpolation</title> 5 <link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> 6 <meta name="assert" content="object-view-box supports animation"> 7 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/css/support/interpolation-testcommon.js"></script> 11 <style> 12 .target { 13 width: 100px; 14 height: 100px; 15 } 16 </style> 17 <body> 18 <img src="support/exif-orientation-6-ru.jpg"></img> 19 <script> 20 test_interpolation({ 21 property: 'object-view-box', 22 from: 'inset(0px)', 23 to: 'inset(20px)', 24 }, [ 25 {at: 0, expect: 'inset(0px)'}, 26 {at: 0.5, expect: 'inset(10px)'}, 27 {at: 1, expect: 'inset(20px)'}, 28 ]); 29 30 test_interpolation({ 31 property: 'object-view-box', 32 from: 'inset(0%)', 33 to: 'inset(20%)', 34 }, [ 35 {at: 0, expect: 'inset(0%)'}, 36 {at: 0.5, expect: 'inset(10%)'}, 37 {at: 1, expect: 'inset(20%)'}, 38 ]); 39 40 test_interpolation({ 41 property: 'object-view-box', 42 from: 'rect(0px 10px 20px 30px)', 43 to: 'rect(10px 20px 30px 40px)', 44 }, [ 45 {at: 0, expect: 'rect(0px 10px 20px 30px)'}, 46 {at: 0.5, expect: 'rect(5px 15px 25px 35px)'}, 47 {at: 1, expect: 'rect(10px 20px 30px 40px)'}, 48 ]); 49 50 test_interpolation({ 51 property: 'object-view-box', 52 from: 'xywh(0px 10px 20px 30px)', 53 to: 'xywh(10px 20px 30px 40px)', 54 }, [ 55 {at: 0, expect: 'xywh(0px 10px 20px 30px)'}, 56 {at: 0.5, expect: 'xywh(5px 15px 25px 35px)'}, 57 {at: 1, expect: 'xywh(10px 20px 30px 40px)'}, 58 ]); 59 </script> 60 </body>