NEW 64608
(writing modes) Orthogonal flows which overflow should be wrapped into columns in the flow direction of the containing block
https://bugs.webkit.org/show_bug.cgi?id=64608
Summary (writing modes) Orthogonal flows which overflow should be wrapped into column...
Theresa O'Connor
Reported 2011-07-15 11:29:58 PDT
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
Attachments
Demo of current behavior (651 bytes, text/html)
2011-07-15 11:29 PDT, Theresa O'Connor
no flags
Theresa O'Connor
Comment 1 2011-07-15 11:35:13 PDT
Gérard Talbot (no longer involved)
Comment 2 2017-07-26 19:27:59 PDT
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)
Comment 3 2020-01-18 18:04:57 PST
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
Comment 4 2022-09-01 17:04:54 PDT
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)
Comment 5 2022-09-01 17:21:44 PDT
(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
Comment 6 2022-09-01 17:30:33 PDT
(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
Comment 7 2022-09-02 17:54:59 PDT
Safari doesn't load user installed fonts (to reduce fingerprinting). So the test has to include it as a webfont.
Ahmad Saleem
Comment 8 2022-11-13 05:30:58 PST
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
Comment 9 2024-06-06 14:19:41 PDT
Note You need to log in before you can comment on or make changes to this bug.