OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <meta charset="UTF-8"> |
| 3 <style> |
| 4 @viewport { |
| 5 width: 800px; |
| 6 height: 600px; |
| 7 } |
| 8 .target { |
| 9 display: inline-block; |
| 10 font: 20px sans-serif; |
| 11 } |
| 12 .replica { |
| 13 color: green; |
| 14 margin-right: 30px; |
| 15 } |
| 16 </style> |
| 17 <body> |
| 18 <template id="target-template"> |
| 19 <p> |
| 20 v<br />v |
| 21 </p> |
| 22 </template> |
| 23 <script src="../testharness/testharness.js"></script> |
| 24 <script src="../testharness/testharnessreport.js"></script> |
| 25 <script src="resources/interpolation-test.js"></script> |
| 26 <script> |
| 27 assertInterpolation({ |
| 28 property: 'line-height', |
| 29 from: '4', |
| 30 to: '14' |
| 31 }, [ |
| 32 {at: -1, is: '0'}, |
| 33 {at: -0.3, is: '1'}, |
| 34 {at: 0, is: '4'}, |
| 35 {at: 0.3, is: '7'}, |
| 36 {at: 0.6, is: '10'}, |
| 37 {at: 1, is: '14'}, |
| 38 {at: 1.5, is: '19'}, |
| 39 ]); |
| 40 assertInterpolation({ |
| 41 property: 'line-height', |
| 42 from: '4px', |
| 43 to: '14px' |
| 44 }, [ |
| 45 {at: -1, is: '0px'}, |
| 46 {at: -0.3, is: '1px'}, |
| 47 {at: 0, is: '4px'}, |
| 48 {at: 0.3, is: '7px'}, |
| 49 {at: 0.6, is: '10px'}, |
| 50 {at: 1, is: '14px'}, |
| 51 {at: 1.5, is: '19px'}, |
| 52 ]); |
| 53 assertInterpolation({ |
| 54 property: 'line-height', |
| 55 from: 'normal', |
| 56 to: 'normal' |
| 57 }, [ |
| 58 {at: -0.3, is: 'normal'}, |
| 59 {at: 0, is: 'normal'}, |
| 60 {at: 0.3, is: 'normal'}, |
| 61 {at: 0.6, is: 'normal'}, |
| 62 {at: 1, is: 'normal'}, |
| 63 {at: 1.5, is: 'normal'}, |
| 64 ]); |
| 65 assertInterpolation({ |
| 66 property: 'line-height', |
| 67 from: '4', |
| 68 to: '14px' |
| 69 }, [ |
| 70 {at: -0.3, is: '4'}, |
| 71 {at: 0, is: '4'}, |
| 72 {at: 0.3, is: '4'}, |
| 73 {at: 0.6, is: '14px'}, |
| 74 {at: 1, is: '14px'}, |
| 75 {at: 1.5, is: '14px'}, |
| 76 ]); |
| 77 assertInterpolation({ |
| 78 property: 'line-height', |
| 79 from: '14px', |
| 80 to: 'normal' |
| 81 }, [ |
| 82 {at: -0.3, is: '14px'}, |
| 83 {at: 0, is: '14px'}, |
| 84 {at: 0.3, is: '14px'}, |
| 85 {at: 0.6, is: 'normal'}, |
| 86 {at: 1, is: 'normal'}, |
| 87 {at: 1.5, is: 'normal'}, |
| 88 ]); |
| 89 assertInterpolation({ |
| 90 property: 'line-height', |
| 91 from: 'normal', |
| 92 to: '4' |
| 93 }, [ |
| 94 {at: -0.3, is: 'normal'}, |
| 95 {at: 0, is: 'normal'}, |
| 96 {at: 0.3, is: 'normal'}, |
| 97 {at: 0.6, is: '4'}, |
| 98 {at: 1, is: '4'}, |
| 99 {at: 1.5, is: '4'}, |
| 100 ]); |
| 101 assertInterpolation({ |
| 102 property: 'line-height', |
| 103 from: '4', |
| 104 to: 'normal' |
| 105 }, [ |
| 106 {at: -0.3, is: '4'}, |
| 107 {at: 0, is: '4'}, |
| 108 {at: 0.3, is: '4'}, |
| 109 {at: 0.6, is: 'normal'}, |
| 110 {at: 1, is: 'normal'}, |
| 111 {at: 1.5, is: 'normal'}, |
| 112 ]); |
| 113 assertInterpolation({ |
| 114 property: 'line-height', |
| 115 from: 'normal', |
| 116 to: '14px' |
| 117 }, [ |
| 118 {at: -0.3, is: 'normal'}, |
| 119 {at: 0, is: 'normal'}, |
| 120 {at: 0.3, is: 'normal'}, |
| 121 {at: 0.6, is: '14px'}, |
| 122 {at: 1, is: '14px'}, |
| 123 {at: 1.5, is: '14px'}, |
| 124 ]); |
| 125 assertInterpolation({ |
| 126 property: 'line-height', |
| 127 from: '14px', |
| 128 to: '4' |
| 129 }, [ |
| 130 {at: -0.3, is: '14px'}, |
| 131 {at: 0, is: '14px'}, |
| 132 {at: 0.3, is: '14px'}, |
| 133 {at: 0.6, is: '4'}, |
| 134 {at: 1, is: '4'}, |
| 135 {at: 1.5, is: '4'}, |
| 136 ]); |
| 137 assertInterpolation({ |
| 138 property: 'line-height', |
| 139 from: '4vw', |
| 140 to: '14vw' |
| 141 }, [ |
| 142 {at: -1, is: '0'}, |
| 143 {at: -0.3, is: '1vw'}, |
| 144 {at: 0, is: '4vw'}, |
| 145 {at: 0.3, is: '7vw'}, |
| 146 {at: 0.6, is: '10vw'}, |
| 147 {at: 1, is: '14vw'}, |
| 148 {at: 1.5, is: '19vw'}, |
| 149 ]); |
| 150 // These tests assume a viewport of 800x600. |
| 151 // assertInterpolation({ |
| 152 // property: 'line-height', |
| 153 // from: '50vmin', |
| 154 // to: '100px' |
| 155 // }, [ |
| 156 // {at: -0.25, is: '350px'}, |
| 157 // {at: 0, is: '300px'}, |
| 158 // {at: 0.25, is: '250px'}, |
| 159 // {at: 0.75, is: '150px'}, |
| 160 // {at: 1, is: '100px'}, |
| 161 // {at: 1.5, is: '0px'}, |
| 162 // ]); |
| 163 // assertInterpolation({ |
| 164 // property: 'line-height', |
| 165 // from: '100px', |
| 166 // to: '50vmax' |
| 167 // }, [ |
| 168 // {at: -0.25, is: '25px'}, |
| 169 // {at: 0, is: '100px'}, |
| 170 // {at: 0.25, is: '175px'}, |
| 171 // {at: 0.75, is: '325px'}, |
| 172 // {at: 1, is: '400px'}, |
| 173 // {at: 1.5, is: '550px'}, |
| 174 // ]); |
| 175 // assertInterpolation({ |
| 176 // property: 'line-height', |
| 177 // from: '75vw', |
| 178 // to: '25vh' |
| 179 // }, [ |
| 180 // {at: -0.25, is: '712.5px'}, |
| 181 // {at: 0, is: '600px'}, |
| 182 // {at: 0.25, is: '487.5px'}, |
| 183 // {at: 0.75, is: '262.5px'}, |
| 184 // {at: 1, is: '150px'}, |
| 185 // {at: 1.5, is: '0px'}, // line-height must not be less than 0. |
| 186 // ]); |
| 187 </script> |
| 188 </body> |
OLD | NEW |