- name: 2d.state.saverestore.transformation
desc: save()/restore() affects the current transformation matrix
code: |
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.save();
ctx.translate(200, 0);
ctx.restore();
ctx.fillStyle = '#f00';
ctx.fillRect(-200, 0, 100, 50);
@assert pixel 50,25 == 0,255,0,255;
expected: green
- name: 2d.state.saverestore.clip
desc: save()/restore() affects the clipping path
code: |
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.save();
ctx.rect(0, 0, 1, 1);
ctx.clip();
ctx.restore();
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
@assert pixel 50,25 == 0,255,0,255;
expected: green
- name: 2d.state.saverestore.path
desc: save()/restore() does not affect the current path
code: |
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.save();
ctx.rect(0, 0, 100, 50);
ctx.restore();
ctx.fillStyle = '#0f0';
ctx.fill();
@assert pixel 50,25 == 0,255,0,255;
expected: green
- name: 2d.state.saverestore.bitmap
desc: save()/restore() does not affect the current bitmap
code: |
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.save();
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.restore();
@assert pixel 50,25 == 0,255,0,255;
expected: green
- name: 2d.state.saverestore.stack
desc: save()/restore() can be nested as a stack
code: |
ctx.lineWidth = 1;
ctx.save();
ctx.lineWidth = 2;
ctx.save();
ctx.lineWidth = 3;
@assert ctx.lineWidth === 3;
ctx.restore();
@assert ctx.lineWidth === 2;
ctx.restore();
@assert ctx.lineWidth === 1;
- name: 2d.state.saverestore.stackdepth
desc: save()/restore() stack depth is not unreasonably limited
code: |
var limit = 512;
for (var i = 1; i < limit; ++i)
{
ctx.save();
ctx.lineWidth = i;
}
for (var i = limit-1; i > 0; --i)
{
@assert ctx.lineWidth === i;
ctx.restore();
}
- name: 2d.state.saverestore.underflow
desc: restore() with an empty stack has no effect
code: |
for (var i = 0; i < 16; ++i)
ctx.restore();
ctx.lineWidth = 0.5;
ctx.restore();
@assert ctx.lineWidth === 0.5;
- name: 2d.state.saverestore
desc: save()/restore() works for {{ variant_names[0] }}
code: |
// Test that restore() undoes any modifications
var old = ctx.{{ variant_names[0] }};
ctx.save();
ctx.{{ variant_names[0] }} = {{ value }};
ctx.restore();
_assertSame(ctx.{{ variant_names[0] }}, old, "ctx.{{ variant_names[0] }}", "old");
// Also test that save() doesn't modify the values
ctx.{{ variant_names[0] }} = {{ value }};
old = ctx.{{ variant_names[0] }};
// we're not interested in failures caused by get(set(x)) != x (e.g.
// from rounding), so compare against 'old' instead of against {{ value }}
ctx.save();
_assertSame(ctx.{{ variant_names[0] }}, old, "ctx.{{ variant_names[0] }}", "old");
ctx.restore();
variants:
- &2d_state_test_cases
strokeStyle:
value: '"#ff0000"'
fillStyle:
value: '"#ff0000"'
globalAlpha:
value: 0.5
lineWidth:
value: 0.5
lineCap:
value: '"round"'
lineJoin:
value: '"round"'
miterLimit:
value: 0.5
shadowOffsetX:
value: 5
shadowOffsetY:
value: 5
shadowBlur:
value: 5
shadowColor:
value: '"#ff0000"'
globalCompositeOperation:
value: '"copy"'
font:
canvas_types: ['HtmlCanvas']
value: '"25px serif"'
textAlign:
canvas_types: ['HtmlCanvas']
value: '"center"'
textBaseline:
canvas_types: ['HtmlCanvas']
value: '"bottom"'
- name: 2d.canvas.host.initial.reset.2dstate
desc: Resetting the canvas state resets 2D state variables
code: |
canvas.width = 100;
var default_val;
{% for state, params in states.items()
if not params['canvas_types'] or canvas_type in params['canvas_types'] %}
default_val = ctx.{{ state }};
ctx.{{ state }} = {{ params['value'] }};
canvas.width = 100;
@assert ctx.{{ state }} === default_val;
{% endfor %}
states: *2d_state_test_cases