CSS Cleaner, automated browser testing
So we need a CSS cleaner on LiveJournal. I don't want to talk about that part.
I'm going to talk about state of CSS parsers in Perl:
-- they don't work. CSS::Tiny, CSS.pm (both parsers), CSS::SAC.... no go.
Also looked at packaging csstidy, but it's not quite what we want either, and would be a lot of work, wasn't written with security in mind I imagine, etc, etc.
So let's assume I have to write my own CSS parser, or at least fix up CSS::SAC (which seems to be the most promising). How to test?
The CSS cleaner works like:
CSS -> parse -> parse tree -> clean -> serialize -> clean CSS
Goal: semantically equivalent CSS and clean CSS in the not-fucking-with-us case. (no JavaScript/etc).
So how do I do a semantic diff of two CSS files, when I don't trust the parser?
Mozilla (Firefox) has a great CSS parser. Let's use that to test!
So I wrote my Perl tests for CSS::Cleaner starts up and says, "Yo, connect to http://.....:9124/ with your browser.". Then it steps the browser through 2000 some CSS files, giving it both original and cleaned versions. Then I walk the CSS tree in JavaScript, build a canonical serialized version of both versions, and either advance to next test (if match), or send both to server to get back a diff, and the test suite fails in the browser with a unified diff of Mozilla's view of the CSS differences and links to orig/cleaned CSS, for human inspection.
Yay.
Except now I have to fix CSS::SAC or something. Bleh.
I'm going to talk about state of CSS parsers in Perl:
-- they don't work. CSS::Tiny, CSS.pm (both parsers), CSS::SAC.... no go.
Also looked at packaging csstidy, but it's not quite what we want either, and would be a lot of work, wasn't written with security in mind I imagine, etc, etc.
So let's assume I have to write my own CSS parser, or at least fix up CSS::SAC (which seems to be the most promising). How to test?
The CSS cleaner works like:
CSS -> parse -> parse tree -> clean -> serialize -> clean CSS
Goal: semantically equivalent CSS and clean CSS in the not-fucking-with-us case. (no JavaScript/etc).
So how do I do a semantic diff of two CSS files, when I don't trust the parser?
Mozilla (Firefox) has a great CSS parser. Let's use that to test!
So I wrote my Perl tests for CSS::Cleaner starts up and says, "Yo, connect to http://.....:9124/ with your browser.". Then it steps the browser through 2000 some CSS files, giving it both original and cleaned versions. Then I walk the CSS tree in JavaScript, build a canonical serialized version of both versions, and either advance to next test (if match), or send both to server to get back a diff, and the test suite fails in the browser with a unified diff of Mozilla's view of the CSS differences and links to orig/cleaned CSS, for human inspection.
Yay.
Except now I have to fix CSS::SAC or something. Bleh.