Bug 1507122 [wpt PR 14052] - [css-grid] Consider scrollbars in PopulateGridPositionsForDirection(), a=testonly
☠☠ backed out by 46ad93280b06 ☠ ☠
authorManuel Rego Casasnovas <rego@igalia.com>
Mon, 19 Nov 2018 18:44:47 +0000
changeset 503711 8e13752959d689e01d7ba51c3a1460d90f9bcbc5
parent 503710 dfbc81d5e5187d2e804f8fad2f8dedd9f51734ef
child 503712 43cfc59879d28041f6c211dbae7130a0cd6404dd
push id10290
push userffxbld-merge
push dateMon, 03 Dec 2018 16:23:23 +0000
treeherdermozilla-beta@700bed2445e6 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1507122, 14052, 904438, 1334370, 608154
milestone65.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 1507122 [wpt PR 14052] - [css-grid] Consider scrollbars in PopulateGridPositionsForDirection(), a=testonly Automatic update from web-platform-tests[css-grid] Consider scrollbars in PopulateGridPositionsForDirection() We never care about scrollbars in LayoutGrid::PopulateGridPositionsForDirection(), that's fine if the scrollbars are at the end (e.g. on the right in horizontal writing mode and LTR direction) but it causes problems when they're at the beginning (e.g. on the left in horizontal writing mode and RTL direction). The patch modifies the method so it takes into account scrollbar size in order to compute the position of the columns/rows depending on the direction and the writing mode. BUG=904438 TEST=external/wpt/css/css-grid/grid-model/grid-container-scrollbar-001.html TEST=external/wpt/css/css-grid/grid-model/grid-container-scrollbar-vertical-lr-001.html TEST=external/wpt/css/css-grid/grid-model/grid-container-scrollbar-vertical-rl-001.html Change-Id: I9c8307638647e449f6975cacf99f89e29d4fa655 Reviewed-on: https://chromium-review.googlesource.com/c/1334370 Reviewed-by: Javier Fernandez <jfernandez@igalia.com> Reviewed-by: Sergio Villar <svillar@igalia.com> Commit-Queue: Manuel Rego <rego@igalia.com> Cr-Commit-Position: refs/heads/master@{#608154} -- wpt-commits: ca8728e002fdfcdde1ee2efd39ebaccc823bf9b2 wpt-pr: 14052
testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-001-ref.html
testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-001.html
testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-lr-001-ref.html
testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-lr-001.html
testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-rl-001-ref.html
testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-rl-001.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-001-ref.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS container Layout Test Reference</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+  .container {
+    margin: 10px;
+    background: grey;
+  }
+
+  .scrollX {
+    overflow-x: scroll;
+  }
+
+  .scrollY {
+    overflow-y: scroll;
+  }
+
+  .fixedSize {
+    width: 200px;
+    height: 50px;
+  }
+
+  .container > div {
+    background: cyan;
+    width: 100%;
+    height: 100%;
+  }
+
+  .directionRTL {
+    direction: rtl;
+  }
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div style="float: left; width: 350px;">
+
+  <h2>direction: ltr;</h2>
+
+  <div class="container scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="container scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="container scrollX scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="container fixedSize scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="container fixedSize scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="container fixedSize scrollX scrollY">
+    <div>item</div>
+  </div>
+
+</div>
+
+<div style="float: left; width: 350px;">
+
+  <h2>direction: rtl;</h2>
+
+  <div class="directionRTL container scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL container scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL container scrollX scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL container fixedSize scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL container fixedSize scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL container fixedSize scrollX scrollY">
+    <div>item</div>
+  </div>
+
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-001.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid container with scrollbars</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model">
+<link rel="match" href="grid-container-scrollbar-001-ref.html">
+<meta name="assert" content="This test verifes that scrollbars are properly painted on grid containers, and are shown in the expected position depending on the direction.">
+<link href="support/grid.css" rel="stylesheet">
+<style>
+  .grid {
+    margin: 10px;
+  }
+
+  .scrollX {
+    overflow-x: scroll;
+  }
+
+  .scrollY {
+    overflow-y: scroll;
+  }
+
+  .fixedSize {
+    width: 200px;
+    height: 50px;
+  }
+
+  .grid > div {
+    background: cyan;
+  }
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div style="float: left; width: 350px;">
+
+  <h2>direction: ltr;</h2>
+
+  <div class="grid scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="grid scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="grid scrollX scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="grid fixedSize scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="grid fixedSize scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="grid fixedSize scrollX scrollY">
+    <div>item</div>
+  </div>
+
+</div>
+
+<div style="float: left; width: 350px;">
+
+  <h2>direction: rtl;</h2>
+
+  <div class="directionRTL grid scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL grid scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL grid scrollX scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL grid fixedSize scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL grid fixedSize scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL grid fixedSize scrollX scrollY">
+    <div>item</div>
+  </div>
+
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-lr-001-ref.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS container Layout Test Reference</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+  .container {
+    margin: 10px;
+    background: grey;
+    writing-mode: vertical-lr;
+  }
+
+  .scrollX {
+    overflow-x: scroll;
+  }
+
+  .scrollY {
+    overflow-y: scroll;
+  }
+
+  .fixedSize {
+    width: 200px;
+    height: 50px;
+  }
+
+  .container > div {
+    background: cyan;
+    width: 100%;
+    height: 100%;
+  }
+
+  .directionRTL {
+    direction: rtl;
+  }
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div style="float: left; width: 350px;">
+
+  <h2>direction: ltr;</h2>
+
+  <div class="container scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="container scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="container scrollX scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="container fixedSize scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="container fixedSize scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="container fixedSize scrollX scrollY">
+    <div>item</div>
+  </div>
+
+</div>
+
+<div style="float: left; width: 350px;">
+
+  <h2>direction: rtl;</h2>
+
+  <div class="directionRTL container scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL container scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL container scrollX scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL container fixedSize scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL container fixedSize scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL container fixedSize scrollX scrollY">
+    <div>item</div>
+  </div>
+
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-lr-001.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid container with scrollbars</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model">
+<link rel="match" href="grid-container-scrollbar-vertical-lr-001-ref.html">
+<meta name="assert" content="This test verifes that scrollbars are properly painted on grid containers, and are shown in the expected position depending on the direction.">
+<link href="support/grid.css" rel="stylesheet">
+<style>
+  .grid {
+    margin: 10px;
+    writing-mode: vertical-lr;
+  }
+
+  .scrollX {
+    overflow-x: scroll;
+  }
+
+  .scrollY {
+    overflow-y: scroll;
+  }
+
+  .fixedSize {
+    width: 200px;
+    height: 50px;
+  }
+
+  .grid > div {
+    background: cyan;
+  }
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div style="float: left; width: 350px;">
+
+  <h2>direction: ltr;</h2>
+
+  <div class="grid scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="grid scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="grid scrollX scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="grid fixedSize scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="grid fixedSize scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="grid fixedSize scrollX scrollY">
+    <div>item</div>
+  </div>
+
+</div>
+
+<div style="float: left; width: 350px;">
+
+  <h2>direction: rtl;</h2>
+
+  <div class="directionRTL grid scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL grid scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL grid scrollX scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL grid fixedSize scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL grid fixedSize scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL grid fixedSize scrollX scrollY">
+    <div>item</div>
+  </div>
+
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-rl-001-ref.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS container Layout Test Reference</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+  .container {
+    margin: 10px;
+    background: grey;
+    writing-mode: vertical-rl;
+  }
+
+  .scrollX {
+    overflow-x: scroll;
+  }
+
+  .scrollY {
+    overflow-y: scroll;
+  }
+
+  .fixedSize {
+    width: 200px;
+    height: 50px;
+  }
+
+  .container > div {
+    background: cyan;
+    width: 100%;
+    height: 100%;
+  }
+
+  .directionRTL {
+    direction: rtl;
+  }
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div style="float: left; width: 350px;">
+
+  <h2>direction: ltr;</h2>
+
+  <div class="container scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="container scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="container scrollX scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="container fixedSize scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="container fixedSize scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="container fixedSize scrollX scrollY">
+    <div>item</div>
+  </div>
+
+</div>
+
+<div style="float: left; width: 350px;">
+
+  <h2>direction: rtl;</h2>
+
+  <div class="directionRTL container scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL container scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL container scrollX scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL container fixedSize scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL container fixedSize scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL container fixedSize scrollX scrollY">
+    <div>item</div>
+  </div>
+
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-rl-001.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid container with scrollbars</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model">
+<link rel="match" href="grid-container-scrollbar-vertical-rl-001-ref.html">
+<meta name="assert" content="This test verifes that scrollbars are properly painted on grid containers, and are shown in the expected position depending on the direction.">
+<link href="support/grid.css" rel="stylesheet">
+<style>
+  .grid {
+    margin: 10px;
+    writing-mode: vertical-rl;
+  }
+
+  .scrollX {
+    overflow-x: scroll;
+  }
+
+  .scrollY {
+    overflow-y: scroll;
+  }
+
+  .fixedSize {
+    width: 200px;
+    height: 50px;
+  }
+
+  .grid > div {
+    background: cyan;
+  }
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div style="float: left; width: 350px;">
+
+  <h2>direction: ltr;</h2>
+
+  <div class="grid scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="grid scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="grid scrollX scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="grid fixedSize scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="grid fixedSize scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="grid fixedSize scrollX scrollY">
+    <div>item</div>
+  </div>
+
+</div>
+
+<div style="float: left; width: 350px;">
+
+  <h2>direction: rtl;</h2>
+
+  <div class="directionRTL grid scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL grid scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL grid scrollX scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL grid fixedSize scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL grid fixedSize scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL grid fixedSize scrollX scrollY">
+    <div>item</div>
+  </div>
+
+</div>