Skip to content
Permalink
Browse files
[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/206422@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@238220 268f45cc-cd09-0410-ab3c-d52691b4dbfc
  • Loading branch information
mrego committed Nov 15, 2018
1 parent b3d36f5 commit 3e0e3fb8a76c7cb714bf2ff3683242d35505bece
@@ -1,3 +1,20 @@
2018-11-15 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-14 Youenn Fablet <youenn@apple.com>

Convert libwebrtc error types to DOM exceptions
@@ -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>
@@ -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>
@@ -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>

0 comments on commit 3e0e3fb

Please sign in to comment.