113 lines
3.9 KiB
HTML
113 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<script src="../../resources/check-layout.js"></script>
|
|
<script>
|
|
function test()
|
|
{
|
|
checkLayout('.tableContentBox');
|
|
checkLayout('.tablePaddingBox');
|
|
checkLayout('.tableBorderBox');
|
|
}
|
|
</script>
|
|
<style>
|
|
.tableContentBox, .tablePaddingBox, .tableBorderBox {
|
|
display: table;
|
|
padding-left: 100px;
|
|
border: 3px solid teal;
|
|
font-family: ahem;
|
|
}
|
|
.tableContentBox {
|
|
-webkit-box-sizing: content-box;
|
|
box-sizing: content-box;
|
|
}
|
|
.tablePaddingBox {
|
|
-webkit-box-sizing: padding-box;
|
|
box-sizing: padding-box;
|
|
}
|
|
.tableBorderBox {
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
.tablerow {
|
|
display: table-row;
|
|
}
|
|
.tablecell {
|
|
display: table-cell;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body onload="test()">
|
|
<div>Test for Bugzilla bug:<a href="https://bugs.webkit.org/show_bug.cgi?id=77028"> 77028</a> Specified width CSS tables should not include border and padding as part of that width.</div>
|
|
<div>For a CSS table with a specified width, border and padding should not be included as part of its width (for the content-box model).</div>
|
|
<div style="width: 600px; border: solid 1px black;">
|
|
<!-- For box-sizing: content-box -->
|
|
<div style="width: 50%;" class="tableContentBox" data-expected-width="406">
|
|
<div class="tablerow">
|
|
<div class="tablecell">50%, content-box</div>
|
|
</div>
|
|
</div>
|
|
<div style="width: 300px;" class="tableContentBox" data-expected-width="406">
|
|
<div class="tablerow">
|
|
<div class="tablecell">300px, content-box</div>
|
|
</div>
|
|
</div>
|
|
<div style="width: 50vw;" class="tableContentBox" data-expected-width="506">
|
|
<div class="tablerow">
|
|
<div class="tablecell">50vw, content-box</div>
|
|
</div>
|
|
</div>
|
|
<div style="width: 30em;" class="tableContentBox" data-expected-width="586">
|
|
<div class="tablerow">
|
|
<div class="tablecell">30em, content-box</div>
|
|
</div>
|
|
</div>
|
|
<!-- For box-sizing: border-box -->
|
|
<div style="width: 50%;" class="tableBorderBox" data-expected-width="300">
|
|
<div class="tablerow">
|
|
<div class="tablecell">50%, border-box</div>
|
|
</div>
|
|
</div>
|
|
<div style="width: 300px;" class="tableBorderBox" data-expected-width="300">
|
|
<div class="tablerow">
|
|
<div class="tablecell">300px, border-box</div>
|
|
</div>
|
|
</div>
|
|
<div style="width: 50vw;" class="tableBorderBox" data-expected-width="400">
|
|
<div class="tablerow">
|
|
<div class="tablecell">50vw, border-box</div>
|
|
</div>
|
|
</div>
|
|
<div style="width: 30em;" class="tableBorderBox" data-expected-width="480">
|
|
<div class="tablerow">
|
|
<div class="tablecell">30em, border-box</div>
|
|
</div>
|
|
</div>
|
|
<!-- For box-sizing: padding-box. Currently not supported hence the following expected values are incorrect.
|
|
The expected width value for each of the following tables should be lesser by 100px.
|
|
This is because in case of padding-box, padding is included as part of the specified
|
|
width but border or margin are not. -->
|
|
<div style="width: 50%;" class="tablePaddingBox" data-expected-width="406">
|
|
<div class="tablerow">
|
|
<div class="tablecell">50%, padding-box</div>
|
|
</div>
|
|
</div>
|
|
<div style="width: 300px;" class="tablePaddingBox" data-expected-width="406">
|
|
<div class="tablerow">
|
|
<div class="tablecell">300px, padding-box</div>
|
|
</div>
|
|
</div>
|
|
<div style="width: 50vw;" class="tablePaddingBox" data-expected-width="506">
|
|
<div class="tablerow">
|
|
<div class="tablecell">50vw, padding-box</div>
|
|
</div>
|
|
</div>
|
|
<div style="width: 30em;" class="tablePaddingBox" data-expected-width="586">
|
|
<div class="tablerow">
|
|
<div class="tablecell">30em, padding-box</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|