Index: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-bad-named-area-auto-placement.html |
diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-bad-named-area-auto-placement.html b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-bad-named-area-auto-placement.html |
index 78f137eba03b3cb1a22478331ddc33d0e067d4db..35953143e74616a5df21abf57e26a6329747bc4a 100644 |
--- a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-bad-named-area-auto-placement.html |
+++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-bad-named-area-auto-placement.html |
@@ -4,60 +4,66 @@ |
<style> |
.grid { |
grid-template-rows: 10px 20px; |
+ grid-auto-rows: 5px; |
grid-template-columns: 30px 40px; |
+ grid-auto-columns: 15px; |
grid-auto-flow: row; |
} |
.bothNamedGridLineRow { |
grid-row: nonExistentArea / nonExistentArea; |
grid-column: 1; |
+ background-color: lime; |
} |
.bothNamedGridLineColumn { |
grid-row: 1; |
grid-column: nonExistentArea / span 3; |
+ background-color: lime; |
} |
.namedGridLineSpanRow { |
grid-row: nonExistentArea / span 5 firstRow; |
grid-column: 1; |
+ background-color: lime; |
} |
.namedGridLineSpanColumn { |
grid-row: 1; |
grid-column: nonExistentArea / span; |
+ background-color: lime; |
} |
</style> |
<script src="../../resources/check-layout.js"></script> |
<body onload="checkLayout('.grid')"> |
-<p>This test checks that unknown named area are treated as 'auto' by applying the auto-placement algorithm when mandated.</p> |
+<p>This test checks that unknown named area are are resolved properly considering all the implicit grid lines to have the given names.</p> |
<div style="position: relative"> |
<div class="grid"> |
<div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="30" data-expected-height="10"></div> |
- <div class="sizedToGridArea bothNamedGridLineRow" data-offset-x="0" data-offset-y="10" data-expected-width="30" data-expected-height="20"></div> |
+ <div class="sizedToGridArea bothNamedGridLineRow" data-offset-x="0" data-offset-y="35" data-expected-width="30" data-expected-height="5"></div> |
</div> |
</div> |
<div style="position: relative"> |
<div class="grid"> |
<div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="30" data-expected-height="10"></div> |
- <div class="sizedToGridArea bothNamedGridLineColumn" data-offset-x="30" data-offset-y="0" data-expected-width="40" data-expected-height="10"></div> |
+ <div class="sizedToGridArea bothNamedGridLineColumn" data-offset-x="85" data-offset-y="0" data-expected-width="45" data-expected-height="10"></div> |
</div> |
</div> |
<div style="position: relative"> |
<div class="grid"> |
<div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="30" data-expected-height="10"></div> |
- <div class="sizedToGridArea namedGridLineSpanRow" data-offset-x="0" data-offset-y="10" data-expected-width="30" data-expected-height="20"></div> |
+ <div class="sizedToGridArea namedGridLineSpanRow" data-offset-x="0" data-offset-y="35" data-expected-width="30" data-expected-height="25"></div> |
</div> |
</div> |
<div style="position: relative"> |
<div class="grid"> |
<div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="30" data-expected-height="10"></div> |
- <div class="sizedToGridArea namedGridLineSpanColumn" data-offset-x="30" data-offset-y="0" data-expected-width="40" data-expected-height="10"></div> |
+ <div class="sizedToGridArea namedGridLineSpanColumn" data-offset-x="85" data-offset-y="0" data-expected-width="15" data-expected-height="10"></div> |
</div> |
</div> |