third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-fill.html - Issue 1895443002: [css-grid] Implement auto-repeat computation

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-fill.html

Issue 1895443002: [css-grid] Implement auto-repeat computation (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Missing tests. Applied suggested changes Created 4 years, 8 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch

« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-element-auto-repeat-get-set.html » ('j') | third_party/WebKit/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-001.html » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <!DOCTYPE html>

	2

	3 <link href="resources/grid.css" rel="stylesheet">

	4 <style>

	5

	6 .grid {

	7 border: 2px solid magenta;

	8 width: 200px;

	9 position: relative;

	10 justify-content: start;

	11 }

	12

	13 .gridOnlyAutoRepeat { grid-template: 25px / repeat(auto-fill, 30px [autobar]); }

	14 .gridAutoRepeatAndFixedBefore { grid-template: 25px / 10px [foo] 20% [bar] repea t(auto-fill, [autofoo] 35px); }

	15 .gridAutoRepeatAndFixedAfter { grid-template: 25px / repeat(auto-fill, [first] 3 0px [last]) [foo] minmax(60px, 80px) [bar] minmax(45px, max-content); }

	16 .gridAutoRepeatAndFixed { grid-template: 25px / [start] repeat(2, 50px [a]) [mid dle] repeat(auto-fill, [autofoo] 15px [autobar]) minmax(5%, 10%) [end]; }

	17 .gridMultipleNames { grid-template: 25px / [start] 20px [foo] 50% repeat(auto-fi ll, [bar] 20px [start foo]) [foo] 10% [end bar]; }
	Manuel Rego 2016/04/19 17:22:15 This is a super-nit but these lines are quite long This is a super-nit but these lines are quite long. I'd prefer to add new lines :-). Also "grid-template" is about to die, I suggest to change it for "grid". Last, there're no tests for "auto-fill" in the column axis, shouldn't we add some cases too? svillar 2016/04/20 08:24:17 Acknowledged. Show quoted text On 2016/04/19 17:22:15, Manuel Rego wrote: > This is a super-nit but these lines are quite long. > I'd prefer to add new lines :-). > > Also "grid-template" is about to die, I suggest to change it for "grid". > > Last, there're no tests for "auto-fill" in the column axis, > shouldn't we add some cases too? Acknowledged.
	18

	19 .item {

	20 background-color: cyan;

	21 min-height: 100%;
	Manuel Rego 2016/04/19 17:22:15 Do we really need this min-height: 100%? Do we really need this min-height: 100%? svillar 2016/04/20 08:24:18 It's just to stretch the items in the column axis Show quoted text On 2016/04/19 17:22:15, Manuel Rego wrote: > Do we really need this min-height: 100%? It's just to stretch the items in the column axis but it will be likely done anyway yes.
	22 }

	23

	24 .gap {

	25 grid-column-gap: 20px;

	26 grid-row-gap: 15px;

	27 }

	28

	29 </style>

	30

	31 <script src="../../resources/testharness.js"></script>

	32 <script src="../../resources/testharnessreport.js"></script>

	33 <script src="../../resources/check-layout-th.js"></script>

	34

	35 <body onload="checkLayout('.grid')">

	36 <div id="log"></div>

	37

	38 <p>This test checks that repeat(auto-fill, ) syntax works as expected</p>
	Manuel Rego 2016/04/19 17:22:15 Nit: Missing dot at the end. Nit: Missing dot at the end.
	39

	40 <div class="grid gridOnlyAutoRepeat">

	41 <div class="item" style="grid-column: 1 / span 6" data-offset-x="0" data-off set-y="0" data-expected-width="180" data-expected-height="25"></div>

	42 </div>

	43

	44 <div class="grid gridOnlyAutoRepeat">

	45 <div class="item" style="grid-column: 1 / span 6 autobar" data-offset-x="0" data-offset-y="0" data-expected-width="180" data-expected-height="25"></div>
	Manuel Rego 2016/04/19 17:22:15 This will have the same result even if we use an u This will have the same result even if we use an unknown line, or lines were not properly resolved. E.g.: grid-column: 1 / span 6 foobar; I'd set "grid-auto-columns", so we'll be sure that the lines are being resolved. svillar 2016/04/20 08:24:18 Acknowledged. Show quoted text On 2016/04/19 17:22:15, Manuel Rego wrote: > This will have the same result even if we use an unknown line, > or lines were not properly resolved. > E.g.: grid-column: 1 / span 6 foobar; > > I'd set "grid-auto-columns", so we'll be sure that > the lines are being resolved. Acknowledged.
	46 </div>

	47

	48 <div class="grid gridOnlyAutoRepeat gap">

	49 <div class="item" style="grid-column: 1 / span 5" data-offset-x="0" data-off set-y="0" data-expected-width="200" data-expected-height="25"></div>
	Manuel Rego 2016/04/19 17:22:15 Do we actually have 5 auto-repeat columns? I thin Do we actually have 5 auto-repeat columns? I think we only have 4 columns: 30 + 20 + 30 + 20 + 30 + 20 + 30 = 180 If we'd have 5, the result would be: 30 + 20 + 30 + 20 + 30 + 20 + 30 + 20 + 30 = 230 This seems to be working fine because of we don't have "grid-auto-columns", otherwise the result would be different. svillar 2016/04/20 08:24:18 Acknowledged. Show quoted text On 2016/04/19 17:22:15, Manuel Rego wrote: > Do we actually have 5 auto-repeat columns? > > I think we only have 4 columns: > 30 + 20 + 30 + 20 + 30 + 20 + 30 = 180 > > If we'd have 5, the result would be: > 30 + 20 + 30 + 20 + 30 + 20 + 30 + 20 + 30 = 230 > > This seems to be working fine because of we don't have > "grid-auto-columns", otherwise the result would be different. Acknowledged.
	50 </div>

	51

	52 <div class="grid gridOnlyAutoRepeat gap">

	53 <div class="item" style="grid-column: autobar 2 / span 3" data-offset-x="100 " data-offset-y="0" data-expected-width="100" data-expected-height="25"></div>
	Manuel Rego 2016/04/19 17:22:15 I'd use span 2, as we only have 4 auto-repeat colu I'd use span 2, as we only have 4 auto-repeat columns.
	54 </div>

	55

	56 <div class="grid gridAutoRepeatAndFixedBefore">

	57 <div class="item" style="grid-column: 1 / span 6" data-offset-x="0" data-off set-y="0" data-expected-width="190" data-expected-height="25"></div>

	58 </div>

	59

	60 <div class="grid gridAutoRepeatAndFixedBefore">

	61 <div class="item" style="grid-column: foo / autofoo" data-offset-x="10" data -offset-y="0" data-expected-width="40" data-expected-height="25"></div>

	62 </div>

	63

	64 <div class="grid gridAutoRepeatAndFixedBefore">

	65 <div class="item" style="grid-column: bar / 5 autofoo" data-offset-x="50" da ta-offset-y="0" data-expected-width="140" data-expected-height="25"></div>

	66 </div>
	Manuel Rego 2016/04/19 17:22:15 Again this won't fail if we use "5 myfoobarline". Again this won't fail if we use "5 myfoobarline". svillar 2016/04/20 08:24:18 Acknowledged. Show quoted text On 2016/04/19 17:22:15, Manuel Rego wrote: > Again this won't fail if we use "5 myfoobarline". Acknowledged.
	67

	68 <div class="grid gridAutoRepeatAndFixedBefore gap">

	69 <div class="item" style="grid-column: 1 / span 5" data-offset-x="0" data-off set-y="0" data-expected-width="200" data-expected-height="25"></div>
	Manuel Rego 2016/04/19 17:22:15 Again, I believe we only have 4 columns in total. Again, I believe we only have 4 columns in total. I'll stop here reviewing the test until you add "grid-auto-columns". :-) svillar 2016/04/20 08:24:17 Acknowledged. Show quoted text On 2016/04/19 17:22:15, Manuel Rego wrote: > Again, I believe we only have 4 columns in total. > I'll stop here reviewing the test until you add "grid-auto-columns". :-) Acknowledged.
	70 </div>

	71

	72 <div class="grid gridAutoRepeatAndFixedBefore gap">

	73 <div class="item" style="grid-column: span 3 / 3 autofoo" data-offset-x="90" data-offset-y="0" data-expected-width="110" data-expected-height="25"></div>

	74 </div>

	75

	76 <div class="grid gridAutoRepeatAndFixedBefore gap">

	77 <div class="item" style="grid-column: notPresent / 3 autofoo" data-offset-x= "220" data-offset-y="0" data-expected-width="0" data-expected-height="25"></div>

	78 </div>

	79

	80 <div class="grid gridAutoRepeatAndFixedAfter">

	81 <div class="item" style="grid-column: 1 / span 5" data-offset-x="0" data-off set-y="0" data-expected-width="185" data-expected-height="25"></div>

	82 </div>

	83

	84 <div class="grid gridAutoRepeatAndFixedAfter">

	85 <div class="item" style="grid-column: first / last 2" data-offset-x="0" data -offset-y="0" data-expected-width="60" data-expected-height="25"></div>

	86 </div>

	87

	88 <div class="grid gridAutoRepeatAndFixedAfter">

	89 <div class="item" style="grid-column: last 2 / foo" data-offset-x="60" data- offset-y="0" data-expected-width="80" data-expected-height="25"></div>

	90 </div>

	91

	92 <div class="grid gridAutoRepeatAndFixedAfter gap">

	93 <div class="item" style="grid-column: 1 / span 3" data-offset-x="0" data-off set-y="0" data-expected-width="195" data-expected-height="25"></div>

	94 </div>

	95

	96 <div class="grid gridAutoRepeatAndFixedAfter gap">

	97 <div class="item" style="grid-column: 3 / span 1 bar" data-offset-x="135" da ta-offset-y="0" data-expected-width="65" data-expected-height="25"></div>

	98 </div>

	99

	100 <div class="grid gridAutoRepeatAndFixedAfter gap">

	101 <div class="item" style="grid-column: first / foo" data-offset-x="0" data-of fset-y="0" data-expected-width="30" data-expected-height="25"></div>

	102 </div>

	103

	104 <div class="grid gridAutoRepeatAndFixed">

	105 <div class="item" style="grid-column: 1 / span 8" data-offset-x="0" data-off set-y="0" data-expected-width="195" data-expected-height="25"></div>

	106 </div>

	107

	108 <div class="grid gridAutoRepeatAndFixed">

	109 <div class="item" style="grid-column: a / autobar 2" data-offset-x="50" data -offset-y="0" data-expected-width="80" data-expected-height="25"></div>

	110 </div>

	111

	112 <div class="grid gridAutoRepeatAndFixed">

	113 <div class="item" style="grid-column: autofoo / end" data-offset-x="100" dat a-offset-y="0" data-expected-width="95" data-expected-height="25"></div>

	114 </div>

	115

	116 <div class="grid gridAutoRepeatAndFixed gap">

	117 <div class="item" style="grid-column: 1 / span 4" data-offset-x="0" data-of fset-y="0" data-expected-width="195" data-expected-height="25"></div>

	118 </div>

	119

	120 <div class="grid gridAutoRepeatAndFixed gap">

	121 <div class="item" style="grid-column: autobar / -1" data-offset-x="175" dat a-offset-y="0" data-expected-width="20" data-expected-height="25"></div>

	122 </div>

	123

	124 <div class="grid gridMultipleNames">

	125 <div class="item" style="grid-column: 1 / -1" data-offset-x="0" data-offset -y="0" data-expected-width="200" data-expected-height="25"></div>

	126 </div>

	127

	128 <div class="grid gridMultipleNames">

	129 <div class="item" style="grid-column: foo 3 / 4 bar" data-offset-x="160" da ta-offset-y="0" data-expected-width="40" data-expected-height="25"></div>

	130 </div>

	131

	132 <div class="grid gridMultipleNames">

	133 <div class="item" style="grid-column: -6 / span 2 start" data-offset-x="20" data-offset-y="0" data-expected-width="140" data-expected-height="25"></div>

	134 </div>

	135

	136 <div class="grid gridMultipleNames gap">

	137 <div class="item" style="grid-column: -4 / -2" data-offset-x="40" data-offs et-y="0" data-expected-width="140" data-expected-height="25"></div>

	138 </div>

	139

	140 <div class="grid gridMultipleNames gap">

	141 <div class="item" style="grid-column: bar / foo 2" data-offset-x="160" data -offset-y="0" data-expected-width="20" data-expected-height="25"></div>

	142 </div>

	143

	144 <div class="grid gridMultipleNames gap">

	145 <div class="item" style="grid-column: foo / bar 2" data-offset-x="40" data- offset-y="0" data-expected-width="180" data-expected-height="25"></div>

	146 </div>

	147

	148 </body>

OLD	NEW