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

Re: [css-writing-modes-3] Additional review of vertical-alignment-new-00? tests

From: Gérard Talbot <css21testsuite@gtalbot.org>
Date: Thu, 13 Aug 2015 05:27:30 -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: <21d0e482f063c7bf7ec34e892f2cb8d5@gtalbot.org>
Le 2015-08-13 03:58, 塩澤 元 a écrit :
> Gérard,
> 
> Thank you for the detailed explanation.
> I have learned CSS knowledge a lot from you!
> 
> I have changed the assert description and line-height comment.
> https://hg.csswg.org/test/rev/828918d30919
> 
>> Another thing is that the test, for practical purposes, uses an inline
> box that has no top-half-leading outside its content area (by setting 
> on
> purpose, deliberately, the span#orange's line-height to 1, that is what 
> the
> test does) so that the orange squares all line up vertically at one 
> side.
>> The test would be tougher for browsers and for the test author (but
> doable) if the span#orange's line-height was inherited.
> OK, I see.
> I'm considering about the way to test when span#orange's line-height 
> was
> inherited (not setting line-height to 1).

Do not worry about that for now. I have such tests. The "magic" number 
is to use 3; a line-height of 3.

> I don't have accurate understanding about line-height. Now I'm studying
> about it reading the spec.

You can examine the tests I did on line-height; I think these tests will 
help you understand a bit more line-height and some CSS2.1 statements.

http://test.csswg.org/shepherd/search/testcase/spec/css21/section/10.8/author/gtalbot/

A few tests in CSS2.1 test suite on line-height and vertical-align are 
incorrect and have been reported as such; some (non-reviewed) others are 
doubtful to say the least or they are simply *not* testing what they 
believe to be testing or what they claim to be testing.

There are some tutorials on line-height and vertical-align but often 
they have errors and misunderstandings.


Overall, 'line-height' and 'vertical-align' are 2 properties that are 
very often misunderstood by web authors. The area created when 
line-height is set on an inline non-replaced box can not be painted and 
you can not put a border or an outline around it. So, it's rather 
difficult to represent. And I am certain, sure that section 10.8 and 
10.8.1 should have judicious schemas, diagrams, etc... to illustrate the 
concepts involved. I have said so several times in www-style mailing 
list:

[CSS21] Section 10.8 on line-height and vertical-align should have 
schemas and examples
http://lists.w3.org/Archives/Public/www-style/2009Apr/0519.html
http://lists.w3.org/Archives/Public/www-style/2009May/0079.html

Re: line-height suggestions and easier alignment
http://lists.w3.org/Archives/Public/www-style/2012May/0700.html

Line-height property has a very different - totally different - meaning
when set on a block element and when set on an inline element: this is
also often misunderstood.

Gérard

> 
> 
> 
> 
> 2015-08-13 6:15 GMT+09:00 Gérard Talbot <css21testsuite@gtalbot.org>:
> 
>> Hajime,
>> 
>> vertical-align - 'text-bottom' and vertical-rl writing-mode
>> 
>> http://test.csswg.org/source/css-writing-modes-3/vertical-alignment-new-006.xht
>> 
>> <meta name="assert" content="This test checks the position of inline 
>> box
>> with vertical align property. When 'writing-mode' is 'vertical-rl',
>> 'vertical-align' is 'text-bottom', the physical left (logical bottom,
>> namely 'line-under') edge of an inline non-replaced box is aligned 
>> with the
>> left side (logical bottom, namely 'line-under') of parent's content 
>> area."
>> />
>> 
>> I propose these minor changes:
>> 
>> <meta name="assert" content="This test checks the position of an 
>> inline
>> non-replaced box with vertical align property. When 'writing-mode' is
>> 'vertical-rl', 'vertical-align' is 'text-bottom', the physical left
>> (logical bottom) edge of an inline non-replaced box is aligned with 
>> the
>> left side (logical bottom) of parent's content area." />
>> 
>> Why these changes? An inline box does not have a line-under side; the 
>> line
>> box has a line-under side. Line-under should be used for identifying 
>> one
>> line box side only. If there was an *inline-under* concept, then that 
>> would
>> be good usage. Also, the parent's content area is not the inline box 
>> and is
>> not the line box; so it is not a good usage either. The verb "is 
>> aligned
>> with" or "is flush with" (which is used by CSS2.1, section 9.5) does 
>> not go
>> well with the "side" noun you are using.
>> 
>> Same thing with
>> vertical-align - 'text-bottom' and vertical-lr writing-mode
>> 
>> http://test.csswg.org/source/css-writing-modes-3/vertical-alignment-new-007.xht
>> 
>> 
>> Another thing is that the test, for practical purposes, uses an inline 
>> box
>> that has no top-half-leading outside its content area (by setting on
>> purpose, deliberately, the span#orange's line-height to 1, that is 
>> what the
>> test does) so that the orange squares all line up vertically at one 
>> side.
>> The test would be tougher for browsers and for the test author (but 
>> doable)
>> if the span#orange's line-height was inherited.
>> 
>> - - - - - - - - -
>> 
>> vertical-align - 'bottom' and vertical-rl writing-mode
>> 
>> http://test.csswg.org/source/css-writing-modes-3/vertical-alignment-new-008.xht
>> 
>> line 16: font: 3.75em/3 Ahem; /* computes to 60px/90px */
>> 
>> should be
>> 
>> font: 3.75em/3 Ahem; /* computes to 60px/180px */
>> 
>> <meta name="assert" content="This test checks the position of inline 
>> box
>> with vertical align property. When 'writing-mode' is 'vertical-rl',
>> 'vertical-align' is 'bottom', the physical left (logical bottom, 
>> namely
>> 'line-under') edge of inline-box attaches the physical left (logical
>> bottom, namely 'line-under') of line-box." />
>> 
>> I propose these minor changes:
>> 
>> <meta name="assert" content="This test checks the position of inline
>> non-replaced box with vertical align property. When 'writing-mode' is
>> 'vertical-rl', 'vertical-align' is 'bottom', the physical left 
>> (logical
>> bottom) edge of an inline non-replaced box is aligned with the 
>> physical
>> left (logical bottom) edge of its line box." />
>> 
>> - - - - - - - - -
>> 
>> vertical-align - 'bottom' and vertical-lr writing-mode
>> 
>> http://test.csswg.org/source/css-writing-modes-3/vertical-alignment-new-009.xht
>> 
>> font: 3.75em/3 Ahem; /* computes to 60px/90px */
>> 
>> should be
>> 
>> font: 3.75em/3 Ahem; /* computes to 60px/180px */
>> 
>> - - - - - - -
>> 
>> vertical-align - 'text-top' and vertical-lr writing-mode
>> 
>> http://test.csswg.org/source/css-writing-modes-3/vertical-alignment-new-005.xht
>> 
>> An inline non-replaced box does not have a line-over edge. It's not a
>> best, appropriate usage of line-over edge. 'line-over', 'line-under',
>> 'line-left', 'line-right' are just logical terms for identifying each 
>> or
>> which sides of a line box we're referring to.
>> 
>> - - - - - - -
>> 
>> Overall, do not use "line-box" and "inline-box"; use "line box" and
>> "inline box".
>> 
>> The CSS2.1 uses this kind of wording (verb) when comparing position of 
>> 2
>> edges:
>> 
>> An edge is [ below | above | flush with | aligned with | on the left 
>> of |
>> on the right of ] another edge.
>> 
>> 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
>> 

-- 
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 Thursday, 13 August 2015 09:28:07 UTC

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