stroke-dasharray-composition.html (5058B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>stroke-dasharray composition</title> 4 <link rel="help" href="https://svgwg.org/svg2-draft/painting.html#StrokeDashing"> 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 .parent { 10 stroke-dasharray: 30 10; 11 } 12 .target { 13 font-size: 16px; 14 } 15 </style> 16 <body> 17 <template id="target-template"> 18 <svg height="400" width="5"> 19 <path d="M0,0 l0,400" class="target"> 20 </svg> 21 </template> 22 <script> 23 // Basic case 24 test_composition({ 25 property: 'stroke-dasharray', 26 underlying: '5 5', 27 addFrom: '0 5', 28 addTo: '10 15', 29 }, [ 30 {at: -0.6, expect: ' 0 4'}, // Values must be non-negative. 31 {at: -0.4, expect: ' 1 6'}, 32 {at: -0.2, expect: ' 3 8'}, 33 {at: 0, expect: ' 5 10'}, 34 {at: 0.2, expect: ' 7 12'}, 35 {at: 0.4, expect: ' 9 14'}, 36 {at: 0.6, expect: '11 16'}, 37 {at: 0.8, expect: '13 18'}, 38 {at: 1, expect: '15 20'}, 39 {at: 1.2, expect: '17 22'}, 40 ]); 41 42 test_composition({ 43 property: 'stroke-dasharray', 44 underlying: '10 10', 45 replaceFrom: '5 10', 46 addTo: '5 10', 47 }, [ 48 {at: -0.6, expect: ' 0 4'}, // Values must be non-negative. 49 {at: -0.4, expect: ' 1 6'}, 50 {at: -0.2, expect: ' 3 8'}, 51 {at: 0, expect: ' 5 10'}, 52 {at: 0.2, expect: ' 7 12'}, 53 {at: 0.4, expect: ' 9 14'}, 54 {at: 0.6, expect: '11 16'}, 55 {at: 0.8, expect: '13 18'}, 56 {at: 1, expect: '15 20'}, 57 {at: 1.2, expect: '17 22'}, 58 ]); 59 60 test_composition({ 61 property: 'stroke-dasharray', 62 underlying: '10 30', 63 addFrom: 'none', 64 addTo: '10 10', 65 }, [ 66 {at: -1.5, expect: 'none'}, 67 {at: -0.5, expect: 'none'}, 68 {at: 0, expect: 'none'}, 69 {at: 0.4, expect: 'none'}, 70 {at: 0.5, expect: '20 40'}, 71 {at: 0.6, expect: '20 40'}, 72 {at: 1, expect: '20 40'}, 73 {at: 1.5, expect: '20 40'}, 74 ]); 75 76 // Differing list lengths 77 // Lists are repeated until length is equal to lowest common multiple of lengths. 78 test_composition({ 79 property: 'stroke-dasharray', 80 underlying: '0 5', 81 addFrom: '5', 82 replaceTo: '15 20 25', 83 }, [ 84 {at: -0.2, expect: ' 3 8 1 9 2 7'}, 85 {at: 0, expect: ' 5 10 5 10 5 10'}, 86 {at: 0.2, expect: ' 7 12 9 11 8 13'}, 87 {at: 0.4, expect: ' 9 14 13 12 11 16'}, 88 {at: 0.6, expect: '11 16 17 13 14 19'}, 89 {at: 0.8, expect: '13 18 21 14 17 22'}, 90 {at: 1, expect: '15 20 25 15 20 25'}, 91 {at: 1.2, expect: '17 22 29 16 23 28'}, 92 ]); 93 94 // Lowest common multiple of list lengths not equal to multiple of list lengths 95 test_composition({ 96 property: 'stroke-dasharray', 97 underlying: '10 30', 98 replaceFrom: '5 10 15 20', 99 addTo: '15 0 25 10 35 20', 100 }, [ 101 {at: -0.2, expect: ' 1 6 11 16 0 2 13 18 0 4 9 14'}, // Values must be non-negative. 102 {at: 0, expect: ' 5 10 15 20 5 10 15 20 5 10 15 20'}, 103 {at: 0.2, expect: ' 9 14 19 24 13 18 17 22 11 16 21 26'}, 104 {at: 0.4, expect: '13 18 23 28 21 26 19 24 17 22 27 32'}, 105 {at: 0.6, expect: '17 22 27 32 29 34 21 26 23 28 33 38'}, 106 {at: 0.8, expect: '21 26 31 36 37 42 23 28 29 34 39 44'}, 107 {at: 1, expect: '25 30 35 40 45 50 25 30 35 40 45 50'}, 108 {at: 1.2, expect: '29 34 39 44 53 58 27 32 41 46 51 56'}, 109 ]); 110 111 // One list has odd length 112 test_composition({ 113 property: 'stroke-dasharray', 114 underlying: '10 20', 115 replaceFrom: '5 10 15', 116 addTo: '10 5 20 15', 117 }, [ 118 {at: -0.2, expect: ' 2 7 12 0 8 13 0 5 14 1 6 11'}, // Values must be non-negative. 119 {at: 0, expect: ' 5 10 15 5 10 15 5 10 15 5 10 15'}, 120 {at: 0.2, expect: ' 8 13 18 11 12 17 10 15 16 9 14 19'}, 121 {at: 0.4, expect: '11 16 21 17 14 19 15 20 17 13 18 23'}, 122 {at: 0.6, expect: '14 19 24 23 16 21 20 25 18 17 22 27'}, 123 {at: 0.8, expect: '17 22 27 29 18 23 25 30 19 21 26 31'}, 124 {at: 1, expect: '20 25 30 35 20 25 30 35 20 25 30 35'}, 125 {at: 1.2, expect: '23 28 33 41 22 27 35 40 21 29 34 39'}, 126 ]); 127 128 // Both lists have odd length 129 test_composition({ 130 property: 'stroke-dasharray', 131 underlying: '5', 132 addFrom: '0 5 10', 133 addTo: '15 20 25 30 35', 134 }, [ 135 {at: -0.2, expect: ' 2 7 12 0 4 14 1 6 11 0 8 13 0 5 10'}, // Values must be non-negative. 136 {at: 0, expect: ' 5 10 15 5 10 15 5 10 15 5 10 15 5 10 15'}, 137 {at: 0.2, expect: ' 8 13 18 11 16 16 9 14 19 12 12 17 10 15 20'}, 138 {at: 0.4, expect: '11 16 21 17 22 17 13 18 23 19 14 19 15 20 25'}, 139 {at: 0.6, expect: '14 19 24 23 28 18 17 22 27 26 16 21 20 25 30'}, 140 {at: 0.8, expect: '17 22 27 29 34 19 21 26 31 33 18 23 25 30 35'}, 141 {at: 1, expect: '20 25 30 35 40 20 25 30 35 40 20 25 30 35 40'}, 142 {at: 1.2, expect: '23 28 33 41 46 21 29 34 39 47 22 27 35 40 45'}, 143 ]); 144 145 // Mixed units 146 test_composition({ 147 property: 'stroke-dasharray', 148 underlying: '1em', 149 addFrom: '9em 14px', 150 addTo: '304px 1.5em', 151 }, [ 152 {at: -0.2, expect: '8em 28px'}, 153 {at: 0, expect: '10em 30px'}, 154 {at: 0.2, expect: '12em 32px'}, 155 {at: 0.4, expect: '14em 34px'}, 156 {at: 0.6, expect: '16em 36px'}, 157 {at: 0.8, expect: '18em 38px'}, 158 {at: 1, expect: '20em 40px'}, 159 {at: 1.2, expect: '22em 42px'}, 160 ]); 161 </script> 162 </body>