W3C home > Mailing lists > Public > public-css-testsuite@w3.org > June 2015

Re: Refactoring of inline-block-alignment tests

From: Gérard Talbot <css21testsuite@gtalbot.org>
Date: Sat, 06 Jun 2015 03:23:19 -0400
To: 塩澤 元 (Shiozawa, Hajime) <hajime.shiozawa@gmail.com>
Cc: Public CSS test suite mailing list <public-css-testsuite@w3.org>, Koji Ishii <kojiishi@gluesoft.co.jp>
Message-ID: <386eef937ddf4b92ca7f0fb85ac74166@gtalbot.org>
Le 2015-06-06 00:57, 塩澤 元 a écrit :
> Hi,
> I have submitted the new version of inline-block-alignment tests.
> These tests has only two case (writing-mode:vertical-rl +
> text-orientation:mixed). I'll submit other case in later.
> I'll remove old test case and rename new test after new test case is
> approved.
> Commit
> - https://hg.csswg.org/test/rev/e53afd19c2db
> - https://hg.csswg.org/test/rev/45175a424209
> Hajime.


line 15:   font: 3.75em Ahem; /* computes to 60px */

Whenever you set a font-size with Ahem font, you need to specify the 
line-height property, otherwise it will be 'normal' and 'line-height: 
normal' computes to 1.2 in Firefox but to 1.0 for other browsers!

Load this test in Chrome, Firefox and IE11:

Revealing experiments on content box height, vertical-align and 

If the test uses the Ahem font, make sure the line-height on block 
elements is specified; avoid 'line-height: normal'. (...)

E.g. Bad:

{font: 1.25em Ahem;} /* computed line-height value is 'normal' */
{font: 20px Ahem;} /* computed line-height value is 'normal' */
Test Style Guidelines: Ahem Usage


line 9: <link rel="match" href="inline-block-alignment-new-002.xht" />

If it is possible for you to reuse an already created reference file, 
then this is preferable; otherwise it is okay to create another 
reference file.


If you want to test inline-block in particular, then this is the minimal 
code I recommend for inline-blocks:

Minimal code to use with 'display' set to inline-block

This page is the result of discussion we had a few years ago in the 
mailing list; Alan Gresley joined such discussion.


If your code is:

       display: inline-block;
       padding-left: 1em; /* computes to 120px */
       padding-right: 1em; /* computes to 120px */
       color: blue;
       font-size: 2em; /* computes to 120px */

<span id="blue120">B</span>

then the inline-block, as far as baseline-alignment, "is" just like an 
inline non-replaced element and we already have this test:


You need something like the following:

       color: orange;
       font: 3.75em/1 Ahem; /* computes to 60px */
       height: 4em;
       writing-mode: vertical-rl;
       text-orientation: mixed;

       display: inline-block;
       padding-left: 1em; /* computes to 120px */
       padding-right: 1em; /* computes to 120px */
       color: blue;
       font-size: 2em; /* computes to 120px */

       display: inline-block;
       padding-left: 1em; /* computes to 30px */
       padding-right: 1em; /* computes to 30px */
       font-size: 0.5em; /* computes to 30px */


The following is a *draft* that I'm working on for you...:


I'm not sure this is a good test (too tired right now) ... but, so far, 
right now, Firefox and Chrome disagree on how to baseline-align the 
inline-block and ... this is the purpose of your test... so...

More later.

Test Format Guidelines

Test Style Guidelines

Test Templates

CSS Naming Guidelines

Test Review Checklist

CSS Metadata
Received on Saturday, 6 June 2015 07:23:49 UTC

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