W3C home > Mailing lists > Public > public-css-testsuite@w3.org > November 2014

Re: [css-writing-mode] change a structure of text-baseline test cases.

From: Gérard Talbot <css21testsuite@gtalbot.org>
Date: Mon, 24 Nov 2014 14:31:23 -0500
To: fantasai <fantasai.lists@inkedblade.net>
Cc: 塩澤 元 (Shiozawa, Hajime) <hajime.shiozawa@gmail.com>, Public CSS test suite mailing list <public-css-testsuite@w3.org>, Rebecca Hauck <rhauck@adobe.com>, fantasai <fantasai@inkedblade.net>
Message-ID: <d2f2e77a0a6f708124d9f49cbd0a1de8@gtalbot.org>
Le 2014-11-23 01:59, fantasai a écrit :
> On 11/17/2014 09:12 AM, 塩澤 元 (Shiozawa, Hajime) wrote:
>> Hi Gérard,
>> I change a structure of text-baseline-***.html.
>> Points are following.
>> 1. Test files are divided into more fine test case.
>> 2. Each test case contains a one test case and is named a combination 
>> of writing-mode property and text-orientation property.
>> (e.g. tb-sideways-left).
>> 3. Files which have same number may have a same reference file.
>>     For example, the following files will have same reference file.
>>     + text-baseline-002-lr-sideways.xht
>>     + text-baseline-002-lr-sideways-left.xht
>>     + text-baseline-002-rl-sideways-left.xht
>> 4. I will apply the change to the others if this time change is no 
>> problem.
>> I consider about creating a reference file using a new font you 
>> discuss about now.
> Hello Shiozawa-san,
> Here are my comments on your testcases.
> First is design of the test. These cases test whether the image is 
> aligned
> to the text at the correct baseline.

Not exactly... We wanted to help the testers (people taking the tests) 
establish if "L" glyphs were properly and correctly aligned. In fact, 
the blue horizontal line should have been vertically-aligned 1px lower 
(with vertical-align: -1px). As coded and as it is, that blue horizontal 
line is overlapping the bottom-most part of the "L" glyphs. That blue 
horizontal line should not be part of the tests; that blue horizontal 
line never was intended to be part of the tests.

> This is only one effect of the dominant
> baseline, and it's possible the UA got this one correct but missed 
> others
> relevant to the alignment of text or vice versa.
> These are the effects of the dominant baseline:
>   * when glyphs of different sizes are aligned to each other

This is what I missed. Hajime, this is my fault.

>   * when glyphs of the same size but different fonts are aligned to 
> each other
>     (e.g. if one font has the baseline at 12% and the other at 20%)

We do not have tests involving different fonts having respectively 
different alphabetic baselines at different positions.

>   * when atomic inlines are aligned to surrounding text

Hajime has created tests involving, I believe, empty inline-blocks.

> Ideally we would test all three, but the second one will require a new 
> test
> font, which we don't have at the moment. So let us focus on the other 
> two.
> Alignment of Different-size Text
> --------------------------------
> To test different sizes, we will need some text on the line that is of 
> at
> least two different sizes. I suggest using three sizes, to test sizing 
> both
> up and down. For example,
>   <p>A<big>B<small>C</small>B</big>A</p>
> (Please substitute <span> and CSS instead of <big>/<small>. 
> 30px/50px/10px
> should show off the differences adequately.)
> For central alignment, we can use different-colored squares ("A") and 
> require
> that the squares be perfectly centered with respect to each other.
> For alphabetic alignment, we can use "É" glyphs (or "p" glyphs) all of 
> the
> same color and require that the appropriate side of the resulting shape 
> is
> straight.
> The reference files for each can be made using backgrounds or borders
> and margins on normal blocks or floated blocks (no 'writing-mode'), as
> appropriate.

Why not create the reference files with images? Why not create a set of 
consecutive swatch images arranged in a vertical sequence in the 
reference files?


img {vertical-align: top;}
/* In case where inline replaced boxes are vertically 'top'-aligned, 
then they are not baseline-aligned but aligned so as to minimize the 
line box height. */

<div><img src="support/black15x15.png" width="..." height="..." 
alt="Image download support must be enabled" /></div>
<div><img src="support/black15x15.png" width="..." height="..." 
alt="Image download support must be enabled" /></div>

Nota bene: there is no swatch-black.pgn image right now.


> Make sure the boxes all have the same margin-box size, so
> that we don't need to worry about how they are aligned!
> Alignment of Images to Text
> ---------------------------
> Your existing tests do technically test this, but since they use a 1px 
> line,
> they do not test it very vigorously. To do that, we need a larger 
> image. I
> would suggest using one of the support/*-swatch images, sizing it to be 
> a
> larger or smaller square if necessary.
> You can test alignment of images similar to how we did text to larger 
> text.
> This will not only test whether the image is aligned to the correct 
> baseline,
> but also whether the correct point within the image is chosen for the 
> alignment!
> For example, in central alignment the center of the image will be 
> chosen,
> whereas for alphabetic alignment its edge will be chosen. It is 
> important to
> test this also.
>> New test files are following.
>> https://github.com/hshiozawa/csswg-test/blob/master/css-writing-modes-3/text-baseline-001-tb-mixed.xht
>> https://github.com/hshiozawa/csswg-test/blob/master/css-writing-modes-3/text-baseline-001-tb-sideways-left.xht
>> https://github.com/hshiozawa/csswg-test/blob/master/css-writing-modes-3/text-baseline-001-tb-sideways-right.xht
>> https://github.com/hshiozawa/csswg-test/blob/master/css-writing-modes-3/text-baseline-001-tb-sideways.xht
>> https://github.com/hshiozawa/csswg-test/blob/master/css-writing-modes-3/text-baseline-001-tb-upright.xht
>> https://github.com/hshiozawa/csswg-test/blob/master/css-writing-modes-3/text-baseline-001-tb-use-glyph-orientation.xht
>> https://github.com/hshiozawa/csswg-test/blob/master/css-writing-modes-3/text-baseline-002-lr-sideways-left.xht
>> https://github.com/hshiozawa/csswg-test/blob/master/css-writing-modes-3/text-baseline-002-lr-sideways.xht
>> https://github.com/hshiozawa/csswg-test/blob/master/css-writing-modes-3/text-baseline-002-rl-sideways-left.xht
>> https://github.com/hshiozawa/csswg-test/blob/master/css-writing-modes-3/text-baseline-003-lr-sideways-right.xht
>> https://github.com/hshiozawa/csswg-test/blob/master/css-writing-modes-3/text-baseline-003-rl-sideways-right.xht
>> https://github.com/hshiozawa/csswg-test/blob/master/css-writing-modes-3/text-baseline-003-rl-sideways.xht
>> https://github.com/hshiozawa/csswg-test/blob/master/css-writing-modes-3/text-baseline-004-lr-mixed.xht
>> https://github.com/hshiozawa/csswg-test/blob/master/css-writing-modes-3/text-baseline-004-lr-upright.xht
>> https://github.com/hshiozawa/csswg-test/blob/master/css-writing-modes-3/text-baseline-004-lr-use-glyph-orientation.xht
>> https://github.com/hshiozawa/csswg-test/blob/master/css-writing-modes-3/text-baseline-004-rl-mixed.xht
>> https://github.com/hshiozawa/csswg-test/blob/master/css-writing-modes-3/text-baseline-004-rl-upright.xht
>> https://github.com/hshiozawa/csswg-test/blob/master/css-writing-modes-3/text-baseline-004-rl-use-glyph-orientation.xht
> My second comment is about test organization. I think it's important 
> that each
> test file be understandable and not too complicated, both visually and
> code-wise.
> Sometimes this requires separating out related cases into multiple 
> files. But in
> this case, I think it's just as understandable to keep all the 
> text-orientation
> values in one file, and by keeping them in the same file it will make 
> it easier
> to understand the tests because of the reduced duplication of code and
> the ability
> to see at once the variation in the tests and the similarity. Also, 
> since we are
> automating tests, it will run faster if there are fewer files. So my 
> preference
> would be to have separate files for each writing mode, but the same 
> file for all
> text-orientation values.
> However, I defer to Rebecca Hauck on this matter, since she is in 
> charge of such
> matters, so let us have her opinion. :)
> Overall, you did a good job of covering all of the combinations and 
> documenting
> what the tests should be. (And they are not incorrect tests, they just 
> could be
> more precise and more comprehensive.) So thank you for your efforts!
> ~fantasai

Test Format Guidelines

Test Style Guidelines

Test Templates

CSS Naming Guidelines

Test Review Checklist

CSS Metadata
Received on Monday, 24 November 2014 19:32:02 UTC

This archive was generated by hypermail 2.4.0 : Friday, 20 January 2023 19:58:20 UTC