blob: 4ff3f786c6c6ea263c97771635bfb9f3c8076320 [file] [log] [blame]
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="">
<link rel="help" href="">
<link rel="help" href="">
<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>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
var container = document.getElementById("container");
var stf = document.getElementById("stf");
test(()=> {
assert_equals(stf.offsetWidth, 180);
}, "Initial layout");
test(()=> { = "300px";
assert_equals(stf.offsetWidth, 160);
}, "Shrink width");
test(()=> { = "500px";
assert_equals(stf.offsetWidth, 200);
}, "Grow width");