third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-element-shrink-to-fit.html - Issue 1488493003: [css-grid] refactoring of layout tests

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-element-shrink-to-fit.html

Issue 1488493003: [css-grid] refactoring of layout tests (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Created 5 years 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

« third_party/WebKit/LayoutTests/fast/css-grid-layout/calc-resolution-grid-item.html ('K') | « third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-element-repeat-get-set.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-gutters-and-alignment.html » ('j') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-change-column-repaint.html » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
1 <!DOCTYPE html>	1 <!DOCTYPE html>

2 <html>	2 <html>

3 <style>	3 <style>

4 .grid {	4 .grid {

5 display: grid;	5 display: grid;

6 grid-template-columns: 200px 200px;	6 grid-template-columns: 200px 200px;

7 grid-template-rows: 200px 200px;	7 grid-template-rows: 200px 200px;

8 }	8 }

	9 .container {

	10 width: 600px;

	11 height: 600px;

	12 }
	Manuel Rego 2015/12/02 09:31:01 This change is unrelated to prefixes, it's about d This change is unrelated to prefixes, it's about different viewport sizes. Maybe you want to add a line about that in the patch description. Or do this particular change in a different patch. jfernandez 2015/12/03 15:06:11 Umm, this change could indeed be done in a differe Show quoted text On 2015/12/02 09:31:01, Manuel Rego wrote: > This change is unrelated to prefixes, it's about different viewport sizes. > Maybe you want to add a line about that in the patch description. > Or do this particular change in a different patch. Umm, this change could indeed be done in a different patch, I agree.
9	13

10 #absolutePos {	14 #absolutePos {

11 position: absolute;	15 position: absolute;

12 }	16 }

13	17

14 #fixedPos {	18 #fixedPos {

15 position: fixed;	19 position: fixed;

16 }	20 }

17	21

18 #floatPos {	22 #floatPos {

(...skipping 25 matching lines...) Expand all Loading...
44 grid-column: 2;	48 grid-column: 2;

45 grid-row: 2;	49 grid-row: 2;

46 }	50 }

47 </style>	51 </style>

48 <script src="../../resources/check-layout.js"></script>	52 <script src="../../resources/check-layout.js"></script>

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

50	54

51 <p>This test checks that the shrink-to-fit behavior is applied to the float and out-of-flow positioned elements.</p>	55 <p>This test checks that the shrink-to-fit behavior is applied to the float and out-of-flow positioned elements.</p>

52 <p>The following grids should be 400px * 400px, except the first one which uses 'relative' positioning.</p>	56 <p>The following grids should be 400px * 400px, except the first one which uses 'relative' positioning.</p>

53	57

54 <div class="grid" id="regularGrid" data-expected-height="400" data-expected-widt h="769">	58 <div class="container">

55 <div id="one"></div>	59 <div class="grid" id="regularGrid" data-expected-height="400" data-expected- width="600">

56 <div id="two"></div>	60 <div id="one"></div>

57 <div id="three"></div>	61 <div id="two"></div>

58 <div id="four"></div>	62 <div id="three"></div>

	63 <div id="four"></div>

	64 </div>

59 </div>	65 </div>

60	66

61 <div class="grid" id="absolutePos" data-expected-height="400" data-expected-widt h="400">	67 <div class="container">
	Manuel Rego 2015/12/02 09:31:01 I think you don't need the container here. I think you don't need the container here. jfernandez 2015/12/03 15:06:11 umm, I don't agree. the idea of this patch is to v Show quoted text On 2015/12/02 09:31:01, Manuel Rego wrote: > I think you don't need the container here. umm, I don't agree. the idea of this patch is to verify the shrink-to-fit behavior, hence we would need to have a container reference. If we don't set it here, we will us the viewport. I think all the test cases must be identical, just changing the positioning scheme. Manuel Rego 2015/12/04 13:12:43 Fair enough. Show quoted text On 2015/12/03 15:06:11, jfernandez wrote: > On 2015/12/02 09:31:01, Manuel Rego wrote: > > I think you don't need the container here. > > umm, I don't agree. the idea of this patch is to verify the shrink-to-fit > behavior, hence we would need to have a container reference. If we don't set it > here, we will us the viewport. I think all the test cases must be identical, > just changing the positioning scheme. Fair enough.
62 <div class="gg" id="one"></div>	68 <div class="grid" id="absolutePos" data-expected-height="400" data-expected- width="400">

63 <div class="gg" id="two"></div>	69 <div id="one"></div>

64 <div class="gg" id="three"></div>	70 <div id="two"></div>

65 <div class="gg" id="four"></div>	71 <div id="three"></div>

	72 <div id="four"></div>

	73 </div>

66 </div>	74 </div>

67	75

68 <div class="grid" id="fixedPos" data-expected-height="400" data-expected-width=" 400">	76 <div class="container">
	Manuel Rego 2015/12/02 09:31:01 Ditto. Ditto.
69 <div class="gg" id="one"></div>	77 <div class="grid" id="fixedPos" data-expected-height="400" data-expected-wid th="400">

70 <div class="gg" id="two"></div>	78 <div id="one"></div>

71 <div class="gg" id="three"></div>	79 <div id="two"></div>

72 <div class="gg" id="four"></div>	80 <div id="three"></div>

	81 <div id="four"></div>

	82 </div>

73 </div>	83 </div>

74	84

75 <div class="grid" id="floatPos" data-expected-height="400" data-expected-width=" 400">	85 <div class="container">
	Manuel Rego 2015/12/02 09:31:02 Ditto. Ditto.
76 <div class="gg" id="one"></div>	86 <div class="grid" id="floatPos" data-expected-height="400" data-expected-wid th="400">

77 <div class="gg" id="two"></div>	87 <div id="one"></div>

78 <div class="gg" id="three"></div>	88 <div id="two"></div>

79 <div class="gg" id="four"></div>	89 <div id="three"></div>

	90 <div id="four"></div>

	91 </div>

80 </div>	92 </div>

81	93

82 </body>	94 </body>

83 </html>	95 </html>

OLD	NEW