1185430 - Contiguous floated tables in vertical writing-mode overlap

Status: RESOLVED DUPLICATE of bug 1581718

(Core :: Layout: Floats, defect)

Description

[Gérard Talbot]

Vendor-prefixed tests
---------------------

border-collapse: collapse
- - - - - - - - - - - - -

http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/contiguous-floated-table-vrl-002.xht

http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/contiguous-floated-table-vlr-003.xht


border-collapse: separate
- - - - - - - - - - - - -

http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/contiguous-floated-table-vrl-004.xht

http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/contiguous-floated-table-vlr-005.xht


Expected results
----------------

http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/ref-filled-green-100px-square.xht


Notes
-----

- I set Component to 'Layout: Floats' and blocking bug 1077521
- Firefox 42.0a1 buildID=20150718201542 fails these 4 tests
- IE11 and Chrome 45.0.2454.7 pass these 4 tests
- I use Linux 3.13.0-57-generic x86_64, Qt: 4.8.6, KDE 4.13.3; Kubuntu (utopic) 14.04.2 LTS
- I've searched for duplicates and did not find any.

Comment 1

[Gérard Talbot]

Somewhat close to the description of this bug are:

Bug 478834: table following left float doesn't clear it even if it can't fit next to it (& same for block-level img, flex container, etc. following left float)

Bug 14984: [FLOAT] Tables overlap right floats (e.g., right-aligned images or tables)

so this could still be a DUPLICATE of one of those...

Comment 2

[Gérard Talbot]

Another consequence of this bug: the horizontal contiguous margins - which should not collapse - between 2 floated contiguous tables are substracted by the total of table borders and table (or cell) padding separating them. In this test

http://test.csswg.org/source/css-writing-modes-3/table-progression-vrl-004.html

the gap between tables should be 32px (or 2em) but it is 24px (32 - (2 * 3) - (2 * 1)).

- - - - - - - 

Additional tests:

Both tables have 25px borders between them
http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/contiguous-floated-table-vrl-006.xht

Both tables have 25px padding between them
http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/contiguous-floated-table-vrl-008.xht

Firefox 45.0a1 buildID=20151128060058 fails both tests. 

IE11, Edge 12 and Chrome 48.0.2564.10 pass both tests.

Comment 3

[Gérard Talbot]

Firefox 46.0a1 buildID=20151219081206 fails

http://test.csswg.org/source/css-writing-modes-3/table-progression-srl-002.html

http://test.csswg.org/source/css-writing-modes-3/table-progression-slr-002.html

http://test.csswg.org/source/css-writing-modes-3/table-progression-vrl-002.html

http://test.csswg.org/source/css-writing-modes-3/table-progression-vlr-002.html

because of this bug, because of how shrink-to-fit applies to floating boxes (that have borders) in orthogonal context.

This bug is somehow related (a sibling of) to bug 1166120 . Chances are that, when bug 1166120 gets fixed, then this bug could be fixed; so, at that time, this bug report should be revisited.

Comment 4

[Gérard Talbot]

Links correction:
 
> http://test.csswg.org/source/css-writing-modes-3/table-progression-vrl-004.
> html

http://test.csswg.org/harness/test/css-writing-modes-3_dev/single/table-progression-vrl-004/


> Firefox 46.0a1 buildID=20151219081206 fails
> 
> http://test.csswg.org/source/css-writing-modes-3/table-progression-srl-002.
> html

http://test.csswg.org/harness/test/css-writing-modes-3_dev/single/table-progression-srl-002/


 
> http://test.csswg.org/source/css-writing-modes-3/table-progression-slr-002.
> html

http://test.csswg.org/harness/test/css-writing-modes-3_dev/single/table-progression-slr-002/


 
> http://test.csswg.org/source/css-writing-modes-3/table-progression-vrl-002.
> html

http://test.csswg.org/harness/test/css-writing-modes-3_dev/single/table-progression-vrl-002/


 
> http://test.csswg.org/source/css-writing-modes-3/table-progression-vlr-002.
> html
 
http://test.csswg.org/harness/test/css-writing-modes-3_dev/single/table-progression-vlr-002/

Comment 5

[Gérard Talbot]

http://test.csswg.org/harness/test/css-writing-modes-3_dev/single/table-progression-srl-002/

http://test.csswg.org/harness/test/css-writing-modes-3_dev/single/table-progression-slr-002/

The srl and slr tests have been removed from css-writing-modes-3_dev but I suppose+expect they will be reintroduce into an eventual css-writing-modes-4_dev since sideways-lr and sideways-rl are not part of CSS3.

Comment 6

[Gérard Talbot]

http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/adjacent-floated-vrl-tables-in-htb-cb.html
Expected: 200px; Actual in Firefox 60: 60px


http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/adjacent-floated-vrl-tables-in-htb-cb-002.html
Expected: 200px; Actual in Firefox 60: 160px


http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/adjacent-floated-vrl-tables-in-htb-cb-003.html
Expected: 200px; Actual in Firefox 60: -40px

The expected gap (200px: which is the sum of horizontal margins separating the 2 <table>s) between squares is reduced by twice the width of border-right of first table.

Comment 7

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

I ended up fixing this in bug 1581718, which fixes all of the wpt tests mentioned, though I haven't yet checked the tests in comment 6.

Comment 8

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

I confirmed the comment 6 tests are all fixed as well.