| OLD | NEW | 
|   1 <!DOCTYPE html> |   1 <!DOCTYPE html> | 
|   2 <html> |   2 <html> | 
|   3 <script> |   3 <script> | 
|   4 if (window.testRunner) |   4 if (window.testRunner) | 
|   5     testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1); |   5     testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1); | 
|   6 </script> |   6 </script> | 
|   7 <link href="resources/grid.css" rel="stylesheet"> |   7 <link href="resources/grid.css" rel="stylesheet"> | 
|   8 <script src="../../resources/check-layout.js"></script> |   8 <script src="../../resources/check-layout.js"></script> | 
|   9 <script> |   9 <script> | 
|  10 function testLayout(gridElementID, gridTracks, size) |  10 function testLayout(gridElementID, gridTracks, size) | 
|  11 { |  11 { | 
|  12     var gridElement = document.getElementById(gridElementID); |  12     var gridElement = document.getElementById(gridElementID); | 
|  13     gridElement.style.gridDefinitionColumns = gridTracks.columns; |  13     gridElement.style.gridTemplateColumns = gridTracks.columns; | 
|  14     gridElement.style.gridDefinitionRows = gridTracks.rows; |  14     gridElement.style.gridTemplateRows = gridTracks.rows; | 
|  15     var gridItem = gridElement.firstChild.nextSibling; |  15     var gridItem = gridElement.firstChild.nextSibling; | 
|  16     gridItem.setAttribute("data-expected-width", size.width); |  16     gridItem.setAttribute("data-expected-width", size.width); | 
|  17     gridItem.setAttribute("data-expected-height", size.height); |  17     gridItem.setAttribute("data-expected-height", size.height); | 
|  18     checkLayout("#" + gridElementID); |  18     checkLayout("#" + gridElementID); | 
|  19 } |  19 } | 
|  20  |  20  | 
|  21 function updateRowsColumns() |  21 function updateRowsColumns() | 
|  22 { |  22 { | 
|  23     // In the constrained grid case, we will always end up sizing after the min 
    width. This means we don't test max width changes as they would not be detectabl
    e. |  23     // In the constrained grid case, we will always end up sizing after the min 
    width. This means we don't test max width changes as they would not be detectabl
    e. | 
|  24     testLayout("constrainedGrid", { 'rows': 'minmax(20px, 50px)', 'columns': 'mi
    nmax(30px, 50px)' }, { 'width': '30', 'height': '20' }); |  24     testLayout("constrainedGrid", { 'rows': 'minmax(20px, 50px)', 'columns': 'mi
    nmax(30px, 50px)' }, { 'width': '30', 'height': '20' }); | 
| (...skipping 37 matching lines...) Expand 10 before | Expand all | Expand 10 after  Loading... | 
|  62     </div> |  62     </div> | 
|  63 </div> |  63 </div> | 
|  64  |  64  | 
|  65 <div class="unconstrainedContainer"> |  65 <div class="unconstrainedContainer"> | 
|  66     <div class="grid" id="unconstrainedGrid"> |  66     <div class="grid" id="unconstrainedGrid"> | 
|  67         <div class="sizedToGridArea">XXXXX XXXXXX</div> |  67         <div class="sizedToGridArea">XXXXX XXXXXX</div> | 
|  68     </div> |  68     </div> | 
|  69 </div> |  69 </div> | 
|  70 </body> |  70 </body> | 
|  71 </html> |  71 </html> | 
| OLD | NEW |