Friday, June 26, 2009

An evil test case

Opera, WebKit, and Firefox are supposed to conform to CSS 2.1 standards, at least, right?

A fun test:


<div style="width: 30px; height: 30px; background-color: blue; padding: 1px">
<div style="display: block; background-color: red; padding: 1px">
<div style="opacity: .1; float: left; width: 100px; height: 40px; background-color: green">a</div>
<div style="opacity: .2; float: left; width: 100px; height: 40px; background-color: green">b</div>
<div style="opacity: .3; float: left; width: 100px; height: 40px; background-color: green">c</div>
<div style="width: 50px; height: 10px; background-color: green">d</div>
</div>
</div>


Do three versions of it: set the red box to be display block, inline-block, and inline. A little subtle to why this breaks is that, while these browsers might conform to the CSS specification for these (I'm still not sure about this), it exercises ambiguously defined parts of the spec.

For the few folks actually implementing this stuff, it exercises ambiguity in the definition of preferred widths, preferred minimum widths, and shrink-to-fit in the presence of floats.

Formalizing one fully-defined interpretation of the spec is... interesting. Thought I was done, but realized I wasn't =/
Post a Comment