background-position-composition.html (2899B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>background-position composition</title> 4 <link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-position"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/css/support/interpolation-testcommon.js"></script> 8 <style> 9 .target { 10 width: 120px; 11 height: 120px; 12 display: inline-block; 13 background-image: url(), url(); 14 } 15 </style> 16 <body> 17 <script> 18 test_composition({ 19 property: 'background-position', 20 underlying: '40px 140px', 21 addFrom: '60px 160px', 22 addTo: '160px 260px', 23 }, [ 24 {at: -0.25, expect: '75px 275px, 75px 275px'}, 25 {at: 0, expect: '100px 300px, 100px 300px'}, 26 {at: 0.25, expect: '125px 325px, 125px 325px'}, 27 {at: 0.5, expect: '150px 350px, 150px 350px'}, 28 {at: 0.75, expect: '175px 375px, 175px 375px'}, 29 {at: 1, expect: '200px 400px, 200px 400px'}, 30 {at: 1.25, expect: '225px 425px, 225px 425px'}, 31 ]); 32 33 test_composition({ 34 property: 'background-position', 35 underlying: 'top 20% left 40%', 36 addFrom: 'left 60% top 80%', 37 addTo: 'right 80% bottom 40%', 38 }, [ 39 {at: -0.25, expect: '110% 105%, 110% 105%'}, 40 {at: 0, expect: '100% 100%, 100% 100%'}, 41 {at: 0.25, expect: '90% 95%, 90% 95%'}, 42 {at: 0.5, expect: '80% 90%, 80% 90%'}, 43 {at: 0.75, expect: '70% 85%, 70% 85%'}, 44 {at: 1, expect: '60% 80%, 60% 80%'}, 45 {at: 1.25, expect: '50% 75%, 50% 75%'}, 46 ]); 47 48 test_composition({ 49 property: 'background-position', 50 underlying: 'top 20% left 40%', 51 addFrom: 'left 60% top 80%, top 180% left 160%', 52 addTo: 'right 80% bottom 40%', 53 }, [ 54 {at: -0.25, expect: '110% 105%, 235% 230%'}, 55 {at: 0, expect: '100% 100%, 200% 200%'}, 56 {at: 0.25, expect: '90% 95%, 165% 170%'}, 57 {at: 0.5, expect: '80% 90%, 130% 140%'}, 58 {at: 0.75, expect: '70% 85%, 95% 110%'}, 59 {at: 1, expect: '60% 80%, 60% 80%'}, 60 {at: 1.25, expect: '50% 75%, 25% 50%'}, 61 ]); 62 63 test_composition({ 64 property: 'background-position', 65 underlying: '40px 140px', 66 replaceFrom: '100px 200px', 67 addTo: '160px 260px', 68 }, [ 69 {at: -0.25, expect: '75px 150px, 75px 150px'}, 70 {at: 0, expect: '100px 200px, 100px 200px'}, 71 {at: 0.25, expect: '125px 250px, 125px 250px'}, 72 {at: 0.5, expect: '150px 300px, 150px 300px'}, 73 {at: 0.75, expect: '175px 350px, 175px 350px'}, 74 {at: 1, expect: '200px 400px, 200px 400px'}, 75 {at: 1.25, expect: '225px 450px, 225px 450px'}, 76 ]); 77 78 test_composition({ 79 property: 'background-position', 80 underlying: '40px 140px', 81 addFrom: '60px 160px', 82 replaceTo: '200px 400px', 83 }, [ 84 {at: -0.25, expect: '75px 275px, 75px 275px'}, 85 {at: 0, expect: '100px 300px, 100px 300px'}, 86 {at: 0.25, expect: '125px 325px, 125px 325px'}, 87 {at: 0.5, expect: '150px 350px, 150px 350px'}, 88 {at: 0.75, expect: '175px 375px, 175px 375px'}, 89 {at: 1, expect: '200px 400px, 200px 400px'}, 90 {at: 1.25, expect: '225px 425px, 225px 425px'}, 91 ]); 92 </script> 93 </body>