[webkit-dev] Using inline-block divs for line breaking tests

[Dan Bernstein]

On Aug 24, 2011, at 1:08 PM, Alan Stearns wrote:

> I have an idea for writing LayoutTests where what's being tested are line
> breaks. Take the case of this recent bug fix:
> 
> https://bugs.webkit.org/show_bug.cgi?id=66662
> 
> The problem here was that if you had a left float and text-indent combined,
> the text-indent was not being considered in the line break, so text was
> running outside of the container box. Checking this fix seems to require
> using text, and test results that contain text are notoriously
> platform-dependent (apparently even if you use Ahem, see
> https://lists.webkit.org/pipermail/webkit-dev/2011-June/016930.html). The
> patch for this fix had platform/mac/... txt and png expected files, and I
> assume there will be other platform files created and maintained for this
> test.
> 
> If I could test the line break without using text, this test (and a class of
> other seemingly text-reliant tests) could be platform-independent. I think I
> have something that works, but I'd like to get feedback from people with
> more WebKit testing experience.
> 
> The test currently looks like this:
> 
> <style>
>    #container {
>        text-indent: 100px;
>        width: 200px;
>        border: 1px solid black;
>    }
>    #float {
>        float: left;
>        width: 50px;
>        height: 50px;
>        background: green;
>    }
> </style>
> <div id="container">
>    <div id="float"></div>
>    Some text that should not overlap the edge of the container.
> </div>
> 
> What's really being tested is whether the first line contains a short (up to
> 50px) amount of text or a longer (50-150px) amount. If I change the text
> content to inline-block elements at a specific pixel width (and set
> line-height as well) the dump-render-tree output should be
> exactly the same on each platform. I can use that output to check for a
> regression as the positions of the RenderBlocks for the "word" divs will
> change based on whether the line breaks correctly.
> 
> <style>
>    #container {
>        line-height:20px;
>        text-indent: 100px;
>        width: 200px;
>        border: 1px solid black;
>    }
>    #float {
>        float: left;
>        width: 50px;
>        height: 50px;
>        background: green;
>    }
>    .word{
>        display:inline-block;
>        background: blue;
>        height:12px;
>    }
>    .short {
>        width:40px;
>    }
>    .long {
>        width:90px;
>    }
> </style>
> <div id="container">
>    <div id="float"></div><div class="short word"></div><div class="long
> word"></div>
> </div>
> 
> With this version of the test you lose the self-documenting nature of the
> text, but this also happens if you use the Ahem font. I think this would be
> an OK tradeoff versus having to maintain platform-specific dumps and
> bitmaps. The test expectation could be added to the test source as a
> comment.
> 
> If a test really does need to verify that text is being rendered correctly,
> this technique would not be applicable. But I think there are a number of
> tests that are only concerned with line length or height, where the text
> content is incidental.
> 
> Does this seem like a good idea? Are there any refinements that can be made?

You can make a text-only test that uses Ahem (you can still rely on its horizontal metrics, at least) and DOM API such as Range’s getClientRects() to test that the first character after the line break is positioned where you expect it to be.