Changeset 171183 in webkit


Ignore:
Timestamp:
Jul 17, 2014 8:58:13 AM (10 years ago)
Author:
Manuel Rego Casasnovas
Message:

[CSS Grid Layout] Add element.style coverage for grid-auto-flow
https://bugs.webkit.org/show_bug.cgi?id=134966

Reviewed by Sergio Villar Senin.

As follow-up patch after r170996 we're adding new test cases for
grid-auto-flow to check the correct behavior of element.style.

  • fast/css-grid-layout/grid-auto-flow-get-set-expected.txt: Updated

expectations accordingly.

  • fast/css-grid-layout/grid-auto-flow-get-set.html: Updated test to add

checks for element.style.

  • fast/css-grid-layout/resources/grid-definitions-parsing-utils.js:

(checkGridAutoFlowSetCSSValue): Add new helper method to check
grid-auto-flow property.
(checkGridAutoFlowSetJSValue): Ditto.

Location:
trunk/LayoutTests
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/LayoutTests/ChangeLog

    r171169 r171183  
     12014-07-17  Manuel Rego Casasnovas  <rego@igalia.com>
     2
     3        [CSS Grid Layout] Add element.style coverage for grid-auto-flow
     4        https://bugs.webkit.org/show_bug.cgi?id=134966
     5
     6        Reviewed by Sergio Villar Senin.
     7
     8        As follow-up patch after r170996 we're adding new test cases for
     9        grid-auto-flow to check the correct behavior of element.style.
     10
     11        * fast/css-grid-layout/grid-auto-flow-get-set-expected.txt: Updated
     12        expectations accordingly.
     13        * fast/css-grid-layout/grid-auto-flow-get-set.html: Updated test to add
     14        checks for element.style.
     15        * fast/css-grid-layout/resources/grid-definitions-parsing-utils.js:
     16        (checkGridAutoFlowSetCSSValue): Add new helper method to check
     17        grid-auto-flow property.
     18        (checkGridAutoFlowSetJSValue): Ditto.
     19
    1202014-07-16  Carlos Alberto Lopez Perez  <clopez@igalia.com>
    221
  • trunk/LayoutTests/fast/css-grid-layout/grid-auto-flow-get-set-expected.txt

    r170996 r171183  
    1616PASS window.getComputedStyle(gridAutoFlowColumnStack, '').getPropertyValue('-webkit-grid-auto-flow') is 'column stack'
    1717PASS window.getComputedStyle(gridAutoFlowRowStack, '').getPropertyValue('-webkit-grid-auto-flow') is 'row stack'
     18PASS window.getComputedStyle(gridAutoFlowInherit, '').getPropertyValue('-webkit-grid-auto-flow') is 'column'
     19PASS window.getComputedStyle(gridAutoFlowNoInherit, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
     20
     21Test getting -webkit-grid-auto-flow bad values set through CSS
    1822PASS window.getComputedStyle(gridAutoFlowNone, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
    1923PASS window.getComputedStyle(gridAutoFlowColumns, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
     
    2529PASS window.getComputedStyle(gridAutoFlowDenseRowStack, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
    2630PASS window.getComputedStyle(gridAutoFlowStackRowRow, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
    27 PASS window.getComputedStyle(gridAutoFlowInherit, '').getPropertyValue('-webkit-grid-auto-flow') is 'column'
    28 PASS window.getComputedStyle(gridAutoFlowNoInherit, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
    2931
    3032Test the initial value
     33PASS element.style.webkitGridAutoFlow is ''
    3134PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
    3235
    3336Test getting and setting -webkit-grid-auto-flow through JS
     37PASS element.style.webkitGridAutoFlow is 'column'
    3438PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'column'
     39PASS element.style.webkitGridAutoFlow is 'column dense'
    3540PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'column dense'
     41PASS element.style.webkitGridAutoFlow is 'row dense'
    3642PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'row dense'
     43PASS element.style.webkitGridAutoFlow is 'column dense'
    3744PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'column dense'
     45PASS element.style.webkitGridAutoFlow is 'row dense'
    3846PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'row dense'
     47PASS element.style.webkitGridAutoFlow is 'row'
    3948PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
     49PASS element.style.webkitGridAutoFlow is 'row stack'
    4050PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'row stack'
     51PASS element.style.webkitGridAutoFlow is 'column stack'
    4152PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'column stack'
     53PASS element.style.webkitGridAutoFlow is 'row stack'
    4254PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'row stack'
     55PASS element.style.webkitGridAutoFlow is 'column stack'
    4356PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'column stack'
     57PASS element.style.webkitGridAutoFlow is 'row stack'
    4458PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'row stack'
    4559
    4660Test getting and setting bad values for -webkit-grid-auto-flow through JS
     61PASS element.style.webkitGridAutoFlow is ''
    4762PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
     63PASS element.style.webkitGridAutoFlow is ''
    4864PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
     65PASS element.style.webkitGridAutoFlow is ''
    4966PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
     67PASS element.style.webkitGridAutoFlow is ''
    5068PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
     69PASS element.style.webkitGridAutoFlow is ''
    5170PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
     71PASS element.style.webkitGridAutoFlow is ''
    5272PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
    5373
    5474Test setting -webkit-grid-auto-flow to 'initial' through JS
     75PASS element.style.webkitGridAutoFlow is 'initial'
    5576PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
    5677PASS successfullyParsed is true
  • trunk/LayoutTests/fast/css-grid-layout/grid-auto-flow-get-set.html

    r170996 r171183  
    9090<div class="grid gridAutoFlowDenseRowStack" id="gridAutoFlowDenseRowStack"></div>
    9191<div class="grid gridAutoFlowStackRowRow" id="gridAutoFlowStackRowRow"></div>
     92<script src="resources/grid-definitions-parsing-utils.js"></script>
    9293<script>
    9394    description('Test that setting and getting -webkit-grid-auto-flow works as expected');
    9495
    9596    debug("Test getting -webkit-grid-auto-flow set through CSS");
    96     var gridAutoFlowColumn = document.getElementById("gridAutoFlowColumn");
    97     shouldBe("window.getComputedStyle(gridAutoFlowColumn, '').getPropertyValue('-webkit-grid-auto-flow')", "'column'");
     97    checkGridAutoFlowSetCSSValue("gridAutoFlowColumn", "column");
     98    checkGridAutoFlowSetCSSValue("gridAutoFlowRow", "row");
     99    checkGridAutoFlowSetCSSValue("gridAutoFlowColumnDense", "column dense");
     100    checkGridAutoFlowSetCSSValue("gridAutoFlowRowDense", "row dense");
     101    checkGridAutoFlowSetCSSValue("gridAutoFlowDenseColumn", "column dense");
     102    checkGridAutoFlowSetCSSValue("gridAutoFlowDenseRow", "row dense");
     103    checkGridAutoFlowSetCSSValue("gridAutoFlowStack", "row stack");
     104    checkGridAutoFlowSetCSSValue("gridAutoFlowStackColumn", "column stack");
     105    checkGridAutoFlowSetCSSValue("gridAutoFlowStackRow", "row stack");
     106    checkGridAutoFlowSetCSSValue("gridAutoFlowColumnStack", "column stack");
     107    checkGridAutoFlowSetCSSValue("gridAutoFlowRowStack", "row stack");
     108    checkGridAutoFlowSetCSSValue("gridAutoFlowInherit", "column");
     109    checkGridAutoFlowSetCSSValue("gridAutoFlowNoInherit", "row");
    98110
    99     var gridAutoFlowRow = document.getElementById("gridAutoFlowRow");
    100     shouldBe("window.getComputedStyle(gridAutoFlowRow, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
    101 
    102     var gridAutoFlowColumnDense = document.getElementById("gridAutoFlowColumnDense");
    103     shouldBe("window.getComputedStyle(gridAutoFlowColumnDense, '').getPropertyValue('-webkit-grid-auto-flow')", "'column dense'");
    104 
    105     var gridAutoFlowRowDense = document.getElementById("gridAutoFlowRowDense");
    106     shouldBe("window.getComputedStyle(gridAutoFlowRowDense, '').getPropertyValue('-webkit-grid-auto-flow')", "'row dense'");
    107 
    108     var gridAutoFlowDenseColumn = document.getElementById("gridAutoFlowDenseColumn");
    109     shouldBe("window.getComputedStyle(gridAutoFlowDenseColumn, '').getPropertyValue('-webkit-grid-auto-flow')", "'column dense'");
    110 
    111     var gridAutoFlowDenseRow = document.getElementById("gridAutoFlowDenseRow");
    112     shouldBe("window.getComputedStyle(gridAutoFlowDenseRow, '').getPropertyValue('-webkit-grid-auto-flow')", "'row dense'");
    113 
    114     var gridAutoFlowStack = document.getElementById("gridAutoFlowStack");
    115     shouldBe("window.getComputedStyle(gridAutoFlowStack, '').getPropertyValue('-webkit-grid-auto-flow')", "'row stack'");
    116 
    117     var gridAutoFlowStackColumn = document.getElementById("gridAutoFlowStackColumn");
    118     shouldBe("window.getComputedStyle(gridAutoFlowStackColumn, '').getPropertyValue('-webkit-grid-auto-flow')", "'column stack'");
    119 
    120     var gridAutoFlowStackRow = document.getElementById("gridAutoFlowStackRow");
    121     shouldBe("window.getComputedStyle(gridAutoFlowStackRow, '').getPropertyValue('-webkit-grid-auto-flow')", "'row stack'");
    122 
    123     var gridAutoFlowColumnStack = document.getElementById("gridAutoFlowColumnStack");
    124     shouldBe("window.getComputedStyle(gridAutoFlowColumnStack, '').getPropertyValue('-webkit-grid-auto-flow')", "'column stack'");
    125 
    126     var gridAutoFlowRowStack = document.getElementById("gridAutoFlowRowStack");
    127     shouldBe("window.getComputedStyle(gridAutoFlowRowStack, '').getPropertyValue('-webkit-grid-auto-flow')", "'row stack'");
    128 
    129     var gridAutoFlowNone= document.getElementById("gridAutoFlowNone");
    130     shouldBe("window.getComputedStyle(gridAutoFlowNone, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
    131 
    132     var gridAutoFlowColumns = document.getElementById("gridAutoFlowColumns");
    133     shouldBe("window.getComputedStyle(gridAutoFlowColumns, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
    134 
    135     var gridAutoFlowRows = document.getElementById("gridAutoFlowRows");
    136     shouldBe("window.getComputedStyle(gridAutoFlowRows, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
    137 
    138     var gridAutoFlowDense = document.getElementById("gridAutoFlowDense");
    139     shouldBe("window.getComputedStyle(gridAutoFlowDense, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
    140 
    141     var gridAutoFlowColumnFoo = document.getElementById("gridAutoFlowColumnFoo");
    142     shouldBe("window.getComputedStyle(gridAutoFlowColumnFoo, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
    143 
    144     var gridAutoFlowColumnColumn = document.getElementById("gridAutoFlowColumnColumn");
    145     shouldBe("window.getComputedStyle(gridAutoFlowColumnColumn, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
    146 
    147     var gridAutoFlowDenseColumnStack = document.getElementById("gridAutoFlowDenseColumnStack");
    148     shouldBe("window.getComputedStyle(gridAutoFlowDenseColumnStack, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
    149 
    150     var gridAutoFlowDenseRowStack = document.getElementById("gridAutoFlowDenseRowStack");
    151     shouldBe("window.getComputedStyle(gridAutoFlowDenseRowStack, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
    152 
    153     var gridAutoFlowStackRowRow = document.getElementById("gridAutoFlowStackRowRow");
    154     shouldBe("window.getComputedStyle(gridAutoFlowStackRowRow, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
    155 
    156     var gridAutoFlowInherit = document.getElementById("gridAutoFlowInherit");
    157     shouldBe("window.getComputedStyle(gridAutoFlowInherit, '').getPropertyValue('-webkit-grid-auto-flow')", "'column'");
    158 
    159     var gridAutoFlowNoInherit = document.getElementById("gridAutoFlowNoInherit");
    160     shouldBe("window.getComputedStyle(gridAutoFlowNoInherit, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
     111    debug("");
     112    debug("Test getting -webkit-grid-auto-flow bad values set through CSS");
     113    checkGridAutoFlowSetCSSValue("gridAutoFlowNone", "row");
     114    checkGridAutoFlowSetCSSValue("gridAutoFlowColumns", "row");
     115    checkGridAutoFlowSetCSSValue("gridAutoFlowRows", "row");
     116    checkGridAutoFlowSetCSSValue("gridAutoFlowDense", "row");
     117    checkGridAutoFlowSetCSSValue("gridAutoFlowColumnFoo", "row");
     118    checkGridAutoFlowSetCSSValue("gridAutoFlowColumnColumn", "row");
     119    checkGridAutoFlowSetCSSValue("gridAutoFlowDenseColumnStack", "row");
     120    checkGridAutoFlowSetCSSValue("gridAutoFlowDenseRowStack", "row");
     121    checkGridAutoFlowSetCSSValue("gridAutoFlowStackRowRow", "row");
    161122
    162123    debug("");
    163124    debug("Test the initial value");
    164     element = document.createElement("div");
    165     document.body.appendChild(element);
    166     shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
     125    checkGridAutoFlowSetJSValue("", "", "row");
    167126
    168127    debug("");
    169128    debug("Test getting and setting -webkit-grid-auto-flow through JS");
    170     element.style.webkitGridAutoFlow = "column";
    171     shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'column'");
    172     element.style.webkitGridAutoFlow = "column dense";
    173     shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'column dense'");
    174     element.style.webkitGridAutoFlow = "row dense";
    175     shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'row dense'");
    176     element.style.webkitGridAutoFlow = "dense column";
    177     shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'column dense'");
    178     element.style.webkitGridAutoFlow = "dense row";
    179     shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'row dense'");
    180     element.style.webkitGridAutoFlow = "row";
    181     shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
    182     element.style.webkitGridAutoFlow = "stack";
    183     shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'row stack'");
    184     element.style.webkitGridAutoFlow = "stack column";
    185     shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'column stack'");
    186     element.style.webkitGridAutoFlow = "stack row";
    187     shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'row stack'");
    188     element.style.webkitGridAutoFlow = "column stack";
    189     shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'column stack'");
    190     element.style.webkitGridAutoFlow = "row stack";
    191     shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'row stack'");
     129    checkGridAutoFlowSetJSValue("column", "column", "column");
     130    checkGridAutoFlowSetJSValue("column dense", "column dense", "column dense");
     131    checkGridAutoFlowSetJSValue("row dense", "row dense", "row dense");
     132    checkGridAutoFlowSetJSValue("dense column", "column dense", "column dense");
     133    checkGridAutoFlowSetJSValue("dense row", "row dense", "row dense");
     134    checkGridAutoFlowSetJSValue("row", "row", "row");
     135    checkGridAutoFlowSetJSValue("stack", "row stack", "row stack");
     136    checkGridAutoFlowSetJSValue("stack column", "column stack", "column stack");
     137    checkGridAutoFlowSetJSValue("stack row", "row stack", "row stack");
     138    checkGridAutoFlowSetJSValue("column stack", "column stack", "column stack");
     139    checkGridAutoFlowSetJSValue("row stack", "row stack", "row stack");
    192140
    193141    debug("");
    194142    debug("Test getting and setting bad values for -webkit-grid-auto-flow through JS");
    195     element = document.createElement("div");
    196     document.body.appendChild(element);
    197     element.style.webkitGridAutoFlow = "noone";
    198     shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
    199     element.style.webkitGridAutoFlow = "dense";
    200     shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
    201     element.style.webkitGridAutoFlow = "column column";
    202     shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
    203     element.style.webkitGridAutoFlow = "dense column stack";
    204     shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
    205     element.style.webkitGridAutoFlow = "dense row stack";
    206     shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
    207     element.style.webkitGridAutoFlow = "stack row row";
    208     shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
     143    checkGridAutoFlowSetJSValue("noone", "", "row");
     144    checkGridAutoFlowSetJSValue("dense", "", "row");
     145    checkGridAutoFlowSetJSValue("column column", "", "row");
     146    checkGridAutoFlowSetJSValue("dense column stack", "", "row");
     147    checkGridAutoFlowSetJSValue("dense row stack", "", "row");
     148    checkGridAutoFlowSetJSValue("stack row row", "", "row");
    209149
    210150    debug("");
    211151    debug("Test setting -webkit-grid-auto-flow to 'initial' through JS");
    212152    // Reusing the value so that we can check that it is set back to its initial value.
    213     element.style.webkitGridAutoFlow = "initial";
    214     shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
     153    checkGridAutoFlowSetJSValue("initial", "initial", "row");
    215154</script>
    216155<script src="../../resources/js-test-post.js"></script>
  • trunk/LayoutTests/fast/css-grid-layout/resources/grid-definitions-parsing-utils.js

    r163625 r171183  
    4646    document.body.removeChild(element);
    4747}
     48
     49function checkGridAutoFlowSetCSSValue(elementId, expectedValue) {
     50    shouldBe("window.getComputedStyle(" + elementId + ", '').getPropertyValue('-webkit-grid-auto-flow')", "'" + expectedValue + "'");
     51}
     52
     53function checkGridAutoFlowSetJSValue(newValue, expectedStyleValue, expectedComputedStyleValue) {
     54    element = document.createElement("div");
     55    document.body.appendChild(element);
     56    if (newValue)
     57        element.style.webkitGridAutoFlow = newValue;
     58    shouldBe("element.style.webkitGridAutoFlow", "'" + expectedStyleValue + "'");
     59    shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'" + expectedComputedStyleValue + "'");
     60    document.body.removeChild(element);
     61}
Note: See TracChangeset for help on using the changeset viewer.