Brad Fitzpatrick (brad) wrote,
Brad Fitzpatrick
brad

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.
Tags: javascript, perl, tech, work
Subscribe
  • Post a new comment

    Error

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.
  • 9 comments