4 <link href=
"resources/grid.css" rel=
"stylesheet"/>
6 .gridFixedMinContentAndFixedMaxContent {
7 grid-template-columns: minmax(
20px, min-content) minmax(
20px, max-content);
9 .gridMaxContentFixedAndMinContentFixed {
10 grid-template-columns: minmax(max-content,
50px) minmax(min-content,
50px);
12 .gridFixedMinContentAndAuto {
13 grid-template-columns: minmax(
20px, min-content) auto;
15 .gridFixedMaxContentAndAuto {
16 grid-template-columns: minmax(
20px, max-content) auto;
18 .gridMaxContentAndAuto {
19 grid-template-columns: max-content auto;
21 .gridAutoAndMaxContent {
22 grid-template-columns: auto max-content;
24 .gridMinContentAndAuto {
25 grid-template-columns: min-content auto;
27 .gridAutoAndMinContent {
28 grid-template-columns: min-content auto;
34 <script src=
"../../resources/js-test.js"></script>
37 <div style=
"position: relative">
38 <div id=
"gridFixedMinContentAndFixedMaxContent" class=
"grid gridFixedMinContentAndFixedMaxContent">
39 <div class=
"firstRowFirstColumn">XXXXX
</div>
40 <div class=
"spanTwo secondRowFirstColumn">XXX XXX
</div>
44 <div style=
"position: relative">
45 <div id=
"gridMaxContentFixedAndMinContentFixed" class=
"grid gridMaxContentFixedAndMinContentFixed">
46 <div class=
"firstRowFirstColumn">XXXXX
</div>
47 <div class=
"spanTwo secondRowFirstColumn">XXX XXX
</div>
51 <div style=
"position: relative">
52 <div id=
"gridFixedMinContentAndAuto" class=
"grid gridFixedMinContentAndAuto">
53 <div class=
"firstRowFirstColumn">XXXXX
</div>
54 <div class=
"spanTwo secondRowFirstColumn">XXX XXX
</div>
58 <div style=
"position: relative">
59 <div id=
"gridFixedMaxContentAndAuto" class=
"grid gridFixedMaxContentAndAuto">
60 <div class=
"firstRowFirstColumn">XXXXX
</div>
61 <div class=
"spanTwo secondRowFirstColumn">XXX XXX
</div>
65 <div style=
"position: relative">
66 <div id=
"gridMaxContentAndAuto" class=
"grid gridMaxContentAndAuto">
67 <div class=
"firstRowFirstColumn">XXXXX
</div>
68 <div class=
"spanTwo secondRowFirstColumn">XXX XXX
</div>
72 <div style=
"position: relative">
73 <div id=
"gridAutoAndMaxContent" class=
"grid gridAutoAndMaxContent">
74 <div class=
"firstRowFirstColumn">XXXXX
</div>
75 <div class=
"spanTwo secondRowFirstColumn">XXX XXX
</div>
79 <div style=
"position: relative">
80 <div id=
"gridMinContentAndAuto" class=
"grid gridMinContentAndAuto">
81 <div class=
"firstRowFirstColumn">XXXXX
</div>
82 <div class=
"spanTwo secondRowFirstColumn">XXX XXX
</div>
86 <div style=
"position: relative">
87 <div id=
"gridAutoAndMinContent" class=
"grid gridAutoAndMinContent">
88 <div class=
"firstRowFirstColumn">XXXXX
</div>
89 <div class=
"spanTwo secondRowFirstColumn">XXX XXX
</div>
94 <script src=
"resources/grid-definitions-parsing-utils.js"></script>
97 function checkTrackBreadthAfterItemRowSwap(gridId
)
99 window
.gridElement
= document
.getElementById(gridId
);
100 var oldValue
= getComputedStyle(gridElement
, '').getPropertyValue('grid-template-columns');
101 var firstChildRow
= getComputedStyle(gridElement
.children
[0],'').getPropertyValue('grid-row');
102 gridElement
.children
[0].style
.gridRow
= getComputedStyle(gridElement
.children
[1],'').getPropertyValue('grid-row');
103 gridElement
.children
[1].style
.gridRow
= firstChildRow
;
104 var newValue
= getComputedStyle(gridElement
, '').getPropertyValue('grid-template-columns');
106 if (newValue
== oldValue
)
107 testPassed("grid-template-columns are identical after grid row swap.");
109 testFailed("grid-template-columns should be " + oldValue
+ ". Was " + newValue
+ ".");
112 checkTrackBreadthAfterItemRowSwap("gridFixedMinContentAndFixedMaxContent");
113 checkTrackBreadthAfterItemRowSwap("gridMaxContentFixedAndMinContentFixed");
114 checkTrackBreadthAfterItemRowSwap("gridFixedMinContentAndAuto");
115 checkTrackBreadthAfterItemRowSwap("gridFixedMaxContentAndAuto");
116 checkTrackBreadthAfterItemRowSwap("gridMaxContentAndAuto");
117 checkTrackBreadthAfterItemRowSwap("gridAutoAndMaxContent");
118 checkTrackBreadthAfterItemRowSwap("gridMinContentAndAuto");
119 checkTrackBreadthAfterItemRowSwap("gridAutoAndMinContent");