| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> |
| 2 <html> |
| 3 <head> |
| 4 <script> |
| 5 if (window.testRunner) |
| 6 testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1); |
| 7 </script> |
| 8 <link href="resources/grid.css" rel="stylesheet"> |
| 9 <style> |
| 10 #gridWithSingleStringTemplate { |
| 11 grid-template: "area"; |
| 12 } |
| 13 |
| 14 #gridWithTwoColumnsTemplate { |
| 15 grid-template: "first second"; |
| 16 } |
| 17 |
| 18 #gridWithTwoRowsTemplate { |
| 19 grid-template: "first" |
| 20 "second"; |
| 21 } |
| 22 |
| 23 #gridWithSpanningColumnsTemplate { |
| 24 grid-template: "span span"; |
| 25 } |
| 26 |
| 27 #gridWithSpanningRowsDotTemplate { |
| 28 grid-template: "span" |
| 29 "."; |
| 30 } |
| 31 |
| 32 #gridWithDotColumn { |
| 33 grid-template: "header ." |
| 34 "footer ."; |
| 35 } |
| 36 </style> |
| 37 <script src="../js/resources/js-test-pre.js"></script> |
| 38 </head> |
| 39 <body> |
| 40 <div class="grid" id="gridWithDefaultTemplate"></div> |
| 41 <div class="grid" id="gridWithSingleStringTemplate"></div> |
| 42 <div class="grid" id="gridWithTwoColumnsTemplate"></div> |
| 43 <div class="grid" id="gridWithTwoRowsTemplate"></div> |
| 44 <div class="grid" id="gridWithSpanningColumnsTemplate"></div> |
| 45 <div class="grid" id="gridWithSpanningRowsDotTemplate"></div> |
| 46 <div class="grid" id="gridWithDotColumn"></div> |
| 47 <script> |
| 48 description("This test checks that grid-template is properly parsed."); |
| 49 |
| 50 debug("Test getting grid-template set through CSS."); |
| 51 var gridWithDefaultTemplate = document.getElementById("gridWithDefaultTempla
te"); |
| 52 shouldBeEqualToString("window.getComputedStyle(gridWithDefaultTemplate).getP
ropertyValue('grid-template')", "none") |
| 53 |
| 54 var gridWithSingleStringTemplate = document.getElementById("gridWithSingleSt
ringTemplate"); |
| 55 shouldBeEqualToString("window.getComputedStyle(gridWithSingleStringTemplate)
.getPropertyValue('grid-template')", "'area'") |
| 56 |
| 57 var gridWithTwoColumnsTemplate = document.getElementById("gridWithTwoColumns
Template"); |
| 58 shouldBeEqualToString("window.getComputedStyle(gridWithTwoColumnsTemplate).g
etPropertyValue('grid-template')", "'first second'") |
| 59 |
| 60 var gridWithTwoRowsTemplate = document.getElementById("gridWithTwoRowsTempla
te"); |
| 61 shouldBeEqualToString("window.getComputedStyle(gridWithTwoRowsTemplate).getP
ropertyValue('grid-template')", "'first' 'second'") |
| 62 |
| 63 var gridWithSpanningColumnsTemplate = document.getElementById("gridWithSpann
ingColumnsTemplate"); |
| 64 shouldBeEqualToString("window.getComputedStyle(gridWithSpanningColumnsTempla
te).getPropertyValue('grid-template')", "'span span'") |
| 65 |
| 66 var gridWithSpanningRowsDotTemplate = document.getElementById("gridWithSpann
ingRowsDotTemplate"); |
| 67 shouldBeEqualToString("window.getComputedStyle(gridWithSpanningRowsDotTempla
te).getPropertyValue('grid-template')", "'span' '.'") |
| 68 |
| 69 var gridWithDotColumn = document.getElementById("gridWithDotColumn"); |
| 70 shouldBeEqualToString("window.getComputedStyle(gridWithDotColumn).getPropert
yValue('grid-template')", "'header .' 'footer .'") |
| 71 |
| 72 debug("Test grid-template: initial"); |
| 73 var element = document.createElement("div"); |
| 74 document.body.appendChild(element); |
| 75 element.style.gridTemplate = "'foobar'"; |
| 76 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr
id-template')", "'foobar'") |
| 77 element.style.gridTemplate = "initial"; |
| 78 document.body.removeChild(element); |
| 79 |
| 80 debug("Test grid-template: inherit"); |
| 81 var parentElement = document.createElement("div"); |
| 82 document.body.appendChild(parentElement); |
| 83 parentElement.style.gridTemplate = "'foo bar'"; |
| 84 shouldBeEqualToString("window.getComputedStyle(parentElement).getPropertyVal
ue('grid-template')", "'foo bar'") |
| 85 |
| 86 var element = document.createElement("div"); |
| 87 parentElement.appendChild(element); |
| 88 element.style.gridTemplate = "inherit"; |
| 89 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr
id-template')", "'foo bar'") |
| 90 document.body.removeChild(parentElement); |
| 91 |
| 92 debug("Test invalid grid-template values."); |
| 93 var element = document.createElement("div"); |
| 94 document.body.appendChild(element); |
| 95 |
| 96 // 'nav' is not a rectangular definition. |
| 97 element.style.gridTemplate = "'nav head' 'nav nav'"; |
| 98 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr
id-template')", "none") |
| 99 |
| 100 // 'nav' is not contiguous in the column direction. |
| 101 element.style.gridTemplate = "'nav head nav'"; |
| 102 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr
id-template')", "none") |
| 103 |
| 104 // 'nav' is not contiguous in the row direction. |
| 105 element.style.gridTemplate = "'nav head' 'middle middle' 'nav footer'"; |
| 106 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr
id-template')", "none") |
| 107 |
| 108 // The rows don't have the same number of columns. |
| 109 element.style.gridTemplate = "'nav head' 'foot'"; |
| 110 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr
id-template')", "none") |
| 111 |
| 112 // Empty rows. |
| 113 element.style.gridTemplate = "'' ''"; |
| 114 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr
id-template')", "none") |
| 115 |
| 116 debug(""); |
| 117 debug("FIXME: We currently don't validate that the named grid areas are <
indent>."); |
| 118 // <ident> only allows a leading '-'. |
| 119 element.style.gridTemplate = "'nav-up'"; |
| 120 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr
id-template')", "none") |
| 121 </script> |
| 122 <script src="../js/resources/js-test-post.js"></script> |
| 123 </body> |
| 124 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 18532004:
Implement 'grid-template' parsing (Closed)
Base URL: svn://svn.chromium.org/blink/trunk