Diff
Modified: trunk/LayoutTests/ChangeLog (134264 => 134265)
--- trunk/LayoutTests/ChangeLog 2012-11-12 19:19:27 UTC (rev 134264)
+++ trunk/LayoutTests/ChangeLog 2012-11-12 19:20:26 UTC (rev 134265)
@@ -1,3 +1,37 @@
+2012-11-12 Arpita Bahuguna <[email protected]>
+
+ Specified width CSS tables should not include border and padding as part of that width.
+ https://bugs.webkit.org/show_bug.cgi?id=77028
+
+ Reviewed by Julien Chaffraix.
+
+ * fast/table/css-table-width-with-border-padding-expected.html: Added.
+ * fast/table/css-table-width-with-border-padding.html: Added.
+ Test added for verifying that for specified width css tables, border
+ and padding are not considered as part of the specified table width.
+
+ The test also verifies the width values for the different box-sizing
+ properties viz, content-box, border-box and padding-box.
+
+ Out of these padding-box is currently not supported even though
+ the test verifies against this property as well.
+ The expected width values added for padding-box are thus incorrect
+ and should be lesser by 100px (padding value).
+
+ * fast/table/min-width-css-block-table-expected.txt:
+ * fast/table/min-width-css-inline-table-expected.txt:
+ * fast/table/script-tests/min-width-helpers.js:
+ Existing test values changed for CSS tables that have percent width
+ specified since for both these tests, border and padding has been
+ specified for all the tables.
+
+ As a result of this fix, the specified table width shall no longer
+ include the border and padding values thereby increasing our table
+ width size by exactly 30px (the value of border and padding in these
+ tests).
+ The new values for percent width css tables now match those for FF
+ and Opera.
+
2012-11-12 David Grogan <[email protected]>
IndexedDB: convert tests from setVersion to upgradeneeded
Added: trunk/LayoutTests/fast/table/css-table-width-with-border-padding-expected.txt (0 => 134265)
--- trunk/LayoutTests/fast/table/css-table-width-with-border-padding-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/table/css-table-width-with-border-padding-expected.txt 2012-11-12 19:20:26 UTC (rev 134265)
@@ -0,0 +1,26 @@
+Test for Bugzilla bug: 77028 Specified width CSS tables should not include border and padding as part of that width.
+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).
+50%, content-box
+PASS
+300px, content-box
+PASS
+50vw, content-box
+PASS
+30em, content-box
+PASS
+50%, border-box
+PASS
+300px, border-box
+PASS
+50vw, border-box
+PASS
+30em, border-box
+PASS
+50%, padding-box
+PASS
+300px, padding-box
+PASS
+50vw, padding-box
+PASS
+30em, padding-box
+PASS
Added: trunk/LayoutTests/fast/table/css-table-width-with-border-padding.html (0 => 134265)
--- trunk/LayoutTests/fast/table/css-table-width-with-border-padding.html (rev 0)
+++ trunk/LayoutTests/fast/table/css-table-width-with-border-padding.html 2012-11-12 19:20:26 UTC (rev 134265)
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src=""
+<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="" 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>
Modified: trunk/LayoutTests/fast/table/min-width-css-block-table-expected.txt (134264 => 134265)
--- trunk/LayoutTests/fast/table/min-width-css-block-table-expected.txt 2012-11-12 19:19:27 UTC (rev 134264)
+++ trunk/LayoutTests/fast/table/min-width-css-block-table-expected.txt 2012-11-12 19:20:26 UTC (rev 134265)
@@ -25,15 +25,15 @@
PASS computeLogicalWidth('horizontal', 'ltr', 'min-width: 50px;') is '250px'
PASS computeLogicalWidth('horizontal', 'ltr', 'width: 600px; min-width: 500px;') is '600px'
PASS computeLogicalWidth('horizontal', 'ltr', 'width: 400px; min-width: 500px;') is '500px'
-PASS computeLogicalWidth('horizontal', 'ltr', 'width: 60%; min-width: 500px;') is '570px'
+PASS computeLogicalWidth('horizontal', 'ltr', 'width: 60%; min-width: 500px;') is '600px'
PASS computeLogicalWidth('horizontal', 'ltr', 'width: 40%; min-width: 500px;') is '500px'
-PASS computeLogicalWidth('horizontal', 'ltr', 'min-width: 50%;') is '470px'
+PASS computeLogicalWidth('horizontal', 'ltr', 'min-width: 50%;') is '500px'
PASS computeLogicalWidth('horizontal', 'ltr', 'min-width: 15%;') is '250px'
PASS computeLogicalWidth('horizontal', 'ltr', 'min-width: 5%;') is '250px'
PASS computeLogicalWidth('horizontal', 'ltr', 'width: 600px; min-width: 50%;') is '600px'
-PASS computeLogicalWidth('horizontal', 'ltr', 'width: 400px; min-width: 50%;') is '470px'
-PASS computeLogicalWidth('horizontal', 'ltr', 'width: 60%; min-width: 50%;') is '570px'
-PASS computeLogicalWidth('horizontal', 'ltr', 'width: 40%; min-width: 50%;') is '470px'
+PASS computeLogicalWidth('horizontal', 'ltr', 'width: 400px; min-width: 50%;') is '500px'
+PASS computeLogicalWidth('horizontal', 'ltr', 'width: 60%; min-width: 50%;') is '600px'
+PASS computeLogicalWidth('horizontal', 'ltr', 'width: 40%; min-width: 50%;') is '500px'
PASS computeLogicalWidth('horizontal', 'ltr', 'min-width: auto;') is '250px'
==== Test rtl direction ====
@@ -43,15 +43,15 @@
PASS computeLogicalWidth('horizontal', 'rtl', 'min-width: 50px;') is '250px'
PASS computeLogicalWidth('horizontal', 'rtl', 'width: 600px; min-width: 500px;') is '600px'
PASS computeLogicalWidth('horizontal', 'rtl', 'width: 400px; min-width: 500px;') is '500px'
-PASS computeLogicalWidth('horizontal', 'rtl', 'width: 60%; min-width: 500px;') is '570px'
+PASS computeLogicalWidth('horizontal', 'rtl', 'width: 60%; min-width: 500px;') is '600px'
PASS computeLogicalWidth('horizontal', 'rtl', 'width: 40%; min-width: 500px;') is '500px'
-PASS computeLogicalWidth('horizontal', 'rtl', 'min-width: 50%;') is '470px'
+PASS computeLogicalWidth('horizontal', 'rtl', 'min-width: 50%;') is '500px'
PASS computeLogicalWidth('horizontal', 'rtl', 'min-width: 15%;') is '250px'
PASS computeLogicalWidth('horizontal', 'rtl', 'min-width: 5%;') is '250px'
PASS computeLogicalWidth('horizontal', 'rtl', 'width: 600px; min-width: 50%;') is '600px'
-PASS computeLogicalWidth('horizontal', 'rtl', 'width: 400px; min-width: 50%;') is '470px'
-PASS computeLogicalWidth('horizontal', 'rtl', 'width: 60%; min-width: 50%;') is '570px'
-PASS computeLogicalWidth('horizontal', 'rtl', 'width: 40%; min-width: 50%;') is '470px'
+PASS computeLogicalWidth('horizontal', 'rtl', 'width: 400px; min-width: 50%;') is '500px'
+PASS computeLogicalWidth('horizontal', 'rtl', 'width: 60%; min-width: 50%;') is '600px'
+PASS computeLogicalWidth('horizontal', 'rtl', 'width: 40%; min-width: 50%;') is '500px'
PASS computeLogicalWidth('horizontal', 'rtl', 'min-width: auto;') is '250px'
======== Test vertical writing mode ========
@@ -63,15 +63,15 @@
PASS computeLogicalWidth('vertical', 'ltr', 'min-height: 50px;') is '250px'
PASS computeLogicalWidth('vertical', 'ltr', 'height: 600px; min-height: 500px;') is '600px'
PASS computeLogicalWidth('vertical', 'ltr', 'height: 400px; min-height: 500px;') is '500px'
-PASS computeLogicalWidth('vertical', 'ltr', 'height: 60%; min-height: 500px;') is '570px'
+PASS computeLogicalWidth('vertical', 'ltr', 'height: 60%; min-height: 500px;') is '600px'
PASS computeLogicalWidth('vertical', 'ltr', 'height: 40%; min-height: 500px;') is '500px'
-PASS computeLogicalWidth('vertical', 'ltr', 'min-height: 50%;') is '470px'
+PASS computeLogicalWidth('vertical', 'ltr', 'min-height: 50%;') is '500px'
PASS computeLogicalWidth('vertical', 'ltr', 'min-height: 15%;') is '250px'
PASS computeLogicalWidth('vertical', 'ltr', 'min-height: 5%;') is '250px'
PASS computeLogicalWidth('vertical', 'ltr', 'height: 600px; min-height: 50%;') is '600px'
-PASS computeLogicalWidth('vertical', 'ltr', 'height: 400px; min-height: 50%;') is '470px'
-PASS computeLogicalWidth('vertical', 'ltr', 'height: 60%; min-height: 50%;') is '570px'
-PASS computeLogicalWidth('vertical', 'ltr', 'height: 40%; min-height: 50%;') is '470px'
+PASS computeLogicalWidth('vertical', 'ltr', 'height: 400px; min-height: 50%;') is '500px'
+PASS computeLogicalWidth('vertical', 'ltr', 'height: 60%; min-height: 50%;') is '600px'
+PASS computeLogicalWidth('vertical', 'ltr', 'height: 40%; min-height: 50%;') is '500px'
PASS computeLogicalWidth('vertical', 'ltr', 'min-height: auto;') is '250px'
==== Test rtl direction ====
@@ -81,15 +81,15 @@
PASS computeLogicalWidth('vertical', 'rtl', 'min-height: 50px;') is '250px'
PASS computeLogicalWidth('vertical', 'rtl', 'height: 600px; min-height: 500px;') is '600px'
PASS computeLogicalWidth('vertical', 'rtl', 'height: 400px; min-height: 500px;') is '500px'
-PASS computeLogicalWidth('vertical', 'rtl', 'height: 60%; min-height: 500px;') is '570px'
+PASS computeLogicalWidth('vertical', 'rtl', 'height: 60%; min-height: 500px;') is '600px'
PASS computeLogicalWidth('vertical', 'rtl', 'height: 40%; min-height: 500px;') is '500px'
-PASS computeLogicalWidth('vertical', 'rtl', 'min-height: 50%;') is '470px'
+PASS computeLogicalWidth('vertical', 'rtl', 'min-height: 50%;') is '500px'
PASS computeLogicalWidth('vertical', 'rtl', 'min-height: 15%;') is '250px'
PASS computeLogicalWidth('vertical', 'rtl', 'min-height: 5%;') is '250px'
PASS computeLogicalWidth('vertical', 'rtl', 'height: 600px; min-height: 50%;') is '600px'
-PASS computeLogicalWidth('vertical', 'rtl', 'height: 400px; min-height: 50%;') is '470px'
-PASS computeLogicalWidth('vertical', 'rtl', 'height: 60%; min-height: 50%;') is '570px'
-PASS computeLogicalWidth('vertical', 'rtl', 'height: 40%; min-height: 50%;') is '470px'
+PASS computeLogicalWidth('vertical', 'rtl', 'height: 400px; min-height: 50%;') is '500px'
+PASS computeLogicalWidth('vertical', 'rtl', 'height: 60%; min-height: 50%;') is '600px'
+PASS computeLogicalWidth('vertical', 'rtl', 'height: 40%; min-height: 50%;') is '500px'
PASS computeLogicalWidth('vertical', 'rtl', 'min-height: auto;') is '250px'
PASS successfullyParsed is true
Modified: trunk/LayoutTests/fast/table/min-width-css-inline-table-expected.txt (134264 => 134265)
--- trunk/LayoutTests/fast/table/min-width-css-inline-table-expected.txt 2012-11-12 19:19:27 UTC (rev 134264)
+++ trunk/LayoutTests/fast/table/min-width-css-inline-table-expected.txt 2012-11-12 19:20:26 UTC (rev 134265)
@@ -25,15 +25,15 @@
PASS computeLogicalWidth('horizontal', 'ltr', 'min-width: 50px;') is '250px'
PASS computeLogicalWidth('horizontal', 'ltr', 'width: 600px; min-width: 500px;') is '600px'
PASS computeLogicalWidth('horizontal', 'ltr', 'width: 400px; min-width: 500px;') is '500px'
-PASS computeLogicalWidth('horizontal', 'ltr', 'width: 60%; min-width: 500px;') is '570px'
+PASS computeLogicalWidth('horizontal', 'ltr', 'width: 60%; min-width: 500px;') is '600px'
PASS computeLogicalWidth('horizontal', 'ltr', 'width: 40%; min-width: 500px;') is '500px'
-PASS computeLogicalWidth('horizontal', 'ltr', 'min-width: 50%;') is '470px'
+PASS computeLogicalWidth('horizontal', 'ltr', 'min-width: 50%;') is '500px'
PASS computeLogicalWidth('horizontal', 'ltr', 'min-width: 15%;') is '250px'
PASS computeLogicalWidth('horizontal', 'ltr', 'min-width: 5%;') is '250px'
PASS computeLogicalWidth('horizontal', 'ltr', 'width: 600px; min-width: 50%;') is '600px'
-PASS computeLogicalWidth('horizontal', 'ltr', 'width: 400px; min-width: 50%;') is '470px'
-PASS computeLogicalWidth('horizontal', 'ltr', 'width: 60%; min-width: 50%;') is '570px'
-PASS computeLogicalWidth('horizontal', 'ltr', 'width: 40%; min-width: 50%;') is '470px'
+PASS computeLogicalWidth('horizontal', 'ltr', 'width: 400px; min-width: 50%;') is '500px'
+PASS computeLogicalWidth('horizontal', 'ltr', 'width: 60%; min-width: 50%;') is '600px'
+PASS computeLogicalWidth('horizontal', 'ltr', 'width: 40%; min-width: 50%;') is '500px'
PASS computeLogicalWidth('horizontal', 'ltr', 'min-width: auto;') is '250px'
==== Test rtl direction ====
@@ -43,15 +43,15 @@
PASS computeLogicalWidth('horizontal', 'rtl', 'min-width: 50px;') is '250px'
PASS computeLogicalWidth('horizontal', 'rtl', 'width: 600px; min-width: 500px;') is '600px'
PASS computeLogicalWidth('horizontal', 'rtl', 'width: 400px; min-width: 500px;') is '500px'
-PASS computeLogicalWidth('horizontal', 'rtl', 'width: 60%; min-width: 500px;') is '570px'
+PASS computeLogicalWidth('horizontal', 'rtl', 'width: 60%; min-width: 500px;') is '600px'
PASS computeLogicalWidth('horizontal', 'rtl', 'width: 40%; min-width: 500px;') is '500px'
-PASS computeLogicalWidth('horizontal', 'rtl', 'min-width: 50%;') is '470px'
+PASS computeLogicalWidth('horizontal', 'rtl', 'min-width: 50%;') is '500px'
PASS computeLogicalWidth('horizontal', 'rtl', 'min-width: 15%;') is '250px'
PASS computeLogicalWidth('horizontal', 'rtl', 'min-width: 5%;') is '250px'
PASS computeLogicalWidth('horizontal', 'rtl', 'width: 600px; min-width: 50%;') is '600px'
-PASS computeLogicalWidth('horizontal', 'rtl', 'width: 400px; min-width: 50%;') is '470px'
-PASS computeLogicalWidth('horizontal', 'rtl', 'width: 60%; min-width: 50%;') is '570px'
-PASS computeLogicalWidth('horizontal', 'rtl', 'width: 40%; min-width: 50%;') is '470px'
+PASS computeLogicalWidth('horizontal', 'rtl', 'width: 400px; min-width: 50%;') is '500px'
+PASS computeLogicalWidth('horizontal', 'rtl', 'width: 60%; min-width: 50%;') is '600px'
+PASS computeLogicalWidth('horizontal', 'rtl', 'width: 40%; min-width: 50%;') is '500px'
PASS computeLogicalWidth('horizontal', 'rtl', 'min-width: auto;') is '250px'
======== Test vertical writing mode ========
@@ -63,15 +63,15 @@
PASS computeLogicalWidth('vertical', 'ltr', 'min-height: 50px;') is '250px'
PASS computeLogicalWidth('vertical', 'ltr', 'height: 600px; min-height: 500px;') is '600px'
PASS computeLogicalWidth('vertical', 'ltr', 'height: 400px; min-height: 500px;') is '500px'
-PASS computeLogicalWidth('vertical', 'ltr', 'height: 60%; min-height: 500px;') is '570px'
+PASS computeLogicalWidth('vertical', 'ltr', 'height: 60%; min-height: 500px;') is '600px'
PASS computeLogicalWidth('vertical', 'ltr', 'height: 40%; min-height: 500px;') is '500px'
-PASS computeLogicalWidth('vertical', 'ltr', 'min-height: 50%;') is '470px'
+PASS computeLogicalWidth('vertical', 'ltr', 'min-height: 50%;') is '500px'
PASS computeLogicalWidth('vertical', 'ltr', 'min-height: 15%;') is '250px'
PASS computeLogicalWidth('vertical', 'ltr', 'min-height: 5%;') is '250px'
PASS computeLogicalWidth('vertical', 'ltr', 'height: 600px; min-height: 50%;') is '600px'
-PASS computeLogicalWidth('vertical', 'ltr', 'height: 400px; min-height: 50%;') is '470px'
-PASS computeLogicalWidth('vertical', 'ltr', 'height: 60%; min-height: 50%;') is '570px'
-PASS computeLogicalWidth('vertical', 'ltr', 'height: 40%; min-height: 50%;') is '470px'
+PASS computeLogicalWidth('vertical', 'ltr', 'height: 400px; min-height: 50%;') is '500px'
+PASS computeLogicalWidth('vertical', 'ltr', 'height: 60%; min-height: 50%;') is '600px'
+PASS computeLogicalWidth('vertical', 'ltr', 'height: 40%; min-height: 50%;') is '500px'
PASS computeLogicalWidth('vertical', 'ltr', 'min-height: auto;') is '250px'
==== Test rtl direction ====
@@ -81,15 +81,15 @@
PASS computeLogicalWidth('vertical', 'rtl', 'min-height: 50px;') is '250px'
PASS computeLogicalWidth('vertical', 'rtl', 'height: 600px; min-height: 500px;') is '600px'
PASS computeLogicalWidth('vertical', 'rtl', 'height: 400px; min-height: 500px;') is '500px'
-PASS computeLogicalWidth('vertical', 'rtl', 'height: 60%; min-height: 500px;') is '570px'
+PASS computeLogicalWidth('vertical', 'rtl', 'height: 60%; min-height: 500px;') is '600px'
PASS computeLogicalWidth('vertical', 'rtl', 'height: 40%; min-height: 500px;') is '500px'
-PASS computeLogicalWidth('vertical', 'rtl', 'min-height: 50%;') is '470px'
+PASS computeLogicalWidth('vertical', 'rtl', 'min-height: 50%;') is '500px'
PASS computeLogicalWidth('vertical', 'rtl', 'min-height: 15%;') is '250px'
PASS computeLogicalWidth('vertical', 'rtl', 'min-height: 5%;') is '250px'
PASS computeLogicalWidth('vertical', 'rtl', 'height: 600px; min-height: 50%;') is '600px'
-PASS computeLogicalWidth('vertical', 'rtl', 'height: 400px; min-height: 50%;') is '470px'
-PASS computeLogicalWidth('vertical', 'rtl', 'height: 60%; min-height: 50%;') is '570px'
-PASS computeLogicalWidth('vertical', 'rtl', 'height: 40%; min-height: 50%;') is '470px'
+PASS computeLogicalWidth('vertical', 'rtl', 'height: 400px; min-height: 50%;') is '500px'
+PASS computeLogicalWidth('vertical', 'rtl', 'height: 60%; min-height: 50%;') is '600px'
+PASS computeLogicalWidth('vertical', 'rtl', 'height: 40%; min-height: 50%;') is '500px'
PASS computeLogicalWidth('vertical', 'rtl', 'min-height: auto;') is '250px'
PASS successfullyParsed is true
Modified: trunk/LayoutTests/fast/table/script-tests/min-width-helpers.js (134264 => 134265)
--- trunk/LayoutTests/fast/table/script-tests/min-width-helpers.js 2012-11-12 19:19:27 UTC (rev 134264)
+++ trunk/LayoutTests/fast/table/script-tests/min-width-helpers.js 2012-11-12 19:20:26 UTC (rev 134265)
@@ -29,18 +29,18 @@
{"min-width": "500px", "width": "600px", "computed-width": {"css": "600px", "html": "570px"}},
{"min-width": "500px", "width": "400px", "computed-width": {"css": "500px", "html": "470px"}},
/* fixed min-width, percent width */
- {"min-width": "500px", "width": "60%", "computed-width": {"css": "570px", "html": "570px"}},
+ {"min-width": "500px", "width": "60%", "computed-width": {"css": "600px", "html": "570px"}},
{"min-width": "500px", "width": "40%", "computed-width": {"css": "500px", "html": "470px"}},
/* percent min-width, auto width */
- {"min-width": "50%", "width": null, "computed-width": {"css": "470px", "html": "470px"}},
+ {"min-width": "50%", "width": null, "computed-width": {"css": "500px", "html": "470px"}},
{"min-width": "15%", "width": null, "computed-width": {"css": "250px", "html": "250px"}},
{"min-width": "5%", "width": null, "computed-width": {"css": "250px", "html": "250px"}},
/* percent min-width, fixed width */
{"min-width": "50%", "width": "600px", "computed-width": {"css": "600px", "html": "570px"}},
- {"min-width": "50%", "width": "400px", "computed-width": {"css": "470px", "html": "470px"}},
+ {"min-width": "50%", "width": "400px", "computed-width": {"css": "500px", "html": "470px"}},
/* percent min-width, percent width */
- {"min-width": "50%", "width": "60%", "computed-width": {"css": "570px", "html": "570px"}},
- {"min-width": "50%", "width": "40%", "computed-width": {"css": "470px", "html": "470px"}},
+ {"min-width": "50%", "width": "60%", "computed-width": {"css": "600px", "html": "570px"}},
+ {"min-width": "50%", "width": "40%", "computed-width": {"css": "500px", "html": "470px"}},
/* auto min-width (shouldn't affect anything), auto width */
{"min-width": "auto", "width": null, "computed-width": {"css": "250px", "html": "250px"}},
];
Modified: trunk/Source/WebCore/ChangeLog (134264 => 134265)
--- trunk/Source/WebCore/ChangeLog 2012-11-12 19:19:27 UTC (rev 134264)
+++ trunk/Source/WebCore/ChangeLog 2012-11-12 19:20:26 UTC (rev 134265)
@@ -1,3 +1,25 @@
+2012-11-12 Arpita Bahuguna <[email protected]>
+
+ Specified width CSS tables should not include border and padding as part of that width.
+ https://bugs.webkit.org/show_bug.cgi?id=77028
+
+ Reviewed by Julien Chaffraix.
+
+ CSS table width should not include border and padding even though HTML
+ tables size as though their width includes border/padding.
+
+ This is applicable for all CSS tables with specified widths.
+
+ The change would also make our rendering of CSS tables with specified
+ width similar to that of Opera, IE and FF.
+
+ Test: fast/table/css-table-width-with-border-padding.html
+
+ * rendering/RenderTable.cpp:
+ (WebCore::RenderTable::convertStyleLogicalWidthToComputedWidth):
+ Added check for all (positive) specified widths for CSS tables to
+ consider border and padding outside of the specified width.
+
2012-11-12 Allan Sandfeld Jensen <[email protected]>
Move resolving blob references to FormData.
Modified: trunk/Source/WebCore/rendering/RenderTable.cpp (134264 => 134265)
--- trunk/Source/WebCore/rendering/RenderTable.cpp 2012-11-12 19:19:27 UTC (rev 134264)
+++ trunk/Source/WebCore/rendering/RenderTable.cpp 2012-11-12 19:20:26 UTC (rev 134265)
@@ -318,7 +318,7 @@
// HTML tables' width styles already include borders and paddings, but CSS tables' width styles do not.
LayoutUnit borders = 0;
bool isCSSTable = !node() || !node()->hasTagName(tableTag);
- if (isCSSTable && styleLogicalWidth.isFixed() && styleLogicalWidth.isPositive()) {
+ if (isCSSTable && styleLogicalWidth.isSpecified() && styleLogicalWidth.isPositive()) {
recalcBordersInRowDirection();
if (style()->boxSizing() == CONTENT_BOX)
borders = borderStart() + borderEnd() + (collapseBorders() ? LayoutUnit() : paddingStart() + paddingEnd());
