Open
Bug 1281055
Opened 8 years ago
Updated 2 years ago
margin bottom of orthogonal horizontal-tb not rendered
Categories
(Core :: Layout: Block and Inline, defect, P3)
Core
Layout: Block and Inline
Tracking
()
NEW
| Tracking | Status | |
|---|---|---|
| firefox50 | --- | affected |
People
(Reporter: bugzilla, Unassigned)
References
(Blocks 1 open bug)
Details
(Keywords: testcase)
Attachments
(4 files)
Bug1281055-Chrome57.png
Draft Test ---------- http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/draft-margin-bottom-orthogonal-horizontal-0xx.xht Expected -------- http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/ref-filled-green-100px-square.xht Explanations ------------ This is a draft test. Eventually the test will be filename-renamed and it will be submitted to the writing-mode test suite (test.csswg.org repository). This test was inspired by the test found at Issue 583207: ICB height is used as fallback width for orthogonal horizontal elements https://bugs.chromium.org/p/chromium/issues/detail?id=583207 Worth mentioning is that if you toggle OFF and then ON the checkbox of the margin-bottom declaration in developer tool (Style and DOM Inspector, Rules), then the test will pass. This suggests to me some kind of reflow missing or misplaced in the code. The test fails in both Firefox 47.0 (stable release: buildID=20160606114208) and Firefox nightly 50.0a1 buildID=20160618024606. Notes ----- - Chrome 51.0.2704.103 and Chrome 53.0.2767.4 pass the test - I am using Firefox 50.0a1 buildID=20160618024606 - I use Linux 3.13.0-88-generic x86_64, Qt: 4.8.6, KDE 4.13.3; Kubuntu (trusty) 14.04.4 LTS - I've searched for duplicates and did not find any.
|
Reporter | |
Updated•8 years ago
|
Blocks: writing-mode
Keywords: testcase
|
|
Reporter | |
Comment 1•8 years ago
|
||
> if you toggle OFF and then ON the checkbox of the
> margin-bottom declaration in developer tool (Style and DOM Inspector,
> Rules), then the test will pass.
... in which case, the <body> box height increases to take into account the margin-bottom.|
|
Reporter | |
Comment 2•7 years ago
|
||
It must be said and understood that the test in comment 0 is not a simple or simplified context because the document root element's 'writing-mode' is 'horizontal-tb', then the containing block div#vrl's 'writing-mode' is 'vertical-rl' (therefore it is already in an orthogonal flow) and its child block is again an orthogonal block since its 'writing-mode' is 'horizontal-tb'. - - - - - - - - Another test also inspired by the test found at Issue 583207: ICB height is used as fallback width for orthogonal horizontal elements https://bugs.chromium.org/p/chromium/issues/detail?id=583207 is http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/draft-margin-bottom-htb-orthog-block-0xx.xht Test passes if you see a green stripe and an orange stripe. Those green and orange stripes should be as thick, tall (height) as the blue stripe. Interestingly, we have 4 different and incompatible renderings for that test. Chrome 57 renders the 3 colored stripes (with correct height) but they do not occupy the width of the document box. Safari 9.1 renders the 3 colored stripes (with correct height) and they are rendered across the width of the document box. IE11 and Edge13 render the orange stripe correctly but the green stripe is very tall, occupying almost all of the height of the document box. IE11 rendered layout seems also a bit different from Edge13's rendered layout. Finally, Firefox 50.1 and Firefox 53.0a1 buildID=20170103030204 do not render any green stripe nor any orange stripe. My first impression is that this definitely seems incorrect. I will load screenshots of those 4 different renderings because this is rather unique. Right now, I am not sure (need to examine, investigate this) which browser is perfectly correct here.
|
|
Reporter | |
Comment 3•7 years ago
|
||
Rendered layout of draft-margin-bottom-htb-orthog-block-0xx.xht by Chrome 57.0.2970.0
|
|
Reporter | |
Comment 4•7 years ago
|
||
Rendered layout of draft-margin-bottom-htb-orthog-block-0xx.xht by MS-Edge 13
|
|
Reporter | |
Comment 5•7 years ago
|
||
Rendered layout of draft-margin-bottom-htb-orthog-block-0xx.xht by Firefox 53.0a1 buildID=20170104030214
|
|
Reporter | |
Comment 6•7 years ago
|
||
Rendered layout of draft-margin-bottom-htb-orthog-block-0xx.xht by Safari 9.1
|
|
Reporter | |
Comment 7•7 years ago
|
||
If you toggle OFF the checkbox of the margin-bottom declaration in developer tool (Style and DOM Inspector, Rules) in draft-margin-bottom-htb-orthog-block-0xx.xht for Firefox 53, then the rendered layout changes (the green stripe and the orange stripe appears) and then if you toggle ON that same margin-bottom checkbox, then the height of the green stripe increases.
|
|
Reporter | |
Comment 8•7 years ago
|
||
The original test http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/draft-margin-bottom-orthogonal-horizontal-0xx.xht ( in comment 0 ) of this bug report is also rendered differently (4 rendered layouts) by Chrome 57, Firefox 53.0a1 buildID=20170104030214, MS-Edge13 and Safari 9.1. I am convinced MS-Edge13 and Firefox 53 are incorrect.
|
||
Comment 9•6 years ago
|
||
Re http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/draft-margin-bottom-orthogonal-horizontal-0xx.xht: I suspect this is an example of the problem of computing the intrinsic inline-size of an element when there is an orthogonal child that has auto block-size. In this case, when we're computing the intrinsic height of the vertical-rl container, we haven't yet reflowed its horizontal child, so we don't know what its height will be, and so this part of the "expected" intrinsic height is missing (zero). If you zoom the page, triggering a fresh reflow, we get it right because the orthogonal child now knows its height -- although if the height of the child changed, we'd be using a stale value here. This can be demonstrated by varying the font-size in the dev tools inspector: the rendering lags a step behind each update. So it's not really the margin-bottom that isn't being rendered; it's the height of the (orthogonal) horizontal element. This would be more obvious if the total height were composed of two *different* amounts (e.g. use font-size:25px and margin-bottom:75px instead of using 50px for both); then it would be visually clearer which part of the dimension is lacking.
Priority: -- → P3
|
|
Reporter | |
Comment 10•6 years ago
|
||
> If you zoom the page, triggering a fresh reflow, we get it right Yes. Indeed. > This would be more obvious if > the total height were composed of two *different* amounts (e.g. use > font-size:25px and margin-bottom:75px instead of using 50px for both); then > it would be visually clearer which part of the dimension is lacking. Additional test with your accurate description: http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/draft-margin-bottom-orthogonal-horizontal-0xx-2.xht
|
||
Updated•2 years ago
|
Severity: normal → S3
You need to log in
before you can comment on or make changes to this bug.
Description
•