Bug 1493642 [wpt PR 13184] - [css-grid] Fix percentages in relative offsets for grid items, a=testonly
authorManuel Rego Casasnovas <rego@igalia.com>
Thu, 11 Oct 2018 09:31:59 +0000
changeset 489271 31a20d731a4041d04f4dd6f0d896b9444634ac1a
parent 489270 dae114307716d9290773130e728b5c5b6d44dad6
child 489272 47592c094a7b01ec9fef60f9dcdd4c5842f50d3a
push id247
push userfmarier@mozilla.com
push dateSat, 27 Oct 2018 01:06:44 +0000
reviewerstestonly
bugs1493642, 13184, 835607, 1238726, 597543
milestone64.0a1
Bug 1493642 [wpt PR 13184] - [css-grid] Fix percentages in relative offsets for grid items, a=testonly Automatic update from web-platform-tests[css-grid] Fix percentages in relative offsets for grid items The method LayoutBoxModelObject::RelativePositionOffset() was not considering the case of grid items, where the containing block is the grid area. The patch modifies the method so the new code uses OverrideContainingBlockContentLogicalWidth|Height when required. Two new tests are added, the first one does not use percentages and is already passing. The second one has the very same output but using percentages which was not working before this patch. BUG=835607 TEST=external/wpt/css/css-grid/grid-items/grid-items-relative-offsets-001.html TEST=external/wpt/css/css-grid/grid-items/grid-items-relative-offsets-002.html Change-Id: Icb76f4a521566ad36f87924835b21ae450f2cb24 Reviewed-on: https://chromium-review.googlesource.com/c/1238726 Reviewed-by: Javier Fernandez <jfernandez@igalia.com> Commit-Queue: Manuel Rego <rego@igalia.com> Cr-Commit-Position: refs/heads/master@{#597543} -- Fix lint by syncing all support/grid.css -- wpt-commits: d66f26198d800f48078618eea47a9da20954f724, 907455e8cd08741745ad097e12806073c61830d2 wpt-pr: 13184
testing/web-platform/tests/css/css-grid/abspos/support/grid.css
testing/web-platform/tests/css/css-grid/grid-definition/support/grid.css
testing/web-platform/tests/css/css-grid/grid-items/grid-items-relative-offsets-001.html
testing/web-platform/tests/css/css-grid/grid-items/grid-items-relative-offsets-002.html
testing/web-platform/tests/css/css-grid/grid-items/support/grid.css
testing/web-platform/tests/css/css-grid/grid-model/support/grid.css
testing/web-platform/tests/css/support/grid.css
--- a/testing/web-platform/tests/css/css-grid/abspos/support/grid.css
+++ b/testing/web-platform/tests/css/css-grid/abspos/support/grid.css
@@ -63,16 +63,22 @@
 }
 
 .thirdRowSecondColumn {
   background-color: red;
   grid-column: 2;
   grid-row: 3;
 }
 
+.thirdRowThirdColumn {
+  background-color: salmon;
+  grid-column: 3;
+  grid-row: 3;
+}
+
 .firstRowThirdColumn {
   background-color: magenta;
   grid-column: 3;
   grid-row: 1;
 }
 
 .secondRowThirdColumn {
   background-color: navy;
--- a/testing/web-platform/tests/css/css-grid/grid-definition/support/grid.css
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/support/grid.css
@@ -63,16 +63,22 @@
 }
 
 .thirdRowSecondColumn {
   background-color: red;
   grid-column: 2;
   grid-row: 3;
 }
 
+.thirdRowThirdColumn {
+  background-color: salmon;
+  grid-column: 3;
+  grid-row: 3;
+}
+
 .firstRowThirdColumn {
   background-color: magenta;
   grid-column: 3;
   grid-row: 1;
 }
 
 .secondRowThirdColumn {
   background-color: navy;
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-relative-offsets-001.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with relative offsets</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing">
+<meta name="assert" content="Checks that relative offests work for grid items.">
+<link rel="stylesheet" href="support/grid.css">
+<style>
+.grid {
+  position: relative;
+  grid: 90px 60px 30px / 200px 150px 100px;
+  inline-size: 600px;
+  block-size: 300px;
+}
+
+.grid > div { position: relative; }
+</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>
+
+<h3>Direction LTR</h3>
+
+<div class="grid">
+  <div class="firstRowFirstColumn" style="left: 10px; top: 9px;"
+    data-offset-x="10" data-offest-y="9" data-expected-width="200" data-expected-height="90"></div>
+  <div class="secondRowSecondColumn" style="left: -15px; top: -12px;"
+    data-offset-x="185" data-offest-y="78" data-expected-width="150" data-expected-height="60"></div>
+  <div class="thirdRowThirdColumn" style="right: 30px; bottom: 21px;"
+    data-offset-x="320" data-offest-y="129" data-expected-width="100" data-expected-height="30"></div>
+</div>
+
+<h3>Direction RTL</h3>
+
+<div class="grid directionRTL">
+  <div class="firstRowFirstColumn" style="left: 10px; top: 9px;"
+    data-offset-x="410" data-offest-y="9" data-expected-width="200" data-expected-height="90"></div>
+  <div class="secondRowSecondColumn" style="left: -15px; top: -12px;"
+    data-offset-x="235" data-offest-y="78" data-expected-width="150" data-expected-height="60"></div>
+  <div class="thirdRowThirdColumn" style="right: 30px; bottom: 21px;"
+    data-offset-x="120" data-offest-y="129" data-expected-width="100" data-expected-height="30"></div>
+</div>
+
+<h2>Writing Mode vertical-lr</h2>
+
+<h3>Direction LTR</h3>
+
+<div class="grid verticalLR">
+  <div class="firstRowFirstColumn" style="left: 9px; top: 10px;"
+    data-offset-x="9" data-offest-y="10" data-expected-width="90" data-expected-height="200"></div>
+  <div class="secondRowSecondColumn" style="left: -12px; top: -15px;"
+    data-offset-x="78" data-offest-y="75" data-expected-width="60" data-expected-height="150"></div>
+  <div class="thirdRowThirdColumn" style="right: 21px; bottom: 30px;"
+    data-offset-x="129" data-offest-y="120" data-expected-width="30" data-expected-height="100"></div>
+</div>
+
+<h3>Direction RTL</h3>
+
+<div class="grid verticalLR directionRTL">
+  <div class="firstRowFirstColumn" style="left: 9px; top: 10px;"
+    data-offset-x="9" data-offest-y="10" data-expected-width="90" data-expected-height="200"></div>
+  <div class="secondRowSecondColumn" style="left: -12px; top: -15px;"
+    data-offset-x="78" data-offest-y="75" data-expected-width="60" data-expected-height="150"></div>
+  <div class="thirdRowThirdColumn" style="right: 21px; bottom: 30px;"
+    data-offset-x="129" data-offest-y="120" data-expected-width="30" data-expected-height="100"></div>
+</div>
+
+<h2>Writing Mode vertical-rl</h2>
+
+<h3>Direction LTR</h3>
+
+<div class="grid verticalRL">
+  <div class="firstRowFirstColumn" style="left: 9px; top: 10px;"
+    data-offset-x="219" data-offest-y="10" data-expected-width="90" data-expected-height="200"></div>
+  <div class="secondRowSecondColumn" style="left: -12px; top: -15px;"
+    data-offset-x="138" data-offest-y="75" data-expected-width="60" data-expected-height="150"></div>
+  <div class="thirdRowThirdColumn" style="right: 21px; bottom: 30px;"
+    data-offset-x="99" data-offest-y="120" data-expected-width="30" data-expected-height="100"></div>
+</div>
+
+<h3>Direction RTL</h3>
+
+<div class="grid verticalRL directionRTL">
+  <div class="firstRowFirstColumn" style="left: 9px; top: 10px;"
+    data-offset-x="219" data-offest-y="10" data-expected-width="90" data-expected-height="200"></div>
+  <div class="secondRowSecondColumn" style="left: -12px; top: -15px;"
+    data-offset-x="138" data-offest-y="75" data-expected-width="60" data-expected-height="150"></div>
+  <div class="thirdRowThirdColumn" style="right: 21px; bottom: 30px;"
+    data-offset-x="99" data-offest-y="120" data-expected-width="30" data-expected-height="100"></div>
+</div>
+
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-relative-offsets-002.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with relative offsets</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing">
+<meta name="assert" content="Checks that relative percentage offests work for grid items.">
+<link rel="stylesheet" href="support/grid.css">
+<style>
+.grid {
+  position: relative;
+  grid: 90px 60px 30px / 200px 150px 100px;
+  inline-size: 600px;
+  block-size: 300px;
+}
+
+.grid > div { position: relative; }
+</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>
+
+<h3>Direction LTR</h3>
+
+<div class="grid">
+  <div class="firstRowFirstColumn" style="left: 5%; top: 10%;"
+    data-offset-x="10" data-offest-y="9" data-expected-width="200" data-expected-height="90"></div>
+  <div class="secondRowSecondColumn" style="left: -10%; top: -20%;"
+    data-offset-x="185" data-offest-y="78" data-expected-width="150" data-expected-height="60"></div>
+  <div class="thirdRowThirdColumn" style="right: 30%; bottom: 70%;"
+    data-offset-x="320" data-offest-y="129" data-expected-width="100" data-expected-height="30"></div>
+</div>
+
+<h3>Direction RTL</h3>
+
+<div class="grid directionRTL">
+  <div class="firstRowFirstColumn" style="left: 5%; top: 10%;"
+    data-offset-x="410" data-offest-y="9" data-expected-width="200" data-expected-height="90"></div>
+  <div class="secondRowSecondColumn" style="left: -10%; top: -20%;"
+    data-offset-x="235" data-offest-y="78" data-expected-width="150" data-expected-height="60"></div>
+  <div class="thirdRowThirdColumn" style="right: 30%; bottom: 70%;"
+    data-offset-x="120" data-offest-y="129" data-expected-width="100" data-expected-height="30"></div>
+</div>
+
+<h2>Writing Mode vertical-lr</h2>
+
+<h3>Direction LTR</h3>
+
+<div class="grid verticalLR">
+  <div class="firstRowFirstColumn" style="left: 10%; top: 5%;"
+    data-offset-x="9" data-offest-y="10" data-expected-width="90" data-expected-height="200"></div>
+  <div class="secondRowSecondColumn" style="left: -20%; top: -10%;"
+    data-offset-x="78" data-offest-y="75" data-expected-width="60" data-expected-height="150"></div>
+  <div class="thirdRowThirdColumn" style="right: 70%; bottom: 30%;"
+    data-offset-x="129" data-offest-y="120" data-expected-width="30" data-expected-height="100"></div>
+</div>
+
+<h3>Direction RTL</h3>
+
+<div class="grid verticalLR directionRTL">
+  <div class="firstRowFirstColumn" style="left: 10%; top: 5%;"
+    data-offset-x="9" data-offest-y="10" data-expected-width="90" data-expected-height="200"></div>
+  <div class="secondRowSecondColumn" style="left: -20%; top: -10%;"
+    data-offset-x="78" data-offest-y="75" data-expected-width="60" data-expected-height="150"></div>
+  <div class="thirdRowThirdColumn" style="right: 70%; bottom: 30%;"
+    data-offset-x="129" data-offest-y="120" data-expected-width="30" data-expected-height="100"></div>
+</div>
+
+<h2>Writing Mode vertical-rl</h2>
+
+<h3>Direction LTR</h3>
+
+<div class="grid verticalRL">
+  <div class="firstRowFirstColumn" style="left: 10%; top: 5%;"
+    data-offset-x="219" data-offest-y="10" data-expected-width="90" data-expected-height="200"></div>
+  <div class="secondRowSecondColumn" style="left: -20%; top: -10%;"
+    data-offset-x="138" data-offest-y="75" data-expected-width="60" data-expected-height="150"></div>
+  <div class="thirdRowThirdColumn" style="right: 70%; bottom: 30%;"
+    data-offset-x="99" data-offest-y="120" data-expected-width="30" data-expected-height="100"></div>
+</div>
+
+<h3>Direction RTL</h3>
+
+<div class="grid verticalRL directionRTL">
+  <div class="firstRowFirstColumn" style="left: 10%; top: 5%;"
+    data-offset-x="219" data-offest-y="10" data-expected-width="90" data-expected-height="200"></div>
+  <div class="secondRowSecondColumn" style="left: -20%; top: -10%;"
+    data-offset-x="138" data-offest-y="75" data-expected-width="60" data-expected-height="150"></div>
+  <div class="thirdRowThirdColumn" style="right: 70%; bottom: 30%;"
+    data-offset-x="99" data-offest-y="120" data-expected-width="30" data-expected-height="100"></div>
+</div>
--- a/testing/web-platform/tests/css/css-grid/grid-items/support/grid.css
+++ b/testing/web-platform/tests/css/css-grid/grid-items/support/grid.css
@@ -63,16 +63,22 @@
 }
 
 .thirdRowSecondColumn {
   background-color: red;
   grid-column: 2;
   grid-row: 3;
 }
 
+.thirdRowThirdColumn {
+  background-color: salmon;
+  grid-column: 3;
+  grid-row: 3;
+}
+
 .firstRowThirdColumn {
   background-color: magenta;
   grid-column: 3;
   grid-row: 1;
 }
 
 .secondRowThirdColumn {
   background-color: navy;
--- a/testing/web-platform/tests/css/css-grid/grid-model/support/grid.css
+++ b/testing/web-platform/tests/css/css-grid/grid-model/support/grid.css
@@ -63,16 +63,22 @@
 }
 
 .thirdRowSecondColumn {
   background-color: red;
   grid-column: 2;
   grid-row: 3;
 }
 
+.thirdRowThirdColumn {
+  background-color: salmon;
+  grid-column: 3;
+  grid-row: 3;
+}
+
 .firstRowThirdColumn {
   background-color: magenta;
   grid-column: 3;
   grid-row: 1;
 }
 
 .secondRowThirdColumn {
   background-color: navy;
--- a/testing/web-platform/tests/css/support/grid.css
+++ b/testing/web-platform/tests/css/support/grid.css
@@ -63,16 +63,22 @@
 }
 
 .thirdRowSecondColumn {
   background-color: red;
   grid-column: 2;
   grid-row: 3;
 }
 
+.thirdRowThirdColumn {
+  background-color: salmon;
+  grid-column: 3;
+  grid-row: 3;
+}
+
 .firstRowThirdColumn {
   background-color: magenta;
   grid-column: 3;
   grid-row: 1;
 }
 
 .secondRowThirdColumn {
   background-color: navy;