Chromium Code Reviews Chromium Code Reviews
Issue 23472008:
[CSS Grid Layout] Support calc() breadth track size (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@103761-wk| OLD | NEW |
|---|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <script> | 4 <script> |
| 5 if (window.testRunner) | 5 if (window.testRunner) |
| 6 testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1); | 6 testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1); |
| 7 </script> | 7 </script> |
| 8 <link href="resources/grid.css" rel="stylesheet"> | 8 <link href="resources/grid.css" rel="stylesheet"> |
| 9 <style> | 9 <style> |
| 10 div { | |
| 11 width: 800px; | |
| 12 height: 600px; | |
| 13 } | |
| 14 | |
| 10 .gridWithFixed { | 15 .gridWithFixed { |
| 11 grid-definition-columns: 7px 11px; | 16 grid-definition-columns: 7px 11px; |
| 12 grid-definition-rows: 17px 2px; | 17 grid-definition-rows: 17px 2px; |
| 13 } | 18 } |
| 14 | 19 |
| 15 .gridWithPercent { | 20 .gridWithPercent { |
| 16 grid-definition-columns: 53% 99%; | 21 grid-definition-columns: 53% 99%; |
| 17 grid-definition-rows: 27% 52%; | 22 grid-definition-rows: 27% 52%; |
| 18 } | 23 } |
| 19 .gridWithAuto { | 24 .gridWithAuto { |
| (...skipping 41 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 61 font: 10px Ahem; | 66 font: 10px Ahem; |
| 62 } | 67 } |
| 63 .gridWithFractionFraction { | 68 .gridWithFractionFraction { |
| 64 grid-definition-columns: 1fr 2fr; | 69 grid-definition-columns: 1fr 2fr; |
| 65 grid-definition-rows: 3fr 4fr; | 70 grid-definition-rows: 3fr 4fr; |
| 66 } | 71 } |
| 67 .gridWithFractionMinMax { | 72 .gridWithFractionMinMax { |
| 68 grid-definition-columns: minmax(min-content, 45px) 2fr; | 73 grid-definition-columns: minmax(min-content, 45px) 2fr; |
| 69 grid-definition-rows: 3fr minmax(14px, max-content); | 74 grid-definition-rows: 3fr minmax(14px, max-content); |
| 70 } | 75 } |
| 76 .gridWithCalcCalc { | |
| 77 grid-definition-columns: calc(200px) calc(10em); | |
| 78 grid-definition-rows: calc(15em) calc(75px); | |
| 79 font: 10px Ahem; | |
| 80 } | |
| 81 .gridWithCalcAndFixed { | |
| 82 grid-definition-columns: calc(50%) 8em; | |
| 83 grid-definition-rows: 88px calc(25%); | |
| 84 font: 10px Ahem; | |
| 85 } | |
| 86 .gridWithCalcAndMinMax { | |
| 87 grid-definition-columns: calc(30px + 20%) minmax(min-content, 80px); | |
| 88 grid-definition-rows: minmax(25%, max-content) calc(10% - 7px); | |
| 89 } | |
| 90 .gridWithCalcInsideMinMax { | |
| 91 grid-definition-columns: minmax(calc(23px + 10%), 400px) 12em; | |
| 92 grid-definition-rows: calc(150px) minmax(5%, calc(50% - 125px)); | |
| 93 font: 10px Ahem; | |
| 94 } | |
| 95 | |
| 71 </style> | 96 </style> |
| 72 <script src="../js/resources/js-test-pre.js"></script> | 97 <script src="../js/resources/js-test-pre.js"></script> |
| 73 </head> | 98 </head> |
| 74 <body> | 99 <body> |
| 75 <div class="grid gridWithFixed" id="gridWithFixedElement"></div> | 100 <div class="grid gridWithFixed" id="gridWithFixedElement"></div> |
| 76 <div class="grid gridWithPercent" id="gridWithPercentElement"></div> | 101 <div class="grid gridWithPercent" id="gridWithPercentElement"></div> |
| 77 <div class="grid gridWithAuto" id="gridWithAutoElement"></div> | 102 <div class="grid gridWithAuto" id="gridWithAutoElement"></div> |
| 78 <div class="grid gridWithEM" id="gridWithEMElement"></div> | 103 <div class="grid gridWithEM" id="gridWithEMElement"></div> |
| 79 <div class="grid gridWithNoneAndAuto" id="gridWithNoneAndAuto"></div> | 104 <div class="grid gridWithNoneAndAuto" id="gridWithNoneAndAuto"></div> |
| 80 <div class="grid gridWithNoneAndFixed" id="gridWithNoneAndFixed"></div> | 105 <div class="grid gridWithNoneAndFixed" id="gridWithNoneAndFixed"></div> |
| 81 <div class="grid gridWithThreeItems" id="gridWithThreeItems"></div> | 106 <div class="grid gridWithThreeItems" id="gridWithThreeItems"></div> |
| 82 <div class="grid gridWithPercentAndViewportPercent" id="gridWithPercentAndViewpo rtPercent"></div> | 107 <div class="grid gridWithPercentAndViewportPercent" id="gridWithPercentAndViewpo rtPercent"></div> |
| 83 <div class="grid gridWithFitContentAndFitAvailable" id="gridWithFitContentAndFit Available"></div> | 108 <div class="grid gridWithFitContentAndFitAvailable" id="gridWithFitContentAndFit Available"></div> |
| 84 <div class="grid gridWithMinMaxContent" id="gridWithMinMaxContent"></div> | 109 <div class="grid gridWithMinMaxContent" id="gridWithMinMaxContent"></div> |
| 85 <div class="grid gridWithMinMaxAndFixed" id="gridWithMinMaxAndFixed"></div> | 110 <div class="grid gridWithMinMaxAndFixed" id="gridWithMinMaxAndFixed"></div> |
| 86 <div class="grid gridWithMinMaxAndMinMaxContent" id="gridWithMinMaxAndMinMaxCont ent"></div> | 111 <div class="grid gridWithMinMaxAndMinMaxContent" id="gridWithMinMaxAndMinMaxCont ent"></div> |
| 87 <div class="grid gridWithFractionFraction" id="gridWithFractionFraction"></div> | 112 <div class="grid gridWithFractionFraction" id="gridWithFractionFraction"></div> |
| 88 <div class="grid gridWithFractionMinMax" id="gridWithFractionMinMax"></div> | 113 <div class="grid gridWithFractionMinMax" id="gridWithFractionMinMax"></div> |
| 114 <div class="grid gridWithCalcCalc" id="gridWithCalcCalcElement"></div> | |
| 115 <div class="grid gridWithCalcAndFixed" id="gridWithCalcAndFixedElement"></div> | |
| 116 <div class="grid gridWithCalcAndMinMax" id="gridWithCalcAndMinMaxElement"></div> | |
| 117 <div class="grid gridWithCalcInsideMinMax" id="gridWithCalcInsideMinMaxElement"> </div> | |
|
alancutter (OOO until 2018)
2013/09/30 00:24:59
Any reason the ids need Element appended to the en
| |
| 89 <script src="resources/grid-definitions-parsing-utils.js"></script> | 118 <script src="resources/grid-definitions-parsing-utils.js"></script> |
| 90 <script src="resources/grid-columns-rows-get-set-multiple.js"></script> | 119 <script src="resources/grid-columns-rows-get-set-multiple.js"></script> |
| 91 <script src="../js/resources/js-test-post.js"></script> | 120 <script src="../js/resources/js-test-post.js"></script> |
| 92 </body> | 121 </body> |
| 93 </html> | 122 </html> |
| OLD | NEW |
