Skip to content

Commit

Permalink
[LayoutNG] The padding box needs to exclude both borders and scrollbars.
Browse files Browse the repository at this point in the history 
We forgot to subtract space taken up by scrollbars. Now that we do, we
also need NGBlockNode::GetScrollbarSizes() to add the horizontal
scrollbar on the correct side. Need to check with the layout object, not
directly with computed style. This matters e.g. if the object in
question is the LayoutView, which always places it on the right hand
side, even if document direction is RTL.

Also fix static block offset in flipped blocks writing mode. We got it
wrong, because we flipped an offset relative to the border edge around
the padding box. That's a regression from
https://chromium-review.googlesource.com/926004

Since I managed to break stuff without any tests regressing, I added a
few to wpt/css/css-flexbox/ (it doesn't really matter which layout model
to test with, as long as the containing block is in legacy layout, so
I just picked flexbox).

Cq-Include-Trybots: master.tryserver.chromium.linux:linux_layout_tests_layout_ng
Change-Id: I9527e8bb013b792a6b8ef58b370efe02b071c8bf
Reviewed-on: https://chromium-review.googlesource.com/931502
Reviewed-by: Aleks Totic <[email protected]>
Reviewed-by: Christian Biesinger <[email protected]>
Reviewed-by: Ian Kilpatrick <[email protected]>
Commit-Queue: Morten Stenshorne <[email protected]>
Cr-Commit-Position: refs/heads/master@{#538871}
  • Loading branch information
@mstensho @chromium-wpt-export-bot
mstensho authored and chromium-wpt-export-bot committed Feb 23, 2018
1 parent 00f19f6 commit 0fe9f01
Show file tree
Hide file tree
Showing 6 changed files with 204 additions and 0 deletions.
34 changes: 34 additions & 0 deletions css/css-flexbox/abspos-autopos-htb-ltr.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<title>Absolutely positioned child with auto position in vertical-rl ltr flexbox</title>
<link rel="author" title="Morten Stenshorne" href="[email protected]">
<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements">
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#abspos-items" title="4.1. Absolutely-Positioned Flex Children">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.flex {
display: flex;
position: relative;
writing-mode: horizontal-tb;
direction: ltr;
width: 100px;
height: 100px;
border: solid white;
border-left-width: 20px;
left: -20px;
border-top-width: 5px;
top: -5px;
border-right-width: 10px;
border-bottom-width: 15px;
background: red;
}
.flex > div {
position: absolute;
width: 100%;
height: 100%;
background: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="flex">
<div></div>
</div>
34 changes: 34 additions & 0 deletions css/css-flexbox/abspos-autopos-htb-rtl.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<title>Absolutely positioned child with auto position in vertical-rl ltr flexbox</title>
<link rel="author" title="Morten Stenshorne" href="[email protected]">
<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements">
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#abspos-items" title="4.1. Absolutely-Positioned Flex Children">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.flex {
display: flex;
position: relative;
writing-mode: horizontal-tb;
direction: rtl;
width: 100px;
height: 100px;
border: solid white;
border-left-width: 20px;
left: -20px;
border-top-width: 5px;
top: -5px;
border-right-width: 10px;
border-bottom-width: 15px;
background: red;
}
.flex > div {
position: absolute;
width: 100%;
height: 100%;
background: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="flex">
<div></div>
</div>
34 changes: 34 additions & 0 deletions css/css-flexbox/abspos-autopos-vlr-ltr.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<title>Absolutely positioned child with auto position in vertical-rl ltr flexbox</title>
<link rel="author" title="Morten Stenshorne" href="[email protected]">
<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements">
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#abspos-items" title="4.1. Absolutely-Positioned Flex Children">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.flex {
display: flex;
position: relative;
writing-mode: vertical-lr;
direction: ltr;
width: 100px;
height: 100px;
border: solid white;
border-left-width: 20px;
left: -20px;
border-top-width: 5px;
top: -5px;
border-right-width: 10px;
border-bottom-width: 15px;
background: red;
}
.flex > div {
position: absolute;
width: 100%;
height: 100%;
background: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="flex">
<div></div>
</div>
34 changes: 34 additions & 0 deletions css/css-flexbox/abspos-autopos-vlr-rtl.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<title>Absolutely positioned child with auto position in vertical-rl ltr flexbox</title>
<link rel="author" title="Morten Stenshorne" href="[email protected]">
<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements">
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#abspos-items" title="4.1. Absolutely-Positioned Flex Children">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.flex {
display: flex;
position: relative;
writing-mode: vertical-lr;
direction: rtl;
width: 100px;
height: 100px;
border: solid white;
border-left-width: 20px;
left: -20px;
border-top-width: 5px;
top: -5px;
border-right-width: 10px;
border-bottom-width: 15px;
background: red;
}
.flex > div {
position: absolute;
width: 100%;
height: 100%;
background: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="flex">
<div></div>
</div>
34 changes: 34 additions & 0 deletions css/css-flexbox/abspos-autopos-vrl-ltr.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<title>Absolutely positioned child with auto position in vertical-rl ltr flexbox</title>
<link rel="author" title="Morten Stenshorne" href="[email protected]">
<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements">
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#abspos-items" title="4.1. Absolutely-Positioned Flex Children">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.flex {
display: flex;
position: relative;
writing-mode: vertical-rl;
direction: ltr;
width: 100px;
height: 100px;
border: solid white;
border-left-width: 20px;
left: -20px;
border-top-width: 5px;
top: -5px;
border-right-width: 10px;
border-bottom-width: 15px;
background: red;
}
.flex > div {
position: absolute;
width: 100%;
height: 100%;
background: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="flex">
<div></div>
</div>
34 changes: 34 additions & 0 deletions css/css-flexbox/abspos-autopos-vrl-rtl.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<title>Absolutely positioned child with auto position in vertical-rl ltr flexbox</title>
<link rel="author" title="Morten Stenshorne" href="[email protected]">
<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements">
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#abspos-items" title="4.1. Absolutely-Positioned Flex Children">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.flex {
display: flex;
position: relative;
writing-mode: vertical-lr;
direction: rtl;
width: 100px;
height: 100px;
border: solid white;
border-left-width: 20px;
left: -20px;
border-top-width: 5px;
top: -5px;
border-right-width: 10px;
border-bottom-width: 15px;
background: red;
}
.flex > div {
position: absolute;
width: 100%;
height: 100%;
background: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="flex">
<div></div>
</div>

0 comments on commit 0fe9f01

Please sign in to comment.