- name: 2d.reset.basic desc: reset clears to transparent black code: | ctx.fillStyle = '#f00'; ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); ctx.reset(); @assert pixel 0,0 == 0,0,0,0; @assert pixel 50,25 == 0,0,0,0; @assert pixel 25,50 == 0,0,0,0; @assert pixel 100,50 == 0,0,0,0; @assert pixel 0,50 == 0,0,0,0; @assert pixel 100,0 == 0,0,0,0; t.done(); - name: 2d.reset.state desc: check that the state is reset code: | const default_value = ctx.{{ state_name }}; ctx.{{ state_name }} = {{ new_value }}; @assert ctx.{{ state_name }} == {{ new_value }}; ctx.reset(); @assert ctx.{{ state_name }} == default_value; variants: letter_spacing: state_name: letterSpacing new_value: "'12px'" word_spacing: state_name: wordSpacing new_value: "'12px'" fill_style: state_name: fillStyle new_value: "'#ffffff'" stroke_style: state_name: strokeStyle new_value: "'#ffffff'" filter: state_name: filter new_value: "'blur(10px)'" font: state_name: font new_value: "'25px sans-serif'" global_alpha: state_name: globalAlpha new_value: 0.5 global_composite_operation: state_name: globalCompositeOperation new_value: "'destination-over'" line_width: state_name: lineWidth new_value: 1 line_cap: state_name: lineCap new_value: "'square'" line_join: state_name: lineJoin new_value: "'bevel'" miter_limit: state_name: miterLimit new_value: 1.0 line_dash_offset: state_name: lineDashOffset new_value: 1.0 shadow_offset_x: state_name: shadowOffsetX new_value: 10.0 shadow_offset_y: state_name: shadowOffsetY new_value: 10.0 shadow_blur: state_name: shadowBlur new_value: 10.0 shadow_color: state_name: shadowColor new_value: "'#ff0000'" font: state_name: font new_value: "'16px sans-serif'" text_align: state_name: textAlign new_value: "'end'" text_baseline: state_name: textBaseline new_value: "'middle'" direction: state_name: direction new_value: "'rtl'" font_kerning: state_name: fontKerning new_value: "'normal'" font_stretch: state_name: fontStretch new_value: "'ultra-condensed'" font_variant_caps: state_name: fontVariantCaps new_value: "'unicase'" text_rendering: state_name: textRendering new_value: "'geometricPrecision'" image_smoothing_enabled: state_name: imageSmoothingEnabled new_value: "false" image_smoothing_quality: state_name: imageSmoothingQuality new_value: "'high'" - name: 2d.reset.state.transformation_matrix desc: check that the state is reset code: | ctx.scale(2, 2); ctx.reset(); @assert ctx.getTransform().isIdentity; - name: 2d.reset.state.clip desc: check that the clip is reset size: [200, 200] code: | ctx.beginPath(); ctx.rect(0, 0, 100, 100); ctx.clip(); ctx.fillRect(0, 0, 200, 200); ctx.reset(); ctx.fillRect(0, 0, 200, 200); reference: | ctx.fillRect(0, 0, 200, 200); - name: 2d.reset.state.line_dash desc: check that the line dash is reset code: | ctx.setLineDash([1, 2]); ctx.reset(); @assert ctx.getLineDash().length == 0; - name: 2d.reset.render.drop_shadow desc: check that drop shadows are correctly rendered after reset size: [500, 500] code: | ctx.shadowOffsetX = 10; ctx.shadowOffsetY = 10; ctx.shadowColor = "red"; ctx.shadowBlur = 10; ctx.reset(); ctx.fillRect(100, 100, 100, 100); reference: | ctx.fillRect(100, 100, 100, 100); - name: 2d.reset.render.text desc: check that text is correctly rendered after reset size: [400, 400] code: | ctx.font = "24px serif"; ctx.textAlign = "center"; ctx.textBaseline = "hanging"; ctx.direction = "rtl"; ctx.letterSpacing = "10px"; ctx.fontKerning = "none"; ctx.fontStretch = "semi-condensed"; ctx.fontVariantCaps = "tilting-caps"; ctx.textRendering = "optimizeLegibility"; ctx.wordSpacing = "20px"; ctx.reset(); ctx.fillText("Lorem ipsum dolor sit amet, consectetur adipiscing elit", 0, 10); reference: | ctx.fillText("Lorem ipsum dolor sit amet, consectetur adipiscing elit", 0, 10); - name: 2d.reset.render.line desc: check that lines are correctly rendered after reset size: [400, 400] code: | ctx.lineWidth = 10; ctx.lineCap = "round"; ctx.lineJoin = "bevel"; ctx.lineDashOffset = 10; ctx.setLineDash([20]); ctx.reset(); ctx.beginPath(); ctx.moveTo(100, 100); ctx.lineTo(100, 300); ctx.lineTo(300, 300); ctx.lineTo(300, 100); ctx.stroke(); reference: | ctx.beginPath(); ctx.moveTo(100, 100); ctx.lineTo(100, 300); ctx.lineTo(300, 300); ctx.lineTo(300, 100); ctx.stroke(); - name: 2d.reset.render.miter_limit desc: check that the lines are correctly rendered with the default miter limit after reset size: [400, 400] code: | ctx.miterLimit = 6; ctx.reset(); ctx.lineWidth = 10; ctx.beginPath(); ctx.moveTo(0, 100); for (let i = 0; i < 24; i++) { const dy = i % 2 === 0 ? 25 : -25; ctx.lineTo(Math.pow(i, 1.5) * 2, 75 + dy); } ctx.stroke(); reference: | ctx.lineWidth = 10; ctx.beginPath(); ctx.moveTo(0, 100); for (let i = 0; i < 24; i++) { const dy = i % 2 === 0 ? 25 : -25; ctx.lineTo(Math.pow(i, 1.5) * 2, 75 + dy); } ctx.stroke(); - name: 2d.reset.render.global_composite_operation desc: check that canvas correctly renders rectangles with the default global composite operation after reset size: [400, 400] code: | ctx.globalCompositeOperation = "xor"; ctx.reset(); ctx.fillRect(10, 10, 100, 100); ctx.fillRect(50, 50, 100, 100); reference: | ctx.fillRect(10, 10, 100, 100); ctx.fillRect(50, 50, 100, 100); - name: 2d.reset.render.misc desc: check that canvas correctly renders rectangles after reset (states not covered by other tests) size: [400, 400] code: | ctx.fillStyle = "red"; ctx.strokeStyle = "red"; ctx.globalAlpha = 0.5; ctx.filter = "blur(2px)"; ctx.reset(); ctx.fillRect(0, 0, 100, 100); ctx.strokeRect(150, 150, 100, 100); reference: | ctx.fillRect(0, 0, 100, 100); ctx.strokeRect(150, 150, 100, 100);