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

Le 2015-08-29 03:15, 塩澤 元 a écrit :
> Gérard,
> 
> I've committed change which set span#orange's line-height inherited.
> https://hg.csswg.org/test/rev/b7ef4be925f3
> 
> I attached a explanation figure  (explanation-vertical-align-test.png).


Hajime, your explanation figure is excellent! :)


> After reviewing, I will apply this change other tests.


Your previous tests were okay, acceptable, good also, you know.


> I have studied about the line-height spec.
> Now I understand why the area created by line-height cannot be 
> painted...
> Thank you!
> 
> Hajime


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

Your current vertical-alignment-new-002.xht needs a bit of tuning.

A)

You could add 'margin-top: -1em' like this:

     span#orange
     {
       font-size: 0.5em;
       color: orange;
       margin-top: -1em;
       vertical-align: top;
     }


so that the text of the pass-fail-conditions sentence would make more 
sense.


or B)

you could replace

<p>Test passes if the right edge of an blue square is aligned with the 
left edge of a orange square.</p>

with

<p>Test passes if the bottom-right corner of a blue square is touching 
the top-left corner of an orange square.</p>


- - - - - - - -


http://test.csswg.org/source/css-writing-modes-3/vertical-alignment-new-004.xht

Please change

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

to

font: 3.75em/3 Ahem; /* computes to 60px/180px */

and then please add

<link rel="reviewer" title="Gérard Talbot" 
href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 
2015-09-01 -->


- - - - - - - -


http://test.csswg.org/source/css-writing-modes-3/vertical-alignment-new-004-ref.xht

Modify line 15 like this:

line 15:      padding-left: 60px; /* =  position of orange squares */
     }


and then you can remove lines 18 to 21:

line 18:    img + br + img
              {
                padding-left: 60px; /* = the position of second orange 
square*/
line 21:     }

Then please add

<link rel="reviewer" title="Gérard Talbot" 
href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 
2015-09-01 -->


Gérard


> 
> 
> 2015-08-13 18:27 GMT+09:00 Gérard Talbot <css21testsuite@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
>> 

-- 
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 Tuesday, 1 September 2015 02:26:26 UTC