Re: tests on floats

Gabriele Romanato wrote:
> http://www.css-zibaldone.com/test/floats/
> http://www.css-zibaldone.com/test/floats/floats.zip

floats-absolute-000.xht
floats-contain-float-000.xht
floats-overflow-000.xht

   Rather than "UA should contain floats", I'd write "Absolutely
   positioned elements must contain floats", "Floated elements
   must contain floats", "Elements with overflow: auto must contain
   floats", etc. And link to
     http://www.w3.org/TR/CSS21/visuren.html#block-formatting

   I'd use float: right on the 't' and 's' and use a brighter
   colored background. Otherwise these tests looks pretty good.
   I'd name them part of the same series "floats-contain",
   they're all about float containment. You can also add tests
   with overflow: hidden and overflow: scroll.

floats-anonymous-text-000.xht

   This one doesn't have a clear pass condition.
     http://www.w3.org/Style/CSS/Test/guidelines.html#key-aspects
   Also for tests if you need dummy text you should use something
   like "dummy text" or a series of punctuation characters.. you
   don't want to use a real passage as it distracts from the test.

floats-complex-000.xht

   I don't really understand this test. What exactly are you trying
   to prove here?

floats-generate-000.xht

   This test is more about whether the 'clear' property applies to
   generated content than about float behavior. I'd change the
   title, filename, and assertion accordingly. Also replace "." with
   "". And like the floats-contain test, use a brighter background
   color.

floats-horizontal-space-000.xht

   This is a very good test, however I'd
     - replace <span> with <div>
     - set width: 1.5em on the outer box to make it trickier: this
       leaves *some* room for the float, but not enough

floats-inflow-elements-000.xht

   This isn't testing floating behavior so much as it's testing
   whether width and height apply to floats. So I'd change the
   section links to point to the definitions of 'width' and
   'height' instead. A few other comments:
     - the test is too big. You need to use smaller sizes.
     - it would be good to test percentages here as well, not
       just pixel sizing.

floats-inline-block-000.xht

   This is a great test, except it's wrong. :) You need to get
   rid of the space between the <span> elements in the first test.
   Also you should use <div> in the first set instead of <span>,
   so that a UA can't pass by ignoring 'inline-block' and treating
   the <spans>s as 'inline'.

floats-negative-margins-000.xht

   This is a very good test of float and negative margins. I would
   suggest however
     - using smaller sizes so that the test is easier to see on
       very narrow screens
     - numbering the boxes so that the final rendering is 1 2 3
       or using three different colors and comparing these boxes
       to a div with very wide borders. For example, if your boxes
       were sized at 40px,
         .reference {
            border-left: solid 40px fuchsia;
            border-right: solid 40px aqua;
            background: yellow;
            width: 40px;
            height: 1em;
         }
         <div class="reference"></div>
       Then you can require that the patterns be identical.

floats-percentages-000.xht

   The problem with this test is that it fails due to rounding
   errors. You need to pick widths and percentages that don't
   result in fractional pixels.

floats-relative-000.xht

   So, I think if you're testing relative positioning your
   reference rendering should avoid using any positioning at
   all. You can use the borders trick above instead. (If you're
   testing absolute positioning, then you don't want to use
   relative positioning as the reference rendering.)

   You're using "left: 0;", "left: -20px", and "left: -20px".
   I think the test would be more interesting if you came up
   with different values and dug a little deeper into the
   relative positioning rules.

   Also, you should use smaller sizes and brighter colors
   like I did above. See Hixie's color guidelines:
     http://www.w3.org/Style/CSS/Test/guidelines.html#color

~fantasai

Received on Thursday, 18 September 2008 05:44:14 UTC