Re: Comments on test margin-inline-001.htm

On 03/19/2010 11:53 AM, Bruno Fassino wrote:
> This test
>    http://www.w3.org/Style/CSS/Test/CSS2.1/20100316/html4/margin-inline-001.htm
> has a div with a blue border including a span with orange background
> and vertical margins. It says:
>    "Test passes if the top and bottom of the orange box is touching the
> inner edges of the blue box..."
> but even when the vertical margins on the span are ignored, the orange
> background and the div border may not be touching.
>
> The span background is rendered on its content area whose height is
> font dependent.
> The height of the div is based on the line-height in use, 'normal' in
> this case, and again (usually) font-dependent.
> Now for a given font,  the 'normal' line-height is _not_ necessarily
> equal to the content area height.  Both are usually deducted from some
> font metrics, but they may be chosen with a certain arbitrariness by
> UA.
>
> So the height of the div is not necessarily equal to the height of the
> orange background.
>
> Indeed with some combination of browser and default font, there is gap
> between the orange and the blue border, usually few pixels.

Would something like this work?

         <style type="text/css">
             div
             {
                 border: solid green;
                 font-family: Ahem;
                 line-height: 1;
                 background: red; width: 4em;
             }
             span
             {
                 background: green;
                 color: green;
                 margin: 2em 0;
             }
         </style>
         <p>Test passes if there is a green box below and no red.</p>
         <div>
             <span>XXXX XXXX XXXX</span>
         </div>

The spec doesn't actually specify, but using Ahem covers both suggested
methods--and it really wouldn't make sense for the UA to use a measure
that's smaller than both the em height and the ascender-descender height.

We probably also want to check what happens when line-height is normal so

         <style type="text/css">
             .test
             {
                 border: solid orange 0.1em;
                 font-family: Ahem;
                 background: orange; width: 4em;
             }
             span
             {
                 background: orange;
                 color: orange;
                 margin: 2em 0;
             }
             .indicator {
                 padding-top: 4.7em;
                 margin-bottom: -5.7em;
                 line-height: 1;
             }
         </style>

     </head>
     <body>
         <p>Test passes if the word PASS appears below the orange box.</p>
         <div class="indicator">PASS</div>
         <div class="test">
             <span>XXXX XXXX XXXX</span>
         </div>
     </body>

The word PASS will be visible as long as 'normal' line height is 1.5 or
below: given that the recommended value for 'normal' is between 1.0 and 1.2,
this should be within reasonable UA-dependent error.

~fantasai

Received on Saturday, 20 March 2010 03:07:48 UTC