Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix(clip): delete clipping region with restore #73

Merged
merged 3 commits into from
Dec 4, 2020
Merged

Fix(clip): delete clipping region with restore #73

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ebb7472
Fix(clip): delete clipping region with restore
lekha Dec 2, 2020
6bfe9f1
Address PR comments
lekha Dec 3, 2020
6d08ec5
Remove excess checks in test
lekha Dec 3, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,6 +178,7 @@ canvas.toDataURL.mockReturnValueOnce(
- [@hustcc](https://github.com/hustcc)
- [@jtenner](https://github.com/jtenner)
- [@evanoc0](https://github.com/evanoc0)
- [@lekha](https://github.com/lekha)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for your contribution!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! It's my first one ever!


## License

Expand Down
22 changes: 22 additions & 0 deletions __tests__/classes/CanvasRenderingContext2D.__getClippingPath.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,4 +51,26 @@ describe('__getClippingRegion', () => {
ctx.restore();
expect(region).toStrictEqual(ctx.__getClippingRegion());
});

it('should restore the clipping region correctly when restored', () => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can consolidate these two tests into a single one, because we already test to see if the clipping region is properly set without restoring, right?

    ctx.arc(1, 2, 3, 4, 5);
    ctx.clip(); // push the arc to the clipping stack
    ctx.save(); // push the current clipping region to the top of the stack
    ctx.rect(1, 2, 3, 4);
    ctx.arc(1, 2, 3, 4, 5);
    ctx.clip(); // adds the path to the current stack clipping region
    ctx.restore(); // restores back to a single arc

It would be best to utilize the afterEach() snapshots to validate context output in this case too, because it's already baked into each test. No need to add additional expectations.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You're right. I just made the changes. Better?

const region = ctx.__getClippingRegion();
ctx.save();
ctx.rect(1, 2, 3, 4);
ctx.arc(1, 2, 3, 4, 5);
ctx.clip();
expect(region).not.toStrictEqual(ctx.__getClippingRegion());
ctx.restore();
expect(region).toStrictEqual(ctx.__getClippingRegion());
});

it('should delete current clipping region when restored', () => {
ctx.save();
ctx.rect(1, 2, 3, 4);
ctx.arc(1, 2, 3, 4, 5);
ctx.clip();
const region = ctx.__getClippingRegion();
Copy link
Collaborator

@jtenner jtenner Dec 3, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

First, I want to admit that this test function does indeed assert that the restore() function works in relation to clip calls.

With that being said, I believe simplifying the tests here will go a long way in describing how the functions are supposed to work.

If possible, I would like to remove a few of the function calls in this test, so I will outline the reasons why I suggest them.

  1. On line 62, this code obtains the current clipping region, which normally would be able to be used, except that the afterEach() callback already performs clipping region checks. Thus, we don't have to obtain the clipping region at all.
  2. On line 64, this code calls ctx.save() again, which becomes a confounding factor when proving that the ctx.restore() function works. We should probably remove it to make things clearer.
  3. Lastly, on line 65 creating another expectation here is not necessary, because we know the clipping region should only contain a single Rect entry at this point. Again, this is handled by the snapshot expecation in the afterEach() callback.

All in all, great work. Please remove the lines in question, and I will accept the contribution.

Cheers.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for working with me on this. I haven't been working with javascript long.

I tried removing lines 62 and 64-65, but then the test passes even when this._clipStack.pop() is not inside the restore() implementation, which doesn't seem right to me. I think the way to ensure that the clipping region has been popped off the stack is by calling ctx.save() -> ctx.restore() -> ctx.save() and confirming that the clipped region immediately after the two ctx.save() calls do not have the same identity.

The afterEach() snapshot check already occurs in a different test, which is what I thought you meant when you said to consolidate earlier.

Is there a better way to check that the pop happens?

Copy link
Collaborator

@jtenner jtenner Dec 3, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay. At the very least, we should make sure not use expect calls here. We can just inspect the state after the test runs, and that's enough.

As for your example, I think I'm being pedantic.

Just remove the expect calls from this test and we should be good.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's an additional test that doesn't require expect calls too. I can understand why they were added in the first place. They aren't necessary.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That makes sense. Fixed.

ctx.restore();
ctx.save();
expect(region).not.toStrictEqual(ctx.__getClippingRegion());
});
});
20 changes: 20 additions & 0 deletions __tests__/classes/CanvasRenderingContext2D.restore.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
let canvas;
let ctx;

beforeEach(() => {
canvas = document.createElement('canvas');
ctx = canvas.getContext('2d');
canvas.width = 400;
canvas.height = 300;
});

describe('save', () => {
it('should be a function', () => {
expect(typeof ctx.restore).toBe('function');
});

it('should be callable', () => {
ctx.restore();
expect(ctx.restore).toBeCalled();
});
});
4 changes: 4 additions & 0 deletions __tests__/classes/__snapshots__/CanvasRenderingContext2D.__getClippingPath.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@

exports[`__getClippingRegion should be empty when there are no path elements 1`] = `Array []`;

exports[`__getClippingRegion should delete current clipping region when restored 1`] = `Array []`;

exports[`__getClippingRegion should restore the clipping region correctly when restored 1`] = `Array []`;

exports[`__getClippingRegion should save the clipping region correctly when saved 1`] = `
Array [
Object {
Expand Down
1 change: 1 addition & 0 deletions src/classes/CanvasRenderingContext2D.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1477,6 +1477,7 @@ export default class CanvasRenderingContext2D {
if (this._stackIndex <= 0) return;

this._transformStack.pop();
this._clipStack.pop();
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cant believe I missed this. Thanks for the pull request!

this._directionStack.pop();
this._fillStyleStack.pop();
this._filterStack.pop();
Expand Down