object-position-composition.html (1901B)
1 <!DOCTYPE html> 2 <title>object-position composition</title> 3 <link rel="help" href="https://drafts.csswg.org/css-images-3/#the-object-position"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/css/support/interpolation-testcommon.js"></script> 7 <body> 8 <script> 9 test_composition({ 10 property: 'object-position', 11 underlying: '40px 60px', 12 addFrom: '60px 40px', 13 addTo: '160px 140px', 14 }, [ 15 {at: -0.25, expect: '75px 75px'}, 16 {at: 0, expect: '100px 100px'}, 17 {at: 0.25, expect: '125px 125px'}, 18 {at: 0.5, expect: '150px 150px'}, 19 {at: 0.75, expect: '175px 175px'}, 20 {at: 1, expect: '200px 200px'}, 21 {at: 1.25, expect: '225px 225px'}, 22 ]); 23 24 test_composition({ 25 property: 'object-position', 26 underlying: 'top 20% left 40%', 27 addFrom: 'left 60% top 80%', 28 addTo: 'right 80% bottom 40%', 29 }, [ 30 {at: -0.25, expect: '110% 105%'}, 31 {at: 0, expect: '100% 100%'}, 32 {at: 0.25, expect: '90% 95%'}, 33 {at: 0.5, expect: '80% 90%'}, 34 {at: 0.75, expect: '70% 85%'}, 35 {at: 1, expect: '60% 80%'}, 36 {at: 1.25, expect: '50% 75%'}, 37 ]); 38 39 test_composition({ 40 property: 'object-position', 41 underlying: '40px 60px', 42 replaceFrom: '100px 200px', 43 addTo: '160px 40px', 44 }, [ 45 {at: -0.25, expect: '75px 225px'}, 46 {at: 0, expect: '100px 200px'}, 47 {at: 0.25, expect: '125px 175px'}, 48 {at: 0.5, expect: '150px 150px'}, 49 {at: 0.75, expect: '175px 125px'}, 50 {at: 1, expect: '200px 100px'}, 51 {at: 1.25, expect: '225px 75px'}, 52 ]); 53 54 test_composition({ 55 property: 'object-position', 56 underlying: '40px 60px', 57 addFrom: '60px 140px', 58 replaceTo: '200px 100px', 59 }, [ 60 {at: -0.25, expect: '75px 225px'}, 61 {at: 0, expect: '100px 200px'}, 62 {at: 0.25, expect: '125px 175px'}, 63 {at: 0.5, expect: '150px 150px'}, 64 {at: 0.75, expect: '175px 125px'}, 65 {at: 1, expect: '200px 100px'}, 66 {at: 1.25, expect: '225px 75px'}, 67 ]);</script> 68 </body>