Skip to content

Loading…

DOM error on first time load #3

Closed
benquarmby opened this Issue · 6 comments

2 participants

@benquarmby

The Jasmine matchers in imagediff are brilliant, but unfortunately I can't get them to work first time with Chrome. That is, if I load a suite with toImageDiffEqual matchters in a new tab, I get the following error:
INDEX_SIZE_ERR: INDEX_SIZE_ERR: DOM Exception 1

Refreshing the browser seems to fix the issue.

Unfortunately that doesn't help me in phantomjs (runs all our specs), which throws the following error:
INDEX_SIZE_ERR: INDEX_SIZE_ERR: DOM Exception 1 in file:///[PATH TO TEMP DIRECTORY]/imagediff.js (line 97)

I can provide a more detailed example if needed.

@cesutherland
HumbleSoftware member

Hey, I'm on hand a bit this evening. Do you have a public repo I could visit anywhere? Try the latest build too.

I added js-headless-webkit test integration tonight and made a fix to get that off the ground.

@benquarmby

I'll try the latest version, thanks. Unfortunately I can't share anything (closed source), other than some base64 encoded strings and the innards of an it statement:

        var context = $('#test-canvas')[0].getContext("2d"),
            expected = new Image(),
            configs;

        expected.src = 'data:image/png;base64,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';

        expect(context).toImageDiffEqual(expected, 10);
@benquarmby

I managed to work around this by manually setting the width and height of the Image object (named expected above). It seems that the browser isn't ready to provide dimensions of custom images on first load. On reload it knows the dimensions already (from the cache?) and so the errors disappear.

The really bad news is - now that that's fixed - phantomjs doesn't appear to actually even draw on a canvas. I got it to return getDataURL() of a pie chart, and the resulting base64 encoded image is blank :(

Edit: the string isn't blank, but it resolves to a blank image.

@cesutherland
HumbleSoftware member

Ahh right. For the first issue, you can use the image.onload and image.complete to make the test asynchronous. That should fix the height / width issue. Wasn't thinking that the image.src = dataURI could still be asynchronous.

You're sure that a pie chart is rendered to the canvas? You can render a screenshot to a file (page.render() I think) with phantomjs; do that to confirm that it's blank. Seen any issues related to canvas on phantomjs's project?

@benquarmby

Good call about async tests. I've switched to runs / waits / runs specs with a 50ms gap, and everything seems to work fine.

Regarding phantom, I upgraded to a newer version, and it's rendering canvas images now. The bad news is that the output is different enough from what Chrome produces that all the tests fail, even with a high tolerance. Text for example is positioned differently. I was hoping the WebKit base would make them the same...

Anyway, thanks for your help. I've got it all to a point where I can show off how testable our canvas API is. Imagediff is going to make this a very impressive demo :)

@benquarmby benquarmby closed this
@cesutherland
HumbleSoftware member
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.