Skip to content

GitLab

T
tangled
Commit c07a387a authored by Frédéric Wang's avatar Frédéric Wang Committed by Commit Bot
Browse files
Options

Make DefinitelyNewFormattingContext return true for SVG foreignObject 

An SVG foreignObject element currently always forces legacy layout [1].
Additionally, when such an element has visible overflow,
DefinitelyNewFormattingContext returns a false negative, causing all
the siblings of the SVG root to also fallback to legacy layout.
However, SVG foreignObject elements always establish a new formatting
context since they are treated as absolutely-positioned [2]. This CL
fixes the bug by making DefinitelyNewFormattingContext always return
true for an SVG foreignObject element.

The fix is verified using a MathML test copied from integration-4.html,
the one used for MathML-in-foreignObject support [1], with the
assumption that MathML will never be implemented for legacy layout.

Bug: 989920, 6606

[1] crbug.com/989916
[2] https://svgwg.org/svg2-draft/embedded.html#Placement

Change-Id: I7f7cde90da728f1b1959728d39fed2e2070888f9
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2400378Reviewed-by: default avatarMorten Stenshorne <mstensho@chromium.org>
Commit-Queue: Frédéric Wang <fwang@igalia.com>
Cr-Commit-Position: refs/heads/master@{#805363}
parent fd8127b4
Hide whitespace changes
Inline Side-by-side
Showing with 63 additions and 0 deletions
third_party/blink/renderer/core/dom/element.cc
View file @ c07a387a
......@@ -324,6 +324,12 @@ bool DefinitelyNewFormattingContext(const Node& node,
element->IsFrameOwnerElement()) {
return true;
}
// foreignObject is absolutely-positioned for the purposes of CSS layout and
// so always establishes a new formatting context.
// https://svgwg.org/svg2-draft/embedded.html#Placement
if (IsA<SVGForeignObjectElement>(element))
return true;
}
if (const Node* parent = LayoutTreeBuilderTraversal::LayoutParent(node))
return parent->ComputedStyleRef().IsDisplayFlexibleOrGridBox();
......
third_party/blink/web_tests/external/wpt/mathml/relations/html5-tree/integration-point-5.html 0 → 100644
View file @ c07a387a
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>MathML sibling of SVG with foreignObject[overflow=visible]</title>
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#html-and-svg">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=989920">
<meta name="assert" content="Verify that an SVG containing a foreignObject with visible overflow does not affect layout of MathML siblings.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/mathml/support/feature-detection.js"></script>
<script>
setup({ explicit_done: true });
window.addEventListener("DOMContentLoaded", function() {
var scale = 2;
var epsilon = 1;
var mfrac = document.getElementById("mfrac");
var num = mfrac.firstElementChild.getBoundingClientRect();
var denom = mfrac.lastElementChild.getBoundingClientRect();
test(function() {
assert_true(MathMLFeatureDetection.has_mspace());
assert_approx_equals(num.width, 30, epsilon, "numerator width");
assert_approx_equals(num.height, 40, epsilon, "numerator height");
assert_approx_equals(denom.width, 50, epsilon, "denonimator width");
assert_approx_equals(denom.height, 60, epsilon, "denonimator height");
}, "mspace layout in sibling of SVG foreignObject[overflow=visible]");
test(function() {
assert_true(MathMLFeatureDetection.has_mfrac());
assert_greater_than_equal(denom.bottom - num.top,
(40 + 60),
"numerator above denominator");
assert_approx_equals((num.left + num.right) / 2,
(denom.left + denom.right) / 2,
epsilon, "numerator and denominator are horizontally aligned");
}, "mfrac layout in sibling of SVG with foreignObject[overflow=visible]");
done();
});
</script>
</head>
<body>
<div id="log"></div>
<math>
<mfrac id="mfrac">
<mspace width="30px" height="40px" style="background: cyan"></mspace>
<mspace width="50px" height="60px" style="background: yellow"></mspace>
</mfrac>
</math>
<svg width="200px" height="200px" style="background: lightblue">
<foreignObject width="200px" height="200px"
overflow="visible">
<div xmlns="http://www.w3.org/1999/xhtml">
This is a foreignObject
</div>
</foreignObject>
</svg>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment