fit-content-percentage-padding.html

<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:[email protected]">
<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>
chromium/third_party/blink/web_tests/external/wpt/css/css-sizing/fit-content-percentage-padding.html
