Bug 64608 – (writing modes) Orthogonal flows which overflow should be wrapped into columns in the flow direction of the containing block

• Component: CSS
• Status: NEW

[Theresa O'Connor]

Created attachment 101012 [details]
Demo of current behavior

See §7.3.2. Multi-column Layout in Orthogonal Flows of CSS3 Writing Modes: http://dev.w3.org/csswg/css3-writing-modes/#orthogonal-multicol

[Theresa O'Connor]

<rdar://problem/9783787>

[Gérard Talbot (no longer involved)]

1- The description of what the test should lay out (expected results) is not clear, is not explicit: "This document should not be T-shaped".

2- FWIW, I get the same layout in both Firefox 54 and Chrome 60, once I add unprefixed property names:

 |¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯|
 |  Containing flow    |
 |                     |
 -----------------------------------
 |                                 |
 |                                 | 
 |                                 |
 |                                 |
 |                                 |
 |                                 |
 |                                 |
 |                                 |
 |                                 |
 |                                 |
 |                                 |
 |                                 |
 -----------------------------------
 |                     |
 |  Containing flow    |
 |                     |
 -----------------------

3- The original section regarding multi-column element in orthogonal flow "7.3.2 Auto-sizing Block Containers in Orthogonal Flows" was at-risk 
https://www.w3.org/TR/css-writing-modes-3/#auto-multicol
and is no longer in the Editor's draft:

"
Deferred the automatic multi-column behavior of orthogonal flows to Level 4.
"
https://drafts.csswg.org/css-writing-modes-3/#changes-201512

4- Therefore, I think P2 is not justified.

[Gérard Talbot (no longer involved)]

I revisited this bug report and now understand what "This document should not be T-shaped" means, refers to.

I have developed related [multi-column containers in orthogonal flow] 
tests in 

http://www.gtalbot.org/BrowserBugsSection/CSS4WritingModes/

and there are a few others in

orthogonal multi-column with a vertical writing-mode computes height to fill page rather than wrap contents
https://bugzilla.mozilla.org/show_bug.cgi?id=1269152

and I hope to develop more tests later.

[Ahmad Saleem]

Test case - http://www.gtalbot.org/BrowserBugsSection/CSS4WritingModes/orthogonal-flow-multi-column-002.html

*** Safari Technology Preview 152 **

Show Red Text and green box / square below

*** Chrome Canary 107 ***

Red stripes or patches and Green box / square below

*** Firefox Nightly 106 *** (Expected Behavior)

Just single green box / square and no "RED"

______

Test Case - http://www.gtalbot.org/BrowserBugsSection/CSS4WritingModes/orthogonal-flow-multi-column-003.html

*** Safari Technology Preview 152 **

Just text and no black square 

*** Chrome Canary 107 ***

Three black patches

*** Firefox Nightly 106 *** (Expected Behavior)

Single Black Box

_____

Test Case - http://www.gtalbot.org/BrowserBugsSection/CSS4WritingModes/orthogonal-flow-multi-column-004.html

*** Safari Technology Preview 152 **

Just text and no black square 

*** Chrome Canary 107 ***

Four black small boxes

*** Firefox Nightly 106 *** (Expected Behavior???)

Single Black Patch elongated and not Square but more of rectangle

_________

As for attached "DEMO", it does show similar behavior in Chrome Canary 107 and Safari TP 152 but Firefox does not honour -webkit- prefix. Thanks!

[Gérard Talbot (no longer involved)]

(In reply to Ahmad Saleem from comment #4)

> Test Case -
> http://www.gtalbot.org/BrowserBugsSection/CSS4WritingModes/orthogonal-flow-
> multi-column-003.html
> 
> *** Safari Technology Preview 152 **
> 
> Just text and no black square 

Ahmad,

You need to install the Ahem font on your testing computer.
I even wrote about it in the test:

 Ahem font can be downloaded from
 http://www.w3.org/Style/CSS/Test/Fonts/Ahem/
 and then install AHEM____.TTF  2017-01-31 20:55   22K


> Test Case -
> http://www.gtalbot.org/BrowserBugsSection/CSS4WritingModes/orthogonal-flow-
> multi-column-004.html
> 
> *** Safari Technology Preview 152 **
> 
> Just text and no black square 

Same thing here. Just install Ahem font
and try again.

[Ahmad Saleem]

(In reply to Gérard Talbot from comment #5)
> (In reply to Ahmad Saleem from comment #4)
> 
> > Test Case -
> > http://www.gtalbot.org/BrowserBugsSection/CSS4WritingModes/orthogonal-flow-
> > multi-column-003.html
> > 
> > *** Safari Technology Preview 152 **
> > 
> > Just text and no black square 
> 
> Ahmad,
> 
> You need to install the Ahem font on your testing computer.
> I even wrote about it in the test:
> 
>  Ahem font can be downloaded from
>  http://www.w3.org/Style/CSS/Test/Fonts/Ahem/
>  and then install AHEM____.TTF  2017-01-31 20:55   22K
> 
> 
> > Test Case -
> > http://www.gtalbot.org/BrowserBugsSection/CSS4WritingModes/orthogonal-flow-
> > multi-column-004.html
> > 
> > *** Safari Technology Preview 152 **
> > 
> > Just text and no black square 
> 
> Same thing here. Just install Ahem font
> and try again.

For some reasons - it is not getting utilised by Safari because my font book is reflecting that I have it installed. Weird!!!

[Alexey Proskuryakov]

Safari doesn't load user installed fonts (to reduce fingerprinting). So the test has to include it as a webfont.

[Ahmad Saleem]

I changed the tests to JSFiddle and used ahem.js to make it more easier to reproduce:

Test Case - https://jsfiddle.net/p6gq7voy/show
Based of
Test case - http://www.gtalbot.org/BrowserBugsSection/CSS4WritingModes/orthogonal-flow-multi-column-002.html

*** Safari Technology Preview 157 ***

Fail

*** Chrome Canary 110 ***

Fail

*** Firefox Nightly 108 ***

Pass - Green Square

____

Test Case - https://jsfiddle.net/th4kxr7p/show
Based of http://www.gtalbot.org/BrowserBugsSection/CSS4WritingModes/orthogonal-flow-multi-column-003.html

*** Safari Technology Preview 157 ***

Fail

*** Chrome Canary 110 ***

Fail

*** Firefox Nightly 108 ***

Pass - Green Square

____

Test Case - https://jsfiddle.net/1kobv8Le/show
Based of http://www.gtalbot.org/BrowserBugsSection/CSS4WritingModes/orthogonal-flow-multi-column-004.html

*** Safari Technology Preview 157 ***

Fail

*** Chrome Canary 110 ***

Fail

*** Firefox Nightly 108 ***

No single black *square* but rectangle

____

Just wanted to update latest results.

[Radar WebKit Bug Importer]

<rdar://problem/129363375>