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.


http://test.csswg.org/source/css-writing-modes-3/inline-block-alignment-new-002.xht

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 
line-height
http://www.gtalbot.org//BrowserBugsSection/css21testsuite/experiments-va-lineheight-02.html

[
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
http://testthewebforward.org/docs/test-style-guidelines.html#special-fonts


---------

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
http://www.gtalbot.org/BrowserBugsSection/css21testsuite/inline-block-minimal-code-2.html

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:

     span#blue120
     {
       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:

http://test.csswg.org/suites/css-writing-modes-3_dev/nightly-unstable/html/text-baseline-002.htm

You need something like the following:

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

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

     span#orange30
     {
       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...:

http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/inline-block-alignment-new-002-draft-Hajime.xht

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.

Gérard
-- 
Test Format Guidelines
http://testthewebforward.org/docs/test-format-guidelines.html

Test Style Guidelines
http://testthewebforward.org/docs/test-style-guidelines.html

Test Templates
http://testthewebforward.org/docs/test-templates.html

CSS Naming Guidelines
http://testthewebforward.org/docs/css-naming.html

Test Review Checklist
http://testthewebforward.org/docs/review-checklist.html

CSS Metadata
http://testthewebforward.org/docs/css-metadata.html
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