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

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

Received on Saturday, 8 August 2015 05:28:08 UTC