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

[Alan Stearns]

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?

Thanks,

Alan