clip-composition.html (3085B)
1 <!DOCTYPE html> 2 <title>clip composition</title> 3 <link rel="help" href="https://drafts.fxtf.org/css-masking-1/#clip-property"> 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: 'clip', 11 underlying: 'rect(0px 10px 20px 30px)', 12 addFrom: 'rect(40px 50px 60px 70px)', 13 addTo: 'rect(140px 150px 160px 170px)', 14 }, [ 15 {at: -1, expect: 'rect(-60px -40px -20px 0px)'}, 16 {at: 0, expect: 'rect(40px 60px 80px 100px)'}, 17 {at: 0.25, expect: 'rect(65px 85px 105px 125px)'}, 18 {at: 0.75, expect: 'rect(115px 135px 155px 175px)'}, 19 {at: 1, expect: 'rect(140px 160px 180px 200px)'}, 20 {at: 2, expect: 'rect(240px 260px 280px 300px)'}, 21 ]); 22 23 test_composition({ 24 property: 'clip', 25 underlying: 'auto', 26 addFrom: 'rect(0px 0px 0px 0px)', 27 addTo: 'rect(100px 100px 100px 100px)', 28 }, [ 29 {at: -1, expect: 'rect(-100px -100px -100px -100px)'}, 30 {at: 0, expect: 'rect(0px 0px 0px 0px)'}, 31 {at: 0.25, expect: 'rect(25px 25px 25px 25px)'}, 32 {at: 0.75, expect: 'rect(75px 75px 75px 75px)'}, 33 {at: 1, expect: 'rect(100px 100px 100px 100px)'}, 34 {at: 2, expect: 'rect(200px 200px 200px 200px)'}, 35 ]); 36 37 test_composition({ 38 property: 'clip', 39 underlying: 'rect(50px auto auto 50px)', 40 addFrom: 'rect(50px auto auto 50px)', 41 addTo: 'rect(100px 100px 100px 100px)', 42 }, [ 43 {at: -1, expect: 'rect(100px auto auto 100px)'}, 44 {at: 0, expect: 'rect(100px auto auto 100px)'}, 45 {at: 0.25, expect: 'rect(100px auto auto 100px)'}, 46 {at: 0.75, expect: 'rect(100px 100px 100px 100px)'}, 47 {at: 1, expect: 'rect(100px 100px 100px 100px)'}, 48 {at: 2, expect: 'rect(100px 100px 100px 100px)'}, 49 ]); 50 51 test_composition({ 52 property: 'clip', 53 underlying: 'rect(50px 50px 50px 50px)', 54 addFrom: 'rect(50px auto auto 50px)', 55 addTo: 'rect(100px auto auto 100px)', 56 }, [ 57 {at: -1, expect: 'rect(0px auto auto 0px)'}, 58 {at: 0, expect: 'rect(50px auto auto 50px)'}, 59 {at: 0.25, expect: 'rect(62.5px auto auto 62.5px)'}, 60 {at: 0.75, expect: 'rect(87.5px auto auto 87.5px)'}, 61 {at: 1, expect: 'rect(100px auto auto 100px)'}, 62 {at: 2, expect: 'rect(150px auto auto 150px)'}, 63 ]); 64 65 test_composition({ 66 property: 'clip', 67 underlying: 'rect(50px auto auto 50px)', 68 addFrom: 'rect(50px 50px 50px 50px)', 69 replaceTo: 'rect(100px auto auto 100px)', 70 }, [ 71 {at: -1, expect: 'rect(50px 50px 50px 50px)'}, 72 {at: 0, expect: 'rect(50px 50px 50px 50px)'}, 73 {at: 0.25, expect: 'rect(50px 50px 50px 50px)'}, 74 {at: 0.75, expect: 'rect(100px auto auto 100px)'}, 75 {at: 1, expect: 'rect(100px auto auto 100px)'}, 76 {at: 2, expect: 'rect(100px auto auto 100px)'}, 77 ]); 78 79 test_composition({ 80 property: 'clip', 81 underlying: 'rect(50px 50px 50px 50px)', 82 addFrom: 'rect(50px auto auto 50px)', 83 addTo: 'auto', 84 }, [ 85 {at: -1, expect: 'rect(50px auto auto 50px)'}, 86 {at: 0, expect: 'rect(50px auto auto 50px)'}, 87 {at: 0.25, expect: 'rect(50px auto auto 50px)'}, 88 {at: 0.75, expect: 'auto'}, 89 {at: 1, expect: 'auto'}, 90 {at: 2, expect: 'auto'}, 91 ]); 92 </script>