Changeset 117385 in webkit


Ignore:
Timestamp:
May 16, 2012 8:19:31 PM (12 years ago)
Author:
tony@chromium.org
Message:

rename display:-webkit-flexbox to display:-webkit-flex
​https://bugs.webkit.org/show_bug.cgi?id=86529

Reviewed by Eric Seidel.

Source/WebCore:

Also renames -webkit-inline-flexbox to -webkit-inline-flex.

No new tests. Covered by existing tests.

  • css/CSSParser.cpp:

(WebCore::isValidKeywordPropertyAndValue):

  • css/CSSPrimitiveValueMappings.h:

(WebCore::CSSPrimitiveValue::CSSPrimitiveValue):

  • css/CSSValueKeywords.in: Update keyword values.
  • css/StyleResolver.cpp:

(WebCore::StyleResolver::collectMatchingRulesForList):

  • rendering/RenderObject.cpp:

(WebCore::RenderObject::createObject):

  • rendering/RenderObject.h:

(RenderObject):

  • rendering/style/RenderStyleConstants.h: Rename const values.

LayoutTests:

  • css3/flexbox/anonymous-block-merge-crash.html:
  • css3/flexbox/anonymous-block.html:
  • 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/css-properties-expected.txt:
  • css3/flexbox/css-properties.html:
  • css3/flexbox/display-flexbox-set-get-expected.txt:
  • css3/flexbox/display-flexbox-set-get.html:
  • css3/flexbox/flex-algorithm-min-max.html:
  • css3/flexbox/flex-algorithm-with-margins.html:
  • css3/flexbox/flex-algorithm.html:
  • css3/flexbox/flex-align-baseline.html:
  • css3/flexbox/flex-align-column.html:
  • css3/flexbox/flex-align-end.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.html:
  • css3/flexbox/flex-flow-margins.html:
  • css3/flexbox/flex-flow-orientations.html:
  • css3/flexbox/flex-flow-overflow.html:
  • css3/flexbox/flex-flow-padding.html:
  • css3/flexbox/flex-flow.html:
  • css3/flexbox/flex-item-child-overflow.html:
  • css3/flexbox/flex-no-flex.html:
  • css3/flexbox/flex-order.html:
  • css3/flexbox/flex-pack.html:
  • css3/flexbox/flexbox-overflow-auto-expected.html:
  • css3/flexbox/flexbox-overflow-auto.html:
  • css3/flexbox/floated-flexbox.html:
  • css3/flexbox/insert-text-crash.html:
  • css3/flexbox/line-wrapping.html:
  • css3/flexbox/multiline-align.html:
  • css3/flexbox/multiline-column-auto.html:
  • css3/flexbox/multiline-line-pack-horizontal-column.html:
  • css3/flexbox/multiline-line-pack.html:
  • css3/flexbox/multiline-pack.html:
  • css3/flexbox/multiline-reverse-wrap-baseline.html:
  • css3/flexbox/multiline-reverse-wrap-overflow.html:
  • css3/flexbox/multiline-shrink-to-fit.html:
  • css3/flexbox/multiline.html:
  • css3/flexbox/nested-stretch.html:
  • css3/flexbox/orthogonal-flex-directions.html:
  • css3/flexbox/position-absolute-child.html:
  • css3/flexbox/preferred-widths-orthogonal.html:
  • css3/flexbox/preferred-widths.html:
  • css3/flexbox/repaint-rtl-column.html:
  • css3/flexbox/repaint.html:
  • css3/flexbox/true-centering.html:
  • css3/flexbox/writing-modes.html:
Location:
trunk
Files:
65 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r117372 r117385  
     12012-05-16  Tony Chang  <tony@chromium.org>
     2
     3        rename display:-webkit-flexbox to display:-webkit-flex
     4        https://bugs.webkit.org/show_bug.cgi?id=86529
     5
     6        Reviewed by Eric Seidel.
     7
     8        * css3/flexbox/anonymous-block-merge-crash.html:
     9        * css3/flexbox/anonymous-block.html:
     10        * css3/flexbox/auto-height-dynamic.html:
     11        * css3/flexbox/child-overflow.html:
     12        * css3/flexbox/columns-auto-size.html:
     13        * css3/flexbox/cross-axis-scrollbar.html:
     14        * css3/flexbox/css-properties-expected.txt:
     15        * css3/flexbox/css-properties.html:
     16        * css3/flexbox/display-flexbox-set-get-expected.txt:
     17        * css3/flexbox/display-flexbox-set-get.html:
     18        * css3/flexbox/flex-algorithm-min-max.html:
     19        * css3/flexbox/flex-algorithm-with-margins.html:
     20        * css3/flexbox/flex-algorithm.html:
     21        * css3/flexbox/flex-align-baseline.html:
     22        * css3/flexbox/flex-align-column.html:
     23        * css3/flexbox/flex-align-end.html:
     24        * css3/flexbox/flex-align-max.html:
     25        * css3/flexbox/flex-align-percent-height.html:
     26        * css3/flexbox/flex-align-stretch.html:
     27        * css3/flexbox/flex-align-vertical-writing-mode.html:
     28        * css3/flexbox/flex-align.html:
     29        * css3/flexbox/flex-flow-border.html:
     30        * css3/flexbox/flex-flow-margins-auto-size.html:
     31        * css3/flexbox/flex-flow-margins.html:
     32        * css3/flexbox/flex-flow-orientations.html:
     33        * css3/flexbox/flex-flow-overflow.html:
     34        * css3/flexbox/flex-flow-padding.html:
     35        * css3/flexbox/flex-flow.html:
     36        * css3/flexbox/flex-item-child-overflow.html:
     37        * css3/flexbox/flex-no-flex.html:
     38        * css3/flexbox/flex-order.html:
     39        * css3/flexbox/flex-pack.html:
     40        * css3/flexbox/flexbox-overflow-auto-expected.html:
     41        * css3/flexbox/flexbox-overflow-auto.html:
     42        * css3/flexbox/floated-flexbox.html:
     43        * css3/flexbox/insert-text-crash.html:
     44        * css3/flexbox/line-wrapping.html:
     45        * css3/flexbox/multiline-align.html:
     46        * css3/flexbox/multiline-column-auto.html:
     47        * css3/flexbox/multiline-line-pack-horizontal-column.html:
     48        * css3/flexbox/multiline-line-pack.html:
     49        * css3/flexbox/multiline-pack.html:
     50        * css3/flexbox/multiline-reverse-wrap-baseline.html:
     51        * css3/flexbox/multiline-reverse-wrap-overflow.html:
     52        * css3/flexbox/multiline-shrink-to-fit.html:
     53        * css3/flexbox/multiline.html:
     54        * css3/flexbox/nested-stretch.html:
     55        * css3/flexbox/orthogonal-flex-directions.html:
     56        * css3/flexbox/position-absolute-child.html:
     57        * css3/flexbox/preferred-widths-orthogonal.html:
     58        * css3/flexbox/preferred-widths.html:
     59        * css3/flexbox/repaint-rtl-column.html:
     60        * css3/flexbox/repaint.html:
     61        * css3/flexbox/true-centering.html:
     62        * css3/flexbox/writing-modes.html:
     63
    1642012-05-16  Chris Rogers  <crogers@google.com>
    265

  • trunk/LayoutTests/css3/flexbox/anonymous-block-merge-crash.html

    r101411 r117385  
    1 <div style="display:-webkit-flexbox"><div id="inner"></div>If this page doesn't crash then this test passes.</div>
     1<div style="display:-webkit-flex"><div id="inner"></div>If this page doesn't crash then this test passes.</div>
    22<script>
    33if (window.layoutTestController)

  • trunk/LayoutTests/css3/flexbox/anonymous-block.html

    r99120 r117385  
    22<html>
    33<body>
    4 <div style="display: -webkit-flexbox">This text should be visible.</div>
     4<div style="display: -webkit-flex">This text should be visible.</div>
    55</body>
    66</html>

  • trunk/LayoutTests/css3/flexbox/auto-height-dynamic.html

    r113097 r117385  
    44.flexbox {
    55    width: 600px;
    6     display: -webkit-flexbox;
     6    display: -webkit-flex;
    77    background-color: #aaa;
    88    position: relative;

  • trunk/LayoutTests/css3/flexbox/child-overflow.html

    r113097 r117385  
    4242.flexbox {
    4343    border: 5px solid pink;
    44     display: -webkit-flexbox;
     44    display: -webkit-flex;
    4545    height: 100px;
    4646    width: 100px;

  • trunk/LayoutTests/css3/flexbox/columns-auto-size.html

    r113097 r117385  
    77
    88.flexbox {
    9     display: -webkit-flexbox;
     9    display: -webkit-flex;
    1010    -webkit-flex-flow: column;
    1111    background-color: #aaa;

  • trunk/LayoutTests/css3/flexbox/cross-axis-scrollbar.html

    r113097 r117385  
    88
    99.flexbox {
    10     display: -webkit-flexbox;
     10    display: -webkit-flex;
    1111    background-color: red;
    1212}

  • trunk/LayoutTests/css3/flexbox/css-properties-expected.txt

    r116166 r117385  
    1 Tests being able to set the display to -webkit-flexbox and -webkit-inline-flexbox.
     1Tests being able to set the display to -webkit-flex and -webkit-inline-flex.
    22
    33On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
    44
    55
    6 PASS flexbox.style.display is "-webkit-flexbox"
     6PASS flexbox.style.display is "-webkit-flex"
    77PASS flexbox.style.display is "inline"
    8 PASS flexbox.style.display is "-webkit-inline-flexbox"
    9 PASS flexbox.style.display is "-webkit-inline-flexbox"
     8PASS flexbox.style.display is "-webkit-inline-flex"
     9PASS flexbox.style.display is "-webkit-inline-flex"
    1010PASS flexbox.style.display is "block"
    1111PASS flexitem.style.webkitFlexOrder is ""

  • trunk/LayoutTests/css3/flexbox/css-properties.html

    r116166 r117385  
    99</div>
    1010<script>
    11 description('Tests being able to set the display to -webkit-flexbox and -webkit-inline-flexbox.');
     11description('Tests being able to set the display to -webkit-flex and -webkit-inline-flex.');
    1212
    1313var flexbox = document.getElementById("flexbox");
    1414
    15 flexbox.style.display = '-webkit-flexbox';
    16 shouldBeEqualToString('flexbox.style.display', '-webkit-flexbox');
     15flexbox.style.display = '-webkit-flex';
     16shouldBeEqualToString('flexbox.style.display', '-webkit-flex');
    1717
    1818flexbox.style.display = 'inline';
    1919shouldBeEqualToString('flexbox.style.display', 'inline');
    2020
    21 flexbox.style.display = '-webkit-inline-flexbox';
    22 shouldBeEqualToString('flexbox.style.display', '-webkit-inline-flexbox');
     21flexbox.style.display = '-webkit-inline-flex';
     22shouldBeEqualToString('flexbox.style.display', '-webkit-inline-flex');
    2323
    2424flexbox.style.display = 'junk';
    25 shouldBeEqualToString('flexbox.style.display', '-webkit-inline-flexbox');
     25shouldBeEqualToString('flexbox.style.display', '-webkit-inline-flex');
    2626
    2727flexbox.style.display = 'block';

  • trunk/LayoutTests/css3/flexbox/display-flexbox-set-get-expected.txt

    r100211 r117385  
    1 Test that setting and getting display: -webkit-flexbox and -webkit-inline-flexbox works as expected
     1Test that setting and getting display: -webkit-flex and -webkit-inline-flex works as expected
    22
    33On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
    … …  
    55
    66Test getting |display| set through CSS
    7 PASS getComputedStyle(flexboxElement, '').getPropertyValue('display') is '-webkit-flexbox'
    8 PASS getComputedStyle(inlineFlexboxElement, '').getPropertyValue('display') is '-webkit-inline-flexbox'
     7PASS getComputedStyle(flexboxElement, '').getPropertyValue('display') is '-webkit-flex'
     8PASS getComputedStyle(inlineFlexboxElement, '').getPropertyValue('display') is '-webkit-inline-flex'
    99
    1010Test getting and setting display through JS
    1111PASS getComputedStyle(element, '').getPropertyValue('display') is 'block'
    12 PASS getComputedStyle(element, '').getPropertyValue('display') is '-webkit-flexbox'
     12PASS getComputedStyle(element, '').getPropertyValue('display') is '-webkit-flex'
    1313PASS getComputedStyle(element, '').getPropertyValue('display') is 'block'
    14 PASS getComputedStyle(element, '').getPropertyValue('display') is '-webkit-inline-flexbox'
     14PASS getComputedStyle(element, '').getPropertyValue('display') is '-webkit-inline-flex'
    1515PASS successfullyParsed is true
    1616

  • trunk/LayoutTests/css3/flexbox/display-flexbox-set-get.html

    r113258 r117385  
    33<head>
    44<style>
    5 .flexbox { display: -webkit-flexbox; }
    6 .flexboxInline { display: -webkit-inline-flexbox; }
     5.flexbox { display: -webkit-flex; }
     6.flexboxInline { display: -webkit-inline-flex; }
    77</style>
    88<script src="../../fast/js/resources/js-test-pre.js"></script>
    … …  
    1212<div class="flexboxInline" id="flexboxInline"></div>
    1313<script>
    14 description('Test that setting and getting display: -webkit-flexbox and -webkit-inline-flexbox works as expected');
     14description('Test that setting and getting display: -webkit-flex and -webkit-inline-flex works as expected');
    1515
    1616debug("Test getting |display| set through CSS");
    1717var flexboxElement = document.getElementById("flexbox");
    18 shouldBe("getComputedStyle(flexboxElement, '').getPropertyValue('display')", "'-webkit-flexbox'");
     18shouldBe("getComputedStyle(flexboxElement, '').getPropertyValue('display')", "'-webkit-flex'");
    1919var inlineFlexboxElement = document.getElementById("flexboxInline");
    20 shouldBe("getComputedStyle(inlineFlexboxElement, '').getPropertyValue('display')", "'-webkit-inline-flexbox'");
     20shouldBe("getComputedStyle(inlineFlexboxElement, '').getPropertyValue('display')", "'-webkit-inline-flex'");
    2121
    2222debug("");
    … …  
    2525document.body.appendChild(element);
    2626shouldBe("getComputedStyle(element, '').getPropertyValue('display')", "'block'");
    27 element.style.display = "-webkit-flexbox";
    28 shouldBe("getComputedStyle(element, '').getPropertyValue('display')", "'-webkit-flexbox'");
     27element.style.display = "-webkit-flex";
     28shouldBe("getComputedStyle(element, '').getPropertyValue('display')", "'-webkit-flex'");
    2929
    3030element = document.createElement("div");
    3131document.body.appendChild(element);
    3232shouldBe("getComputedStyle(element, '').getPropertyValue('display')", "'block'");
    33 element.style.display = "-webkit-inline-flexbox";
    34 shouldBe("getComputedStyle(element, '').getPropertyValue('display')", "'-webkit-inline-flexbox'");
     33element.style.display = "-webkit-inline-flex";
     34shouldBe("getComputedStyle(element, '').getPropertyValue('display')", "'-webkit-inline-flex'");
    3535</script>
    3636<script src="../../fast/js/resources/js-test-post.js"></script>

  • trunk/LayoutTests/css3/flexbox/flex-algorithm-min-max.html

    r113097 r117385  
    77.flexbox {
    88    width: 600px;
    9     display: -webkit-flexbox;
     9    display: -webkit-flex;
    1010    background-color: #aaa;
    1111    position: relative;

  • trunk/LayoutTests/css3/flexbox/flex-algorithm-with-margins.html

    r113097 r117385  
    77.flexbox {
    88    width: 600px;
    9     display: -webkit-flexbox;
     9    display: -webkit-flex;
    1010    background-color: #aaa;
    1111    position: relative;

  • trunk/LayoutTests/css3/flexbox/flex-algorithm.html

    r113097 r117385  
    3030<body onload="checkFlexBoxen()">
    3131
    32 <div style="display: -webkit-flexbox" class="flexbox">
     32<div style="display: -webkit-flex" class="flexbox">
    3333  <div data-expected-width="200" style="-webkit-flex: 1"></div>
    3434  <div data-expected-width="200" style="-webkit-flex: 1"></div>
    … …  
    3636</div>
    3737
    38 <div style="display: -webkit-flexbox" class="flexbox">
     38<div style="display: -webkit-flex" class="flexbox">
    3939  <div data-expected-width="200" style="-webkit-flex: .5"></div>
    4040  <div data-expected-width="200" style="-webkit-flex: .5"></div>
    … …  
    4242</div>
    4343
    44 <div style="display: -webkit-flexbox" class="flexbox">
     44<div style="display: -webkit-flex" class="flexbox">
    4545  <div data-expected-width="300" style="-webkit-flex: 3"></div>
    4646  <div data-expected-width="200" style="-webkit-flex: 2"></div>
    … …  
    4848</div>
    4949
    50 <div style="display: -webkit-flexbox" class="flexbox">
     50<div style="display: -webkit-flex" class="flexbox">
    5151  <div data-expected-width="250" style="-webkit-flex: 1"></div>
    5252  <div data-expected-width="250" style="-webkit-flex: 1"></div>
    … …  
    5454</div>
    5555
    56 <div style="display: -webkit-flexbox" class="flexbox">
     56<div style="display: -webkit-flex" class="flexbox">
    5757  <div data-expected-width="150" style="-webkit-flex: 1"></div>
    5858  <div data-expected-width="150" style="-webkit-flex: 1"></div>
    … …  
    6161
    6262<!-- The first two boxes should fill the extra 300px evenly (each gets 150px extra). -->
    63 <div style="display: -webkit-flexbox" class="flexbox">
     63<div style="display: -webkit-flex" class="flexbox">
    6464  <div data-expected-width="150" style="-webkit-flex: 1"></div>
    6565  <div data-expected-width="350" style="-webkit-flex: 1 200px"></div>
    … …  
    6868
    6969<!-- Like the last test, except the middle box gets more space than the first box. -->
    70 <div style="display: -webkit-flexbox" class="flexbox">
     70<div style="display: -webkit-flex" class="flexbox">
    7171  <div data-expected-width="100" style="-webkit-flex: 1"></div>
    7272  <div data-expected-width="400" style="-webkit-flex: 2 33.333333%"></div>
    … …  
    7575
    7676<!-- Test some negative flexing. -->
    77 <div style="display: -webkit-flexbox" class="flexbox">
     77<div style="display: -webkit-flex" class="flexbox">
    7878  <div data-expected-width="200" style="-webkit-flex: 1 1 300px"></div>
    7979  <div data-expected-width="200" style="-webkit-flex: 2 1 300px"></div>
    … …  
    8181</div>
    8282
    83 <div style="display: -webkit-flexbox" class="flexbox">
     83<div style="display: -webkit-flex" class="flexbox">
    8484  <div data-expected-width="250" style="-webkit-flex: 1 1 300px"></div>
    8585  <div data-expected-width="150" style="-webkit-flex: 2 3 300px"></div>
    … …  
    8888
    8989<!-- Test flexitem borders. -->
    90 <div style="display: -webkit-flexbox" class="flexbox">
     90<div style="display: -webkit-flex" class="flexbox">
    9191  <div data-expected-width="250" style="-webkit-flex: 1; border-left: 150px solid black"></div>
    9292  <div data-expected-width="250" style="-webkit-flex: 1 0 0px; border-right: 150px solid orange"></div>
    … …  
    9494</div>
    9595
    96 <div style="display: -webkit-flexbox" class="flexbox">
     96<div style="display: -webkit-flex" class="flexbox">
    9797  <div data-expected-width="300" style="width: 100px; border: 100px solid black"></div>
    9898  <div data-expected-width="200" style="-webkit-flex: 2"></div>
    … …  
    101101
    102102<!-- Test flexitem padding. -->
    103 <div style="display: -webkit-flexbox" class="flexbox">
     103<div style="display: -webkit-flex" class="flexbox">
    104104  <div data-expected-width="250" style="-webkit-flex: 1; padding-left: 150px"></div>
    105105  <div data-expected-width="250" style="-webkit-flex: 1 0 0px; padding-right: 150px"></div>
    … …  
    107107</div>
    108108
    109 <div style="display: -webkit-flexbox" class="flexbox">
     109<div style="display: -webkit-flex" class="flexbox">
    110110  <div data-expected-width="300" style="width: 100px; padding: 100px"></div>
    111111  <div data-expected-width="200" style="-webkit-flex: 2"></div>
    … …  
    113113</div>
    114114
    115 <div style="display: -webkit-flexbox" class="flexbox">
     115<div style="display: -webkit-flex" class="flexbox">
    116116  <div data-expected-width="200" style="-webkit-flex: 1; padding-left: 25%"></div>
    117117  <div data-expected-width="150" style="-webkit-flex: 3;"></div>
    … …  
    119119</div>
    120120
    121 <div style="display: -webkit-flexbox" class="flexbox">
     121<div style="display: -webkit-flex" class="flexbox">
    122122  <div data-expected-width="200" style="-webkit-flex: 1; padding-left: 50px; border-right: 50px solid black"></div>
    123123  <div data-expected-width="250" style="-webkit-flex: 2; border-right: 50px solid orange"></div>
    … …  
    126126
    127127<!-- Test items with an intrinsic size. -->
    128 <div style="display: -webkit-flexbox" class="flexbox">
     128<div style="display: -webkit-flex" class="flexbox">
    129129  <div data-expected-width="120" style="-webkit-flex: 1">
    130130      <div style="width: 100px; height: 100%;"></div>
    … …  
    134134</div>
    135135
    136 <div style="display: -webkit-flexbox" class="flexbox">
     136<div style="display: -webkit-flex" class="flexbox">
    137137  <div data-expected-width="200" style="-webkit-flex: 1 0 0">
    138138      <div style="width: 100px; height: 100%;"></div>
    … …  
    144144<!-- Test border/padding/margin on the flexbox itself. -->
    145145<div data-expected-width="830" style="border: 10px solid; display: inline-block;">
    146     <div data-expected-width="700" style="display: -webkit-flexbox; padding-left: 10px; padding-right: 20px; border-left: 30px solid; border-right: 40px solid; margin-left: 50px; margin-right:60px;" class="flexbox ">
     146    <div data-expected-width="700" style="display: -webkit-flex; padding-left: 10px; padding-right: 20px; border-left: 30px solid; border-right: 40px solid; margin-left: 50px; margin-right:60px;" class="flexbox ">
    147147      <div data-offset-x="100" data-expected-width="200" style="-webkit-flex: 1"></div>
    148148      <div data-offset-x="300" data-expected-width="200" style="-webkit-flex: 1"></div>

  • trunk/LayoutTests/css3/flexbox/flex-align-baseline.html

    r107659 r117385  
    66    width: 100px;
    77    height: 100px;
    8     display: -webkit-flexbox;
     8    display: -webkit-flex;
    99    background-color: #aaa;
    1010    position: relative;

  • trunk/LayoutTests/css3/flexbox/flex-align-column.html

    r113097 r117385  
    88    width: 600px;
    99    height: 240px;
    10     display: -webkit-flexbox;
     10    display: -webkit-flex;
    1111    background-color: #aaa;
    1212    position: relative;

  • trunk/LayoutTests/css3/flexbox/flex-align-end.html

    r107659 r117385  
    66    width: 100px;
    77    height: 100px;
    8     display: -webkit-flexbox;
     8    display: -webkit-flex;
    99    background-color: #aaa;
    1010    position: relative;

  • trunk/LayoutTests/css3/flexbox/flex-align-max.html

    r113097 r117385  
    66}
    77.flexbox {
    8     display: -webkit-flexbox;
     8    display: -webkit-flex;
    99    background-color: #aaa;
    1010    position: relative;

  • trunk/LayoutTests/css3/flexbox/flex-align-percent-height.html

    r113097 r117385  
    1212.flexbox {
    1313    width: 600px;
    14     display: -webkit-flexbox;
     14    display: -webkit-flex;
    1515    background-color: #aaa;
    1616    position: relative;

  • trunk/LayoutTests/css3/flexbox/flex-align-stretch.html

    r113097 r117385  
    66}
    77.flexbox {
    8     display: -webkit-flexbox;
     8    display: -webkit-flex;
    99    background-color: #aaa;
    1010    position: relative;

  • trunk/LayoutTests/css3/flexbox/flex-align-vertical-writing-mode.html

    r113097 r117385  
    77.flexbox {
    88    height: 600px;
    9     display: -webkit-flexbox;
     9    display: -webkit-flex;
    1010    background-color: #aaa;
    1111    position: relative;

  • trunk/LayoutTests/css3/flexbox/flex-align.html

    r113097 r117385  
    77.flexbox {
    88    width: 600px;
    9     display: -webkit-flexbox;
     9    display: -webkit-flex;
    1010    background-color: #aaa;
    1111    position: relative;

  • trunk/LayoutTests/css3/flexbox/flex-flow-border.html

    r113097 r117385  
    99}
    1010.flexbox {
    11     display: -webkit-flexbox;
     11    display: -webkit-flex;
    1212    background-color: grey;
    1313    width: 100px;

  • trunk/LayoutTests/css3/flexbox/flex-flow-margins-auto-size.html

    r113097 r117385  
    99}
    1010.flexbox {
    11     display: -webkit-flexbox;
     11    display: -webkit-flex;
    1212    background-color: grey;
    1313    margin: 10px 20px 30px 40px;

  • trunk/LayoutTests/css3/flexbox/flex-flow-margins.html

    r113097 r117385  
    99}
    1010.flexbox {
    11     display: -webkit-flexbox;
     11    display: -webkit-flex;
    1212    background-color: grey;
    1313    width: 100px;

  • trunk/LayoutTests/css3/flexbox/flex-flow-orientations.html

    r101897 r117385  
    99}
    1010.flexbox {
    11     display: -webkit-flexbox;
     11    display: -webkit-flex;
    1212    background-color: grey;
    1313    width: 100px;

  • trunk/LayoutTests/css3/flexbox/flex-flow-overflow.html

    r113097 r117385  
    99}
    1010.flexbox {
    11     display: -webkit-flexbox;
     11    display: -webkit-flex;
    1212    background-color: grey;
    1313    width: 100px;

  • trunk/LayoutTests/css3/flexbox/flex-flow-padding.html

    r113097 r117385  
    99}
    1010.flexbox {
    11     display: -webkit-flexbox;
     11    display: -webkit-flex;
    1212    background-color: grey;
    1313    width: 100px;

  • trunk/LayoutTests/css3/flexbox/flex-flow.html

    r113097 r117385  
    77.flexbox {
    88    width: 600px;
    9     display: -webkit-flexbox;
     9    display: -webkit-flex;
    1010    background-color: grey;
    1111}

  • trunk/LayoutTests/css3/flexbox/flex-item-child-overflow.html

    r100324 r117385  
    66}
    77.flexbox {
    8     display: -webkit-flexbox;
     8    display: -webkit-flex;
    99    position: relative;
    1010    -webkit-flex-flow: column;

  • trunk/LayoutTests/css3/flexbox/flex-no-flex.html

    r113097 r117385  
    66}
    77.flexbox {
    8     display: -webkit-flexbox;
     8    display: -webkit-flex;
    99    background-color: #aaa;
    1010    position: relative;

  • trunk/LayoutTests/css3/flexbox/flex-order.html

    r113097 r117385  
    3333<body>
    3434
    35 <div style="display: -webkit-flexbox" class="horizontal-box">
     35<div style="display: -webkit-flex" class="horizontal-box">
    3636  <div class="first"  style="-webkit-flex: 1; -webkit-flex-order: 0"></div>
    3737  <div class="second" style="-webkit-flex: 1;"></div>
    … …  
    4040</div>
    4141
    42 <div style="display: -webkit-flexbox" class="horizontal-box">
     42<div style="display: -webkit-flex" class="horizontal-box">
    4343  <div class="fourth" style="-webkit-flex: 1; -webkit-flex-order: 4"></div>
    4444  <div class="third"  style="-webkit-flex: 1; -webkit-flex-order: 3"></div>
    … …  
    4848
    4949<!-- The example from the spec. -->
    50 <div style="display: -webkit-flexbox" class="horizontal-box">
     50<div style="display: -webkit-flex" class="horizontal-box">
    5151  <div class="third"  style="-webkit-flex: 1; -webkit-flex-order: 1"></div>
    5252  <div class="first"  style="-webkit-flex: 1"></div>
    … …  
    5555</div>
    5656
    57 <div style="display: -webkit-flexbox" class="horizontal-box">
     57<div style="display: -webkit-flex" class="horizontal-box">
    5858  <div class="fourth" style="-webkit-flex: 1; -webkit-flex-order: 2"></div>
    5959  <div class="second" style="-webkit-flex: 1"></div>
    … …  
    6262</div>
    6363
    64 <div style="display: -webkit-flexbox" class="horizontal-box">
     64<div style="display: -webkit-flex" class="horizontal-box">
    6565  <div class="fourth" style="-webkit-flex: 1; -webkit-flex-order: 2000000000"></div>
    6666  <div class="second" style="-webkit-flex: 1; -webkit-flex-order: 1000000000"></div>
    … …  
    7070
    7171<!-- Floating numbers are ignored and we use the default of 1 instead. -->
    72 <div style="display: -webkit-flexbox" class="horizontal-box">
     72<div style="display: -webkit-flex" class="horizontal-box">
    7373  <div class="second" style="-webkit-flex: 1; -webkit-flex-order: 2.5"></div>
    7474  <div class="fourth" style="-webkit-flex: 1; -webkit-flex-order: 2"></div>
    … …  
    7777</div>
    7878
    79 <div style="display: -webkit-flexbox" class="horizontal-box">
     79<div style="display: -webkit-flex" class="horizontal-box">
    8080  <div class="second" style="-webkit-flex: 1; -webkit-flex-order: 0"></div>
    8181  <div class="first" style="-webkit-flex: 1; -webkit-flex-order: -1"></div>
    … …  
    8686<!-- Values greater than what can be stored in an int are clamped from
    8787     -2,147,483,646 (int min + 2) to 2,147,483,647. -->
    88 <div style="display: -webkit-flexbox" class="horizontal-box">
     88<div style="display: -webkit-flex" class="horizontal-box">
    8989  <div class="third"  style="-webkit-flex: 1; -webkit-flex-order: 4000000000"></div>
    9090  <div class="fourth" style="-webkit-flex: 1; -webkit-flex-order: 3000000000"></div>
    … …  
    9393</div>
    9494
    95 <div style="display: -webkit-flexbox" class="horizontal-box">
     95<div style="display: -webkit-flex" class="horizontal-box">
    9696  <div class="second" style="-webkit-flex: 1; -webkit-flex-order: 4000000000"></div>
    9797  <div class="third"  style="-webkit-flex: 1; -webkit-flex-order: 3000000000"></div>
    … …  
    100100</div>
    101101
    102 <div style="display: -webkit-flexbox" class="horizontal-box">
     102<div style="display: -webkit-flex" class="horizontal-box">
    103103  <div class="third"  style="-webkit-flex: 1; -webkit-flex-order: -2147483645"></div>
    104104  <div class="first"  style="-webkit-flex: 1; -webkit-flex-order: -2147483646"></div>
    … …  
    108108
    109109<!-- This should not crash. -->
    110 <div style="display: -webkit-flexbox" class="horizontal-box"></div>
     110<div style="display: -webkit-flex" class="horizontal-box"></div>
    111111
    112112<div style="position:absolute; left: -10000px;">You should see identical green bars going from light green

  • trunk/LayoutTests/css3/flexbox/flex-pack.html

    r113097 r117385  
    77.flexbox {
    88    width: 600px;
    9     display: -webkit-flexbox;
     9    display: -webkit-flex;
    1010    background-color: #aaa;
    1111    position: relative;

  • trunk/LayoutTests/css3/flexbox/flexbox-overflow-auto-expected.html

    r105903 r117385  
    44<style>
    55.test-row {
    6     display: -webkit-flexbox;
     6    display: -webkit-flex;
    77    margin-bottom: 5px;
    88}

  • trunk/LayoutTests/css3/flexbox/flexbox-overflow-auto.html

    r105903 r117385  
    44<style>
    55.test-row {
    6     display: -webkit-flexbox;
     6    display: -webkit-flex;
    77    margin-bottom: 5px;
    88}
    … …  
    4848.flexbox {
    4949    border: 0 solid pink;
    50     display: -webkit-flexbox;
     50    display: -webkit-flex;
    5151    height: 100px;
    5252    width: 100px;

  • trunk/LayoutTests/css3/flexbox/floated-flexbox.html

    r107112 r117385  
    33<style>
    44.flexbox {
    5     display: -webkit-flexbox;
     5    display: -webkit-flex;
    66    background-color: #aaa;
    77    border: 5px solid blue;

  • trunk/LayoutTests/css3/flexbox/insert-text-crash.html

    r104645 r117385  
    11<style>
    22#el2 {
    3     display: -webkit-flexbox;
     3    display: -webkit-flex;
    44    border: 1px solid red;
    55}

  • trunk/LayoutTests/css3/flexbox/line-wrapping.html

    r113097 r117385  
    1212}
    1313.flexbox {
    14     display: -webkit-flexbox;
     14    display: -webkit-flex;
    1515    background-color: gray;
    1616    position: relative;

  • trunk/LayoutTests/css3/flexbox/multiline-align.html

    r113097 r117385  
    44.flexbox {
    55    position: relative;
    6     display: -webkit-flexbox;
     6    display: -webkit-flex;
    77    background-color: grey;
    88    max-width: 600px;

  • trunk/LayoutTests/css3/flexbox/multiline-column-auto.html

    r112544 r117385  
    33<style>
    44.flexbox {
    5     display: -webkit-flexbox;
     5    display: -webkit-flex;
    66    background-color: #aaa;
    77    position: relative;

  • trunk/LayoutTests/css3/flexbox/multiline-line-pack-horizontal-column.html

    r113097 r117385  
    44.flexbox {
    55    position: relative;
    6     display: -webkit-flexbox;
     6    display: -webkit-flex;
    77    background-color: grey;
    88    width: 600px;

  • trunk/LayoutTests/css3/flexbox/multiline-line-pack.html

    r112544 r117385  
    33<style>
    44.flexbox {
    5     display: -webkit-flexbox;
     5    display: -webkit-flex;
    66    background-color: #aaa;
    77    position: relative;

  • trunk/LayoutTests/css3/flexbox/multiline-pack.html

    r112544 r117385  
    44.flexbox {
    55    position: relative;
    6     display: -webkit-flexbox;
     6    display: -webkit-flex;
    77    background-color: grey;
    88    max-width: 100px;

  • trunk/LayoutTests/css3/flexbox/multiline-reverse-wrap-baseline.html

    r113097 r117385  
    44.flexbox {
    55    width: 200px;
    6     display: -webkit-flexbox;
     6    display: -webkit-flex;
    77    background-color: #aaa;
    88    position: relative;

  • trunk/LayoutTests/css3/flexbox/multiline-reverse-wrap-overflow.html

    r113097 r117385  
    33<style>
    44.flexbox {
    5     display: -webkit-flexbox;
     5    display: -webkit-flex;
    66    background-color: #aaa;
    77    position: relative;

  • trunk/LayoutTests/css3/flexbox/multiline-shrink-to-fit.html

    r112544 r117385  
    33<style>
    44.flexbox {
    5     display: -webkit-flexbox;
     5    display: -webkit-flex;
    66    background-color: #aaa;
    77    position: relative;

  • trunk/LayoutTests/css3/flexbox/multiline.html

    r113097 r117385  
    44.flexbox {
    55    position: relative;
    6     display: -webkit-flexbox;
     6    display: -webkit-flex;
    77    background-color: grey;
    88    max-width: 600px;

  • trunk/LayoutTests/css3/flexbox/nested-stretch.html

    r116038 r117385  
    1111
    1212.flexbox {
    13   display: -webkit-flexbox;
     13  display: -webkit-flex;
    1414}
    1515
    … …  
    1919
    2020.column {
    21   display: -webkit-flexbox;
     21  display: -webkit-flex;
    2222  -webkit-flex-direction: column;
    2323}

  • trunk/LayoutTests/css3/flexbox/orthogonal-flex-directions.html

    r113097 r117385  
    77.flexbox {
    88    width: 600px;
    9     display: -webkit-flexbox;
     9    display: -webkit-flex;
    1010    background-color: #aaa;
    1111    position: relative;
    … …  
    3333
    3434.nested {
    35     display: -webkit-flexbox; 
     35    display: -webkit-flex; 
    3636    background-color: #ddd;
    3737}

  • trunk/LayoutTests/css3/flexbox/position-absolute-child.html

    r113097 r117385  
    1111
    1212.flexbox {
    13     display: -webkit-flexbox;
     13    display: -webkit-flex;
    1414    background-color: #aaa;
    1515    position: relative;

  • trunk/LayoutTests/css3/flexbox/preferred-widths-orthogonal.html

    r107624 r117385  
    33<style>
    44.flexbox {
    5     display: -webkit-flexbox;
     5    display: -webkit-flex;
    66    background-color: #aaa;
    77    float: left;
    … …  
    4343
    4444.nested {
    45     display: -webkit-flexbox;
     45    display: -webkit-flex;
    4646    background-color: #ddd;
    4747}

  • trunk/LayoutTests/css3/flexbox/preferred-widths.html

    r107624 r117385  
    33<style>
    44.flexbox {
    5     display: -webkit-flexbox;
     5    display: -webkit-flex;
    66    background-color: grey;
    77    float: left;

  • trunk/LayoutTests/css3/flexbox/repaint-rtl-column.html

    r113097 r117385  
    44<style>
    55#flexbox {
    6   display: -webkit-flexbox;
     6  display: -webkit-flex;
    77  -webkit-flex-flow: column;
    88  height: 300px;

  • trunk/LayoutTests/css3/flexbox/repaint.html

    r113097 r117385  
    44<style>
    55#flexbox {
    6   display: -webkit-flexbox;
     6  display: -webkit-flex;
    77}
    88

  • trunk/LayoutTests/css3/flexbox/true-centering.html

    r107446 r117385  
    55    width: 100px;
    66    height: 100px;
    7     display: -webkit-flexbox;
     7    display: -webkit-flex;
    88    background-color: #aaa;
    99    position: relative;

  • trunk/LayoutTests/css3/flexbox/writing-modes.html

    r113097 r117385  
    77.flexbox {
    88    width: 600px;
    9     display: -webkit-flexbox;
     9    display: -webkit-flex;
    1010    background-color: grey;
    1111}
    … …  
    201201
    202202<div style="position: relative;">
    203     <div data-expected-width="600" style="direction: rtl; display: -webkit-flexbox; margin-left: 10px; margin-right:20px;" class="flexbox">
     203    <div data-expected-width="600" style="direction: rtl; display: -webkit-flex; margin-left: 10px; margin-right:20px;" class="flexbox">
    204204      <div data-expected-width="75" data-offset-x="535" style="-webkit-flex: 1 0 0; margin: 0 auto;"></div>
    205205      <div data-expected-width="350" data-offset-x="185" style="-webkit-flex: 2 0 0; padding: 0 100px;"></div>
    … …  
    209209
    210210<div style="position: relative;">
    211     <div data-expected-width="700" style="direction: rtl; display: -webkit-flexbox; padding-left: 10px; padding-right: 20px; border-style: solid; border-left: 30px solid; border-right: 40px solid;" class="flexbox ">
     211    <div data-expected-width="700" style="direction: rtl; display: -webkit-flex; padding-left: 10px; padding-right: 20px; border-style: solid; border-left: 30px solid; border-right: 40px solid;" class="flexbox ">
    212212      <div data-expected-width="75" data-offset-x="565" style="-webkit-flex: 1 0 0; margin: 0 auto;"></div>
    213213      <div data-expected-width="350" data-offset-x="215" style="-webkit-flex: 2 0 0; padding: 0 100px;"></div>

  • trunk/LayoutTests/fast/multicol/span/clone-flexbox.html

    r108543 r117385  
    1717var div1 = document.createElement('div');
    1818div1.setAttribute('id', 'div1');
    19 flexbox1.style.display = '-webkit-flexbox';
     19flexbox1.style.display = '-webkit-flex';
    2020flexbox1.appendChild(document.createTextNode('a'));
    2121flexbox1.appendChild(div1);

  • trunk/Source/WebCore/ChangeLog

    r117384 r117385  
     12012-05-16  Tony Chang  <tony@chromium.org>
     2
     3        rename display:-webkit-flexbox to display:-webkit-flex
     4        https://bugs.webkit.org/show_bug.cgi?id=86529
     5
     6        Reviewed by Eric Seidel.
     7
     8        Also renames -webkit-inline-flexbox to -webkit-inline-flex.
     9
     10        No new tests. Covered by existing tests.
     11
     12        * css/CSSParser.cpp:
     13        (WebCore::isValidKeywordPropertyAndValue):
     14        * css/CSSPrimitiveValueMappings.h:
     15        (WebCore::CSSPrimitiveValue::CSSPrimitiveValue):
     16        * css/CSSValueKeywords.in: Update keyword values.
     17        * css/StyleResolver.cpp:
     18        (WebCore::StyleResolver::collectMatchingRulesForList):
     19        * rendering/RenderObject.cpp:
     20        (WebCore::RenderObject::createObject):
     21        * rendering/RenderObject.h:
     22        (RenderObject):
     23        * rendering/style/RenderStyleConstants.h: Rename const values.
     24
    1252012-05-16  Greg Billock  <gbillock@google.com>
    226

  • trunk/Source/WebCore/css/CSSParser.cpp

    r116723 r117385  
    533533        // inline-table | table-row-group | table-header-group | table-footer-group | table-row |
    534534        // table-column-group | table-column | table-cell | table-caption | -webkit-box | -webkit-inline-box | none | inherit
    535         // -webkit-flexbox | -webkit-inline-flexbox | -webkit-grid | -webkit-inline-grid
    536         if ((valueID >= CSSValueInline && valueID <= CSSValueWebkitInlineFlexbox) || valueID == CSSValueNone)
     535        // -webkit-flex | -webkit-inline-flex | -webkit-grid | -webkit-inline-grid
     536        if ((valueID >= CSSValueInline && valueID <= CSSValueWebkitInlineFlex) || valueID == CSSValueNone)
    537537            return true;
    538538#if ENABLE(CSS_GRID_LAYOUT)

  • trunk/Source/WebCore/css/CSSPrimitiveValueMappings.h

    r115668 r117385  
    11121112            m_value.ident = CSSValueWebkitInlineBox;
    11131113            break;
    1114         case FLEXBOX:
    1115             m_value.ident = CSSValueWebkitFlexbox;
    1116             break;
    1117         case INLINE_FLEXBOX:
    1118             m_value.ident = CSSValueWebkitInlineFlexbox;
     1114        case FLEX:
     1115            m_value.ident = CSSValueWebkitFlex;
     1116            break;
     1117        case INLINE_FLEX:
     1118            m_value.ident = CSSValueWebkitInlineFlex;
    11191119            break;
    11201120#if ENABLE(CSS_GRID_LAYOUT)

  • trunk/Source/WebCore/css/CSSValueKeywords.in

    r115668 r117385  
    333333-webkit-box
    334334-webkit-inline-box
    335 -webkit-flexbox
    336 -webkit-inline-flexbox
     335-webkit-flex
     336-webkit-inline-flex
    337337#if defined(ENABLE_CSS_GRID_LAYOUT) && ENABLE_CSS_GRID_LAYOUT
    338338-webkit-grid

  • trunk/Source/WebCore/css/StyleResolver.cpp

    r117084 r117385  
    19131913    case TABLE:
    19141914    case BOX:
    1915     case FLEXBOX:
     1915    case FLEX:
    19161916#if ENABLE(CSS_GRID_LAYOUT)
    19171917    case GRID:
    … …  
    19281928    case INLINE_BOX:
    19291929        return BOX;
    1930     case INLINE_FLEXBOX:
    1931         return FLEXBOX;
     1930    case INLINE_FLEX:
     1931        return FLEX;
    19321932#if ENABLE(CSS_GRID_LAYOUT)
    19331933    case INLINE_GRID:

  • trunk/Source/WebCore/rendering/RenderObject.cpp

    r117007 r117385  
    191191    case INLINE_BOX:
    192192        return new (arena) RenderDeprecatedFlexibleBox(node);
    193     case FLEXBOX:
    194     case INLINE_FLEXBOX:
     193    case FLEX:
     194    case INLINE_FLEX:
    195195        return new (arena) RenderFlexibleBox(node);
    196196    }

  • trunk/Source/WebCore/rendering/RenderObject.h

    r117007 r117385  
    842842    virtual bool isStretchingChildren() const { return false; }
    843843
    844     // Virtual function helper for the new FlexibleBox Layout (display: -webkit-flexbox).
     844    // Virtual function helper for the new FlexibleBox Layout (display: -webkit-flex).
    845845    virtual bool isFlexibleBox() const { return false; }
    846846

  • trunk/Source/WebCore/rendering/style/RenderStyleConstants.h

    r115668 r117385  
    411411    TABLE_COLUMN_GROUP, TABLE_COLUMN, TABLE_CELL,
    412412    TABLE_CAPTION, BOX, INLINE_BOX,
    413     FLEXBOX, INLINE_FLEXBOX,
     413    FLEX, INLINE_FLEX,
    414414#if ENABLE(CSS_GRID_LAYOUT)
    415415    GRID, INLINE_GRID,
Note: See TracChangeset for help on using the changeset viewer.