Skip to content

GitLab

T
tangled
Commit edf3fb62 authored by Manuel Rego Casasnovas's avatar Manuel Rego Casasnovas Committed by Commit Bot
Browse files
Options

[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/1334370Reviewed-by: default avatarJavier Fernandez <jfernandez@igalia.com>
Reviewed-by: default avatarSergio Villar <svillar@igalia.com>
Commit-Queue: Manuel Rego <rego@igalia.com>
Cr-Commit-Position: refs/heads/master@{#608154}
parent b8380984
Hide whitespace changes
Inline Side-by-side
Showing with 575 additions and 0 deletions
third_party/WebKit/LayoutTests/external/wpt/css/css-grid/grid-model/grid-container-scrollbar-001-ref.html 0 → 100644
View file @ edf3fb62
<!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>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid/grid-model/grid-container-scrollbar-001.html 0 → 100644
View file @ edf3fb62
<!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>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid/grid-model/grid-container-scrollbar-vertical-lr-001-ref.html 0 → 100644
View file @ edf3fb62
<!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>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid/grid-model/grid-container-scrollbar-vertical-lr-001.html 0 → 100644
View file @ edf3fb62
<!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>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid/grid-model/grid-container-scrollbar-vertical-rl-001-ref.html 0 → 100644
View file @ edf3fb62
<!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>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid/grid-model/grid-container-scrollbar-vertical-rl-001.html 0 → 100644
View file @ edf3fb62
<!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>
third_party/blink/renderer/core/layout/layout_grid.cc
View file @ edf3fb62
......@@ -1403,8 +1403,18 @@ void LayoutGrid::PopulateGridPositionsForDirection(
direction == kForColumns ? offset_between_columns_ : offset_between_rows_;
auto& positions = is_row_axis ? column_positions_ : row_positions_;
positions.resize(number_of_lines);
auto border_and_padding =
is_row_axis ? BorderAndPaddingLogicalLeft() : BorderAndPaddingBefore();
if (is_row_axis) {
if (StyleRef().IsHorizontalWritingMode() &&
!StyleRef().IsLeftToRightDirection())
border_and_padding += ScrollbarLogicalWidth();
} else {
if (StyleRef().GetWritingMode() == WritingMode::kVerticalRl)
border_and_padding += ScrollbarLogicalHeight();
}
positions[0] = border_and_padding + offset.position_offset;
if (number_of_lines > 1) {
// If we have collapsed tracks we just ignore gaps here and add them later
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment