The new tests for vertical align with vertical writing mode

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
12 messages Options
Reply | Threaded
Open this post in threaded view
|

The new tests for vertical align with vertical writing mode

塩澤 元 (Shiozawa, Hajime)
Gérard,

I've submitted the new tests for 'vertical-align' property with vertical writing-mode.
https://hg.csswg.org/test/rev/8dd028e99e73
Could you review it?


First, I've created the four test-cases for the pattern which is not affected by its baseline.

writing-mode: (vertical-rl)
x
vertical-align: (top | text-top | text-bottom | bottom)
=> four pattern.

I think that in these test it is no need to test with variation of text-orientation because the calculation with 'top', 'text-top', 'text-bottom' and 'bottom' is not affected by baseline.

I will create test other properties which is affected by its baseline ('middle', 'sub', 'super', <percentage>, <length>) after the above test case is approved.


Hajime.

--
# 塩澤 元 (Shiozawa, Hajime)
# mail: [hidden email]
Reply | Threaded
Open this post in threaded view
|

Re: The new tests for vertical align with vertical writing mode

Gérard Talbot-3
Le 2015-07-26 06:22, 塩澤 元 a écrit :

> Gérard,
>
> I've submitted the new tests for 'vertical-align' property with
> vertical
> writing-mode.
> https://hg.csswg.org/test/rev/8dd028e99e73
> Could you review it?
>
>
> First, I've created the four test-cases for the pattern which is not
> affected by its baseline.
>
> writing-mode: (vertical-rl)
> x
> vertical-align: (top | text-top | text-bottom | bottom)
> => four pattern.
>
> I think that in these test it is no need to test with variation of
> text-orientation because the calculation with 'top', 'text-top',
> 'text-bottom' and 'bottom' is not affected by baseline.

Correct. It is not affected by what is the dominant baseline and where
it is. top and bottom and affected by the height of line box while
text-bottom and text-top are affected by top and bottom of parent's
content area.


> I will create test other properties which is affected by its baseline
> ('middle', 'sub', 'super', <percentage>, <length>) after the above test
> case is approved.
>
>
> Hajime.


- - - - - - - - - - - -


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

<title>CSS Writing Modes Test: vertical align - 'baseline' (alphabetical
baseline with vertical layout)</title>

Proposed change:

<title>CSS Writing Modes Test: vertical-align - 'top' and vertical-rl
writing-mode</title>


Since the test does not require to check the dominant baseline (central
for 'text-orientation: mixed'), then you can safely use the same
font-size (1em) for the orange square.

I propose these changes to make the test a bit more easier to review:

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

div#rl {
     border-right: blue solid 2em;
     writing-mode: vertical-rl;
     font: 3.75em/3 Ahem; /* computes to 60px/180px */
     color: white;
}

span#orange30 {
     color: orange;
     vertical-align: top;
     line-height: 1;
}

In the reference file:

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

     img#orange
     {
       padding-top: 60px; /* = the height of first character */
       padding-left: 120px; /* = the position of orange square */
     }

<div>
    <img id="orange" src="support/swatch-orange.png" width="60"
height="60" alt="Image download support must be enabled" /><img
src="support/swatch-blue.png" width="120" height="120" alt="Image
download support must be enabled" />
</div>

http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/vertical-alignment-new-002-Hajime-1.xht


In such version of your test, you could even remove 'color: white' so
that we would be able to figure out the physical width (logical height)
of the line box. When I set to 3, I know in advance that the
top-half-leading (and bottom-half-leading) outside content area is going
to be the size of the font, unless an inline element (say, a big image)
increases the line box height.


More simple version of that test:
http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/vertical-alignment-new-002-Hajime-2.xht

Chrome 46 fails both versions of that test.
IE11 passes both version of that test but it does not shrink the height
of the div.
I don't know about Microsoft Edge.

- - - - - - - - - - - -

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

<title>CSS Writing Modes Test: vertical align - 'baseline' (alphabetical
baseline with vertical layout)</title>

Proposed change:

<title>CSS Writing Modes Test: vertical-align - 'text-top' and
vertical-rl writing-mode</title>



<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-top', the right edge of inline-box aligned
with the top of parent inline-box." />

It is not exactly this ... but I know it's difficult to word all this.

I suggest:

"
(...) When 'writing-mode' is 'vertical-rl', 'vertical-align' is
'text-top', the physical right (logical top) edge of an inline
non-replaced box is aligned with the right side (logical top) of
parent's content area.
"

The physical width (logical height) of inline non-replaced box is set
with 'line-height'. When you set it to 1, you shrink such box to its
content area: there is no top-half-leading outside the glyph and there
is no bottom-half-leading below the glyph. So, that's why the orange
edge is straight and unbroken.

There is no way to paint the top-half-leading and bottom-half-leading of
an inline non-replaced box; otherwise we would not have to set its
line-height to 1.

Your test, as is, is correct and is doing what you want to test.

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

Reply | Threaded
Open this post in threaded view
|

Re: The new tests for vertical align with vertical writing mode

塩澤 元 (Shiozawa, Hajime)
Gérard,

Thank you for reviewing!

I've modified tests.

- https://hg.csswg.org/test/rev/cf5a8ecf881f
- https://hg.csswg.org/test/rev/490625ae662a
- https://hg.csswg.org/test/rev/f5e3d25e9dae
- https://hg.csswg.org/test/rev/31df568ea667


Change Point
- fixed border-size and font size based on your review.
- added '6.3 Line-relative Directions' and '7.5 Line-Relative Mappings' which describe about physical-logical mapping as help tag.
- changed assert description. (added the term 'line-over' and 'line-under')
- added a test for vertical-lr


Hajime.


2015-08-08 14:27 GMT+09:00 Gérard Talbot <[hidden email]>:
Le 2015-07-26 06:22, 塩澤 元 a écrit :
Gérard,

I've submitted the new tests for 'vertical-align' property with vertical
writing-mode.
https://hg.csswg.org/test/rev/8dd028e99e73
Could you review it?


First, I've created the four test-cases for the pattern which is not
affected by its baseline.

writing-mode: (vertical-rl)
x
vertical-align: (top | text-top | text-bottom | bottom)
=> four pattern.

I think that in these test it is no need to test with variation of
text-orientation because the calculation with 'top', 'text-top',
'text-bottom' and 'bottom' is not affected by baseline.

Correct. It is not affected by what is the dominant baseline and where it is. top and bottom and affected by the height of line box while text-bottom and text-top are affected by top and bottom of parent's content area.


I will create test other properties which is affected by its baseline
('middle', 'sub', 'super', <percentage>, <length>) after the above test
case is approved.


Hajime.


- - - - - - - - - - - -


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

<title>CSS Writing Modes Test: vertical align - 'baseline' (alphabetical baseline with vertical layout)</title>

Proposed change:

<title>CSS Writing Modes Test: vertical-align - 'top' and vertical-rl writing-mode</title>


Since the test does not require to check the dominant baseline (central for 'text-orientation: mixed'), then you can safely use the same font-size (1em) for the orange square.

I propose these changes to make the test a bit more easier to review:

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

div#rl {
    border-right: blue solid 2em;
    writing-mode: vertical-rl;
    font: 3.75em/3 Ahem; /* computes to 60px/180px */
    color: white;
}

span#orange30 {
    color: orange;
    vertical-align: top;
    line-height: 1;
}

In the reference file:

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

    img#orange
    {
      padding-top: 60px; /* = the height of first character */
      padding-left: 120px; /* = the position of orange square */
    }

<div>
   <img id="orange" src="support/swatch-orange.png" width="60" height="60" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="120" height="120" alt="Image download support must be enabled" />
</div>

http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/vertical-alignment-new-002-Hajime-1.xht


In such version of your test, you could even remove 'color: white' so that we would be able to figure out the physical width (logical height) of the line box. When I set to 3, I know in advance that the top-half-leading (and bottom-half-leading) outside content area is going to be the size of the font, unless an inline element (say, a big image) increases the line box height.


More simple version of that test:
http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/vertical-alignment-new-002-Hajime-2.xht

Chrome 46 fails both versions of that test.
IE11 passes both version of that test but it does not shrink the height of the div.
I don't know about Microsoft Edge.

- - - - - - - - - - - -

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

<title>CSS Writing Modes Test: vertical align - 'baseline' (alphabetical baseline with vertical layout)</title>

Proposed change:

<title>CSS Writing Modes Test: vertical-align - 'text-top' and vertical-rl writing-mode</title>



<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-top', the right edge of inline-box aligned with the top of parent inline-box." />

It is not exactly this ... but I know it's difficult to word all this.

I suggest:

"
(...) When 'writing-mode' is 'vertical-rl', 'vertical-align' is 'text-top', the physical right (logical top) edge of an inline non-replaced box is aligned with the right side (logical top) of parent's content area.
"

The physical width (logical height) of inline non-replaced box is set with 'line-height'. When you set it to 1, you shrink such box to its content area: there is no top-half-leading outside the glyph and there is no bottom-half-leading below the glyph. So, that's why the orange edge is straight and unbroken.

There is no way to paint the top-half-leading and bottom-half-leading of an inline non-replaced box; otherwise we would not have to set its line-height to 1.

Your test, as is, is correct and is doing what you want to test.

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



--
# 塩澤 元 (Shiozawa, Hajime)
# mail: [hidden email]
Reply | Threaded
Open this post in threaded view
|

Re: The new tests for vertical align with vertical writing mode

Gérard Talbot-3
Le 2015-08-09 01:21, 塩澤 元 a écrit :

> Gérard,
>
> Thank you for reviewing!
>
> I've modified tests.
>
> - https://hg.csswg.org/test/rev/cf5a8ecf881f
> - https://hg.csswg.org/test/rev/490625ae662a
> - https://hg.csswg.org/test/rev/f5e3d25e9dae
> - https://hg.csswg.org/test/rev/31df568ea667
>
>
> Change Point
> - fixed border-size and font size based on your review.
> - added '6.3 Line-relative Directions' and '7.5 Line-Relative Mappings'
> which describe about physical-logical mapping as help tag.

This makes it 4 <link>ed specifications... which is a lot!

Please link to '7.5 Line-Relative Mappings' and to CSS2.1, section
'10.8.1 Leading and half-leading'
http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading
only.

Your tests are really just about how vertical-align: top | bottom |
text-top | text-bottom are supposed to be rendered in vertical
writing-modes. If your tests each have 4 links to spec, then each of
your tests are copied in 4 places of test suite(s).


<link rel="help" title="4.4. Baseline Alignment"
href="http://www.w3.org/TR/css-writing-modes-3/#baseline-alignment" />

would be good for vertical-align values of sub, super, <length>, and
<percentage>. I would *not* include link to '4.4. Baseline Alignment'
for testing vertical-align values of top, text-top, text-bottom, bottom.



> - changed assert description. (added the term 'line-over' and
> 'line-under')
> - added a test for vertical-lr
>
>
> Hajime.
>

In

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

font: 3.75em/1.5 Ahem; /* computes to 60px/90px */

replaced with

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

so that tests are symetrical, mirror


I will check the other tests (the vertical-lr tests of your serie) later
tomorrow... it's too late for me now.

Gérard



>
> 2015-08-08 14:27 GMT+09:00 Gérard Talbot <[hidden email]>:
>
>> Le 2015-07-26 06:22, 塩澤 元 a écrit :
>>
>>> Gérard,
>>>
>>> I've submitted the new tests for 'vertical-align' property with
>>> vertical
>>> writing-mode.
>>> https://hg.csswg.org/test/rev/8dd028e99e73
>>> Could you review it?
>>>
>>>
>>> First, I've created the four test-cases for the pattern which is not
>>> affected by its baseline.
>>>
>>> writing-mode: (vertical-rl)
>>> x
>>> vertical-align: (top | text-top | text-bottom | bottom)
>>> => four pattern.
>>>
>>> I think that in these test it is no need to test with variation of
>>> text-orientation because the calculation with 'top', 'text-top',
>>> 'text-bottom' and 'bottom' is not affected by baseline.
>>>
>>
>> Correct. It is not affected by what is the dominant baseline and where
>> it
>> is. top and bottom and affected by the height of line box while
>> text-bottom
>> and text-top are affected by top and bottom of parent's content area.
>>
>>
>> I will create test other properties which is affected by its baseline
>>> ('middle', 'sub', 'super', <percentage>, <length>) after the above
>>> test
>>> case is approved.
>>>
>>>
>>> Hajime.
>>>
>>
>>
>> - - - - - - - - - - - -
>>
>>
>>
>> http://test.csswg.org/source/css-writing-modes-3/vertical-alignment-new-002.xht
>>
>> <title>CSS Writing Modes Test: vertical align - 'baseline'
>> (alphabetical
>> baseline with vertical layout)</title>
>>
>> Proposed change:
>>
>> <title>CSS Writing Modes Test: vertical-align - 'top' and vertical-rl
>> writing-mode</title>
>>
>>
>> Since the test does not require to check the dominant baseline
>> (central
>> for 'text-orientation: mixed'), then you can safely use the same
>> font-size
>> (1em) for the orange square.
>>
>> I propose these changes to make the test a bit more easier to review:
>>
>> <p>Test passes if the right edge of an orange square touches the left
>> edge
>> of a blue square.</p>
>>
>> div#rl {
>>     border-right: blue solid 2em;
>>     writing-mode: vertical-rl;
>>     font: 3.75em/3 Ahem; /* computes to 60px/180px */
>>     color: white;
>> }
>>
>> span#orange30 {
>>     color: orange;
>>     vertical-align: top;
>>     line-height: 1;
>> }
>>
>> In the reference file:
>>
>> <p>Test passes if the right edge of an orange square touches the left
>> edge
>> of a blue square.</p>
>>
>>     img#orange
>>     {
>>       padding-top: 60px; /* = the height of first character */
>>       padding-left: 120px; /* = the position of orange square */
>>     }
>>
>> <div>
>>    <img id="orange" src="support/swatch-orange.png" width="60"
>> height="60"
>> alt="Image download support must be enabled" /><img
>> src="support/swatch-blue.png" width="120" height="120" alt="Image
>> download
>> support must be enabled" />
>> </div>
>>
>>
>> http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/vertical-alignment-new-002-Hajime-1.xht
>>
>>
>> In such version of your test, you could even remove 'color: white' so
>> that
>> we would be able to figure out the physical width (logical height) of
>> the
>> line box. When I set to 3, I know in advance that the top-half-leading
>> (and
>> bottom-half-leading) outside content area is going to be the size of
>> the
>> font, unless an inline element (say, a big image) increases the line
>> box
>> height.
>>
>>
>> More simple version of that test:
>>
>> http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/vertical-alignment-new-002-Hajime-2.xht
>>
>> Chrome 46 fails both versions of that test.
>> IE11 passes both version of that test but it does not shrink the
>> height of
>> the div.
>> I don't know about Microsoft Edge.
>>
>> - - - - - - - - - - - -
>>
>>
>> http://test.csswg.org/source/css-writing-modes-3/vertical-alignment-new-004.xht
>>
>> <title>CSS Writing Modes Test: vertical align - 'baseline'
>> (alphabetical
>> baseline with vertical layout)</title>
>>
>> Proposed change:
>>
>> <title>CSS Writing Modes Test: vertical-align - 'text-top' and
>> vertical-rl
>> writing-mode</title>
>>
>>
>>
>> <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-top', the right edge of inline-box aligned
>> with
>> the top of parent inline-box." />
>>
>> It is not exactly this ... but I know it's difficult to word all this.
>>
>> I suggest:
>>
>> "
>> (...) When 'writing-mode' is 'vertical-rl', 'vertical-align' is
>> 'text-top', the physical right (logical top) edge of an inline
>> non-replaced
>> box is aligned with the right side (logical top) of parent's content
>> area.
>> "
>>
>> The physical width (logical height) of inline non-replaced box is set
>> with
>> 'line-height'. When you set it to 1, you shrink such box to its
>> content
>> area: there is no top-half-leading outside the glyph and there is no
>> bottom-half-leading below the glyph. So, that's why the orange edge is
>> straight and unbroken.
>>
>> There is no way to paint the top-half-leading and bottom-half-leading
>> of
>> an inline non-replaced box; otherwise we would not have to set its
>> line-height to 1.
>>
>> Your test, as is, is correct and is doing what you want to test.
>>
>> 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

Reply | Threaded
Open this post in threaded view
|

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

Gérard Talbot-3
In reply to this post by 塩澤 元 (Shiozawa, Hajime)
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

Reply | Threaded
Open this post in threaded view
|

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

塩澤 元 (Shiozawa, Hajime)
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).
I don't have accurate understanding about line-height. Now I'm studying about it reading the spec.

Hajime.




2015-08-13 6:15 GMT+09:00 Gérard Talbot <[hidden email]>:
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



--
# 塩澤 元 (Shiozawa, Hajime)
# mail: [hidden email]
Reply | Threaded
Open this post in threaded view
|

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

Gérard Talbot-3
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 <[hidden email]>:
>
>> 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

Reply | Threaded
Open this post in threaded view
|

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

塩澤 元 (Shiozawa, Hajime)
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).
After reviewing, I will apply this change other tests.

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

Hajime


2015-08-13 18:27 GMT+09:00 Gérard Talbot <[hidden email]>:
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 <[hidden email]>:

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



--
# 塩澤 元 (Shiozawa, Hajime)
# mail: [hidden email]

explanation-vertical-align-test.png (15K) Download Attachment
Reply | Threaded
Open this post in threaded view
|

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

Gérard Talbot-3
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 <[hidden email]>:
>
>> 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 <[hidden email]>:
>>>
>>> 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

Reply | Threaded
Open this post in threaded view
|

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

塩澤 元 (Shiozawa, Hajime)

2015-09-01 11:25 GMT+09:00 Gérard Talbot <[hidden email]>:
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 <[hidden email]>:

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 <[hidden email]>:

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



--
# 塩澤 元 (Shiozawa, Hajime)
# mail: [hidden email]
Reply | Threaded
Open this post in threaded view
|

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

Gérard Talbot-3
Le 2015-09-02 10:54, 塩澤 元 a écrit :
> Hi Gérard,
>
> I have fixed.
> https://hg.csswg.org/test/rev/b8572658320e
>
> And I have changed other tests and renamed it! (and removed all old
> tests.)
> https://hg.csswg.org/test/rev/02f4c97c2264
> https://hg.csswg.org/test/rev/e8f5c3031748

In

https://hg.csswg.org/test/rev/e8f5c3031748

are you sure it was okay to remove *all* those 32 tests? I wonder if a
few just needed to be adjusted. I know there were some tests with
'text-orientation: sideways-right' and
'text-orientation: upright' ... Are you planning to re-create some tests
with 'text-orientation: sideways-right' and 'text-orientation: upright'
and vertical-align ?



> https://hg.csswg.org/test/rev/b3c0ccd280f3
>
> Hajime.


In

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

line 8:
     img
     {
       vertical-align: top;
     }

     img#orange
     {
       padding-top: 30px; /* = the height of first character */
       padding-left: 30px;
     }

can be completely replaced with only (more concise)

     img#orange
     {
       padding-left: 30px;
     }


- - - - - - - - - - - -


Please add

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

to all

http://test.csswg.org/source/css-writing-modes-3/vertical-alignment-00[2-9].xht
tests and to their related reference files.

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

Reply | Threaded
Open this post in threaded view
|

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

塩澤 元 (Shiozawa, Hajime)
Gérard,

are you sure it was okay to remove *all* those 32 tests? I wonder if a few just needed to be adjusted. I know there were some tests with 'text-orientation: sideways-right' and
'text-orientation: upright' ... Are you planning to re-create some tests with 'text-orientation: sideways-right' and 'text-orientation: upright' and vertical-align ?

Yes, I'm planning to recreate tests with vertical-align property 'super', 'middle' and 'sub'.
I'm planning to consider these tests in this weekend.
And I want to create and submit the first version of these tests.

In

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

line 8:
    img
    {
      vertical-align: top;
    }

    img#orange
    {
      padding-top: 30px; /* = the height of first character */
      padding-left: 30px;
    }

can be completely replaced with only (more concise)

    img#orange
    {
      padding-left: 30px;
    }


- - - - - - - - - - - -


Please add

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

to all

http://test.csswg.org/source/css-writing-modes-3/vertical-alignment-00[2-9].xht
tests and to their related reference files.


Hajime.

--
# 塩澤 元 (Shiozawa, Hajime)
# mail: [hidden email]