| <!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> |
