browser_animation_keyframes-graph_computed-value-path-03.js (4941B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 "use strict"; 5 6 // Test for ComputedValuePath of animations that consist by multi types of animated 7 // properties on complexed keyframes. 8 9 requestLongerTimeout(2); 10 11 const TEST_DATA = [ 12 { 13 targetClass: "middle-keyframe", 14 properties: [ 15 { 16 name: "background-color", 17 computedValuePathClass: "color-path", 18 expectedPathSegments: [ 19 { x: 0, y: 0 }, 20 { x: 0, y: 100 }, 21 { x: 500, y: 100 }, 22 { x: 1000, y: 100 }, 23 ], 24 expectedStopColors: [ 25 { offset: 0, color: "rgb(255, 0, 0)" }, 26 { offset: 0.5, color: "rgb(0, 0, 255)" }, 27 { offset: 1, color: "rgb(0, 255, 0)" }, 28 ], 29 }, 30 { 31 name: "background-repeat", 32 computedValuePathClass: "discrete-path", 33 expectedPathSegments: [ 34 { x: 0, y: 0 }, 35 { x: 249.999, y: 0 }, 36 { x: 250, y: 100 }, 37 { x: 749.999, y: 100 }, 38 { x: 750, y: 0 }, 39 { x: 1000, y: 0 }, 40 ], 41 }, 42 { 43 name: "font-size", 44 computedValuePathClass: "distance-path", 45 expectedPathSegments: [ 46 { x: 0, y: 0 }, 47 { x: 250, y: 50 }, 48 { x: 500, y: 100 }, 49 { x: 750, y: 50 }, 50 { x: 1000, y: 0 }, 51 ], 52 }, 53 { 54 name: "margin-left", 55 computedValuePathClass: "distance-path", 56 expectedPathSegments: [ 57 { x: 0, y: 0 }, 58 { x: 250, y: 50 }, 59 { x: 500, y: 100 }, 60 { x: 750, y: 50 }, 61 { x: 1000, y: 0 }, 62 ], 63 }, 64 { 65 name: "opacity", 66 computedValuePathClass: "distance-path", 67 expectedPathSegments: [ 68 { x: 0, y: 0 }, 69 { x: 250, y: 50 }, 70 { x: 500, y: 100 }, 71 { x: 750, y: 50 }, 72 { x: 1000, y: 0 }, 73 ], 74 }, 75 { 76 name: "text-align", 77 computedValuePathClass: "discrete-path", 78 expectedPathSegments: [ 79 { x: 0, y: 0 }, 80 { x: 249.999, y: 0 }, 81 { x: 250, y: 100 }, 82 { x: 749.999, y: 100 }, 83 { x: 750, y: 0 }, 84 { x: 1000, y: 0 }, 85 ], 86 }, 87 { 88 name: "transform", 89 computedValuePathClass: "distance-path", 90 expectedPathSegments: [ 91 { x: 0, y: 0 }, 92 { x: 250, y: 50 }, 93 { x: 500, y: 100 }, 94 { x: 750, y: 50 }, 95 { x: 1000, y: 0 }, 96 ], 97 }, 98 ], 99 }, 100 { 101 targetClass: "steps-keyframe", 102 properties: [ 103 { 104 name: "background-color", 105 computedValuePathClass: "color-path", 106 expectedPathSegments: [ 107 { x: 0, y: 0 }, 108 { x: 0, y: 100 }, 109 { x: 500, y: 100 }, 110 { x: 1000, y: 100 }, 111 ], 112 expectedStopColors: [ 113 { offset: 0, color: "rgb(255, 0, 0)" }, 114 { offset: 0.499, color: "rgb(255, 0, 0)" }, 115 { offset: 0.5, color: "rgb(128, 128, 0)" }, 116 { offset: 0.999, color: "rgb(128, 128, 0)" }, 117 { offset: 1, color: "rgb(0, 255, 0)" }, 118 ], 119 }, 120 { 121 name: "background-repeat", 122 computedValuePathClass: "discrete-path", 123 expectedPathSegments: [ 124 { x: 0, y: 0 }, 125 { x: 499.999, y: 0 }, 126 { x: 500, y: 100 }, 127 { x: 1000, y: 100 }, 128 ], 129 }, 130 { 131 name: "font-size", 132 computedValuePathClass: "distance-path", 133 expectedPathSegments: [ 134 { x: 0, y: 0 }, 135 { x: 500, y: 0 }, 136 { x: 500, y: 50 }, 137 { x: 1000, y: 50 }, 138 { x: 1000, y: 100 }, 139 ], 140 }, 141 { 142 name: "margin-left", 143 computedValuePathClass: "distance-path", 144 expectedPathSegments: [ 145 { x: 0, y: 0 }, 146 { x: 499.999, y: 0 }, 147 { x: 500, y: 50 }, 148 { x: 999.999, y: 50 }, 149 { x: 1000, y: 100 }, 150 ], 151 }, 152 { 153 name: "opacity", 154 computedValuePathClass: "distance-path", 155 expectedPathSegments: [ 156 { x: 0, y: 0 }, 157 { x: 499.999, y: 0 }, 158 { x: 500, y: 50 }, 159 { x: 999.999, y: 50 }, 160 { x: 1000, y: 100 }, 161 ], 162 }, 163 { 164 name: "text-align", 165 computedValuePathClass: "discrete-path", 166 expectedPathSegments: [ 167 { x: 0, y: 0 }, 168 { x: 499.999, y: 0 }, 169 { x: 500, y: 100 }, 170 { x: 1000, y: 100 }, 171 ], 172 }, 173 { 174 name: "transform", 175 computedValuePathClass: "distance-path", 176 expectedPathSegments: [ 177 { x: 0, y: 0 }, 178 { x: 500, y: 0 }, 179 { x: 500, y: 50 }, 180 { x: 1000, y: 50 }, 181 { x: 1000, y: 100 }, 182 ], 183 }, 184 ], 185 }, 186 ]; 187 188 add_task(async function () { 189 await testKeyframesGraphComputedValuePath(TEST_DATA); 190 });