Change SVG max-content size for webcompat.
The goal of this patch is to change the SVG max-content size to match blink and
webkit to fix the webcompat issues in bug 1521882 and bug 1651754.
If a percentage width/height attribute on inline axis is explicitly set, we fall
back to the default replaced element size to avoid regressing bug 1162418.
Otherwise, we use 0 as SVG's max-content size in order to be compatible with
blink and webkit.
When computing replaced elements's max-content inline-size, its preferred
aspect-ratio and block-size can transfer to inline axis. The logic is the same
as if the element has an 'auto' inline-size. Hence the modification in
ComputeSizeWithIntrinsicDimensions().
This patch also removes the SVG's intrinsic size dependency on an arbitrary
container from the previous layout result in `SVGOuterSVGFrame::GetPrefISize()`.
bug 1340715 comment 1 explains why the code is unsound.
Differential Revision: https://phabricator.services.mozilla.com/D155998
bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1340715
gecko-commit: 76c1fb5130dcd9f4562826d42194ebf74ca268c8
gecko-reviewers: emilio
diff --git a/css/css-sizing/svg-intrinsic-size-004.html b/css/css-sizing/svg-intrinsic-size-004.html
new file mode 100644
index 0000000..7db9495
--- /dev/null
+++ b/css/css-sizing/svg-intrinsic-size-004.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1638937">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<style>
+.block {
+ display: block;
+ width: max-content;
+ border: 2px solid black;
+ line-height: 0;
+}
+svg {
+ background: teal;
+}
+</style>
+
+<body onload="checkLayout('svg')">
+ No intrinsic attributes:
+ <div class="block">
+ <svg data-expected-client-width="300" data-expected-client-height="150"></svg>
+ </div>
+
+ viewBox and height:
+ <div class="block">
+ <svg height="40" viewBox="0 0 4 1"
+ data-expected-client-width="160" data-expected-client-height="40"></svg>
+ </div>
+
+ viewBox and width:
+ <div class="block">
+ <svg width="40" viewBox="0 0 4 1"
+ data-expected-client-width="40" data-expected-client-height="10"></svg>
+ </div>
+
+ viewBox, width, height:
+ <div class="block">
+ <svg width="40" height="40" viewBox="0 0 4 1"
+ data-expected-client-width="40" data-expected-client-height="40"></svg>
+ </div>
+
+ Just viewBox:
+ <div class="block">
+ <!-- Google Chrome 107 and Safari 16.0 both render this SVG as size 0x0. -->
+ <svg viewBox="0 0 4 1"
+ data-expected-client-width="0" data-expected-client-height="0"></svg>
+ </div>
+</body>
