3169d00bd7
Absolutely positioned elements with width:auto were incorrectly expanding to fill their containing block like normal-flow blocks. Now they use shrink-to-fit width when at least one of left/right is auto, and the constraint equation when both are specified. Promotes 15 WPT tests to pass. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
62 lines
1.6 KiB
HTML
62 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
body { margin: 0; }
|
|
.cb { position: relative; width: 400px; height: 300px; background: #eee; }
|
|
.abs { position: absolute; background: #ccc; }
|
|
.float-child { float: left; width: 80px; height: 20px; background: #999; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Case 1: width:auto, left:auto, right:auto → shrink-to-fit (80px) -->
|
|
<div class="cb">
|
|
<div class="abs" style="top:0">
|
|
<div class="float-child"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Case 2: width:auto, left:20px, right:auto → shrink-to-fit (80px) -->
|
|
<div class="cb">
|
|
<div class="abs" style="top:0; left:20px">
|
|
<div class="float-child"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Case 3: width:auto, left:auto, right:20px → shrink-to-fit (80px) -->
|
|
<div class="cb">
|
|
<div class="abs" style="top:0; right:20px">
|
|
<div class="float-child"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Case 4: width:auto, left:20px, right:20px → constraint equation (360px) -->
|
|
<div class="cb">
|
|
<div class="abs" style="top:0; left:20px; right:20px">
|
|
<div class="float-child"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Case 5: explicit width:150px → unchanged (150px) -->
|
|
<div class="cb">
|
|
<div class="abs" style="top:0; width:150px">
|
|
<div class="float-child"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Case 6: width:auto, auto margins → margins resolve to 0, shrink-to-fit (80px) -->
|
|
<div class="cb">
|
|
<div class="abs" style="top:0; margin-left:auto; margin-right:auto">
|
|
<div class="float-child"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Case 7: replaced element (img) with width:auto → intrinsic width (60px) -->
|
|
<div class="cb">
|
|
<img class="abs" style="top:0" width="60" height="40">
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|