I want RSpec for CSS layout

Testing RSpec
1

I don’t even know how it’d be possible (through Selenium?), but I want
it.
I want to see if my stupid CSS hacks break. I want to say:

describe “#nav-column” do
body = something("#body-column")

it “should line up at the top” do
dom[:top].should_be == body.dom[:top]
end

it “should always be to the right” do
dom[:left].should_be > body.dom[:right]
end

end

And I want to be able to run it on Firefox, IE6, IE7, and Safari.

Lazyweb… go.

2

+1

cheers,
Matt

http://blog.mattwynne.net

In case you wondered: The opinions expressed in this email are my own
and do not necessarily reflect the views of any former, current or
future employers of mine.

3

ooh, that would be lovely.

LayoutBehave anyone?

2008/8/20 Matt W. [email protected]

4

On Aug 29, 2008, at 2:39 PM, Dan N. wrote:

ooh, that would be lovely.

LayoutBehave anyone?

Well, I don’t see why there couldn’t be one, assuming there was a CSS
parser out there.

I’ve started a treetop CSS2 parser, but just don’t have the time to
devote to it. Anyone interested?

Scott

5

I have been in a few pub conversations now about ‘photoshop-driven-
development’ where we show the machine what the page should look like
(a photoshop mock-up), and keeps failing the build until we produce
something that every browser can render to look like the mock-up.

Surely with all that CCTV out there in the world now there must be
some image-recognition software we could use to make this dream come
true.

6

Scott T. wrote:

I’ve started a treetop CSS2 parser, but just don’t have the time to
devote to it. Anyone interested?

Ah, but a CSS parser wouldn’t tell me if a browser bug had mis-rendered
the
page. What I really want to do is automate the oh-so-common process of:

  1. Make some seemingly trivial CSS change
  2. See that it seems to work
  3. Go about my day
  4. Five days later, when I hit a different code path in IE6, notice that
    it
    looks funny and never used to
  5. Try to bisect the version to see when it happened

which has to happen in the browser (assuming that the browser passes its
miscalculated X/Y coordinates back to the DOM properly).

7

On Aug 30, 2008, at 4:58 pm, Matt W. wrote:

I have been in a few pub conversations now about ‘photoshop-driven-
development’ where we show the machine what the page should look
like (a photoshop mock-up), and keeps failing the build until we
produce something that every browser can render to look like the
mock-up.

I had a nose around the WebKit source a while back, and it looked like
their integration testing was done basically by pure regression tests

  • save a PNG (or whatever) in a directory, and compare page renderings
    to the last reference copy. However that will break on different
    platforms with different font renderings, anti-aliasing algorithms etc
    unless you make it fuzzy (maybe blur the output and use a subtract
    calculation).

Maybe you could make it work with the Watir+screenshot code that Aslak
made ages ago?

Just a thought anyway.

Ashley

–
http://www.patchspace.co.uk/

8

I do some CSS testing through selenium and screw-unit-server.
Mainly checking what the style properties of certain dom elements are
after executing some JavaScript.

I use selenium-grid to invoke the different browsers.

Defining what is ‘correct’ seems a big difficulty.

Sometimes a little variation in rendering is ok and in other designs it
breaks everything!

I’ve been playing with the idea of inspecting the position of elements
in a page from the dom and using this to generate a SVG layout style
document. I’m thinking more position rather than colours/fonts. At
somepoint when I’m happy with the design I can generate this SVG and
then check against this to see if the layout matches as things change.

Nice thing about SVG is that its easy to change and has a visual
representation to be inspected. The SVG becomes like the spec.

my two cents.

Joseph W.
http://www.joesniff.co.uk

Scott T. wrote:

On Aug 29, 2008, at 2:39 PM, Dan N. wrote:

ooh, that would be lovely.

LayoutBehave anyone?

Well, I don’t see why there couldn’t be one, assuming there was a CSS
parser out there.

I’ve started a treetop CSS2 parser, but just don’t have the time to
devote to it. Anyone interested?

Scott

9

On Aug 30, 2008, at 10:52 AM, Jay L. wrote:

which has to happen in the browser (assuming that the browser passes
its miscalculated X/Y coordinates back to the DOM properly).

Well, I see no reason why you couldn’t build derivatives of the
compliant parser to match certain browsers. Some of these bugs are
well known, especially the IE 5.5/6 box model ones.

Plus - if something passed in the parser, but failed in the
browser, it would be a legitimate bug with the parser (derivative).

Scott

10

On 30 Aug 2008, at 19:56, Ashley M. wrote:

I had a nose around the WebKit source a while back, and it looked
like their integration testing was done basically by pure
regression tests - save a PNG (or whatever) in a directory, and
compare page renderings to the last reference copy. However that
will break on different platforms with different font renderings,
anti-aliasing algorithms etc unless you make it fuzzy (maybe blur
the output and use a subtract calculation).

Maybe you could make it work with the Watir+screenshot code that
Aslak made ages ago?

This is going to rock.

Has Lazyweb started working on it yet?