blob: 4ff3f786c6c6ea263c97771635bfb9f3c8076320 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/CSS22/box.html#propdef-padding-left">
<link rel="help" href="https://www.w3.org/TR/css-sizing-3/#valdef-width-fit-content-length-percentage">
<meta name="assert" content="The shrink-to-fit container (#stf) should be just wide enough to fit both floats beside each other. The percentage padding shouldn't be affected by intrinsic sizing; it's simply resolved from its containing block (#container), which doesn't participate in the intrinsic size calculation at all.">
<div id="container" style="width:400px; height:200px;">
<div id="stf" style="width:fit-content; padding-left:20%;">
<div style="float:left; width:50px; height:100px; background:cyan;"></div>
<div style="float:left; width:50px; height:100px; background:hotpink;"></div>
</div>
</div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
var container = document.getElementById("container");
var stf = document.getElementById("stf");
test(()=> {
assert_equals(stf.offsetWidth, 180);
}, "Initial layout");
test(()=> {
container.style.width = "300px";
assert_equals(stf.offsetWidth, 160);
}, "Shrink width");
test(()=> {
container.style.width = "500px";
assert_equals(stf.offsetWidth, 200);
}, "Grow width");
</script>
|
