1639963 - Implement aspect-ratio for basic blocks and replaced elements

Status: RESOLVED FIXED

(Core :: Layout, enhancement, P3)

Description

[Boris Chiou [:boris]]

Let aspect-ratio support the basic block cases in this bug (excluding flex and grid).
There are some tentative wpts there, so we could use them as the first draft version.

Comment 1

[Boris Chiou [:boris]]

Attachment: Bug 1639963 - Add LogicalRatio for different writing mode.

Comment 2

[Boris Chiou [:boris]]

Attachment: Bug 1639963 - Calculate inline size and block size based on aspect-ratio.

Comment 3

[Boris Chiou [:boris]]

Attachment: Bug 1639963 - Apply Automatic content-based minimum sizes for aspect-ratio.

Comment 4

[Boris Chiou [:boris]]

Attachment: Bug 1639963 - Update the API of nsIFrame::ComputeSize for aspect-ratio.

Will set the correct return value in the latter patch.

Comment 5

[Boris Chiou [:boris]]

Attachment: Bug 1639963 - Drop redundant check of auto in nsImageFrame.

Comment 6

[Boris Chiou [:boris]]

Attachment: Bug 1639963 - Support aspect-ratio for video element.

Comment 7

[Boris Chiou [:boris]]

Attachment: Bug 1639963 - Support aspect-ratio for svg object and iframe (i.e. nsSubDocumentFrame).

Comment 8

[Boris Chiou [:boris]]

Attachment: Bug 1639963 - Support aspect-ratio for svg frames.

Comment 9

[Boris Chiou [:boris]]

Attachment: Bug 1639963 - Support aspect-ratio for HTML canvas.

Comment 10

[Boris Chiou [:boris]]

Attachment: Bug 1639963 - Add extra wpts for HTML embed element.

This should be very simliar with <object> with image example.
We use nsImageFrame to represent this embed element.

Just make sure wpt covers all the typical replaced elements, based on
MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element).

Comment 11

[Boris Chiou [:boris]]

Attachment: Bug 1639963 - Avoid apply aspect-ratio if it is zero or infinity on replaced elements.

This is related to the spec issue:
https://github.com/w3c/csswg-drafts/issues/4572.

We could revert this patch or update the condition once this spec issue
has been resolved.

Comment 12

[Boris Chiou [:boris]]

Attachment: Bug 1639963 - Define the default size for replaced elements.

Comment 14

[Boris Chiou [:boris]]

Attachment: Bug 1639963 - Fix margin collapsing with aspect-ratio.

Basically, we treat aspect-ratio (together with inline size) as a
non-auto block size. This means the block is not empty when using
aspect-ratio.

Also, add 3 tentative wpts for this, based on the current spec issue
examples.

https://github.com/w3c/csswg-drafts/issues/5328

Comment 15

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/8cb2a9e57cba
Calculate inline size and block size based on aspect-ratio. r=emilio
https://hg.mozilla.org/integration/autoland/rev/a5e9b2bede3a
Fix margin collapsing with aspect-ratio. r=emilio
https://hg.mozilla.org/integration/autoland/rev/b7f8a00c7278
Update the API of nsIFrame::ComputeSize for aspect-ratio. r=emilio
https://hg.mozilla.org/integration/autoland/rev/c26b41b07084
Apply Automatic content-based minimum sizes for aspect-ratio. r=emilio
https://hg.mozilla.org/integration/autoland/rev/8e3ff3f26946
Drop redundant check of auto in nsImageFrame. r=emilio
https://hg.mozilla.org/integration/autoland/rev/a37073226eb7
Define the default size for replaced elements. r=dholbert
https://hg.mozilla.org/integration/autoland/rev/8326d6db2755
Support aspect-ratio for video element. r=dholbert
https://hg.mozilla.org/integration/autoland/rev/802185dc6fff
Support aspect-ratio for svg object and iframe (i.e. nsSubDocumentFrame). r=emilio
https://hg.mozilla.org/integration/autoland/rev/00fac1d4990f
Support aspect-ratio for svg frames. r=emilio
https://hg.mozilla.org/integration/autoland/rev/15dfbfd21a51
Support aspect-ratio for HTML canvas. r=emilio
https://hg.mozilla.org/integration/autoland/rev/2da97f87cae2
Add extra wpts for HTML embed element. r=dholbert

Comment 16

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Failed to create upstream wpt PR due to merge conflicts. This requires fixup from a wpt sync admin.

Comment 17

[Bogdan Tara[:bogdan_tara | bogdant]]

https://hg.mozilla.org/mozilla-central/rev/8cb2a9e57cba
https://hg.mozilla.org/mozilla-central/rev/a5e9b2bede3a
https://hg.mozilla.org/mozilla-central/rev/b7f8a00c7278
https://hg.mozilla.org/mozilla-central/rev/c26b41b07084
https://hg.mozilla.org/mozilla-central/rev/8e3ff3f26946
https://hg.mozilla.org/mozilla-central/rev/a37073226eb7
https://hg.mozilla.org/mozilla-central/rev/8326d6db2755
https://hg.mozilla.org/mozilla-central/rev/802185dc6fff
https://hg.mozilla.org/mozilla-central/rev/00fac1d4990f
https://hg.mozilla.org/mozilla-central/rev/15dfbfd21a51
https://hg.mozilla.org/mozilla-central/rev/2da97f87cae2

Comment 18

[Boris Chiou [:boris]]

(In reply to Web Platform Test Sync Bot (Matrix: #interop:mozilla.org) from comment #16)

Failed to create upstream wpt PR due to merge conflicts. This requires fixup
from a wpt sync admin.

Google added two new tests last week:
replaced-element-013.tentative.html
replaced-element-014.tentative.html

Maybe we have to update the file names in this bug because I also add some for replaced elements.

@jgraham, what is the expected way to fix this issue? I think it is just a name collision. Basically, just rename these files in my patch:

from:
replaced-element-013.tentative.html
replaced-element-014.tentative.html
replaced-element-015.tentative.html
replaced-element-016.tentative.html
replaced-element-017.tentative.html
replaced-element-018.tentative.html
replaced-element-019.tentative.html

to:
replaced-element-015.tentative.html
replaced-element-016.tentative.html
replaced-element-017.tentative.html
replaced-element-018.tentative.html
replaced-element-019.tentative.html
replaced-element-020.tentative.html
replaced-element-021.tentative.html

Comment 19

[James Graham [:jgraham]]

Can you push another commit with those changes to this bug? Then I can deal with the rest.

Comment 20

[Boris Chiou [:boris]]

Sure. Working on this.

Comment 21

[Boris Chiou [:boris]]

Attachment: Bug 1639963 - Tweak wpt file names to fix the merge conflicts.

Comment 22

[Boris Chiou [:boris]]

I just push the commit and add you as the reviewer (and I guess we should make it landed into m-c). Thanks for handling this.

Comment 23

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/b77345b53a86
Tweak wpt file names to fix the merge conflicts. r=jgraham

Comment 24

[Andreea Pavel [:apavel]]

https://hg.mozilla.org/mozilla-central/rev/b77345b53a86

Comment 25

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/25180 for changes under testing/web-platform/tests

Comment 26

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot

Comment 27

[Rachel Andrew]

Added to Experimental Features page, BCD is process of updating, and made some light edits to the aspect-ratio MDN page.