max-width property is does not overriding the width properties for css tables(display...
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 9 Oct 2012 16:55:46 +0000 (16:55 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 9 Oct 2012 16:55:46 +0000 (16:55 +0000)
https://bugs.webkit.org/show_bug.cgi?id=98455

Patch by Pravin D <pravind.2k4@gmail.com> on 2012-10-09
Reviewed by Tony Chang.

Source/WebCore:

The max-width property determines the maximum computed width an element can have. In case of css tables(display:table),
the computed was not being limited by the max-width property. The current patch fixes this issue.

Test: fast/table/css-table-max-width.html

* rendering/RenderTable.cpp:
(WebCore::RenderTable::updateLogicalWidth):
 Logic to compute the logical width of an element such that it does not exceed the max-width value.
 Also when both min-width and max-width are present, the following contraint is used to compute the logical width:
   1) min-width < Computed LogicalWidth < max-width, when min-width < max-width.
   2) Computed LogicalWidth = min-width, when min-width > max-width.

LayoutTests:

* fast/table/css-table-max-width-expected.txt: Added.
* fast/table/css-table-max-width.html: Added.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@130774 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/fast/table/css-table-max-width-expected.txt [new file with mode: 0644]
LayoutTests/fast/table/css-table-max-width.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderTable.cpp

index 0f7a508..61a476d 100644 (file)
@@ -1,3 +1,13 @@
+2012-10-09  Pravin D  <pravind.2k4@gmail.com>
+
+        max-width property is does not overriding the width properties for css tables(display:table)
+        https://bugs.webkit.org/show_bug.cgi?id=98455
+
+        Reviewed by Tony Chang.
+
+        * fast/table/css-table-max-width-expected.txt: Added.
+        * fast/table/css-table-max-width.html: Added.
+
 2012-10-09  Zan Dobersek  <zandobersek@gmail.com>
 
         Unreviewed GTK gardening.
diff --git a/LayoutTests/fast/table/css-table-max-width-expected.txt b/LayoutTests/fast/table/css-table-max-width-expected.txt
new file mode 100644 (file)
index 0000000..831df2b
--- /dev/null
@@ -0,0 +1,21 @@
+Test case for bug http://webkit.org/b/98455. The testcase checks if the max-width property overrides the computed width of a html container with display:table.
+A html container with display:table should not exceed the max-width even if its calculated width is greater than the max-width value.
+However when min-width property is set and its value is greated than the max-width value, the width of the container must be equal to the min-width value.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Note:The width of the css tables inclusive of its border width.
+
+PASS maxGreatThanMinWidthAutoLayout.getBoundingClientRect().width is 202
+PASS minGreatThanMaxWidthAutoLayout.getBoundingClientRect().width is 202
+PASS onlyMaxWidthAutoLayout.getBoundingClientRect().width is 202
+PASS maxWidthZeroAutoLayout.getBoundingClientRect().width is 0
+PASS maxGreatThanMinWidthFixedLayout.getBoundingClientRect().width is 202
+PASS minGreatThanMaxWidthFixedLayout.getBoundingClientRect().width is 202
+PASS onlyMaxWidthFixedLayout.getBoundingClientRect().width is 202
+PASS maxWidthZeroFixedLayout.getBoundingClientRect().width is 0
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/fast/table/css-table-max-width.html b/LayoutTests/fast/table/css-table-max-width.html
new file mode 100644 (file)
index 0000000..4a56cc2
--- /dev/null
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+.parent
+{
+    width:300px;
+    border:1px solid green;
+}
+
+.parent .child
+{
+    background-color:#999999;
+    border:1px solid yellow;
+}
+</style>
+<script src="../js/resources/js-test-pre.js"></script>
+</head>
+<body>
+<div id="container" class="parent">
+    <div id="maxGreatThanMinWidthAutoLayout" class="child" style="display:table; min-width:100px; max-width:200px; width:100%;">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
+        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
+        fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa 
+        qui officia deserunt mollit anim id est laborum.
+    </div>
+    <div id="minGreatThanMaxWidthAutoLayout" class="child" style="display:table; min-width:200px; max-width:100px; width:100%;">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
+        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
+        fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa 
+        qui officia deserunt mollit anim id est laborum.
+    </div>
+    <div id="onlyMaxWidthAutoLayout" class="child" style="display:table; max-width:200px; width:100%;">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
+        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
+        fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa 
+        qui officia deserunt mollit anim id est laborum.
+    </div>
+    <div id="maxWidthZeroAutoLayout" class="child" style="display:table; max-width:0; width:100%;">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
+        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
+        fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa 
+        qui officia deserunt mollit anim id est laborum.
+    </div>
+        <div id="maxGreatThanMinWidthFixedLayout" class="child" style="display:table; table-layout:fixed; min-width:100px; max-width:200px; width:100%;">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
+        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
+        fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa 
+        qui officia deserunt mollit anim id est laborum.
+    </div>
+    <div id="minGreatThanMaxWidthFixedLayout" class="child" style="display:table; table-layout:fixed; min-width:200px; max-width:100px; width:100%;">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
+        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
+        fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa 
+        qui officia deserunt mollit anim id est laborum.
+    </div>
+    <div id="onlyMaxWidthFixedLayout" class="child" style="display:table; table-layout:fixed; max-width:200px; width:100%;">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
+        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
+        fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa 
+        qui officia deserunt mollit anim id est laborum.
+    </div>
+    <div id="maxWidthZeroFixedLayout" class="child" style="display:table; table-layout:fixed; max-width:0; width:100%;">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
+        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
+        fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa 
+        qui officia deserunt mollit anim id est laborum.
+    </div>
+</div>
+<script>
+description('Test case for bug <a href="http://webkit.org/b/98455">http://webkit.org/b/98455</a>. The testcase checks \
+if the max-width property overrides the computed width of a html container with display:table.<br> \
+A html container with display:table should not exceed the max-width even if its calculated \
+width is greater than the max-width value.<br>However when min-width property is set and its value is greated than \
+the max-width value, the width of the container must be equal to the min-width value.');
+debug('Note:The width of the css tables inclusive of its border width.<br>');
+maxGreatThanMinWidthAutoLayout = document.getElementById("maxGreatThanMinWidthAutoLayout");
+shouldBe("maxGreatThanMinWidthAutoLayout.getBoundingClientRect().width","202");
+minGreatThanMaxWidthAutoLayout = document.getElementById("minGreatThanMaxWidthAutoLayout");
+shouldBe("minGreatThanMaxWidthAutoLayout.getBoundingClientRect().width","202");
+onlyMaxWidthAutoLayout = document.getElementById("onlyMaxWidthAutoLayout");
+shouldBe("onlyMaxWidthAutoLayout.getBoundingClientRect().width","202");
+maxWidthZeroAutoLayout = document.getElementById("maxWidthZeroAutoLayout");
+shouldBe("maxWidthZeroAutoLayout.getBoundingClientRect().width","0");
+maxGreatThanMinWidthFixedLayout = document.getElementById("maxGreatThanMinWidthFixedLayout");
+shouldBe("maxGreatThanMinWidthFixedLayout.getBoundingClientRect().width","202");
+minGreatThanMaxWidthFixedLayout = document.getElementById("minGreatThanMaxWidthFixedLayout");
+shouldBe("minGreatThanMaxWidthFixedLayout.getBoundingClientRect().width","202");
+onlyMaxWidthFixedLayout = document.getElementById("onlyMaxWidthFixedLayout");
+shouldBe("onlyMaxWidthFixedLayout.getBoundingClientRect().width","202");
+maxWidthZeroFixedLayout = document.getElementById("maxWidthZeroFixedLayout");
+shouldBe("maxWidthZeroFixedLayout.getBoundingClientRect().width","0");
+
+document.body.removeChild(document.getElementById('container'));
+</script>
+<script src="../js/resources/js-test-post.js"></script>
+<body>
+</html>
index a77e5db..2412369 100644 (file)
@@ -1,3 +1,22 @@
+2012-10-09  Pravin D  <pravind.2k4@gmail.com>
+
+        max-width property is does not overriding the width properties for css tables(display:table)
+        https://bugs.webkit.org/show_bug.cgi?id=98455
+
+        Reviewed by Tony Chang.
+
+        The max-width property determines the maximum computed width an element can have. In case of css tables(display:table),
+        the computed was not being limited by the max-width property. The current patch fixes this issue.
+
+        Test: fast/table/css-table-max-width.html
+
+        * rendering/RenderTable.cpp:
+        (WebCore::RenderTable::updateLogicalWidth):
+         Logic to compute the logical width of an element such that it does not exceed the max-width value.
+         Also when both min-width and max-width are present, the following contraint is used to compute the logical width:
+           1) min-width < Computed LogicalWidth < max-width, when min-width < max-width.
+           2) Computed LogicalWidth = min-width, when min-width > max-width.
+
 2012-10-09  Harald Alvestrand  <hta@google.com>
 
         Change PeerConnection getStats function to single value local / remote
index 1f29289..1caffb9 100644 (file)
@@ -255,10 +255,20 @@ void RenderTable::updateLogicalWidth()
     // Ensure we aren't smaller than our min preferred width.
     setLogicalWidth(max<int>(logicalWidth(), minPreferredLogicalWidth()));
 
+    
+    // Ensure we aren't bigger than our max-width style.
+    Length styleMaxLogicalWidth = style()->logicalMaxWidth();
+    if (styleMaxLogicalWidth.isSpecified() && !styleMaxLogicalWidth.isNegative()) {
+        LayoutUnit computedMaxLogicalWidth = convertStyleLogicalWidthToComputedWidth(styleMaxLogicalWidth, availableLogicalWidth);
+        setLogicalWidth(min<int>(logicalWidth(), computedMaxLogicalWidth));
+    }
+
     // Ensure we aren't smaller than our min-width style.
     Length styleMinLogicalWidth = style()->logicalMinWidth();
-    if (styleMinLogicalWidth.isSpecified() && styleMinLogicalWidth.isPositive())
-        setLogicalWidth(max<int>(logicalWidth(), convertStyleLogicalWidthToComputedWidth(styleMinLogicalWidth, availableLogicalWidth)));
+    if (styleMinLogicalWidth.isSpecified() && !styleMinLogicalWidth.isNegative()) {
+        LayoutUnit computedMinLogicalWidth = convertStyleLogicalWidthToComputedWidth(styleMinLogicalWidth, availableLogicalWidth);
+        setLogicalWidth(max<int>(logicalWidth(), computedMinLogicalWidth));
+    }
 
     // Finally, with our true width determined, compute our margins for real.
     setMarginStart(0);