Open Bug 1414911 Opened 7 years ago Updated 2 years ago

Orthogonal horizontal-tb <p> element with vertical margins set to 'auto' inside an vertical-rl <body> element

Categories

(Core :: Layout, defect, P3)

defect

Tracking

()

People

(Reporter: davidek251, Unassigned)

References

(Blocks 1 open bug)

Details

(Keywords: testcase)

Attachments

(1 file)

Attached image wrong.png (deleted) —
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:58.0) Gecko/20100101 Firefox/58.0 Build ID: 20171106100122 Steps to reproduce: I created a <p> element with css atributes writing-mode: tb-rl; inside a <div> element with align atribute set to center. Actual results: The <p> element wasn't in the center. Expected results: The <p> element should be in the center.
Component: Untriaged → Layout
Product: Firefox → Core
Priority: -- → P3
David, align=center attribute specification is formally discouraged in HTML 4: " deprecated CENTER or align="center" CSS1 text-align: center; for in-line elements like text or image deprecated CENTER or align="center" CSS1 margin-left: auto; margin-right: auto; for block-level elements " https://developer.mozilla.org/en-US/docs/Using_Web_Standards_in_your_Web_Pages/Summary_of_Changes " text-align: center; centers inline content within a block. It does not (and should not) center the block box itself. A block is centered by setting its margin-left and margin-right to auto and its width to a value that makes the block narrower than its containing block. " https://developer.mozilla.org/en-US/docs/Mozilla/Mozilla_Web_Developer_FAQ#My_style_sheet_doesn.E2.80.99t_work.21_Why.3F CSS Horizontal alignment: when to use margin-left, margin-right and when to use text-align http://www.gtalbot.org/NvuSection/NvuWebDesignTips/HorizontalAlignment.html - - - - - - - - align=center attribute specification is obsolete, deprecated in HTML 5: " HTML has none of the presentational attributes that were in HTML4 as their functions are better handled by CSS: align attribute on caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead and tr. " https://html-differences.whatwg.org/#obsolete-attributes - - - - - - - - But there is a good news regarding your bug report. There is a failure in Firefox with regards to applying margins for an orthogonal block, as stated in the spec, section 7.3, in example 11 and figure 19: " Since auto margins are resolved consistent with the containing block’s writing mode, a box establishing an orthogonal flow can, once sized, be aligned or centered within its containing block just like other block-level boxes by using auto margins. (...) because the containing block is in a horizontal writing mode, (...) horizontal auto margins will expand to fill the containing block, (...) " 7.3. Orthogonal Flows https://www.w3.org/TR/css-writing-modes-3/#orthogonal-flows Here's a modified and adapted version of your test: http://www.gtalbot.org/BugzillaSection/Bug1414911-orthog-vertical-p-with-horizontal-auto-margins.html Chrome 54+ passes that test; Firefox all versions fail that test. - - - - - - - - Additional (basically the same as yours) tests : http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/Orthogonal-flow-Example14-1.xht http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/Orthogonal-flow-Example14-3.xht You must download and install the Ahem font (AHEM____.TTF or ahem.ttf) available from https://www.w3.org/Style/CSS/Test/Fonts/Ahem/ to try those 2 tests. Chrome 54+ passes those 2 tests. Firefox all versions fail those 2 tests. I never had a chance to finish those 2 tests and submit them to the CSS3 Writing modes test suite. I believe (I can not remember for sure) a buzilla bug report was *_not_* created for those tests. I need to check this now...
By the way, 'writing-mode: tb-rl' is the old property value and old declaration syntax and is only good for IE11. Edge 13+ supports 'writing-mode: vertical-rl' which is the standard syntax now.
I have modified the margin of the tested <p> with 'margin: 1em auto' so that we can check if margins collapse as expected at the same time. I create an orthogonal horizontal <p> test: http://www.gtalbot.org/BugzillaSection/Bug1414911-orthog-horiz-p-with-vertical-auto-margins.html - - - - - - - - - Margin collapsing occur as expected in both tests for Firefox 52.5 ESR and for Chromium 62.0.3202.89. Firefox 52.5 ESR fails both tests as far as rendering 'auto' margins and centering a block's block size within its orthogonal containing block. Chromium 62.0.3202.89 passes both tests. - - - - - - - - - Marking as blocking bug 1079125 - - - - - - - - - I will create at least 4 tests and will submit them into the CSS3 Writing modes test suite eventually.
Blocks: 1079125
Status: UNCONFIRMED → NEW
Ever confirmed: true
Keywords: testcase
OS: Unspecified → All
Hardware: Unspecified → All
Summary: When I create a <p> element with css atributes writing-mode: tb-rl; and the <p> element is in <div> element with align atribute set to center, then the <p> element is not in the center. → Orthogonal horizontal-tb <p> element with vertical margins set to 'auto' inside an vertical-rl <body> element
Version: 58 Branch → Trunk
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: