Chromium Code Reviews Chromium Code Reviews
Issue 1490093003:
[css-grid] Fix items' height computation in indefinite grids with fr (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master| Index: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-inside-fr-with-borders.html |
| diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-inside-fr-with-borders.html b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-inside-fr-with-borders.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..8432582b2e11ddc783ba970be270b6daffa05702 |
| --- /dev/null |
| +++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-inside-fr-with-borders.html |
| @@ -0,0 +1,59 @@ |
| +<!DOCTYPE html> |
| + |
| +<link href="resources/grid.css" rel="stylesheet"> |
| +<style> |
| +.frGrid { |
| + grid: 1fr / 1fr; |
| + font: 50px/1 Ahem; |
| + border: 50px solid magenta; |
| + width: 300px; |
|
Manuel Rego
2015/12/03 09:24:43
Wouldn't be nice to have a fixed height too,
to ch
svillar
2015/12/03 09:35:12
We cannot do that because the problem appears when
Manuel Rego
2015/12/03 09:44:17
Ok, I didn't realize about that sorry.
|
| +} |
| + |
| +.item { |
| + border: 50px solid rgba(0, 255, 250, 0.5); |
| +} |
| + |
| +.borderMargin { |
| + border: 20px solid blue; |
| + margin: 30px; |
| + width: -webkit-fit-content; |
|
Manuel Rego
2015/12/03 09:24:43
Maybe it's better to use "fit-content" class alrea
svillar
2015/12/03 09:35:12
Acknowledged.
|
| +} |
| + |
| +.frRowsGrid { |
| + grid-auto-columns: 100px; |
| + grid-auto-rows: minmax(0,1fr); |
|
Manuel Rego
2015/12/03 09:24:43
Do you really need to use "minmax(0, 1fr);" ?
Als
svillar
2015/12/03 09:35:12
Why do you prefer grid-template-* over grid-auto-*
Manuel Rego
2015/12/03 09:44:17
Not preference, it was just an extra comment but a
|
| +} |
| + |
| +.frColsGrid { |
| + grid-auto-columns: minmax(0,1fr); |
|
Manuel Rego
2015/12/03 09:24:43
Ditto.
|
| + grid-auto-rows: 100px; |
| +} |
| + |
| +span { |
| + background: gray; |
|
Manuel Rego
2015/12/03 09:24:43
.grid has already a grey background,
maybe use a d
svillar
2015/12/03 09:35:12
Acknowledged.
|
| + border: 10px solid; |
| +} |
| + |
| +x { display:block; height:40px; width:40px; } |
|
Manuel Rego
2015/12/03 09:24:43
Why not use a <div>?
You could remove "display: bl
svillar
2015/12/03 09:35:12
Acknowledged.
|
| + |
| +</style> |
| +<script src="../../resources/testharness.js"></script> |
| +<script src="../../resources/testharnessreport.js"></script> |
| +<script src="../../resources/check-layout-th.js"></script> |
| + |
| +<body onload="checkLayout('.grid')"> |
| +<div id=log></div> |
| + |
| +<div class="grid frGrid" data-expected-width="400" data-expected-height="250"> |
| + <div class="item" data-expected-width="300" data-expected-height="150">X</div> |
| +</div> |
| + |
| +<div class="grid borderMargin frRowsGrid" data-expected-width="140" data-expected-height="100"> |
| + <span data-expected-width="100" data-expected-height="60"><x></x></span> |
| +</div> |
| + |
| +<div class="grid borderMargin frColsGrid" data-expected-width="100" data-expected-height="140"> |
| + <span data-expected-width="60" data-expected-height="100"><x></x></span> |
| +</div> |
| + |
| +</body> |
