diff --git a/layout/generic/nsIFrame.cpp b/layout/generic/nsIFrame.cpp index 93c1fe524422..505df7b3d82e 100644 --- a/layout/generic/nsIFrame.cpp +++ b/layout/generic/nsIFrame.cpp @@ -5975,7 +5975,9 @@ AspectRatio nsIFrame::GetAspectRatio() const { // return here. const StyleAspectRatio& aspectRatio = StylePosition()->mAspectRatio; - if (!aspectRatio.auto_) { + // If aspect-ratio is infinite, it behaves as auto. + // https://github.com/w3c/csswg-drafts/issues/4572 + if (!aspectRatio.BehavesAsAuto()) { // Non-auto. Return the preferred aspect ratio from the aspect-ratio style. return aspectRatio.ratio.AsRatio().ToLayoutRatio(); } @@ -5984,7 +5986,10 @@ AspectRatio nsIFrame::GetAspectRatio() const { if (auto intrinsicRatio = GetIntrinsicRatio()) { return intrinsicRatio; } + if (aspectRatio.HasRatio()) { + // If there is no finite ratio, this returns 0. Just the same as the auto + // case. return aspectRatio.ratio.AsRatio().ToLayoutRatio(); } diff --git a/servo/ports/geckolib/cbindgen.toml b/servo/ports/geckolib/cbindgen.toml index 105cc78894f2..7cd500c19c2e 100644 --- a/servo/ports/geckolib/cbindgen.toml +++ b/servo/ports/geckolib/cbindgen.toml @@ -837,6 +837,7 @@ renaming_overrides_prefixing = true bool HasFiniteRatio() const { return HasRatio() && ratio.AsRatio().ToLayoutRatio(); } + bool BehavesAsAuto() const { return auto_ || !HasFiniteRatio(); } static StyleGenericAspectRatio Auto() { return {true, StylePreferredRatio::None()}; diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/support/1x1-green.png b/testing/web-platform/tests/css/css-sizing/aspect-ratio/support/1x1-green.png new file mode 100644 index 000000000000..b98ca0ba0a03 Binary files /dev/null and b/testing/web-platform/tests/css/css-sizing/aspect-ratio/support/1x1-green.png differ diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/zero-or-infinity-006.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/zero-or-infinity-006.html new file mode 100644 index 000000000000..f34aa6c126c8 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/zero-or-infinity-006.html @@ -0,0 +1,11 @@ + +CSS aspect-ratio: zero aspect-ratio img + + + + + +

Test passes if there is a filled green square and no red.

+ + + diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/zero-or-infinity-007.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/zero-or-infinity-007.html new file mode 100644 index 000000000000..97e602612f43 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/zero-or-infinity-007.html @@ -0,0 +1,11 @@ + +CSS aspect-ratio: zero aspect-ratio img + + + + + +

Test passes if there is a filled green square and no red.

+ + + diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/zero-or-infinity-008.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/zero-or-infinity-008.html new file mode 100644 index 000000000000..644090aa3cea --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/zero-or-infinity-008.html @@ -0,0 +1,11 @@ + +CSS aspect-ratio: infinite aspect-ratio img + + + + + +

Test passes if there is a filled green square and no red.

+ + + diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/zero-or-infinity-009.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/zero-or-infinity-009.html new file mode 100644 index 000000000000..6e320cf54107 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/zero-or-infinity-009.html @@ -0,0 +1,11 @@ + +CSS aspect-ratio: infinite aspect-ratio img + + + + + +

Test passes if there is a filled green square and no red.

+ + + diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/zero-or-infinity-010.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/zero-or-infinity-010.html new file mode 100644 index 000000000000..92b4750157de --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/zero-or-infinity-010.html @@ -0,0 +1,11 @@ + +CSS aspect-ratio: 0/0 aspect-ratio img + + + + + +

Test passes if there is a filled green square and no red.

+ + +