Chromium Code Reviews Chromium Code Reviews
Issue 450093004:
[CSS Grid Layout] Handle percentages of indefinite sizes in minmax() (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master| Index: LayoutTests/fast/css-grid-layout/percent-of-indefinite-track-size.html |
| diff --git a/LayoutTests/fast/css-grid-layout/percent-of-indefinite-track-size.html b/LayoutTests/fast/css-grid-layout/percent-of-indefinite-track-size.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..d386f06efe323b729c922efdd2ec2081ea16f579 |
| --- /dev/null |
| +++ b/LayoutTests/fast/css-grid-layout/percent-of-indefinite-track-size.html |
| @@ -0,0 +1,67 @@ |
| +<!DOCTYPE html> |
|
Julien - ping for review
2014/09/10 01:00:17
I couldn't spot what was different with the other
svillar
2014/09/10 15:03:09
The difference is that this test defines explicit
|
| +<link href="resources/grid.css" rel="stylesheet"> |
| +<style> |
| +.indefiniteSizeGrid { |
| + font: 10px/1 Ahem; |
| +} |
| +.gridWithPercent { |
| + grid-template-columns: 25%; |
| + grid-template-rows: 30%; |
| +} |
| +.gridWithPercentInMinOfMinMax { |
| + grid-template-columns: minmax(20%, max-content); |
| + grid-template-rows: minmax(100%, 15px); |
| +} |
| +.gridWithPercentInMinOfMinMax2 { |
| + grid-template-columns: minmax(20%, 50px); |
| + grid-template-rows: minmax(100%, max-content); |
| +} |
| +.gridWithPercentInMaxOfMinMax { |
| + grid-template-columns: minmax(min-content, 25%); |
| + grid-template-rows: minmax(0px, 1%); |
| +} |
| +.gridWithPercentInMaxOfMinMax2 { |
| + grid-template-columns: minmax(20px, 25%); |
| + grid-template-rows: minmax(min-content, 1%); |
| +} |
| +.gridWithPercentsInMinMax { |
| + grid-template-columns: minmax(25%, 50%); |
| + grid-template-rows: minmax(10%, 90%); |
| +} |
| +</style> |
| +<script src="../../resources/check-layout.js"></script> |
| +<body onload="checkLayout('.indefiniteSizeGrid');"> |
| +<p>This test checks that percentages of indefinite sizes are treated as min-content (for the min track sizing function) or max-content (for the max track sizing function).</p> |
| +<div style="position: relative;"> |
| + <div class="indefiniteSizeGrid gridWithPercent" data-expected-width="30" data-expected-height="20"> |
| + <div class="firstRowFirstColumn">XXX<br>XXX</div> |
| + </div> |
| +</div> |
| +<div style="position: relative;"> |
| + <div class="indefiniteSizeGrid gridWithPercentInMinOfMinMax" data-expected-width="30" data-expected-height="15"> |
| + <div class="firstRowFirstColumn">XXX</div> |
| + <div class="firstRowFirstColumn">XX XX</div> |
| + </div> |
| +</div> |
| +<div style="position: relative;"> |
| + <div class="indefiniteSizeGrid gridWithPercentInMinOfMinMax2" data-expected-width="30" data-expected-height="20"> |
| + <div class="firstRowFirstColumn">XXX</div> |
| + <div class="firstRowFirstColumn">XX XX</div> |
| + </div> |
| +</div> |
| +<div style="position: relative;"> |
| + <div class="indefiniteSizeGrid gridWithPercentInMaxOfMinMax" data-expected-width="40" data-expected-height="20"> |
| + <div class="firstRowFirstColumn">XXXX<br>X</div> |
| + </div> |
| +</div> |
| +<div style="position: relative;"> |
| + <div class="indefiniteSizeGrid gridWithPercentInMaxOfMinMax2" data-expected-width="20" data-expected-height="20"> |
| + <div class="firstRowFirstColumn">XXXX<br>X</div> |
| + </div> |
| +</div> |
| +<div style="position: relative;"> |
| + <div class="indefiniteSizeGrid gridWithPercentsInMinMax" data-expected-width="40" data-expected-height="40"> |
| + <div class="firstRowFirstColumn">XXX<br>XX XX<br>XXXX</div> |
| + </div> |
| +</div> |
| +</body> |
