Skip to content

Commit 0e35551

Browse files
idealismsidealisms
committed
Implement new flex property and deprecate flex function
https://bugs.webkit.org/show_bug.cgi?id=82128 Reviewed by Ojan Vafai. Source/WebCore: No new tests. Tests were updated to use the new syntax and they should all pass. * rendering/RenderFlexibleBox.cpp: (WebCore::RenderFlexibleBox::preferredFlexLengthForChild): Grab the preferred size and if it's auto, fall back to width or height. (WebCore::RenderFlexibleBox::preferredMainAxisContentExtentForChild): (WebCore::RenderFlexibleBox::positiveFlexForChild): Use the value from the flex property. (WebCore::RenderFlexibleBox::negativeFlexForChild): Use the value from the flex property. (WebCore::RenderFlexibleBox::computeMainAxisPreferredSizes): * rendering/RenderFlexibleBox.h: LayoutTests: Update tests to use the -webkit-flex: propery instead of the function. In most cases this was just a simple find & replace, but in a few cases we had to clear the flex value. * css3/flexbox/auto-height-dynamic.html: * css3/flexbox/child-overflow.html: * css3/flexbox/columns-auto-size.html: * css3/flexbox/cross-axis-scrollbar.html: * css3/flexbox/flex-algorithm-min-max.html: * css3/flexbox/flex-algorithm-with-margins.html: * css3/flexbox/flex-algorithm.html: * css3/flexbox/flex-align-column.html: * css3/flexbox/flex-align-max.html: * css3/flexbox/flex-align-percent-height.html: * css3/flexbox/flex-align-stretch.html: * css3/flexbox/flex-align-vertical-writing-mode.html: * css3/flexbox/flex-align.html: * css3/flexbox/flex-flow-border.html: * css3/flexbox/flex-flow-margins-auto-size-expected.txt: This test had expected failures that needed to be updated. * css3/flexbox/flex-flow-margins-auto-size.html: * css3/flexbox/flex-flow-margins.html: * css3/flexbox/flex-flow-overflow.html: * css3/flexbox/flex-flow-padding.html: * css3/flexbox/flex-flow.html: * css3/flexbox/flex-no-flex.html: * css3/flexbox/flex-order.html: * css3/flexbox/flex-pack.html: * css3/flexbox/line-wrapping.html: * css3/flexbox/multiline-align.html: * css3/flexbox/multiline-line-pack-horizontal-column.html: * css3/flexbox/multiline-reverse-wrap-baseline.html: * css3/flexbox/multiline-reverse-wrap-overflow.html: * css3/flexbox/multiline.html: * css3/flexbox/orthogonal-flex-directions.html: * css3/flexbox/position-absolute-child.html: * css3/flexbox/repaint-rtl-column.html: * css3/flexbox/repaint.html: * css3/flexbox/writing-modes.html: Canonical link: https://commits.webkit.org/100445@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@113097 268f45cc-cd09-0410-ab3c-d52691b4dbfc
1 parent c092f72 commit 0e35551

38 files changed

Lines changed: 675 additions & 618 deletions

‎LayoutTests/ChangeLog‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,49 @@
1+
2012-04-03 Tony Chang <tony@chromium.org>
2+
3+
Implement new flex property and deprecate flex function
4+
https://bugs.webkit.org/show_bug.cgi?id=82128
5+
6+
Reviewed by Ojan Vafai.
7+
8+
Update tests to use the -webkit-flex: propery instead of the function.
9+
In most cases this was just a simple find & replace, but in a few cases
10+
we had to clear the flex value.
11+
12+
* css3/flexbox/auto-height-dynamic.html:
13+
* css3/flexbox/child-overflow.html:
14+
* css3/flexbox/columns-auto-size.html:
15+
* css3/flexbox/cross-axis-scrollbar.html:
16+
* css3/flexbox/flex-algorithm-min-max.html:
17+
* css3/flexbox/flex-algorithm-with-margins.html:
18+
* css3/flexbox/flex-algorithm.html:
19+
* css3/flexbox/flex-align-column.html:
20+
* css3/flexbox/flex-align-max.html:
21+
* css3/flexbox/flex-align-percent-height.html:
22+
* css3/flexbox/flex-align-stretch.html:
23+
* css3/flexbox/flex-align-vertical-writing-mode.html:
24+
* css3/flexbox/flex-align.html:
25+
* css3/flexbox/flex-flow-border.html:
26+
* css3/flexbox/flex-flow-margins-auto-size-expected.txt: This test had expected failures that needed to be updated.
27+
* css3/flexbox/flex-flow-margins-auto-size.html:
28+
* css3/flexbox/flex-flow-margins.html:
29+
* css3/flexbox/flex-flow-overflow.html:
30+
* css3/flexbox/flex-flow-padding.html:
31+
* css3/flexbox/flex-flow.html:
32+
* css3/flexbox/flex-no-flex.html:
33+
* css3/flexbox/flex-order.html:
34+
* css3/flexbox/flex-pack.html:
35+
* css3/flexbox/line-wrapping.html:
36+
* css3/flexbox/multiline-align.html:
37+
* css3/flexbox/multiline-line-pack-horizontal-column.html:
38+
* css3/flexbox/multiline-reverse-wrap-baseline.html:
39+
* css3/flexbox/multiline-reverse-wrap-overflow.html:
40+
* css3/flexbox/multiline.html:
41+
* css3/flexbox/orthogonal-flex-directions.html:
42+
* css3/flexbox/position-absolute-child.html:
43+
* css3/flexbox/repaint-rtl-column.html:
44+
* css3/flexbox/repaint.html:
45+
* css3/flexbox/writing-modes.html:
46+
147
2012-04-03 Ami Fischman <fischman@chromium.org>
248

349
http/tests/media/video-cancel-load.html is flaky on linux

‎LayoutTests/css3/flexbox/auto-height-dynamic.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,18 +20,18 @@
2020
<body onload="checkFlexBoxen()">
2121

2222
<div class="flexbox" data-expected-height=0>
23-
<div class="flexitem" data-expected-height=0 style="height: 100px"></div>
23+
<div class="flexitem" data-expected-height=0 style="-webkit-flex: 100px"></div>
2424
</div>
2525

2626
<div class="flexbox" data-expected-height=0>
27-
<div class="flexitem2" data-expected-height=0 style="height: 100px"></div>
27+
<div class="flexitem2" data-expected-height=0 style="-webkit-flex: 100px"></div>
2828
</div>
2929

3030
<script>
3131
document.querySelector('.flexitem').offsetHeight;
3232
document.querySelector('.flexitem2').offsetHeight;
33-
document.querySelector('.flexitem').style.height = "-webkit-flex(1)";
34-
document.querySelector('.flexitem2').style.height = "-webkit-flex(1 auto)";
33+
document.querySelector('.flexitem').style.webkitFlex = "1";
34+
document.querySelector('.flexitem2').style.webkitFlex = "1 auto";
3535
</script>
3636

3737
</body>

‎LayoutTests/css3/flexbox/child-overflow.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@
7676
document.body.innerHTML +=
7777
"<div class='" + containerClass + "'>" +
7878
"<div class='" + flexboxClass + "'>" +
79-
"<div style='width: -webkit-flex(0 1 auto); height: -webkit-flex(0 1 auto)'><div></div></div>" +
79+
"<div style='-webkit-flex: 0 1 auto; -webkit-flex: 0 1 auto'><div></div></div>" +
8080
"</div>" +
8181
"</div> ";
8282
});

‎LayoutTests/css3/flexbox/columns-auto-size.html‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -49,69 +49,69 @@
4949
<script src="resources/flexbox.js"></script>
5050
<body onload="checkFlexBoxen()">
5151
<div class="flexbox horizontal">
52-
<div data-expected-height="10" data-offset-y="0" style="height: -webkit-flex(1 0 10px)"></div>
52+
<div data-expected-height="10" data-offset-y="0" style="-webkit-flex: 1 0 10px"></div>
5353
<div data-expected-height="10" data-offset-y="10" style="height: 10px;"></div>
5454
<div data-expected-height="10" data-offset-y="20"><div data-expected-height="10" data-offset-y="20" style="height: 10px"></div></div>
5555
</div>
5656

5757
<!-- The last div is sized to 0 because there is no available space, however its child overflows. -->
5858
<div class="flexbox horizontal">
59-
<div data-expected-height="0" data-offset-y="0" style="height: -webkit-flex(1)"></div>
59+
<div data-expected-height="0" data-offset-y="0" style="-webkit-flex: 1"></div>
6060
<div data-expected-height="10" data-offset-y="0" style="height: 10px;"></div>
61-
<div data-expected-height="10" data-offset-y="10" style="height: -webkit-flex(1 auto)"><div style="height: 10px"></div></div>
62-
<div data-expected-height="0" data-offset-y="20" style="height: -webkit-flex(1)"><div data-expected-height="10" data-offset-y="20" class="child-div" style="height: 10px"></div></div>
61+
<div data-expected-height="10" data-offset-y="10" style="-webkit-flex: 1 auto"><div style="height: 10px"></div></div>
62+
<div data-expected-height="0" data-offset-y="20" style="-webkit-flex: 1"><div data-expected-height="10" data-offset-y="20" class="child-div" style="height: 10px"></div></div>
6363
</div>
6464

6565
<div class="flexbox horizontal">
66-
<div data-expected-height="10" data-offset-y="10" style="height: -webkit-flex(1 0 10px); margin-top: 10px;"></div>
66+
<div data-expected-height="10" data-offset-y="10" style="-webkit-flex: 1 0 10px; margin-top: 10px;"></div>
6767
<div data-expected-height="10" data-offset-y="20" style="height: 10px; margin-bottom: 20px;"></div>
6868
<div data-expected-height="20" data-offset-y="50" style="padding-top: 10px"><div data-expected-height="10" data-offset-y="60" style="height: 10px"></div></div>
6969
</div>
7070

7171
<!-- Same as previous test case but with a flex-pack set. Since there's no
7272
available space, it should layout the same. -->
7373
<div class="flexbox horizontal" style="-webkit-flex-pack: justify">
74-
<div data-expected-height="10" data-offset-y="10" style="height: -webkit-flex(1 0 10px); margin-top: 10px;"></div>
74+
<div data-expected-height="10" data-offset-y="10" style="-webkit-flex: 1 0 10px; margin-top: 10px;"></div>
7575
<div data-expected-height="10" data-offset-y="20" style="height: 10px; margin-bottom: 20px;"></div>
7676
<div data-expected-height="20" data-offset-y="50" style="padding-top: 10px"><div data-expected-height="10" data-offset-y="60" style="height: 10px"></div></div>
7777
</div>
7878

7979
<div class="flexbox horizontal" data-expected-height="20">
80-
<div data-expected-height="10" data-offset-y="0" style="height: -webkit-flex(0 1 auto)"><div style="height: 10px"></div></div>
81-
<div data-expected-height="10" data-offset-y="10" style="height: -webkit-flex(0 2 auto)"><div style="height: 10px"></div></div>
80+
<div data-expected-height="10" data-offset-y="0" style="-webkit-flex: 0 1 auto"><div style="height: 10px"></div></div>
81+
<div data-expected-height="10" data-offset-y="10" style="-webkit-flex: 0 2 auto"><div style="height: 10px"></div></div>
8282
</div>
8383

8484
<div class="flexbox horizontal" style="min-height: 10px" data-expected-height="20">
85-
<div data-expected-height="10" data-offset-y="0" style="height: -webkit-flex(0 1 auto)"><div style="height: 10px"></div></div>
86-
<div data-expected-height="10" data-offset-y="10" style="height: -webkit-flex(0 2 auto)"><div style="height: 10px"></div></div>
85+
<div data-expected-height="10" data-offset-y="0" style="-webkit-flex: 0 1 auto"><div style="height: 10px"></div></div>
86+
<div data-expected-height="10" data-offset-y="10" style="-webkit-flex: 0 2 auto"><div style="height: 10px"></div></div>
8787
</div>
8888

8989
<div class="flexbox horizontal" style="min-height: 5px; max-height: 17px;" data-expected-height="17">
90-
<div data-expected-height="9" data-offset-y="0" style="height: -webkit-flex(0 1 auto)"><div style="height: 10px"></div></div>
91-
<div data-expected-height="8" data-offset-y="9" style="height: -webkit-flex(0 2 auto)"><div style="height: 10px"></div></div>
90+
<div data-expected-height="9" data-offset-y="0" style="-webkit-flex: 0 1 auto"><div style="height: 10px"></div></div>
91+
<div data-expected-height="8" data-offset-y="9" style="-webkit-flex: 0 2 auto"><div style="height: 10px"></div></div>
9292
</div>
9393

9494
<div class="flexbox horizontal" style="min-height: 5px; max-height: 30px; padding-top: 1px; padding-bottom: 2px;" data-expected-height="33">
95-
<div data-expected-height="15" data-offset-y="1" style="height: -webkit-flex(0 1 auto)"><div style="height: 20px"></div></div>
96-
<div data-expected-height="15" data-offset-y="16" style="height: -webkit-flex(0 1 auto)"><div style="height: 20px"></div></div>
95+
<div data-expected-height="15" data-offset-y="1" style="-webkit-flex: 0 1 auto"><div style="height: 20px"></div></div>
96+
<div data-expected-height="15" data-offset-y="16" style="-webkit-flex: 0 1 auto"><div style="height: 20px"></div></div>
9797
</div>
9898

9999
<div class="flexbox horizontal">
100100
<div data-expected-client-height="10" data-offset-y="0" style="overflow: scroll"><div data-expected-height=10 style="height: 10px"></div></div>
101101
</div>
102102

103103
<div class="flexbox vertical">
104-
<div data-expected-width="10" data-offset-x="20" style="width: -webkit-flex(1 0 10px)"></div>
104+
<div data-expected-width="10" data-offset-x="20" style="-webkit-flex: 1 0 10px"></div>
105105
<div data-expected-width="10" data-offset-x="10" style="width: 10px;"></div>
106106
<div data-expected-width="10" data-offset-x="0"><div data-expected-width="10" data-offset-x="0" style="width: 10px"></div></div>
107107
</div>
108108

109109
<!-- The first div overflows to the left, so give it a margin-left so we can see box it paints. -->
110110
<div class="flexbox vertical" style="margin-left: 100px;">
111-
<div data-expected-width="0" data-offset-x="20" style="width: -webkit-flex(1)"><div data-expected-width="50" data-offset-x="-30" class="child-div" style="width: 50px"></div></div>
112-
<div data-expected-width="0" data-offset-x="20" style="width: -webkit-flex(1)"></div>
111+
<div data-expected-width="0" data-offset-x="20" style="-webkit-flex: 1"><div data-expected-width="50" data-offset-x="-30" class="child-div" style="width: 50px"></div></div>
112+
<div data-expected-width="0" data-offset-x="20" style="-webkit-flex: 1"></div>
113113
<div data-expected-width="10" data-offset-x="10" style="width: 10px;"></div>
114-
<div data-expected-width="10" data-offset-x="0" style="width: -webkit-flex(1 auto)"><div style="width: 10px"></div></div>
114+
<div data-expected-width="10" data-offset-x="0" style="-webkit-flex: 1 auto"><div style="width: 10px"></div></div>
115115
</div>
116116

117117
</body>

‎LayoutTests/css3/flexbox/cross-axis-scrollbar.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131

3232
.row > div {
3333
background-color: green;
34-
width: -webkit-flex(1);
34+
-webkit-flex: 1;
3535
height: 50px;
3636
}
3737

@@ -41,7 +41,7 @@
4141
}
4242

4343
.vertical-lr > .row > div {
44-
height: -webkit-flex(1);
44+
-webkit-flex: 1;
4545
width: 100px;
4646
}
4747

‎LayoutTests/css3/flexbox/flex-algorithm-min-max.html‎

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -32,73 +32,73 @@
3232
<script src="resources/flexbox.js"></script>
3333
<body onload="checkFlexBoxen()">
3434
<div class="flexbox">
35-
<div data-expected-width="100" style="width: -webkit-flex(1 0 0); max-width: 100px;"></div>
36-
<div data-expected-width="250" style="width: -webkit-flex(1 0 0);"></div>
37-
<div data-expected-width="250" style="width: -webkit-flex(1 0 0);"></div>
35+
<div data-expected-width="100" style="-webkit-flex: 1 0 0; max-width: 100px;"></div>
36+
<div data-expected-width="250" style="-webkit-flex: 1 0 0;"></div>
37+
<div data-expected-width="250" style="-webkit-flex: 1 0 0;"></div>
3838
</div>
3939

4040
<!-- The first two flexitems should hit their max width and the third item fills the remaining space. -->
4141
<div class="flexbox">
42-
<div data-expected-width="50" style="width: -webkit-flex(1 0 0); max-width: 50px;"></div>
43-
<div data-expected-width="300" style="width: -webkit-flex(4 0 0); max-width: 300px;"></div>
44-
<div data-expected-width="250" style="width: -webkit-flex(1 0 0);"></div>
42+
<div data-expected-width="50" style="-webkit-flex: 1 0 0; max-width: 50px;"></div>
43+
<div data-expected-width="300" style="-webkit-flex: 4 0 0; max-width: 300px;"></div>
44+
<div data-expected-width="250" style="-webkit-flex: 1 0 0;"></div>
4545
</div>
4646

4747
<div class="flexbox">
48-
<div data-expected-width="100" style="width: -webkit-flex(1 0 0); max-width: 100px;"></div>
49-
<div data-expected-width="300" style="width: -webkit-flex(1 0 200px); max-width: 300px;"></div>
50-
<div data-expected-width="200" style="width: -webkit-flex(1 0 0);"></div>
48+
<div data-expected-width="100" style="-webkit-flex: 1 0 0; max-width: 100px;"></div>
49+
<div data-expected-width="300" style="-webkit-flex: 1 0 200px; max-width: 300px;"></div>
50+
<div data-expected-width="200" style="-webkit-flex: 1 0 0;"></div>
5151
</div>
5252

5353
<!-- Test min-width. -->
5454
<div class="flexbox">
55-
<div data-expected-width="350" style="width: -webkit-flex(1 1 400px); min-width: 350px;"></div>
56-
<div data-expected-width="250" style="width: -webkit-flex(1 1 400px);"></div>
55+
<div data-expected-width="350" style="-webkit-flex: 1 1 400px; min-width: 350px;"></div>
56+
<div data-expected-width="250" style="-webkit-flex: 1 1 400px;"></div>
5757
</div>
5858

5959
<!-- The flex items can overflow the flexbox. -->
6060
<div class="flexbox">
61-
<div data-expected-width="350" style="width: -webkit-flex(1 1 400px); min-width: 350px;"></div>
62-
<div data-expected-width="300" style="width: -webkit-flex(2 0 300px); max-width: 300px;"></div>
63-
<div data-expected-width="0" style="width: -webkit-flex(1 0 0);"></div>
61+
<div data-expected-width="350" style="-webkit-flex: 1 1 400px; min-width: 350px;"></div>
62+
<div data-expected-width="300" style="-webkit-flex: 2 0 300px; max-width: 300px;"></div>
63+
<div data-expected-width="0" style="-webkit-flex: 1 0 0;"></div>
6464
</div>
6565

6666
<div class="flexbox">
67-
<div data-expected-width="100" data-offset-x="0" style="width: -webkit-flex(1 0 0); margin: 0 auto; max-width: 100px;"></div>
68-
<div data-expected-width="333" data-offset-x="100" style="width: -webkit-flex(2 0 0);"></div>
69-
<div data-expected-width="167" data-offset-x="433" style="width: -webkit-flex(1 0 0);"></div>
67+
<div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0; margin: 0 auto; max-width: 100px;"></div>
68+
<div data-expected-width="333" data-offset-x="100" style="-webkit-flex: 2 0 0;"></div>
69+
<div data-expected-width="167" data-offset-x="433" style="-webkit-flex: 1 0 0;"></div>
7070
</div>
7171

7272
<!-- min-width and max-width take priority over the preferred size. -->
7373
<div class="flexbox">
74-
<div data-expected-width="500" style="width: -webkit-flex(1 0 0); min-width: 300px"></div>
75-
<div data-expected-width="100" style="width: -webkit-flex(1 0 50%); max-width: 100px"></div>
74+
<div data-expected-width="500" style="-webkit-flex: 1 0 0; min-width: 300px"></div>
75+
<div data-expected-width="100" style="-webkit-flex: 1 0 50%; max-width: 100px"></div>
7676
</div>
7777

7878
<div class="flexbox" style="width: 200px">
79-
<div data-expected-width="150" style="width: -webkit-flex(1); min-width: 150px"></div>
80-
<div data-expected-width="50" style="width: -webkit-flex(1); max-width: 90px"></div>
79+
<div data-expected-width="150" style="-webkit-flex: 1; min-width: 150px"></div>
80+
<div data-expected-width="50" style="-webkit-flex: 1; max-width: 90px"></div>
8181
</div>
8282

8383
<div class="flexbox" style="width: 200px">
84-
<div data-expected-width="150" style="width: -webkit-flex(1); min-width: 120px"></div>
85-
<div data-expected-width="50" style="width: -webkit-flex(1); max-width: 50px"></div>
84+
<div data-expected-width="150" style="-webkit-flex: 1; min-width: 120px"></div>
85+
<div data-expected-width="50" style="-webkit-flex: 1; max-width: 50px"></div>
8686
</div>
8787

8888
<div class="flexbox" style="width: 200px">
89-
<div data-expected-width="100" style="width: -webkit-flex(1); min-width: 100px"></div>
90-
<div data-expected-width="100" style="width: -webkit-flex(3);"></div>
89+
<div data-expected-width="100" style="-webkit-flex: 1; min-width: 100px"></div>
90+
<div data-expected-width="100" style="-webkit-flex: 3;"></div>
9191
</div>
9292

9393
<div class="flexbox" style="width: 200px">
94-
<div data-expected-width="150" style="width: -webkit-flex(1 50px); min-width: 100px"></div>
95-
<div data-expected-width="50" style="width: -webkit-flex(1 100px); max-width: 50px"></div>
94+
<div data-expected-width="150" style="-webkit-flex: 1 50px; min-width: 100px"></div>
95+
<div data-expected-width="50" style="-webkit-flex: 1 100px; max-width: 50px"></div>
9696
</div>
9797

9898
<div class="flexbox">
99-
<div data-expected-width="80" style="width: -webkit-flex(1)"></div>
100-
<div data-expected-width="160" style="width: -webkit-flex(2)"></div>
101-
<div data-expected-width="360" style="width: -webkit-flex(1); min-width: 360px"></div>
99+
<div data-expected-width="80" style="-webkit-flex: 1"></div>
100+
<div data-expected-width="160" style="-webkit-flex: 2"></div>
101+
<div data-expected-width="360" style="-webkit-flex: 1; min-width: 360px"></div>
102102
</div>
103103

104104
</body>

0 commit comments

Comments
 (0)