Closed Bug 1558357 Opened 5 years ago Closed 5 years ago

Original display changes don't trigger reflow, even though they affect the hypothetical position of an element.

Categories

(Core :: CSS Parsing and Computation, defect, P3)

x86_64
macOS
defect

Tracking

()

RESOLVED FIXED
mozilla69
Tracking Status
firefox69 --- fixed

People

(Reporter: timdream, Assigned: emilio)

References

Details

Attachments

(4 files)

Attached file test.html

Steps To Reproduce:

  1. Load the test case
  2. Observe that the position of the SVG triangle is diffferent even though the DOM+CSS state is exactly the same.
  3. Trigger layout by change the window width.
  4. Observe that the SVGs on case #2 and #4 is misplaced again.

Notes:
There are two bugs here.

First, svg is set to display: block in the UA sheet; setting the property to the same value shouldn’t hav any effect but apparently it does. It was also not being placed correctly — the position of a block element inside another block element shouldn’t be affected by the |text-align| property.

Second: unset the “no-op” value should restore the layout but it did not until re-layout.

First, svg is set to display: block in the UA sheet; setting the property to the same value shouldn’t hav any effect but apparently it does.

This is not true, what makes you think this?

<svg>s are inlines, they just become blocks when absolutely positioned because absolute position blockifies, see this css 2 section.

Thus the display value on the element style is not really a no-op, since the original (inline) position pre-abspos is used to compute the hypothetical position. That's also per spec, though CSS2 is a mess in terms of defining the actual hypothetical position.

It was also not being placed correctly — the position of a block element inside another block element shouldn’t be affected by the |text-align| property.

It actually is, since it's position is determined by the static inline position. It's not a chance that all browsers do the same here. If you specify a combination of positions using top / right / bottom / left, then the hypothetical box is not needed and the element is not affected by text-align.

So there's an issue with the hypothetical position not being correctly recomputed, which is your test-case #2, but the rest is working per spec. Now how sane is the spec is a different matter :)

(In reply to Tim Guan-tin Chien [:timdream] (please needinfo) from comment #1)

Also filed https://bugs.chromium.org/p/chromium/issues/detail?id=972843 and on WebKit.

Is this missing a link to the WebKit bug?

So basically, this comparison of mOriginalDisplay should trigger something more than a NeutralChange, since the hypothetical position depends on it:

But other than that this is working as specified.

Morphing to cover that.

Summary: An position: absolute SVG element inside a position: absolute element is misplaced by text-align: center & won't update until a layout change → Original display changes don't trigger reflow, even though they affect the hypothetical position of an element.

I suspect nsStyleDisplay::CalcDifference needs to do something more interesting (i.e., not nsChangeHint_NeutralChange, likely reflow) with mOriginalDisplay and mOriginalFloat -- probably conditional on mPosition being absolute.

(In reply to David Baron :dbaron: 🏴󠁵󠁳󠁣󠁡󠁿 ⌚UTC-7 from comment #6)

I suspect nsStyleDisplay::CalcDifference needs to do something more interesting (i.e., not nsChangeHint_NeutralChange, likely reflow) with mOriginalDisplay and mOriginalFloat -- probably conditional on mPosition being absolute.

Right. mOriginalFloat actually doesn't, and it's unused. But yeah, that's exactly what I meant in comment 4 :)

Assignee: nobody → emilio
Priority: -- → P3

The original float is not needed for layout, and thus there's no need to keep it
around.

This was presumably used by the old style system, but now it doesn't seem
useful, and is always none.

Pushed by ealvarez@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/d93982f48472
Remove unused nsStyleDisplay::mOriginalFloat. r=dbaron
https://hg.mozilla.org/integration/autoland/rev/614615b9c8ab
Should update layout when the hypothetical display of an element changes, even though the final computed display doesn't. r=dbaron
Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/17264 for changes under testing/web-platform/tests
Upstream web-platform-tests status checks passed, PR will merge once commit reaches central.
Blocks: 1558442

(In reply to Emilio Cobos Álvarez (:emilio) from comment #2)

First, svg is set to display: block in the UA sheet; setting the property to the same value shouldn’t hav any effect but apparently it does.

This is not true, what makes you think this?

<svg>s are inlines, they just become blocks when absolutely positioned because absolute position blockifies, see this css 2 section.

Thus the display value on the element style is not really a no-op, since the original (inline) position pre-abspos is used to compute the hypothetical position. That's also per spec, though CSS2 is a mess in terms of defining the actual hypothetical position.

Hum. Thanks for the quick turnaround! I saw the display: block shown as the computed value in DevTools. It turned out it was caused by position: absolute.

data:text/html,<style>svg { position: absolute }</style><svg></svg><script>window.onload = () => alert(window.getComputedStyle(document.body.firstChild).display)</script>

Status: NEW → RESOLVED
Closed: 5 years ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla69

(In reply to Emilio Cobos Álvarez (:emilio) from comment #3)

Is this missing a link to the WebKit bug?

https://bugs.webkit.org/show_bug.cgi?id=199168

You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: