Skip to content

GitLab

T
tangled
Commit 5880a554 authored by Joonghun Park's avatar Joonghun Park Committed by Commit Bot
Browse files
Options

Replaced elements with 'contain: size' should have zero intrinsic size. 

This behavior follows the spec,
https://drafts.csswg.org/css-contain/#containment-size,
as the statement below.

'Replaced elements must be treated
as having an intrinsic width and height of 0.'

For this behavior, when 'contain: size' is specified,
LayoutReplaced::IntrinsicSize returns zero size
instead of the intrinsic size it actually has.

Before this CL,
|LayoutReplaced::ComputeIntrinsicSizingInfoForReplacedContent|
did early return with "FloatSize()",
but |LayoutReplaced::ComputeReplacedLogicalWidth| has *if statement*
for specified and intrinsic css size,
so *that* early return couldn't be reached.

Addition to it, ComputeIntrinsicSizeFoo uses
|LayoutReplaced::IntrinsicSize| essentially,
and it returned non-zero size and that value was used before this CL.

Bug: 955163
Change-Id: If0309ae5f1adb2e3026ff92bfde2ffb07ba73582
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1703540Reviewed-by: default avatarMounir Lamouri <mlamouri@chromium.org>
Reviewed-by: default avatarIan Kilpatrick <ikilpatrick@chromium.org>
Reviewed-by: default avatarvmpstr <vmpstr@chromium.org>
Commit-Queue: Joonghun Park <pjh0718@gmail.com>
Cr-Commit-Position: refs/heads/master@{#684192}
parent 6da2abd6
Hide whitespace changes
Inline Side-by-side
Showing with 177 additions and 3 deletions
third_party/blink/renderer/core/layout/layout_replaced.h
View file @ 5880a554
......@@ -99,7 +99,8 @@ class CORE_EXPORT LayoutReplaced : public LayoutBox {
// intrinsic size in LayoutNG.
virtual void ComputeIntrinsicSizingInfo(IntrinsicSizingInfo&) const;
// This callback is invoked whenever the intrinsic size changed.
// This callback must be invoked whenever the underlying intrinsic size has
// changed.
//
// The intrinsic size can change due to the network (from the default
// intrinsic size [see above] to the actual intrinsic size) or to some
......@@ -111,7 +112,11 @@ class CORE_EXPORT LayoutReplaced : public LayoutBox {
void UpdateLayout() override;
LayoutSize IntrinsicSize() const final { return intrinsic_size_; }
LayoutSize IntrinsicSize() const final {
// TODO(vmpstr): To address the intrinsic size of replaced element for
// display lock.
return ShouldApplySizeContainment() ? LayoutSize() : intrinsic_size_;
}
void ComputePositionedLogicalWidth(
LogicalExtentComputedValues&) const override;
......
third_party/blink/renderer/core/layout/svg/layout_svg_root.cc
View file @ 5880a554
......@@ -95,7 +95,7 @@ void LayoutSVGRoot::UnscaledIntrinsicSizingInfo(
void LayoutSVGRoot::ComputeIntrinsicSizingInfo(
IntrinsicSizingInfo& intrinsic_sizing_info) const {
DCHECK(!ShouldApplySizeContainment());
DCHECK(!ShouldApplySizeContainment() && !DisplayLockInducesSizeContainment());
UnscaledIntrinsicSizingInfo(intrinsic_sizing_info);
intrinsic_sizing_info.size.Scale(StyleRef().EffectiveZoom());
......
third_party/blink/renderer/modules/media_controls/resources/mediaControls.css
View file @ 5880a554
......@@ -1065,6 +1065,12 @@ audio:not([controls]) {
display: none !important;
}
/** TODO(crbug.com/985623): Remove these hard-coded audio tag size.
* This fixed audio tag width/height leads to fail the wpt tests below.
* crbug.com/955170 external/wpt/css/css-contain/contain-size-replaced-003a.html
* crbug.com/955163 external/wpt/css/css-contain/contain-size-replaced-003b.html
* crbug.com/955163 external/wpt/css/css-contain/contain-size-replaced-003c.html
*/
audio {
width: 300px;
height: 54px;
......
third_party/blink/web_tests/external/wpt/css/css-contain/contain-size-replaced-004-ref.html 0 → 100644
View file @ 5880a554
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Containment Reference: Size containment replaced elements intrinsic size</title>
<style>
body > div, video, audio, img, canvas, svg, iframe {
border: 3px solid orange;
contain: size;
margin-bottom: 15px;
width: 0px;
height: 0px;
float: left;
clear: both;
}
</style>
<div>abc</div>
<video></video><br>
<video controls></video><br>
<img src="../support/60x60-green.png"><br>
<picture>
<source srcset="../support/60x60-green.png">
<img>
</picture><br>
<canvas></canvas><br>
<svg></svg><br>
<iframe></iframe>
third_party/blink/web_tests/external/wpt/css/css-contain/contain-size-replaced-004.html 0 → 100644
View file @ 5880a554
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Containment Test: Size containment replaced elements intrinsic size</title>
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
<link rel="match" href="contain-size-replaced-004-ref.html">
<meta name=assert content="This test checks that intrinsic size of replaced elements with 'contain: size' is zero.">
<style>
body > div, video, audio, img, canvas, svg, iframe {
border: 3px solid orange;
contain: size;
margin-bottom: 15px;
width: min-content;
height: min-content;
float: left;
clear: both;
}
</style>
<div>abc</div>
<video></video><br>
<video controls></video><br>
<img src="../support/60x60-green.png"><br>
<picture>
<source srcset="../support/60x60-green.png">
<img>
</picture><br>
<canvas></canvas><br>
<svg></svg><br>
<iframe></iframe>
third_party/blink/web_tests/external/wpt/css/css-contain/contain-size-replaced-005-ref.html 0 → 100644
View file @ 5880a554
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Containment Reference: Size containment replaced elements intrinsic size</title>
<style>
body > div, video, audio, img, canvas, svg, iframe {
position: absolute;
border: 3px solid orange;
contain: size;
margin-bottom: 15px;
width: 0px;
height: 0px;
float: left;
clear: both;
}
</style>
<div>abc</div>
<video></video><br>
<video controls></video><br>
<img src="../support/60x60-green.png"><br>
<picture>
<source srcset="../support/60x60-green.png">
<img>
</picture><br>
<canvas></canvas><br>
<svg></svg><br>
<iframe></iframe>
third_party/blink/web_tests/external/wpt/css/css-contain/contain-size-replaced-005.html 0 → 100644
View file @ 5880a554
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Containment Test: Size containment replaced elements intrinsic size</title>
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
<link rel="match" href="contain-size-replaced-005-ref.html">
<meta name=assert content="This test checks that intrinsic size of out-of-flow replaced elements with 'contain: size' is zero.">
<style>
body > div, video, audio, img, canvas, svg, iframe {
position: absolute;
border: 3px solid orange;
contain: size;
margin-bottom: 15px;
width: min-content;
height: min-content;
float: left;
clear: both;
}
</style>
<div>abc</div>
<video></video><br>
<video controls></video><br>
<img src="../support/60x60-green.png"><br>
<picture>
<source srcset="../support/60x60-green.png">
<img>
</picture><br>
<canvas></canvas><br>
<svg></svg><br>
<iframe></iframe>
third_party/blink/web_tests/external/wpt/css/css-contain/contain-size-replaced-006-ref.html 0 → 100644
View file @ 5880a554
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Containment Reference: Size containment replaced elements intrinsic size</title>
<style>
body > div, video, audio, img, canvas, svg, iframe {
border: 3px solid orange;
contain: size;
margin-bottom: 15px;
width: 25px;
height: 35px;
float: left;
clear: both;
}
</style>
<div>abc</div>
<video></video><br>
<video controls></video><br>
<img src="../support/60x60-green.png"><br>
<picture>
<source srcset="../support/60x60-green.png">
<img>
</picture><br>
<canvas></canvas><br>
<svg></svg><br>
<iframe></iframe>
third_party/blink/web_tests/external/wpt/css/css-contain/contain-size-replaced-006.html 0 → 100644
View file @ 5880a554
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Containment Test: Size containment replaced elements intrinsic size</title>
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
<link rel="match" href="contain-size-replaced-006-ref.html">
<meta name=assert content="This test checks that min-width/min-height of replaced elements with 'contain: size' works.">
<style>
body > div, video, audio, img, canvas, svg, iframe {
border: 3px solid orange;
contain: size;
margin-bottom: 15px;
min-width: 25px;
min-height: 35px;
width: min-content;
height: min-content;
float: left;
clear: both;
}
</style>
<div>abc</div>
<video></video><br>
<video controls></video><br>
<img src="../support/60x60-green.png"><br>
<picture>
<source srcset="../support/60x60-green.png">
<img>
</picture><br>
<canvas></canvas><br>
<svg></svg><br>
<iframe></iframe>
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