reset.yaml (7112B)
1 - name: 2d.reset.basic 2 desc: reset clears to transparent black 3 code: | 4 ctx.fillStyle = '#f00'; 5 ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); 6 ctx.reset(); 7 @assert pixel 0,0 == 0,0,0,0; 8 @assert pixel 50,25 == 0,0,0,0; 9 @assert pixel 25,50 == 0,0,0,0; 10 @assert pixel 100,50 == 0,0,0,0; 11 @assert pixel 0,50 == 0,0,0,0; 12 @assert pixel 100,0 == 0,0,0,0; 13 t.done(); 14 15 - name: 2d.reset.after-rasterization 16 desc: Reset after rasterizing a frame discards frame content. 17 code: | 18 ctx.fillStyle = 'rgba(255, 0, 0, 1)'; 19 ctx.fillRect(0, 0, {{ size[0] }}, {{ size[1] }}); 20 21 ctx.getImageData(0, 0, 1, 1); // Force previous draw calls to be rendered. 22 ctx.reset(); 23 24 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)'; 25 ctx.fillRect(0, 0, {{ size[0] }}, {{ (size[1] / 2) | int }}); 26 reference: | 27 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)'; 28 ctx.fillRect(0, 0, {{ size[0] }}, {{ (size[1] / 2) | int }}); 29 30 - name: 2d.reset.state 31 desc: check that the state is reset 32 code: | 33 const default_value = ctx.{{ state_name }}; 34 35 ctx.{{ state_name }} = {{ new_value }}; 36 @assert ctx.{{ state_name }} == {{ new_value }}; 37 38 ctx.reset(); 39 @assert ctx.{{ state_name }} == default_value; 40 41 variants: 42 - letter_spacing: 43 state_name: letterSpacing 44 new_value: "'12px'" 45 46 word_spacing: 47 state_name: wordSpacing 48 new_value: "'12px'" 49 50 fill_style: 51 state_name: fillStyle 52 new_value: "'#ffffff'" 53 54 stroke_style: 55 state_name: strokeStyle 56 new_value: "'#ffffff'" 57 58 filter: 59 state_name: filter 60 new_value: "'blur(10px)'" 61 62 font: 63 state_name: font 64 new_value: "'25px sans-serif'" 65 66 global_alpha: 67 state_name: globalAlpha 68 new_value: 0.5 69 70 global_composite_operation: 71 state_name: globalCompositeOperation 72 new_value: "'destination-over'" 73 74 line_width: 75 state_name: lineWidth 76 new_value: 1 77 78 line_cap: 79 state_name: lineCap 80 new_value: "'square'" 81 82 line_join: 83 state_name: lineJoin 84 new_value: "'bevel'" 85 86 miter_limit: 87 state_name: miterLimit 88 new_value: 1.0 89 90 line_dash_offset: 91 state_name: lineDashOffset 92 new_value: 1.0 93 94 shadow_offset_x: 95 state_name: shadowOffsetX 96 new_value: 10.0 97 98 shadow_offset_y: 99 state_name: shadowOffsetY 100 new_value: 10.0 101 102 shadow_blur: 103 state_name: shadowBlur 104 new_value: 10.0 105 106 shadow_color: 107 state_name: shadowColor 108 new_value: "'#ff0000'" 109 110 font: 111 state_name: font 112 new_value: "'16px sans-serif'" 113 114 text_align: 115 state_name: textAlign 116 new_value: "'end'" 117 118 text_baseline: 119 state_name: textBaseline 120 new_value: "'middle'" 121 122 direction: 123 state_name: direction 124 new_value: "'rtl'" 125 126 font_kerning: 127 state_name: fontKerning 128 new_value: "'normal'" 129 130 font_stretch: 131 state_name: fontStretch 132 new_value: "'ultra-condensed'" 133 134 font_variant_caps: 135 state_name: fontVariantCaps 136 new_value: "'unicase'" 137 138 text_rendering: 139 state_name: textRendering 140 new_value: "'geometricPrecision'" 141 142 image_smoothing_enabled: 143 state_name: imageSmoothingEnabled 144 new_value: "false" 145 146 image_smoothing_quality: 147 state_name: imageSmoothingQuality 148 new_value: "'high'" 149 150 - name: 2d.reset.state.transformation_matrix 151 desc: check that the state is reset 152 code: | 153 ctx.scale(2, 2); 154 155 ctx.reset(); 156 @assert ctx.getTransform().isIdentity; 157 158 - name: 2d.reset.state.clip 159 desc: check that the clip is reset 160 size: [200, 200] 161 code: | 162 ctx.beginPath(); 163 ctx.rect(0, 0, 100, 100); 164 ctx.clip(); 165 166 ctx.fillRect(0, 0, 200, 200); 167 168 ctx.reset(); 169 170 ctx.fillRect(0, 0, 200, 200); 171 reference: | 172 ctx.fillRect(0, 0, 200, 200); 173 174 - name: 2d.reset.state.line_dash 175 desc: check that the line dash is reset 176 code: | 177 ctx.setLineDash([1, 2]); 178 179 ctx.reset(); 180 @assert ctx.getLineDash().length == 0; 181 182 - name: 2d.reset.render.drop_shadow 183 desc: check that drop shadows are correctly rendered after reset 184 size: [500, 500] 185 code: | 186 ctx.shadowOffsetX = 10; 187 ctx.shadowOffsetY = 10; 188 ctx.shadowColor = "red"; 189 ctx.shadowBlur = 10; 190 191 ctx.reset(); 192 193 ctx.fillRect(100, 100, 100, 100); 194 reference: | 195 ctx.fillRect(100, 100, 100, 100); 196 197 - name: 2d.reset.render.text 198 desc: check that text is correctly rendered after reset 199 size: [400, 400] 200 code: | 201 ctx.font = "24px serif"; 202 ctx.textAlign = "center"; 203 ctx.textBaseline = "hanging"; 204 ctx.direction = "rtl"; 205 ctx.letterSpacing = "10px"; 206 ctx.fontKerning = "none"; 207 ctx.fontStretch = "semi-condensed"; 208 ctx.fontVariantCaps = "titling-caps"; 209 ctx.textRendering = "optimizeLegibility"; 210 ctx.wordSpacing = "20px"; 211 212 ctx.reset(); 213 214 ctx.fillText("Lorem ipsum dolor sit amet, consectetur adipiscing elit", 0, 10); 215 reference: | 216 ctx.fillText("Lorem ipsum dolor sit amet, consectetur adipiscing elit", 0, 10); 217 218 - name: 2d.reset.render.line 219 desc: check that lines are correctly rendered after reset 220 size: [400, 400] 221 code: | 222 ctx.lineWidth = 10; 223 ctx.lineCap = "round"; 224 ctx.lineJoin = "bevel"; 225 ctx.lineDashOffset = 10; 226 ctx.setLineDash([20]); 227 228 ctx.reset(); 229 230 ctx.beginPath(); 231 ctx.moveTo(100, 100); 232 ctx.lineTo(100, 300); 233 ctx.lineTo(300, 300); 234 ctx.lineTo(300, 100); 235 ctx.stroke(); 236 reference: | 237 ctx.beginPath(); 238 ctx.moveTo(100, 100); 239 ctx.lineTo(100, 300); 240 ctx.lineTo(300, 300); 241 ctx.lineTo(300, 100); 242 ctx.stroke(); 243 244 - name: 2d.reset.render.miter_limit 245 desc: check that the lines are correctly rendered with the default miter limit after reset 246 size: [400, 400] 247 code: | 248 ctx.miterLimit = 6; 249 250 ctx.reset(); 251 252 ctx.lineWidth = 10; 253 254 ctx.beginPath(); 255 ctx.moveTo(0, 100); 256 for (let i = 0; i < 24; i++) { 257 const dy = i % 2 === 0 ? 25 : -25; 258 ctx.lineTo(Math.pow(i, 1.5) * 2, 75 + dy); 259 } 260 ctx.stroke(); 261 reference: | 262 ctx.lineWidth = 10; 263 264 ctx.beginPath(); 265 ctx.moveTo(0, 100); 266 for (let i = 0; i < 24; i++) { 267 const dy = i % 2 === 0 ? 25 : -25; 268 ctx.lineTo(Math.pow(i, 1.5) * 2, 75 + dy); 269 } 270 ctx.stroke(); 271 272 - name: 2d.reset.render.global_composite_operation 273 desc: check that canvas correctly renders rectangles with the default global composite operation after reset 274 size: [400, 400] 275 code: | 276 ctx.globalCompositeOperation = "xor"; 277 278 ctx.reset(); 279 280 ctx.fillRect(10, 10, 100, 100); 281 ctx.fillRect(50, 50, 100, 100); 282 reference: | 283 ctx.fillRect(10, 10, 100, 100); 284 ctx.fillRect(50, 50, 100, 100); 285 286 - name: 2d.reset.render.misc 287 desc: check that canvas correctly renders rectangles after reset (states not covered by other tests) 288 size: [400, 400] 289 code: | 290 ctx.fillStyle = "red"; 291 ctx.strokeStyle = "red"; 292 ctx.globalAlpha = 0.5; 293 ctx.filter = "blur(2px)"; 294 295 ctx.reset(); 296 297 ctx.fillRect(0, 0, 100, 100); 298 ctx.strokeRect(150, 150, 100, 100); 299 reference: | 300 ctx.fillRect(0, 0, 100, 100); 301 ctx.strokeRect(150, 150, 100, 100);