| Index: LayoutTests/fast/css-grid-layout/grid-item-with-percent-min-max-height-dynamic.html
|
| diff --git a/LayoutTests/fast/css-grid-layout/grid-item-with-percent-min-max-height-dynamic.html b/LayoutTests/fast/css-grid-layout/grid-item-with-percent-min-max-height-dynamic.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..6095977daaa1517b0d98dbc38822fd6e0780a8de
|
| --- /dev/null
|
| +++ b/LayoutTests/fast/css-grid-layout/grid-item-with-percent-min-max-height-dynamic.html
|
| @@ -0,0 +1,64 @@
|
| +<!DOCTYPE html>
|
| +<html>
|
| +<script>
|
| +if (window.testRunner)
|
| + testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
|
| +</script>
|
| +<link href="resources/grid.css" rel="stylesheet">
|
| +<style>
|
| +.grid {
|
| + grid-definition-columns: 50px 100px;
|
| + grid-definition-rows: 70px 140px;
|
| +}
|
| +
|
| +#minHeightPercent {
|
| + height: 10px;
|
| + min-height: 50%;
|
| +}
|
| +
|
| +#maxHeightPercent {
|
| + height: 100px;
|
| + max-height: 50%;
|
| +}
|
| +</style>
|
| +<script src="../../resources/check-layout.js"></script>
|
| +<script>
|
| +function testLayout(gridElementID, gridTracks, size)
|
| +{
|
| + var gridElement = document.getElementById(gridElementID);
|
| + gridElement.style.gridDefinitionRows = gridTracks.rows;
|
| + var gridItem = gridElement.firstChild.nextSibling;
|
| + gridItem.setAttribute("data-expected-width", size.width);
|
| + gridItem.setAttribute("data-expected-height", size.height);
|
| + checkLayout("#" + gridElementID)
|
| +}
|
| +
|
| +function runTests()
|
| +{
|
| + testLayout("gridWithMinHeightItem", { "rows": "70px 140px" }, { "width": "50px", "height": "35px" });
|
| + testLayout("gridWithMinHeightItem", { "rows": "100px 140px" }, { "width": "50px", "height": "50px" });
|
| + testLayout("gridWithMinHeightItem", { "rows": "100px 240px" }, { "width": "50px", "height": "50px" });
|
| + testLayout("gridWithMinHeightItem", { "rows": "10px 240px" }, { "width": "50px", "height": "10px" });
|
| +
|
| + testLayout("gridWithMaxHeightItem", { "rows": "70px 140px" }, { "width": "50px", "height": "35px" });
|
| + testLayout("gridWithMaxHeightItem", { "rows": "100px 140px" }, { "width": "50px", "height": "50px" });
|
| + testLayout("gridWithMaxHeightItem", { "rows": "100px 240px" }, { "width": "50px", "height": "50px" });
|
| + testLayout("gridWithMaxHeightItem", { "rows": "1000px 240px" }, { "width": "50px", "height": "100px" });
|
| +}
|
| +
|
| +window.addEventListener("load", runTests, false);
|
| +</script>
|
| +<body>
|
| +
|
| +<p>Test that grid items with a percentage logical min-height or max-height resolve their size properly.</p>
|
| +
|
| +<div id="gridWithMinHeightItem" class="grid">
|
| + <div id="minHeightPercent"></div>
|
| +</div>
|
| +
|
| +<div id="gridWithMaxHeightItem" class="grid">
|
| + <div id="maxHeightPercent"></div>
|
| +</div>
|
| +
|
| +</body>
|
| +</html>
|
|
|
Chromium Code Reviews
Issue 23694023:
Remove an extra relayout for non-percent logical height grid items (Closed)
Base URL: svn://svn.chromium.org/blink/trunk