<style>
  border-box {
    background-color: pink;
    box-sizing: border-box;
    max-width: 300px;
    padding: 0 5%;
  }
</style>
<container style="width: 400px">
  <border-box>
    <p>Even though the width of 'border-box' stays the same after it reaches 300px, the width available to its children decreases as its padding continues to expand. Because the padding is based off the width before it's constrained by min/max. This tests that we continue to layout the contents of border-box even when its own width remains the same.</p>
  </div>
</container>

<script>
import "../resources/third_party/unittest/unittest.dart";
import "../resources/unit.dart";

import "dart:sky";

void main() {
  initUnit();

  test("paragraph width should shrink", () {
    expect(document.querySelector("p").offsetWidth, equals(260));
    document.querySelector("container").style["width"] = "800px";
    expect(document.querySelector("p").offsetWidth, equals(220));
  });
}
</script>