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

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

From: Shiozawa, Hajime <hajime.shiozawa@gmail.com>
Date: Sun, 9 Aug 2015 14:21:15 +0900
Message-ID: <CAHSwuKM45+VH1_6vjRNB+DQEOfrRp2es1hCP=PSG2q0yBHDaMA@mail.gmail.com>
To: Gérard Talbot <css21testsuite@gtalbot.org>
Cc: Public CSS test suite mailing list <public-css-testsuite@w3.org>, Koji Ishii <kojiishi@gluesoft.co.jp>
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 <css21testsuite@gtalbot.org>:

> 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: hajime.shiozawa@gmail.com
Received on Sunday, 9 August 2015 05:21:44 UTC

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