blob: e9de9b812ae709d3363b1573b3e68f5b1daf5766 [file] [log] [blame]
svillar@igalia.com14d1f6f2014-09-29 10:08:34 +00001<!DOCTYPE html>
jfernandez@igalia.comd058bc02016-02-19 13:25:49 +00002<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
svillar@igalia.com14d1f6f2014-09-29 10:08:34 +00003<link href="resources/grid.css" rel="stylesheet">
4<style>
jfernandez@igalia.comd058bc02016-02-19 13:25:49 +00005.grid {
svillar@igalia.com14d1f6f2014-09-29 10:08:34 +00006 font: 10px/1 Ahem;
7}
8.gridWithPercent {
rego@igalia.com92508232016-05-06 08:17:12 +00009 grid-auto-columns: 25%;
10 grid-auto-rows: 30%;
svillar@igalia.com14d1f6f2014-09-29 10:08:34 +000011}
12.gridWithPercentInMinOfMinMax {
rego@igalia.com92508232016-05-06 08:17:12 +000013 grid-auto-columns: minmax(20%, max-content);
14 grid-auto-rows: minmax(100%, 15px);
svillar@igalia.com14d1f6f2014-09-29 10:08:34 +000015}
16.gridWithPercentInMinOfMinMax2 {
rego@igalia.com92508232016-05-06 08:17:12 +000017 grid-auto-columns: minmax(20%, 50px);
18 grid-auto-rows: minmax(100%, max-content);
svillar@igalia.com14d1f6f2014-09-29 10:08:34 +000019}
20.gridWithPercentInMaxOfMinMax {
rego@igalia.com92508232016-05-06 08:17:12 +000021 grid-auto-columns: minmax(min-content, 25%);
22 grid-auto-rows: minmax(0px, 1%);
svillar@igalia.com14d1f6f2014-09-29 10:08:34 +000023}
24.gridWithPercentInMaxOfMinMax2 {
rego@igalia.com92508232016-05-06 08:17:12 +000025 grid-auto-columns: minmax(20px, 25%);
26 grid-auto-rows: minmax(min-content, 1%);
svillar@igalia.com14d1f6f2014-09-29 10:08:34 +000027}
28.gridWithPercentsInMinMax {
rego@igalia.com92508232016-05-06 08:17:12 +000029 grid-auto-columns: minmax(25%, 50%);
30 grid-auto-rows: minmax(10%, 90%);
svillar@igalia.com14d1f6f2014-09-29 10:08:34 +000031}
32</style>
33<script src="../../resources/check-layout.js"></script>
jfernandez@igalia.comd058bc02016-02-19 13:25:49 +000034<body onload="checkLayout('.grid');">
svillar@igalia.com14d1f6f2014-09-29 10:08:34 +000035<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>
36<div style="position: relative;">
jfernandez@igalia.comd058bc02016-02-19 13:25:49 +000037 <div class="grid min-content gridWithPercent" data-expected-width="30" data-expected-height="20">
svillar@igalia.com14d1f6f2014-09-29 10:08:34 +000038 <div class="firstRowFirstColumn">XXX<br>XXX</div>
39 </div>
40</div>
41<div style="position: relative;">
rego@igalia.com01a7d542017-12-12 07:11:04 +000042 <div class="grid min-content gridWithPercentInMinOfMinMax" data-expected-width="30" data-expected-height="15">
svillar@igalia.com14d1f6f2014-09-29 10:08:34 +000043 <div class="firstRowFirstColumn">XXX</div>
44 <div class="firstRowFirstColumn">XX XX</div>
45 </div>
46</div>
47<div style="position: relative;">
jfernandez@igalia.comd058bc02016-02-19 13:25:49 +000048 <div class="grid min-content gridWithPercentInMinOfMinMax2" data-expected-width="30" data-expected-height="20">
svillar@igalia.com14d1f6f2014-09-29 10:08:34 +000049 <div class="firstRowFirstColumn">XXX</div>
50 <div class="firstRowFirstColumn">XX XX</div>
51 </div>
52</div>
53<div style="position: relative;">
jfernandez@igalia.comd058bc02016-02-19 13:25:49 +000054 <div class="grid min-content gridWithPercentInMaxOfMinMax" data-expected-width="40" data-expected-height="20">
svillar@igalia.com14d1f6f2014-09-29 10:08:34 +000055 <div class="firstRowFirstColumn">XXXX<br>X</div>
56 </div>
57</div>
58<div style="position: relative;">
jfernandez@igalia.comd058bc02016-02-19 13:25:49 +000059 <div class="grid min-content gridWithPercentInMaxOfMinMax2" data-expected-width="20" data-expected-height="20">
svillar@igalia.com14d1f6f2014-09-29 10:08:34 +000060 <div class="firstRowFirstColumn">XXXX<br>X</div>
61 </div>
62</div>
63<div style="position: relative;">
jfernandez@igalia.comd058bc02016-02-19 13:25:49 +000064 <div class="grid min-content gridWithPercentsInMinMax" data-expected-width="40" data-expected-height="40">
svillar@igalia.com14d1f6f2014-09-29 10:08:34 +000065 <div class="firstRowFirstColumn">XXX<br>XX XX<br>XXXX</div>
66 </div>
67</div>
68</body>