[css-grid] Consider scrollbars in populateGridPositionsForDirection()

https://bugs.webkit.org/show_bug.cgi?id=191656 Reviewed by Javier Fernandez. LayoutTests/imported/w3c: Imported tests from WPT. * web-platform-tests/css/css-grid/grid-model/grid-container-scrollbar-001-expected.html: Added. * web-platform-tests/css/css-grid/grid-model/grid-container-scrollbar-001.html: Added. * web-platform-tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-lr-001-expected.html: Added. * web-platform-tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-lr-001.html: Added. * web-platform-tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-rl-001-expected.html: Added. * web-platform-tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-rl-001.html: Added. * web-platform-tests/css/css-grid/grid-model/w3c-import.log: Source/WebCore: We never care about scrollbars in RenderGrid::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. Tests: imported/w3c/web-platform-tests/css/css-grid/grid-model/grid-container-scrollbar-001.html imported/w3c/web-platform-tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-lr-001.html imported/w3c/web-platform-tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-rl-001.html * rendering/RenderGrid.cpp: (WebCore::RenderGrid::populateGridPositionsForDirection): Canonical link: https://commits.webkit.org/206571@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@238395 268f45cc-cd09-0410-ab3c-d52691b4dbfc
WebKit · Nov 20, 2018 · c4f99a463c8a889a66e7b0a08805c2e743fb21b7 · c4f99a4
1 parent 1247f4f
commit c4f99a463c8a889a66e7b0a08805c2e743fb21b7
diff --git a/LayoutTests/imported/w3c/ChangeLog b/LayoutTests/imported/w3c/ChangeLog
@@ -1,3 +1,20 @@
+2018-11-20  Manuel Rego Casasnovas  <rego@igalia.com>
+
+        [css-grid] Consider scrollbars in populateGridPositionsForDirection()
+        https://bugs.webkit.org/show_bug.cgi?id=191656
+
+        Reviewed by Javier Fernandez.
+
+        Imported tests from WPT.
+
+        * web-platform-tests/css/css-grid/grid-model/grid-container-scrollbar-001-expected.html: Added.
+        * web-platform-tests/css/css-grid/grid-model/grid-container-scrollbar-001.html: Added.
+        * web-platform-tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-lr-001-expected.html: Added.
+        * web-platform-tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-lr-001.html: Added.
+        * web-platform-tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-rl-001-expected.html: Added.
+        * web-platform-tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-rl-001.html: Added.
+        * web-platform-tests/css/css-grid/grid-model/w3c-import.log:
+
 2018-11-19  Rob Buis  <rbuis@igalia.com>
 
         Setting document.title should have no effect for non SVG/HTML documents

diff --git a/...w3c/web-platform-tests/css/css-grid/grid-model/grid-container-scrollbar-001-expected.html b/...w3c/web-platform-tests/css/css-grid/grid-model/grid-container-scrollbar-001-expected.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 {
+    font: 10px/1 Ahem;
+    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 as 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>
diff --git a/...imported/w3c/web-platform-tests/css/css-grid/grid-model/grid-container-scrollbar-001.html b/...imported/w3c/web-platform-tests/css/css-grid/grid-model/grid-container-scrollbar-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-001-ref.html">
+<meta name="assert" content="This test verifies 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 {
+    font: 10px/1 Ahem;
+    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 as 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>
diff --git a/...form-tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-lr-001-expected.html b/...form-tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-lr-001-expected.html
@@ -0,0 +1,97 @@
+<!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 {
+    font: 10px/1 Ahem;
+    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 as 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>