Changing flexbox justify/alignment doesn't update their positioning
authortony@chromium.org <tony@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 6 Jun 2012 06:45:22 +0000 (06:45 +0000)
committertony@chromium.org <tony@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 6 Jun 2012 06:45:22 +0000 (06:45 +0000)
https://bugs.webkit.org/show_bug.cgi?id=88366

Reviewed by Ojan Vafai.

Source/WebCore:

Test: css3/flexbox/style-change.html

* rendering/style/RenderStyle.cpp:
(WebCore::RenderStyle::diff): Since these member variables were moved
out of StyleFlexibleBoxData, we have to compare them in RenderStyle::diff.

LayoutTests:

* css3/flexbox/style-change-expected.txt: Added.
* css3/flexbox/style-change.html: Added.

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

LayoutTests/ChangeLog
LayoutTests/css3/flexbox/style-change-expected.txt [new file with mode: 0644]
LayoutTests/css3/flexbox/style-change.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/rendering/style/RenderStyle.cpp

index a2a4c93..7f3fd3a 100644 (file)
@@ -1,3 +1,13 @@
+2012-06-05  Tony Chang  <tony@chromium.org>
+
+        Changing flexbox justify/alignment doesn't update their positioning
+        https://bugs.webkit.org/show_bug.cgi?id=88366
+
+        Reviewed by Ojan Vafai.
+
+        * css3/flexbox/style-change-expected.txt: Added.
+        * css3/flexbox/style-change.html: Added.
+
 2012-06-05  Ojan Vafai  <ojan@chromium.org>
 
         Nested CSS flexbox renders incorrectly
diff --git a/LayoutTests/css3/flexbox/style-change-expected.txt b/LayoutTests/css3/flexbox/style-change-expected.txt
new file mode 100644 (file)
index 0000000..fd8544d
--- /dev/null
@@ -0,0 +1,8 @@
+This test verifies that changing order, align-content, align-items, align-self, or justify-content will relayout.
+
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
diff --git a/LayoutTests/css3/flexbox/style-change.html b/LayoutTests/css3/flexbox/style-change.html
new file mode 100644 (file)
index 0000000..29abf7b
--- /dev/null
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+<style>
+body {
+    margin: 0;
+}
+.flexbox {
+    display: -webkit-flex;
+    background-color: #aaa;
+    position: relative;
+}
+
+.flexbox > :nth-child(1) {
+    background-color: blue;
+}
+.flexbox > :nth-child(2) {
+    background-color: green;
+}
+
+.absolute {
+  position: absolute;
+  width: 50px;
+  height: 50px;
+  background-color: yellow !important;
+}
+</style>
+<script>
+if (window.layoutTestController)
+    layoutTestController.dumpAsText();
+</script>
+<script src="resources/flexbox.js"></script>
+<body>
+
+<p>This test verifies that changing order, align-content, align-items, align-self, or justify-content will relayout.</p>
+
+<div id="flexbox" class="flexbox" style="width: 300px; height: 300px;">
+  <div id="a" style="-webkit-flex: 0 0 auto; width: 100px; height: 100px;"></div>
+  <div id="b" style="-webkit-flex: 0 0 auto; width: 100px; height: 100px;"></div>
+</div>
+<script>
+
+var flexbox = document.getElementById("flexbox");
+var aDiv = document.getElementById("a");
+var bDiv = document.getElementById("b");
+
+function checkValues(aXOffset, aYOffset, bXOffset, bYOffset)
+{
+    aDiv.setAttribute("data-offset-x", aXOffset);
+    aDiv.setAttribute("data-offset-y", aYOffset);
+    bDiv.setAttribute("data-offset-x", bXOffset);
+    bDiv.setAttribute("data-offset-y", bYOffset);
+    checkFlexBoxen();
+}
+
+checkValues(0, 0, 100, 0);
+
+flexbox.style.webkitJustifyContent = "flex-end";
+checkValues(100, 0, 200, 0);
+
+flexbox.style.webkitAlignItems = "flex-end";
+checkValues(100, 200, 200, 200);
+
+bDiv.style.webkitOrder = -1;
+checkValues(200, 200, 100, 200);
+
+aDiv.style.webkitAlignSelf = "flex-start";
+checkValues(200, 0, 100, 200);
+
+flexbox.style.width = "100px";
+flexbox.style.webkitFlexWrap = "wrap";
+flexbox.style.webkitAlignContent = "flex-end";
+checkValues(0, 200, 0, 100);
+
+</script>
+
+</body>
+</html>
index 332b831..97df37e 100644 (file)
@@ -1,3 +1,16 @@
+2012-06-05  Tony Chang  <tony@chromium.org>
+
+        Changing flexbox justify/alignment doesn't update their positioning
+        https://bugs.webkit.org/show_bug.cgi?id=88366
+
+        Reviewed by Ojan Vafai.
+
+        Test: css3/flexbox/style-change.html
+
+        * rendering/style/RenderStyle.cpp:
+        (WebCore::RenderStyle::diff): Since these member variables were moved
+        out of StyleFlexibleBoxData, we have to compare them in RenderStyle::diff.
+
 2012-06-05  Charles Wei  <charles.wei@torchmobile.com.cn>
 
         JSC implementation of SerializedScriptValue for IndexedDB
index af67367..79342e3 100644 (file)
@@ -396,6 +396,12 @@ StyleDifference RenderStyle::diff(const RenderStyle* other, unsigned& changedCon
         if (rareNonInheritedData->m_flexibleBox.get() != other->rareNonInheritedData->m_flexibleBox.get()
             && *rareNonInheritedData->m_flexibleBox.get() != *other->rareNonInheritedData->m_flexibleBox.get())
             return StyleDifferenceLayout;
+        if (rareNonInheritedData->m_order != other->rareNonInheritedData->m_order
+            || rareNonInheritedData->m_alignContent != other->rareNonInheritedData->m_alignContent
+            || rareNonInheritedData->m_alignItems != other->rareNonInheritedData->m_alignItems
+            || rareNonInheritedData->m_alignSelf != other->rareNonInheritedData->m_alignSelf
+            || rareNonInheritedData->m_justifyContent != other->rareNonInheritedData->m_justifyContent)
+            return StyleDifferenceLayout;
 
         // FIXME: We should add an optimized form of layout that just recomputes visual overflow.
         if (!rareNonInheritedData->shadowDataEquivalent(*other->rareNonInheritedData.get()))