@@ -100,7 +100,12 @@ Rectangle {
100100 {
101101 "name": "Art, title - vertical, fitted",
102102 "layout": { "components": Helpers.update(JSON.parse(root.fullMapping), { "art": { "fill-mode": "fit" } }) }
103− }
103+ },
104+ {
105+ "name": "Art, header, summary - horizontal",
106+ "layout": { "template": { "card-layout": "horizontal" },
107+ "components": JSON.parse(fullMapping) }
108+ },
104109 ]
105110
106111 Card {
@@ -231,6 +236,7 @@ Rectangle {
231236 { tag: "Small", width: units.gu(12), size: "small", index: 0 },
232237 { tag: "Large", width: units.gu(38), size: "large", index: 0 },
233238 { tag: "Wide", width: units.gu(18.5), aspect: 0.5, index: 0 },
239+ { tag: "Horizontal", width: units.gu(38), index: 5 },
234240 ]
235241 }
236242
@@ -263,6 +269,9 @@ Rectangle {
263269 { tag: "Large", width: units.gu(38), index: 2 },
264270 { tag: "Wide", height: units.gu(19), size: "large", index: 3 },
265271 { tag: "Fit", height: units.gu(38), size: "large", width: units.gu(19), index: 4 },
272+ { tag: "VerticalWidth", width: function() { return header.width }, index: 0 },
273+ { tag: "HorizontalHeight", height: function() { return header.height }, index: 5 },
274+ { tag: "HorizontalWidth", width: function() { return header.x }, index: 5 },
266275 ]
267276 }
268277
@@ -280,16 +289,49 @@ Rectangle {
280289 }
281290
282291 if (data.hasOwnProperty("width")) {
283− tryCompare(art, "width", data.width);
292+ if (typeof data.width === "function") {
293+ tryCompareFunction(function() { return art.width === data.width() }, true);
294+ } else tryCompare(art, "width", data.width);
284295 }
285296
286297 if (data.hasOwnProperty("height")) {
287− tryCompare(art, "height", data.height);
298+ if (typeof data.height === "function") {
299+ tryCompareFunction(function() { return art.height === data.height() }, true);
300+ } else tryCompare(art, "height", data.height);
288301 }
289302
290303 if (data.hasOwnProperty("fill")) {
291304 tryCompare(artImage, "fillMode", data.fill);
292305 }
293306 }
307+
308+ function test_art_layout_data() {
309+ return [
310+ { tag: "Vertical", left: function() { return 0 }, index: 0},
311+ { tag: "Horizontal", left: function() { return art.width }, index: 5 }
312+ ];
313+ }
314+
315+ function test_art_layout(data) {
316+ selector.selectedIndex = data.index;
317+
318+ tryCompare(testCase.header, "x", data.left());
319+ }
320+
321+ function test_header_layout_data() {
322+ return [
323+ { tag: "Vertical", top: function() { return art.y + art.height },
324+ left: function() { return art.x }, index: 0 },
325+ { tag: "Horizontal", top: function() { return art.y },
326+ left: function() { return art.x + art.width }, index: 5 }
327+ ]
328+ }
329+
330+ function test_header_layout(data) {
331+ selector.selectedIndex = data.index;
332+
333+ tryCompareFunction(function() { return testCase.header.y === data.top() }, true);
334+ tryCompareFunction(function() { return testCase.header.x === data.left() }, true);
335+ }
294336 }
295337}