Bug 1470531 [wpt PR 11629] - [css-grid] Fix positioned items in a grid with calc() gutters, a=testonly
authorManuel Rego Casasnovas <rego@igalia.com>
Fri, 06 Jul 2018 22:04:12 +0000
changeset 426019 229c1b848822f2e628b764be618dab5ff5e33065
parent 426018 e4b3049e73e7cf67b29ad14fc8f14dbe2d300955
child 426020 23bb787a27bbdcc0ff40bf08c13f13e3ea337423
push id34267
push userrgurzau@mozilla.com
push dateWed, 11 Jul 2018 22:05:21 +0000
treeherdermozilla-central@3aca103e4915 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1470531, 11629, 816300, 1112237, 569733
milestone63.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1470531 [wpt PR 11629] - [css-grid] Fix positioned items in a grid with calc() gutters, a=testonly Automatic update from web-platform-tests[css-grid] Fix positioned items in a grid with calc() gutters In r543079 we added support for calc() in grid gutters. In that patch we modified LayoutGrid::GridGap() but we forgot to do the same in LayoutGrid::AvailableSpaceForGutters(). This patch just changes the IsPercent() call by IsPercentOrCalc() that way calc() gutters are considered too when looking for the available space. BUG=816300 TEST=external/wpt/css/css-grid/abspos/grid-positioned-items-gaps-002.html TEST=external/wpt/css/css-grid/abspos/grid-positioned-items-gaps-002-rtl.html Change-Id: I3237d5dc73f508cea6d904b9f1fd3822bb9efe55 Reviewed-on: https://chromium-review.googlesource.com/1112237 Reviewed-by: Sergio Villar <svillar@igalia.com> Commit-Queue: Manuel Rego Casasnovas <rego@igalia.com> Cr-Commit-Position: refs/heads/master@{#569733} -- wpt-commits: 95c2419892175edc877e24672d8bafb8df28cfdd wpt-pr: 11629
testing/web-platform/meta/MANIFEST.json
testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-gaps-002-rtl.html
testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-gaps-002.html
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -318060,16 +318060,28 @@
     ]
    ],
    "css/css-grid/abspos/grid-positioned-items-gaps-001.html": [
     [
      "/css/css-grid/abspos/grid-positioned-items-gaps-001.html",
      {}
     ]
    ],
+   "css/css-grid/abspos/grid-positioned-items-gaps-002-rtl.html": [
+    [
+     "/css/css-grid/abspos/grid-positioned-items-gaps-002-rtl.html",
+     {}
+    ]
+   ],
+   "css/css-grid/abspos/grid-positioned-items-gaps-002.html": [
+    [
+     "/css/css-grid/abspos/grid-positioned-items-gaps-002.html",
+     {}
+    ]
+   ],
    "css/css-grid/abspos/grid-positioned-items-gaps-rtl-001.html": [
     [
      "/css/css-grid/abspos/grid-positioned-items-gaps-rtl-001.html",
      {}
     ]
    ],
    "css/css-grid/abspos/grid-positioned-items-implicit-grid-001.html": [
     [
@@ -519081,16 +519093,24 @@
   "css/css-grid/abspos/grid-positioned-items-content-alignment-rtl-001.html": [
    "fcce72ee35dd8d3fb7ee6be0b6f44bf025abf5a1",
    "testharness"
   ],
   "css/css-grid/abspos/grid-positioned-items-gaps-001.html": [
    "59ad78731845efdee151a7db5f963484505e9b49",
    "testharness"
   ],
+  "css/css-grid/abspos/grid-positioned-items-gaps-002-rtl.html": [
+   "5ca5422ebe3729773a46dd05a031636edc0fe669",
+   "testharness"
+  ],
+  "css/css-grid/abspos/grid-positioned-items-gaps-002.html": [
+   "16b1e1d23bab903b3779c7b755624b336f4f9588",
+   "testharness"
+  ],
   "css/css-grid/abspos/grid-positioned-items-gaps-rtl-001.html": [
    "618bf5f6b8ca90359e9df147f201ad4ba5d84e8e",
    "testharness"
   ],
   "css/css-grid/abspos/grid-positioned-items-implicit-grid-001.html": [
    "2666a4caa94fb56a17cc197f67a8572185b01514",
    "testharness"
   ],
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-gaps-002-rtl.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid positioned items percentage and calc() gaps</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#gutters">
+<meta name="assert" content="This test checks the behavior of the positioned items in a grid container with percentage and calc() gaps.">
+<link rel="stylesheet" href="support/grid.css">
+<style>
+
+.grid {
+  grid-template-columns: 100px 100px 100px 100px;
+  grid-template-rows: 50px 50px 50px 50px;
+  width: 800px;
+  height: 600px;
+  border: 5px solid black;
+  margin: 30px;
+  padding: 15px;
+  /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */
+  position: relative;
+}
+
+.grid > div {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: lime;
+}
+
+</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>
+
+<div class="grid directionRTL" style="gap: 10%;">
+  <div style="grid-column: 2 / 4; grid-row: 2 / 4;"
+    data-offset-x="355" data-offset-y="125" data-expected-width="280" data-expected-height="160">
+  </div>
+</div>
+
+<div class="grid directionRTL" style="gap: calc(10% + 25px);">
+  <div style="grid-column: 2 / 4; grid-row: 2 / 4;"
+    data-offset-x="305" data-offset-y="150" data-expected-width="305" data-expected-height="185">
+  </div>
+</div>
+
+</body>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-gaps-002.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid positioned items percentage and calc() gaps</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#gutters">
+<meta name="assert" content="This test checks the behavior of the positioned items in a grid container with percentage and calc() gaps.">
+<link rel="stylesheet" href="support/grid.css">
+<style>
+
+.grid {
+  grid-template-columns: 100px 100px 100px 100px;
+  grid-template-rows: 50px 50px 50px 50px;
+  width: 800px;
+  height: 600px;
+  border: 5px solid black;
+  margin: 30px;
+  padding: 15px;
+  /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */
+  position: relative;
+}
+
+.grid > div {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: lime;
+}
+
+</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>
+
+<div class="grid" style="gap: 10%;">
+  <div style="grid-column: 2 / 4; grid-row: 2 / 4;"
+    data-offset-x="195" data-offset-y="125" data-expected-width="280" data-expected-height="160">
+  </div>
+</div>
+
+<div class="grid" style="gap: calc(10% + 25px);">
+  <div style="grid-column: 2 / 4; grid-row: 2 / 4;"
+    data-offset-x="220" data-offset-y="150" data-expected-width="305" data-expected-height="185">
+  </div>
+</div>
+
+</body>