d768ae25da
Add box-sizing support across the rendering pipeline so that width/height can refer to either the content-box (default) or the border-box (content + padding + border). This is one of the most commonly used CSS properties and is required by virtually every modern CSS reset. The implementation adjusts width/height resolution in block, flex, grid, and table layout engines, and defaults tables to border-box in the UA stylesheet to match Chrome/Firefox/Safari behavior. Five previously-failing WPT tests now pass and are promoted in the manifest. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
214 lines
4.3 KiB
HTML
214 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
body { margin: 0; padding: 20px; }
|
|
|
|
/* Test 1: Nested elements with mixed box-sizing */
|
|
.outer-content-box {
|
|
box-sizing: content-box;
|
|
width: 200px;
|
|
height: 100px;
|
|
padding: 10px;
|
|
border: 5px solid blue;
|
|
background-color: #e0e0ff;
|
|
}
|
|
|
|
.inner-border-box {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
height: 50px;
|
|
padding: 8px;
|
|
border: 4px solid green;
|
|
background-color: #e0ffe0;
|
|
}
|
|
|
|
/* Test 2: Min/max constraints with border-box */
|
|
.min-constrained {
|
|
box-sizing: border-box;
|
|
width: 80px;
|
|
min-width: 150px;
|
|
padding: 10px;
|
|
border: 5px solid red;
|
|
background-color: #ffe0e0;
|
|
}
|
|
|
|
.max-constrained {
|
|
box-sizing: border-box;
|
|
width: 300px;
|
|
max-width: 200px;
|
|
padding: 12px;
|
|
border: 8px solid purple;
|
|
background-color: #f0e0ff;
|
|
}
|
|
|
|
/* Test 3: Flex container with border-box items */
|
|
.flex-container {
|
|
display: flex;
|
|
width: 400px;
|
|
gap: 10px;
|
|
background-color: #f5f5f5;
|
|
padding: 5px;
|
|
}
|
|
|
|
.flex-item-border-box {
|
|
box-sizing: border-box;
|
|
width: 120px;
|
|
height: 80px;
|
|
padding: 10px;
|
|
border: 5px solid orange;
|
|
background-color: #fff5e0;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.flex-item-content-box {
|
|
box-sizing: content-box;
|
|
width: 80px;
|
|
height: 60px;
|
|
padding: 10px;
|
|
border: 5px solid teal;
|
|
background-color: #e0ffff;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Test 4: Percentage-based flex-basis with border-box */
|
|
.flex-container-percent {
|
|
display: flex;
|
|
width: 500px;
|
|
background-color: #f5f5f5;
|
|
padding: 5px;
|
|
}
|
|
|
|
.flex-item-percent {
|
|
box-sizing: border-box;
|
|
flex-basis: 40%;
|
|
height: 100px;
|
|
padding: 15px;
|
|
border: 10px solid brown;
|
|
background-color: #fff0e0;
|
|
}
|
|
|
|
/* Test 5: Grid with border-box */
|
|
.grid-container {
|
|
display: grid;
|
|
grid-template-columns: 150px 150px;
|
|
gap: 10px;
|
|
width: 320px;
|
|
background-color: #f5f5f5;
|
|
padding: 5px;
|
|
}
|
|
|
|
.grid-item-border-box {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
height: 80px;
|
|
padding: 10px;
|
|
border: 5px solid navy;
|
|
background-color: #e0e0ff;
|
|
}
|
|
|
|
/* Test 6: Tables with border-box (from UA stylesheet) */
|
|
table {
|
|
border-collapse: collapse;
|
|
border: 2px solid black;
|
|
}
|
|
|
|
td {
|
|
padding: 8px;
|
|
border: 1px solid gray;
|
|
background-color: #f9f9f9;
|
|
}
|
|
|
|
/* Test 7: Shrink-to-fit scenarios */
|
|
.float-border-box {
|
|
float: left;
|
|
box-sizing: border-box;
|
|
width: 180px;
|
|
padding: 10px;
|
|
border: 5px solid darkgreen;
|
|
background-color: #e0ffe0;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.inline-block-border-box {
|
|
display: inline-block;
|
|
box-sizing: border-box;
|
|
width: 140px;
|
|
height: 60px;
|
|
padding: 8px;
|
|
border: 4px solid darkred;
|
|
background-color: #ffe0e0;
|
|
}
|
|
|
|
/* Test 8: Asymmetric padding/border */
|
|
.asymmetric {
|
|
box-sizing: border-box;
|
|
width: 200px;
|
|
height: 120px;
|
|
padding-top: 5px;
|
|
padding-right: 15px;
|
|
padding-bottom: 10px;
|
|
padding-left: 20px;
|
|
border-top: 2px solid black;
|
|
border-right: 8px solid black;
|
|
border-bottom: 4px solid black;
|
|
border-left: 10px solid black;
|
|
background-color: #ffffcc;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h3>Test 1: Nested Mixed Box-Sizing</h3>
|
|
<div class="outer-content-box">
|
|
Outer content-box
|
|
<div class="inner-border-box">Inner border-box (100% width)</div>
|
|
</div>
|
|
|
|
<h3>Test 2: Min/Max Constraints</h3>
|
|
<div class="min-constrained">Min-width: 150px (width: 80px)</div>
|
|
<div class="max-constrained">Max-width: 200px (width: 300px)</div>
|
|
|
|
<h3>Test 3: Flex Container</h3>
|
|
<div class="flex-container">
|
|
<div class="flex-item-border-box">Border-box 120px</div>
|
|
<div class="flex-item-content-box">Content-box 80px</div>
|
|
</div>
|
|
|
|
<h3>Test 4: Flex with Percentage Basis</h3>
|
|
<div class="flex-container-percent">
|
|
<div class="flex-item-percent">Flex-basis 40%</div>
|
|
<div class="flex-item-percent">Flex-basis 40%</div>
|
|
</div>
|
|
|
|
<h3>Test 5: Grid Layout</h3>
|
|
<div class="grid-container">
|
|
<div class="grid-item-border-box">Grid A</div>
|
|
<div class="grid-item-border-box">Grid B</div>
|
|
<div class="grid-item-border-box">Grid C</div>
|
|
<div class="grid-item-border-box">Grid D</div>
|
|
</div>
|
|
|
|
<h3>Test 6: Table (UA border-box)</h3>
|
|
<table>
|
|
<tr>
|
|
<td>Cell 1</td>
|
|
<td>Cell 2</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Cell 3</td>
|
|
<td>Cell 4</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<h3>Test 7: Shrink-to-fit</h3>
|
|
<div class="float-border-box">Float border-box</div>
|
|
<div class="inline-block-border-box">Inline-block</div>
|
|
<div style="clear: both;"></div>
|
|
|
|
<h3>Test 8: Asymmetric Padding/Border</h3>
|
|
<div class="asymmetric">Asymmetric box</div>
|
|
|
|
</body>
|
|
</html>
|