Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(42)

Unified Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-unknown-named-grid-line-resolution.html

Issue 1576993003: [css-grid] Fix placement for unknown named grid lines (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Fixing last review comments Created 4 years, 11 months 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 side-by-side diff with in-line comments
Download patch
Index: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-unknown-named-grid-line-resolution.html
diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-unknown-named-grid-line-resolution.html b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-unknown-named-grid-line-resolution.html
new file mode 100644
index 0000000000000000000000000000000000000000..c9bb129b24c6f99d6a31e23beb501b771997566f
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-unknown-named-grid-line-resolution.html
@@ -0,0 +1,447 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+.grid {
+ grid-template-columns: [vertical] 50px [middle vertical] 100px [vertical];
+ grid-auto-columns: 10px;
+ grid-template-rows: [horizontal] 30px [middle horizontal] 60px [horizontal];
+ grid-auto-rows: 5px;
+}
+</style>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid')">
+<div id="log"></div>
+
+<p>This test checks that we resolve unknown named grid lines considering that all the implicit lines have the unknown names.</p>
+
+<div style="position: relative">
+ <div class="grid">
+ <div style="grid-column: foo; grid-row: bar;"
+ data-offset-x="160" data-offset-y="95" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="grid-column: a; grid-row: b;"
+ data-offset-x="160" data-offset-y="95" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="grid-column: line; grid-row: line;"
+ data-offset-x="160" data-offset-y="95" data-expected-width="10" data-expected-height="5">
+ </div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <div class="grid">
+ <div style="grid-column: foo; grid-row: bar;"
+ data-offset-x="160" data-offset-y="95" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="grid-column: 1 / foo; grid-row: 1 / bar;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="160" data-expected-height="95">
+ </div>
+ <div style="grid-column: foo / 1; grid-row: bar / 1;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="160" data-expected-height="95">
+ </div>
+ <div style="grid-column: foo / foo; grid-row: bar / bar;"
+ data-offset-x="160" data-offset-y="95" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="grid-column: foo / bar; grid-row: bar / foo;"
+ data-offset-x="160" data-offset-y="95" data-expected-width="10" data-expected-height="5">
+ </div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <div class="grid">
+ <div style="grid-column: 1 foo; grid-row: 1 bar;"
+ data-offset-x="160" data-offset-y="95" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="grid-column: 2 foo; grid-row: 2 bar;"
+ data-offset-x="170" data-offset-y="100" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="grid-column: 3 foo; grid-row: 3 bar;"
+ data-offset-x="180" data-offset-y="105" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="grid-column: 4 foo; grid-row: 4 bar;"
+ data-offset-x="190" data-offset-y="110" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="grid-column: 5 foo; grid-row: 5 bar;"
+ data-offset-x="200" data-offset-y="115" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="grid-column: 2 foo / 4 foo; grid-row: 2 bar / 4 bar;"
+ data-offset-x="170" data-offset-y="100" data-expected-width="20" data-expected-height="10">
+ </div>
+ <div style="grid-column: 2 foo / 4 bar; grid-row: 2 bar / 4 foo;"
+ data-offset-x="170" data-offset-y="100" data-expected-width="20" data-expected-height="10">
+ </div>
+ <div style="grid-column: 5 foo / 3 foo; grid-row: 5 bar / 3 bar;"
+ data-offset-x="180" data-offset-y="105" data-expected-width="20" data-expected-height="10">
+ </div>
+ <div style="grid-column: 5 foo / 3 bar; grid-row: 5 bar / 3 foo;"
+ data-offset-x="180" data-offset-y="105" data-expected-width="20" data-expected-height="10">
+ </div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <div class="grid">
+ <div style="grid-column: -1 foo; grid-row: -1 bar;"
+ data-offset-x="40" data-offset-y="20" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="grid-column: -2 foo; grid-row: -2 bar;"
+ data-offset-x="30" data-offset-y="15" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="grid-column: -3 foo; grid-row: -3 bar;"
+ data-offset-x="20" data-offset-y="10" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="grid-column: -4 foo; grid-row: -4 bar;"
+ data-offset-x="10" data-offset-y="5" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="grid-column: -5 foo; grid-row: -5 bar;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="grid-column: -4 foo / -2 foo; grid-row: -4 bar / -2 bar;"
+ data-offset-x="10" data-offset-y="5" data-expected-width="20" data-expected-height="10">
+ </div>
+ <div style="grid-column: -4 foo / -2 bar; grid-row: -4 bar / -2 foo;"
+ data-offset-x="10" data-offset-y="5" data-expected-width="20" data-expected-height="10">
+ </div>
+ <div style="grid-column: -3 foo / -5 foo; grid-row: -3 bar / -5 bar;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="10">
+ </div>
+ <div style="grid-column: -3 foo / -5 bar; grid-row: -3 bar / -5 foo;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="10">
+ </div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <div class="grid">
+ <div style="grid-column: 1 / span foo; grid-row: 1 / span bar;"
+ data-offset-x="10" data-offset-y="5" data-expected-width="160" data-expected-height="95">
+ </div>
+ <div style="grid-column: span foo / 1; grid-row: span bar / 1;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="grid-column: foo / span foo; grid-row: bar / span bar;"
+ data-offset-x="170" data-offset-y="100" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="grid-column: foo / span bar; grid-row: bar / span foo;"
+ data-offset-x="170" data-offset-y="100" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="grid-column: span foo / foo; grid-row: span bar / bar;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="170" data-expected-height="100">
+ </div>
+ <div style="grid-column: span foo / bar; grid-row: span bar / foo;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="170" data-expected-height="100">
+ </div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <div class="grid">
+ <div style="grid-column: -1 / span foo; grid-row: -1 / span bar;"
+ data-offset-x="170" data-offset-y="100" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="grid-column: span foo / -1; grid-row: span bar / -1;"
+ data-offset-x="10" data-offset-y="5" data-expected-width="160" data-expected-height="95">
+ </div>
+ <div style="grid-column: -1 foo / span foo; grid-row: -1 bar / span bar;"
+ data-offset-x="10" data-offset-y="5" data-expected-width="170" data-expected-height="100">
+ </div>
+ <div style="grid-column: -1 foo / span bar; grid-row: -1 bar / span foo;"
+ data-offset-x="10" data-offset-y="5" data-expected-width="170" data-expected-height="100">
+ </div>
+ <div style="grid-column: span foo / -1 foo; grid-row: span bar / -1 bar;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="grid-column: span foo / -1 bar; grid-row: span bar / -1 foo;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="5">
+ </div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <div class="grid">
+ <div style="grid-column: 1 / span 2 foo; grid-row: 1 / span 2 bar;"
+ data-offset-x="20" data-offset-y="10" data-expected-width="170" data-expected-height="100">
+ </div>
+ <div style="grid-column: span 2 foo / 1; grid-row: span 2 bar / 1;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="10">
+ </div>
+ <div style="grid-column: foo / span 2 foo; grid-row: bar / span 2 bar;"
+ data-offset-x="180" data-offset-y="105" data-expected-width="20" data-expected-height="10">
+ </div>
+ <div style="grid-column: foo / span 2 bar; grid-row: bar / span 2 foo;"
+ data-offset-x="180" data-offset-y="105" data-expected-width="20" data-expected-height="10">
+ </div>
+ <div style="grid-column: span 2 foo / foo; grid-row: span 2 bar / bar;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="180" data-expected-height="105">
+ </div>
+ <div style="grid-column: span 2 foo / bar; grid-row: span 2 bar / foo;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="180" data-expected-height="105">
+ </div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <div class="grid">
+ <div style="grid-column: -1 / span 2 foo; grid-row: -1 / span 2 bar;"
+ data-offset-x="180" data-offset-y="105" data-expected-width="20" data-expected-height="10">
+ </div>
+ <div style="grid-column: span 2 foo / -1; grid-row: span 2 bar / -1;"
+ data-offset-x="10" data-offset-y="5" data-expected-width="170" data-expected-height="100">
+ </div>
+ <div style="grid-column: -1 foo / span 2 foo; grid-row: -1 bar / span 2 bar;"
+ data-offset-x="20" data-offset-y="10" data-expected-width="180" data-expected-height="105">
+ </div>
+ <div style="grid-column: -1 foo / span 2 bar; grid-row: -1 bar / span 2 foo;"
+ data-offset-x="20" data-offset-y="10" data-expected-width="180" data-expected-height="105">
+ </div>
+ <div style="grid-column: span 2 foo / -1 foo; grid-row: span 2 bar / -1 bar;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="10">
+ </div>
+ <div style="grid-column: span 2 foo / -1 bar; grid-row: span 2 bar / -1 foo;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="10">
+ </div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <div class="grid">
+ <div style="grid-column: 2 foo / span foo; grid-row: 2 bar / span bar;"
+ data-offset-x="190" data-offset-y="110" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="grid-column: 2 foo / span bar; grid-row: 2 bar / span foo;"
+ data-offset-x="190" data-offset-y="110" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="grid-column: 2 foo / span 2 foo; grid-row: 2 bar / span 2 bar;"
+ data-offset-x="190" data-offset-y="110" data-expected-width="20" data-expected-height="10">
+ </div>
+ <div style="grid-column: 2 foo / span 2 bar; grid-row: 2 bar / span 2 foo;"
+ data-offset-x="190" data-offset-y="110" data-expected-width="20" data-expected-height="10">
+ </div>
+ <div style="grid-column: span foo / 2 foo; grid-row: span bar / 2 bar;"
+ data-offset-x="10" data-offset-y="5" data-expected-width="180" data-expected-height="105">
+ </div>
+ <div style="grid-column: span foo / 2 bar; grid-row: span bar / 2 foo;"
+ data-offset-x="10" data-offset-y="5" data-expected-width="180" data-expected-height="105">
+ </div>
+ <div style="grid-column: span 2 foo / 2 foo; grid-row: span 2 bar / 2 bar;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="190" data-expected-height="110">
+ </div>
+ <div style="grid-column: span 2 foo / 2 bar; grid-row: span 2 bar / 2 foo;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="190" data-expected-height="110">
+ </div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <div class="grid">
+ <div style="grid-column: -2 foo / span foo; grid-row: -2 bar / span bar;"
+ data-offset-x="20" data-offset-y="10" data-expected-width="180" data-expected-height="105">
+ </div>
+ <div style="grid-column: -2 foo / span bar; grid-row: -2 bar / span foo;"
+ data-offset-x="20" data-offset-y="10" data-expected-width="180" data-expected-height="105">
+ </div>
+ <div style="grid-column: -2 foo / span 2 foo; grid-row: -2 bar / span 2 bar;"
+ data-offset-x="20" data-offset-y="10" data-expected-width="190" data-expected-height="110">
+ </div>
+ <div style="grid-column: -2 foo / span 2 bar; grid-row: -2 bar / span 2 foo;"
+ data-offset-x="20" data-offset-y="10" data-expected-width="190" data-expected-height="110">
+ </div>
+ <div style="grid-column: span foo / -2 foo; grid-row: span bar / -2 bar;"
+ data-offset-x="10" data-offset-y="5" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="grid-column: span foo / -2 bar; grid-row: span bar / -2 foo;"
+ data-offset-x="10" data-offset-y="5" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="grid-column: span 2 foo / -2 foo; grid-row: span 2 bar / -2 bar;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="10">
+ </div>
+ <div style="grid-column: span 2 foo / -2 bar; grid-row: span 2 bar / -2 foo;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="10">
+ </div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <div class="grid">
+ <div style="grid-column: 1 middle; grid-row: 1 middle;"
+ data-offset-x="50" data-offset-y="30" data-expected-width="100" data-expected-height="60">
+ </div>
+ <div style="grid-column: 2 middle; grid-row: 2 middle;"
+ data-offset-x="160" data-offset-y="95" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="grid-column: 3 middle; grid-row: 3 middle;"
+ data-offset-x="170" data-offset-y="100" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="grid-column: 4 middle; grid-row: 4 middle;"
+ data-offset-x="180" data-offset-y="105" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="grid-column: 5 middle; grid-row: 5 middle;"
+ data-offset-x="190" data-offset-y="110" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="grid-column: 2 middle / 4 middle; grid-row: 2 middle / 4 middle;"
+ data-offset-x="160" data-offset-y="95" data-expected-width="20" data-expected-height="10">
+ </div>
+ <div style="grid-column: 5 middle / 3 middle; grid-row: 5 middle / 3 middle;"
+ data-offset-x="170" data-offset-y="100" data-expected-width="20" data-expected-height="10">
+ </div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <div class="grid">
+ <div style="grid-column: -1 middle; grid-row: -1 middle;"
+ data-offset-x="90" data-offset-y="50" data-expected-width="100" data-expected-height="60">
+ </div>
+ <div style="grid-column: -2 middle; grid-row: -2 middle;"
+ data-offset-x="30" data-offset-y="15" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="grid-column: -3 middle; grid-row: -3 middle;"
+ data-offset-x="20" data-offset-y="10" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="grid-column: -4 middle; grid-row: -4 middle;"
+ data-offset-x="10" data-offset-y="5" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="grid-column: -5 middle; grid-row: -5 middle;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="grid-column: -2 middle / -4 middle; grid-row: -2 middle / -4 middle;"
+ data-offset-x="10" data-offset-y="5" data-expected-width="20" data-expected-height="10">
+ </div>
+ <div style="grid-column: -5 middle / -3 middle; grid-row: -5 middle / -3 middle;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="10">
+ </div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <div class="grid">
+ <div style="grid-column: 1 vertical; grid-row: 1 horizontal;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="30">
+ </div>
+ <div style="grid-column: 2 vertical; grid-row: 2 horizontal;"
+ data-offset-x="50" data-offset-y="30" data-expected-width="100" data-expected-height="60">
+ </div>
+ <div style="grid-column: 3 vertical; grid-row: 3 horizontal;"
+ data-offset-x="150" data-offset-y="90" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="grid-column: 4 vertical; grid-row: 4 horizontal;"
+ data-offset-x="160" data-offset-y="95" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="grid-column: 5 vertical; grid-row: 5 horizontal;"
+ data-offset-x="170" data-offset-y="100" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="grid-column: 2 vertical / 4 vertical; grid-row: 2 horizontal / 4 horizontal;"
+ data-offset-x="50" data-offset-y="30" data-expected-width="110" data-expected-height="65">
+ </div>
+ <div style="grid-column: 5 vertical / 3 vertical; grid-row: 5 horizontal / 3 horizontal;"
+ data-offset-x="150" data-offset-y="90" data-expected-width="20" data-expected-height="10">
+ </div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <div class="grid">
+ <div style="grid-column: -1 vertical; grid-row: -1 horizontal;"
+ data-offset-x="170" data-offset-y="100" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="grid-column: -2 vertical; grid-row: -2 horizontal;"
+ data-offset-x="70" data-offset-y="40" data-expected-width="100" data-expected-height="60">
+ </div>
+ <div style="grid-column: -3 vertical; grid-row: -3 horizontal;"
+ data-offset-x="20" data-offset-y="10" data-expected-width="50" data-expected-height="30">
+ </div>
+ <div style="grid-column: -4 vertical; grid-row: -4 horizontal;"
+ data-offset-x="10" data-offset-y="5" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="grid-column: -5 vertical; grid-row: -5 horizontal;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="grid-column: -2 vertical / -4 vertical; grid-row: -2 horizontal / -4 horizontal;"
+ data-offset-x="10" data-offset-y="5" data-expected-width="60" data-expected-height="35">
+ </div>
+ <div style="grid-column: -5 vertical / -3 vertical; grid-row: -5 horizontal / -3 horizontal;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="10">
+ </div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <div class="grid">
+ <div style="grid-column: 1 / span middle; grid-row: 1 / span middle;"
+ data-offset-x="20" data-offset-y="10" data-expected-width="50" data-expected-height="30">
+ </div>
+ <div style="grid-column: span middle / 1; grid-row: span middle / 1;"
+ data-offset-x="10" data-offset-y="5" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="grid-column: 1 / span 2 middle; grid-row: 1 / span 2 middle;"
+ data-offset-x="20" data-offset-y="10" data-expected-width="160" data-expected-height="95">
+ </div>
+ <div style="grid-column: span 2 middle / 1; grid-row: span 2 middle / 1;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="10">
+ </div>
+ <div style="grid-column: middle / span middle; grid-row: middle / span middle;"
+ data-offset-x="70" data-offset-y="40" data-expected-width="110" data-expected-height="65">
+ </div>
+ <div style="grid-column: span middle / middle; grid-row: span middle / middle;"
+ data-offset-x="10" data-offset-y="5" data-expected-width="60" data-expected-height="35">
+ </div>
+ <div style="grid-column: middle / span 2 middle; grid-row: middle / span 2 middle;"
+ data-offset-x="70" data-offset-y="40" data-expected-width="120" data-expected-height="70">
+ </div>
+ <div style="grid-column: span 2 middle / middle; grid-row: span 2 middle / middle;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="40">
+ </div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <div class="grid">
+ <div style="grid-column: -1 / span middle; grid-row: -1 / span middle;"
+ data-offset-x="170" data-offset-y="100" data-expected-width="10" data-expected-height="5">
+ </div>
+ <div style="grid-column: span middle / -1; grid-row: span middle / -1;"
+ data-offset-x="70" data-offset-y="40" data-expected-width="100" data-expected-height="60">
+ </div>
+ <div style="grid-column: -1 / span 2 middle; grid-row: -1 / span 2 middle;"
+ data-offset-x="170" data-offset-y="100" data-expected-width="20" data-expected-height="10">
+ </div>
+ <div style="grid-column: span 2 middle / -1; grid-row: span 2 middle / -1;"
+ data-offset-x="10" data-offset-y="5" data-expected-width="160" data-expected-height="95">
+ </div>
+ <div style="grid-column: -1 middle / span middle; grid-row: -1 middle / span middle;"
+ data-offset-x="70" data-offset-y="40" data-expected-width="110" data-expected-height="65">
+ </div>
+ <div style="grid-column: span middle / -1 middle; grid-row: span middle / -1 middle;"
+ data-offset-x="10" data-offset-y="5" data-expected-width="60" data-expected-height="35">
+ </div>
+ <div style="grid-column: -1 middle / span 2 middle; grid-row: -1 middle / span 2 middle;"
+ data-offset-x="70" data-offset-y="40" data-expected-width="120" data-expected-height="70">
+ </div>
+ <div style="grid-column: span 2 middle / -1 middle; grid-row: span 2 middle / -1 middle;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="40">
+ </div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <div class="grid">
+ <div style="grid-column: span middle / 6; grid-row: span middle / 6;"
+ data-offset-x="80" data-offset-y="45" data-expected-width="130" data-expected-height="75">
+ </div>
+ <div style="grid-column: span 2 middle / 6; grid-row: span 2 middle / 6;"
+ data-offset-x="20" data-offset-y="10" data-expected-width="190" data-expected-height="110">
+ </div>
+ <div style="grid-column: -6 / span middle; grid-row: -6 / span middle;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="80" data-expected-height="45">
+ </div>
+ <div style="grid-column: -6 / span 2 middle; grid-row: -6 / span 2 middle;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="190" data-expected-height="110">
+ </div>
+ </div>
+</div>
+
+</body>

Powered by Google App Engine
This is Rietveld 408576698