Skip to content
This repository was archived by the owner on Mar 19, 2021. It is now read-only.

Commit 2cc953d

Browse files
joonghunparkchromium-wpt-export-bot
joonghunpark
authored and
chromium-wpt-export-bot
committed
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/+/1703540 Reviewed-by: Mounir Lamouri <[email protected]> Reviewed-by: Ian Kilpatrick <[email protected]> Reviewed-by: vmpstr <[email protected]> Commit-Queue: Joonghun Park <[email protected]> Cr-Commit-Position: refs/heads/master@{#684192}
1 parent ea70288 commit 2cc953d

6 files changed

+163
-0
lines changed

‎css/css-contain/contain-size-replaced-004-ref.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Containment Reference: Size containment replaced elements intrinsic size</title>
4+
<style>
5+
body > div, video, audio, img, canvas, svg, iframe {
6+
border: 3px solid orange;
7+
contain: size;
8+
margin-bottom: 15px;
9+
width: 0px;
10+
height: 0px;
11+
float: left;
12+
clear: both;
13+
}
14+
</style>
15+
<div>abc</div>
16+
<video></video><br>
17+
<video controls></video><br>
18+
<img src="../support/60x60-green.png"><br>
19+
<picture>
20+
<source srcset="../support/60x60-green.png">
21+
<img>
22+
</picture><br>
23+
<canvas></canvas><br>
24+
<svg></svg><br>
25+
<iframe></iframe>

‎css/css-contain/contain-size-replaced-004.html

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Containment Test: Size containment replaced elements intrinsic size</title>
4+
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
5+
<link rel="match" href="contain-size-replaced-004-ref.html">
6+
<meta name=assert content="This test checks that intrinsic size of replaced elements with 'contain: size' is zero.">
7+
<style>
8+
body > div, video, audio, img, canvas, svg, iframe {
9+
border: 3px solid orange;
10+
contain: size;
11+
margin-bottom: 15px;
12+
width: min-content;
13+
height: min-content;
14+
float: left;
15+
clear: both;
16+
}
17+
</style>
18+
<div>abc</div>
19+
<video></video><br>
20+
<video controls></video><br>
21+
<img src="../support/60x60-green.png"><br>
22+
<picture>
23+
<source srcset="../support/60x60-green.png">
24+
<img>
25+
</picture><br>
26+
<canvas></canvas><br>
27+
<svg></svg><br>
28+
<iframe></iframe>

‎css/css-contain/contain-size-replaced-005-ref.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Containment Reference: Size containment replaced elements intrinsic size</title>
4+
<style>
5+
body > div, video, audio, img, canvas, svg, iframe {
6+
position: absolute;
7+
border: 3px solid orange;
8+
contain: size;
9+
margin-bottom: 15px;
10+
width: 0px;
11+
height: 0px;
12+
float: left;
13+
clear: both;
14+
}
15+
</style>
16+
<div>abc</div>
17+
<video></video><br>
18+
<video controls></video><br>
19+
<img src="../support/60x60-green.png"><br>
20+
<picture>
21+
<source srcset="../support/60x60-green.png">
22+
<img>
23+
</picture><br>
24+
<canvas></canvas><br>
25+
<svg></svg><br>
26+
<iframe></iframe>

‎css/css-contain/contain-size-replaced-005.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Containment Test: Size containment replaced elements intrinsic size</title>
4+
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
5+
<link rel="match" href="contain-size-replaced-005-ref.html">
6+
<meta name=assert content="This test checks that intrinsic size of out-of-flow replaced elements with 'contain: size' is zero.">
7+
<style>
8+
body > div, video, audio, img, canvas, svg, iframe {
9+
position: absolute;
10+
border: 3px solid orange;
11+
contain: size;
12+
margin-bottom: 15px;
13+
width: min-content;
14+
height: min-content;
15+
float: left;
16+
clear: both;
17+
}
18+
</style>
19+
<div>abc</div>
20+
<video></video><br>
21+
<video controls></video><br>
22+
<img src="../support/60x60-green.png"><br>
23+
<picture>
24+
<source srcset="../support/60x60-green.png">
25+
<img>
26+
</picture><br>
27+
<canvas></canvas><br>
28+
<svg></svg><br>
29+
<iframe></iframe>

‎css/css-contain/contain-size-replaced-006-ref.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Containment Reference: Size containment replaced elements intrinsic size</title>
4+
<style>
5+
body > div, video, audio, img, canvas, svg, iframe {
6+
border: 3px solid orange;
7+
contain: size;
8+
margin-bottom: 15px;
9+
width: 25px;
10+
height: 35px;
11+
float: left;
12+
clear: both;
13+
}
14+
</style>
15+
<div>abc</div>
16+
<video></video><br>
17+
<video controls></video><br>
18+
<img src="../support/60x60-green.png"><br>
19+
<picture>
20+
<source srcset="../support/60x60-green.png">
21+
<img>
22+
</picture><br>
23+
<canvas></canvas><br>
24+
<svg></svg><br>
25+
<iframe></iframe>

‎css/css-contain/contain-size-replaced-006.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Containment Test: Size containment replaced elements intrinsic size</title>
4+
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
5+
<link rel="match" href="contain-size-replaced-006-ref.html">
6+
<meta name=assert content="This test checks that min-width/min-height of replaced elements with 'contain: size' works.">
7+
<style>
8+
body > div, video, audio, img, canvas, svg, iframe {
9+
border: 3px solid orange;
10+
contain: size;
11+
margin-bottom: 15px;
12+
min-width: 25px;
13+
min-height: 35px;
14+
width: min-content;
15+
height: min-content;
16+
float: left;
17+
clear: both;
18+
}
19+
</style>
20+
<div>abc</div>
21+
<video></video><br>
22+
<video controls></video><br>
23+
<img src="../support/60x60-green.png"><br>
24+
<picture>
25+
<source srcset="../support/60x60-green.png">
26+
<img>
27+
</picture><br>
28+
<canvas></canvas><br>
29+
<svg></svg><br>
30+
<iframe></iframe>

0 commit comments

Comments
 (0)