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

On Sat, Mar 20, 2010 at 4:07 AM, fantasai <fantasai.lists@inkedblade.net> wrote:
>
> 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.


Yes, I think that works. As you say, under the very reasonable
assumption that UAs use (for Ahem) as content area height the same as
the font size.


>
> 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.


I wanted to check what would happen in an hypothetical UA using 1 for
line-height (as Safari and IE8 do with Ahem)  and wrongly rendering
the 2em vertical margins of the span inside the test div. To simulate
this I forced the line height, and made the span 'display:block' [1].
The word PASS does not completely disappear (it is rendered over the
div background).  But it would not be complete and not 'below the
orange box', so the test would correctly fail (one could use 3em as
margin of the span to better cover 'PASS' in that simulated case, but
this is a completely unnecessary nitpicking :-)


Best,
Bruno

[1] http://brunildo.org/test/test/margin-inline-001-2w.html

Received on Saturday, 20 March 2010 22:29:52 UTC