Skip to content

GitLab

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

[css-grid] Fix resolution of percentage paddings and margins of grid items 

We were not resolving properly percentage paddings and margins
for tracks that have something like minmax(auto, 100px).
The reason was that while computing the minimum size of a grid item,
the percentages were resolved against the inline size of the grid container.
But for grid items we shouldn't never use the grid container size,
but the grid area size, as that's their containing block.

The patch modifies ContainingBlockLogicalWidthForContent() and
ContainingBlockLogicalHeightForContent() in LayoutBox,
so for grid items we return 0 if the area size hasn't been set yet.
We never want to use the grid container's sizes in these cases.

BUG=808758
TEST=external/wpt/css/css-grid/grid-items/grid-items-percentage-margins-*
TEST=external/wpt/css/css-grid/grid-items/grid-items-percentage-paddings-*

Change-Id: Ib142e51aee1fe623d38688469b179f01f82eb07b
Reviewed-on: https://chromium-review.googlesource.com/980756Reviewed-by: default avatarJavier Fernandez <jfernandez@igalia.com>
Commit-Queue: Manuel Rego Casasnovas <rego@igalia.com>
Cr-Commit-Position: refs/heads/master@{#547417}
parent c968b175
Hide whitespace changes
Inline Side-by-side
Showing with 1160 additions and 0 deletions
third_party/WebKit/LayoutTests/external/wpt/css/css-grid/grid-items/grid-items-percentage-margins-001.html 0 → 100644
View file @ ad7d8f49
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Grid items with percentage margins</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
<meta name="assert" content="Checks grid items percentage margins are resolved against the inline size of their grid area (in a fixed size track).">
<link rel="stylesheet" href="support/grid.css">
<style>
.grid {
font: 10px/1 Ahem;
grid-template-columns: 100px;
width: 500px;
justify-items: start;
position: relative;
}
.grid > div:nth-child(1) { background: cyan; }
.grid > div:nth-child(2) {
background: magenta;
width: 100%;
height: 10px;
}
.marginLeft50Percent { margin-left: 50%; }
.marginRight50Percent { margin-right: 50%; }
.marginTop50Percent { margin-top: 50%; }
.marginBottom50Percent { margin-bottom: 50%; }
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.grid')">
<div id="log"></div>
<h3>Direction LTR</h3>
<pre>Item margin-left: 50%;</pre>
<div class="grid">
<div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="50" data-expected-width="10" data-expected-height="10">X</div>
<div data-offset-x="0" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
</div>
<pre>Item margin-right: 50%;</pre>
<div class="grid">
<div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="0" data-expected-width="10" data-expected-height="10">X</div>
<div data-offset-x="0" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
</div>
<pre>Item margin-top: 50%;</pre>
<div class="grid">
<div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="50" data-expected-width="10" data-expected-height="10">X</div>
<div data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div>
</div>
<pre>Item margin-bottom: 50%;</pre>
<div class="grid">
<div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="0" data-expected-width="10" data-expected-height="10">X</div>
<div data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div>
</div>
<h3>Direction RTL</h3>
<pre>Item margin-left: 50%;</pre>
<div class="grid directionRTL">
<div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="490" data-expected-width="10" data-expected-height="10">X</div>
<div data-offset-x="400" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
</div>
<pre>Item margin-right: 50%;</pre>
<div class="grid directionRTL">
<div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="440" data-expected-width="10" data-expected-height="10">X</div>
<div data-offset-x="400" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
</div>
<pre>Item margin-top: 50%;</pre>
<div class="grid directionRTL">
<div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="50" data-expected-width="10" data-expected-height="10">X</div>
<div data-offset-x="400" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div>
</div>
<pre>Item margin-bottom: 50%;</pre>
<div class="grid directionRTL">
<div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="0" data-expected-width="10" data-expected-height="10">X</div>
<div data-offset-x="400" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div>
</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid/grid-items/grid-items-percentage-margins-002.html 0 → 100644
View file @ ad7d8f49
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Grid items with percentage margins</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
<meta name="assert" content="Checks grid items percentage margins are resolved against the inline size of their grid area (in a track with fixed max sizing function and intrinsic min).">
<link rel="stylesheet" href="support/grid.css">
<style>
.grid {
font: 10px/1 Ahem;
grid-template-columns: minmax(auto, 100px);
width: 500px;
justify-items: start;
position: relative;
}
.grid > div:nth-child(1) { background: cyan; }
.grid > div:nth-child(2) {
background: magenta;
width: 100%;
height: 10px;
}
.marginLeft50Percent { margin-left: 50%; }
.marginRight50Percent { margin-right: 50%; }
.marginTop50Percent { margin-top: 50%; }
.marginBottom50Percent { margin-bottom: 50%; }
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.grid')">
<div id="log"></div>
<h3>Direction LTR</h3>
<pre>Item margin-left: 50%;</pre>
<div class="grid">
<div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="50" data-expected-width="10" data-expected-height="10">X</div>
<div data-offset-x="0" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
</div>
<pre>Item margin-right: 50%;</pre>
<div class="grid">
<div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="0" data-expected-width="10" data-expected-height="10">X</div>
<div data-offset-x="0" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
</div>
<pre>Item margin-top: 50%;</pre>
<div class="grid">
<div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="50" data-expected-width="10" data-expected-height="10">X</div>
<div data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div>
</div>
<pre>Item margin-bottom: 50%;</pre>
<div class="grid">
<div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="0" data-expected-width="10" data-expected-height="10">X</div>
<div data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div>
</div>
<h3>Direction RTL</h3>
<pre>Item margin-left: 50%;</pre>
<div class="grid directionRTL">
<div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="490" data-expected-width="10" data-expected-height="10">X</div>
<div data-offset-x="400" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
</div>
<pre>Item margin-right: 50%;</pre>
<div class="grid directionRTL">
<div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="440" data-expected-width="10" data-expected-height="10">X</div>
<div data-offset-x="400" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
</div>
<pre>Item margin-top: 50%;</pre>
<div class="grid directionRTL">
<div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="50" data-expected-width="10" data-expected-height="10">X</div>
<div data-offset-x="400" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div>
</div>
<pre>Item margin-bottom: 50%;</pre>
<div class="grid directionRTL">
<div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="0" data-expected-width="10" data-expected-height="10">X</div>
<div data-offset-x="400" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div>
</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid/grid-items/grid-items-percentage-margins-vertical-lr-001.html 0 → 100644
View file @ ad7d8f49
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Grid items with percentage margins vertical-lr</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
<meta name="assert" content="Checks grid items percentage margins are resolved against the inline size of their grid area (in a fixed size track) in a vertical-lr grid container.">
<link rel="stylesheet" href="support/grid.css">
<style>
.grid {
font: 10px/1 Ahem;
grid-template-columns: 100px;
height: 500px;
justify-items: start;
position: relative;
writing-mode: vertical-lr;
}
.grid > div:nth-child(1) { background: cyan; }
.grid > div:nth-child(2) {
background: magenta;
width: 10px;
height: 100%;
}
.marginLeft50Percent { margin-left: 50%; }
.marginRight50Percent { margin-right: 50%; }
.marginTop50Percent { margin-top: 50%; }
.marginBottom50Percent { margin-bottom: 50%; }
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.grid')">
<div id="log"></div>
<h3>Direction LTR</h3>
<pre>Item margin-left: 50%;</pre>
<div class="grid">
<div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="50" data-expected-width="10" data-expected-height="10">X</div>
<div data-offset-x="60" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
</div>
<pre>Item margin-right: 50%;</pre>
<div class="grid">
<div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="0" data-expected-width="10" data-expected-height="10">X</div>
<div data-offset-x="60" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
</div>
<pre>Item margin-top: 50%;</pre>
<div class="grid">
<div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="50" data-expected-width="10" data-expected-height="10">X</div>
<div data-offset-x="10" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
</div>
<pre>Item margin-bottom: 50%;</pre>
<div class="grid">
<div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="0" data-expected-width="10" data-expected-height="10">X</div>
<div data-offset-x="10" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
</div>
<h3>Direction RTL</h3>
<pre>Item margin-left: 50%;</pre>
<div class="grid directionRTL">
<div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="50" data-expected-width="10" data-expected-height="10">X</div>
<div data-offset-x="60" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
</div>
<pre>Item margin-right: 50%;</pre>
<div class="grid directionRTL">
<div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="0" data-expected-width="10" data-expected-height="10">X</div>
<div data-offset-x="60" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
</div>
<pre>Item margin-top: 50%;</pre>
<div class="grid directionRTL">
<div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="490" data-expected-width="10" data-expected-height="10">X</div>
<div data-offset-x="10" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
</div>
<pre>Item margin-bottom: 50%;</pre>
<div class="grid directionRTL">
<div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="440" data-expected-width="10" data-expected-height="10">X</div>
<div data-offset-x="10" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid/grid-items/grid-items-percentage-margins-vertical-lr-002.html 0 → 100644
View file @ ad7d8f49
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Grid items with percentage margins vertical-lr</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
<meta name="assert" content="Checks grid items percentage margins are resolved against the inline size of their grid area (in a track with fixed max sizing function and intrinsic min) in a vertical-lr grid container.">
<link rel="stylesheet" href="support/grid.css">
<style>
.grid {
font: 10px/1 Ahem;
grid-template-columns: minmax(auto, 100px);
height: 500px;
justify-items: start;
position: relative;
writing-mode: vertical-lr;
}
.grid > div:nth-child(1) { background: cyan; }
.grid > div:nth-child(2) {
background: magenta;
width: 10px;
height: 100%;
}
.marginLeft50Percent { margin-left: 50%; }
.marginRight50Percent { margin-right: 50%; }
.marginTop50Percent { margin-top: 50%; }
.marginBottom50Percent { margin-bottom: 50%; }
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.grid')">
<div id="log"></div>
<h3>Direction LTR</h3>
<pre>Item margin-left: 50%;</pre>
<div class="grid">
<div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="50" data-expected-width="10" data-expected-height="10">X</div>
<div data-offset-x="60" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
</div>
<pre>Item margin-right: 50%;</pre>
<div class="grid">
<div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="0" data-expected-width="10" data-expected-height="10">X</div>
<div data-offset-x="60" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
</div>
<pre>Item margin-top: 50%;</pre>
<div class="grid">
<div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="50" data-expected-width="10" data-expected-height="10">X</div>
<div data-offset-x="10" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
</div>
<pre>Item margin-bottom: 50%;</pre>
<div class="grid">
<div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="0" data-expected-width="10" data-expected-height="10">X</div>
<div data-offset-x="10" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
</div>
<h3>Direction RTL</h3>
<pre>Item margin-left: 50%;</pre>
<div class="grid directionRTL">
<div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="50" data-expected-width="10" data-expected-height="10">X</div>
<div data-offset-x="60" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
</div>
<pre>Item margin-right: 50%;</pre>
<div class="grid directionRTL">
<div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="0" data-expected-width="10" data-expected-height="10">X</div>
<div data-offset-x="60" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
</div>
<pre>Item margin-top: 50%;</pre>
<div class="grid directionRTL">
<div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="490" data-expected-width="10" data-expected-height="10">X</div>
<div data-offset-x="10" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
</div>
<pre>Item margin-bottom: 50%;</pre>
<div class="grid directionRTL">
<div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="440" data-expected-width="10" data-expected-height="10">X</div>
<div data-offset-x="10" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-001.html 0 → 100644
View file @ ad7d8f49
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Grid items with percentage margins vertical-rl</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
<meta name="assert" content="Checks grid items percentage margins are resolved against the inline size of their grid area (in a fixed size track) in a vertical-rl grid container.">
<link rel="stylesheet" href="support/grid.css">
<style>
.grid {
font: 10px/1 Ahem;
grid-template-columns: 100px;
height: 500px;
justify-items: start;
position: relative;
writing-mode: vertical-rl;
}
.grid > div:nth-child(1) { background: cyan; }
.grid > div:nth-child(2) {
background: magenta;
width: 10px;
height: 100%;
}
.marginLeft50Percent { margin-left: 50%; }
.marginRight50Percent { margin-right: 50%; }
.marginTop50Percent { margin-top: 50%; }
.marginBottom50Percent { margin-bottom: 50%; }
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.grid')">
<div id="log"></div>
<h3>Direction LTR</h3>
<pre>Item margin-left: 50%;</pre>
<div class="grid">
<div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="60" data-expected-width="10" data-expected-height="10">X</div>
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
</div>
<pre>Item margin-right: 50%;</pre>
<div class="grid">
<div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="10" data-expected-width="10" data-expected-height="10">X</div>
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
</div>
<pre>Item margin-top: 50%;</pre>
<div class="grid">
<div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="50" data-expected-width="10" data-expected-height="10">X</div>
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
</div>
<pre>Item margin-bottom: 50%;</pre>
<div class="grid">
<div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="0" data-expected-width="10" data-expected-height="10">X</div>
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
</div>
<h3>Direction RTL</h3>
<pre>Item margin-left: 50%;</pre>
<div class="grid directionRTL">
<div class="marginLeft50Percent" data-expected-margin-left="50" data-expected-x="60" data-expected-width="10" data-expected-height="10">X</div>
<div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
</div>
<pre>Item margin-right: 50%;</pre>
<div class="grid directionRTL">
<div class="marginRight50Percent" data-expected-margin-right="50" data-expected-x="10" data-expected-width="10" data-expected-height="10">X</div>
<div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
</div>
<pre>Item margin-top: 50%;</pre>
<div class="grid directionRTL">
<div class="marginTop50Percent" data-expected-margin-top="50" data-expected-y="490" data-expected-width="10" data-expected-height="10">X</div>
<div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
</div>
<pre>Item margin-bottom: 50%;</pre>
<div class="grid directionRTL">
<div class="marginBottom50Percent" data-expected-margin-bottom="50" data-expected-y="440" data-expected-width="10" data-expected-height="10">X</div>
<div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-002.html 0 → 100644
View file @ ad7d8f49
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Grid items with percentage margins vertical-rl</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
<meta name="assert" content="Checks grid items percentage margins are resolved against the inline size of their grid area (in a track with fixed max sizing function and intrinsic min) in a vertical-rl grid container.">
<link rel="stylesheet" href="support/grid.css">
<style>
.grid {
font: 10px/1 Ahem;
grid-template-columns: minmax(auto, 100px);
height: 500px;
justify-items: start;
position: relative;
writing-mode: vertical-rl;
}
.grid > div:nth-child(1) { background: cyan; }
.grid > div:nth-child(2) {
background: magenta;
width: 10px;
height: 100%;
}
.marginLeft50Percent { margin-left: 50%; }
.marginRight50Percent { margin-right: 50%; }
.marginTop50Percent { margin-top: 50%; }
.marginBottom50Percent { margin-bottom: 50%; }
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.grid')">
<div id="log"></div>
<h3>Direction LTR</h3>
<pre>Item margin-left: 50%;</pre>
<div class="grid">
<div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="60" data-expected-width="10" data-expected-height="10">X</div>
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
</div>
<pre>Item margin-right: 50%;</pre>
<div class="grid">
<div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="10" data-expected-width="10" data-expected-height="10">X</div>
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
</div>
<pre>Item margin-top: 50%;</pre>
<div class="grid">
<div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="50" data-expected-width="10" data-expected-height="10">X</div>
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
</div>
<pre>Item margin-bottom: 50%;</pre>
<div class="grid">
<div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="0" data-expected-width="10" data-expected-height="10">X</div>
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
</div>
<h3>Direction RTL</h3>
<pre>Item margin-left: 50%;</pre>
<div class="grid directionRTL">
<div class="marginLeft50Percent" data-expected-margin-left="50" data-expected-x="60" data-expected-width="10" data-expected-height="10">X</div>
<div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
</div>
<pre>Item margin-right: 50%;</pre>
<div class="grid directionRTL">
<div class="marginRight50Percent" data-expected-margin-right="50" data-expected-x="10" data-expected-width="10" data-expected-height="10">X</div>
<div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
</div>
<pre>Item margin-top: 50%;</pre>
<div class="grid directionRTL">
<div class="marginTop50Percent" data-expected-margin-top="50" data-expected-y="490" data-expected-width="10" data-expected-height="10">X</div>
<div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
</div>
<pre>Item margin-bottom: 50%;</pre>
<div class="grid directionRTL">
<div class="marginBottom50Percent" data-expected-margin-bottom="50" data-expected-y="440" data-expected-width="10" data-expected-height="10">X</div>
<div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid/grid-items/grid-items-percentage-paddings-001.html 0 → 100644
View file @ ad7d8f49
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Grid items with percentage paddings</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
<meta name="assert" content="Checks grid items percentage paddings are resolved against the inline size of their grid area (in a fixed size track).">
<link rel="stylesheet" href="support/grid.css">
<style>
.grid {
font: 10px/1 Ahem;
grid-template-columns: 100px;
width: 500px;
justify-items: start;
position: relative;
}
.grid > div:nth-child(1) { background: cyan; }
.grid > div:nth-child(2) {
background: magenta;
width: 100%;
height: 10px;
}
.paddingLeft50Percent { padding-left: 50%; }
.paddingRight50Percent { padding-right: 50%; }
.paddingTop50Percent { padding-top: 50%; }
.paddingBottom50Percent { padding-bottom: 50%; }
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.grid')">
<div id="log"></div>
<h3>Direction LTR</h3>
<pre>Item padding-left: 50%;</pre>
<div class="grid">
<div class="paddingLeft50Percent" data-expected-padding-left="50" data-expected-width="60" data-expected-height="10">X</div>
<div data-offset-x="0" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
</div>
<pre>Item padding-right: 50%;</pre>
<div class="grid">
<div class="paddingRight50Percent" data-expected-padding-right="50" data-expected-width="60" data-expected-height="10">X</div>
<div data-offset-x="0" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
</div>
<pre>Item padding-top: 50%;</pre>
<div class="grid">
<div class="paddingTop50Percent" data-expected-padding-top="50" data-expected-width="10" data-expected-height="60">X</div>
<div data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div>
</div>
<pre>Item padding-bottom: 50%;</pre>
<div class="grid">
<div class="paddingBottom50Percent" data-expected-padding-bottom="50" data-expected-width="10" data-expected-height="60">X</div>
<div data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div>
</div>
<h3>Direction RTL</h3>
<pre>Item padding-left: 50%;</pre>
<div class="grid directionRTL">
<div class="paddingLeft50Percent" data-expected-padding-left="50" data-expected-width="60" data-expected-height="10">X</div>
<div data-offset-x="400" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
</div>
<pre>Item padding-right: 50%;</pre>
<div class="grid directionRTL">
<div class="paddingRight50Percent" data-expected-padding-right="50" data-expected-width="60" data-expected-height="10">X</div>
<div data-offset-x="400" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
</div>
<pre>Item padding-top: 50%;</pre>
<div class="grid directionRTL">
<div class="paddingTop50Percent" data-expected-padding-top="50" data-expected-width="10" data-expected-height="60">X</div>
<div data-offset-x="400" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div>
</div>
<pre>Item padding-bottom: 50%;</pre>
<div class="grid directionRTL">
<div class="paddingBottom50Percent" data-expected-padding-bottom="50" data-expected-width="10" data-expected-height="60">X</div>
<div data-offset-x="400" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div>
</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid/grid-items/grid-items-percentage-paddings-002.html 0 → 100644
View file @ ad7d8f49
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Grid items with percentage paddings</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
<meta name="assert" content="Checks grid items percentage paddings are resolved against the inline size of their grid area (in a track with fixed max sizing function and intrinsic min).">
<link rel="stylesheet" href="support/grid.css">
<style>
.grid {
font: 10px/1 Ahem;
grid-template-columns: minmax(auto, 100px);
width: 500px;
justify-items: start;
position: relative;
}
.grid > div:nth-child(1) { background: cyan; }
.grid > div:nth-child(2) {
background: magenta;
width: 100%;
height: 10px;
}
.paddingLeft50Percent { padding-left: 50%; }
.paddingRight50Percent { padding-right: 50%; }
.paddingTop50Percent { padding-top: 50%; }
.paddingBottom50Percent { padding-bottom: 50%; }
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.grid')">
<div id="log"></div>
<h3>Direction LTR</h3>
<pre>Item padding-left: 50%;</pre>
<div class="grid">
<div class="paddingLeft50Percent" data-expected-padding-left="50" data-expected-width="60" data-expected-height="10">X</div>
<div data-offset-x="0" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
</div>
<pre>Item padding-right: 50%;</pre>
<div class="grid">
<div class="paddingRight50Percent" data-expected-padding-right="50" data-expected-width="60" data-expected-height="10">X</div>
<div data-offset-x="0" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
</div>
<pre>Item padding-top: 50%;</pre>
<div class="grid">
<div class="paddingTop50Percent" data-expected-padding-top="50" data-expected-width="10" data-expected-height="60">X</div>
<div data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div>
</div>
<pre>Item padding-bottom: 50%;</pre>
<div class="grid">
<div class="paddingBottom50Percent" data-expected-padding-bottom="50" data-expected-width="10" data-expected-height="60">X</div>
<div data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div>
</div>
<h3>Direction RTL</h3>
<pre>Item padding-left: 50%;</pre>
<div class="grid directionRTL">
<div class="paddingLeft50Percent" data-expected-padding-left="50" data-expected-width="60" data-expected-height="10">X</div>
<div data-offset-x="400" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
</div>
<pre>Item padding-right: 50%;</pre>
<div class="grid directionRTL">
<div class="paddingRight50Percent" data-expected-padding-right="50" data-expected-width="60" data-expected-height="10">X</div>
<div data-offset-x="400" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
</div>
<pre>Item padding-top: 50%;</pre>
<div class="grid directionRTL">
<div class="paddingTop50Percent" data-expected-padding-top="50" data-expected-width="10" data-expected-height="60">X</div>
<div data-offset-x="400" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div>
</div>
<pre>Item padding-bottom: 50%;</pre>
<div class="grid directionRTL">
<div class="paddingBottom50Percent" data-expected-padding-bottom="50" data-expected-width="10" data-expected-height="60">X</div>
<div data-offset-x="400" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div>
</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-lr-001.html 0 → 100644
View file @ ad7d8f49
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Grid items with percentage paddings vertical-lr</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
<meta name="assert" content="Checks grid items percentage paddings are resolved against the inline size of their grid area (in a fixed size track) in a vertical-lr grid container.">
<link rel="stylesheet" href="support/grid.css">
<style>
.grid {
font: 10px/1 Ahem;
grid-template-columns: 100px;
height: 500px;
justify-items: start;
position: relative;
writing-mode: vertical-lr;
}
.grid > div:nth-child(1) { background: cyan; }
.grid > div:nth-child(2) {
background: magenta;
width: 10px;
height: 100%;
}
.paddingLeft50Percent { padding-left: 50%; }
.paddingRight50Percent { padding-right: 50%; }
.paddingTop50Percent { padding-top: 50%; }
.paddingBottom50Percent { padding-bottom: 50%; }
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.grid')">
<div id="log"></div>
<h3>Direction LTR</h3>
<pre>Item padding-left: 50%;</pre>
<div class="grid">
<div class="paddingLeft50Percent" data-expected-padding-left="50" data-expected-width="60" data-expected-height="10">X</div>
<div data-offset-x="60" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
</div>
<pre>Item padding-right: 50%;</pre>
<div class="grid">
<div class="paddingRight50Percent" data-expected-padding-right="50" data-expected-width="60" data-expected-height="10">X</div>
<div data-offset-x="60" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
</div>
<pre>Item padding-top: 50%;</pre>
<div class="grid">
<div class="paddingTop50Percent" data-expected-padding-top="50" data-expected-width="10" data-expected-height="60">X</div>
<div data-offset-x="10" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
</div>
<pre>Item padding-bottom: 50%;</pre>
<div class="grid">
<div class="paddingBottom50Percent" data-expected-padding-bottom="50" data-expected-width="10" data-expected-height="60">X</div>
<div data-offset-x="10" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
</div>
<h3>Direction RTL</h3>
<pre>Item padding-left: 50%;</pre>
<div class="grid directionRTL">
<div class="paddingLeft50Percent" data-expected-padding-left="50" data-expected-width="60" data-expected-height="10">X</div>
<div data-offset-x="60" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
</div>
<pre>Item padding-right: 50%;</pre>
<div class="grid directionRTL">
<div class="paddingRight50Percent" data-expected-padding-right="50" data-expected-width="60" data-expected-height="10">X</div>
<div data-offset-x="60" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
</div>
<pre>Item padding-top: 50%;</pre>
<div class="grid directionRTL">
<div class="paddingTop50Percent" data-expected-padding-top="50" data-expected-width="10" data-expected-height="60">X</div>
<div data-offset-x="10" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
</div>
<pre>Item padding-bottom: 50%;</pre>
<div class="grid directionRTL">
<div class="paddingBottom50Percent" data-expected-padding-bottom="50" data-expected-width="10" data-expected-height="60">X</div>
<div data-offset-x="10" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-lr-002.html 0 → 100644
View file @ ad7d8f49
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Grid items with percentage paddings vertical-lr</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
<meta name="assert" content="Checks grid items percentage paddings are resolved against the inline size of their grid area (in a track with fixed max sizing function and intrinsic min) in a vertical-lr grid container.">
<link rel="stylesheet" href="support/grid.css">
<style>
.grid {
font: 10px/1 Ahem;
grid-template-columns: minmax(auto, 100px);
height: 500px;
justify-items: start;
position: relative;
writing-mode: vertical-lr;
}
.grid > div:nth-child(1) { background: cyan; }
.grid > div:nth-child(2) {
background: magenta;
width: 10px;
height: 100%;
}
.paddingLeft50Percent { padding-left: 50%; }
.paddingRight50Percent { padding-right: 50%; }
.paddingTop50Percent { padding-top: 50%; }
.paddingBottom50Percent { padding-bottom: 50%; }
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.grid')">
<div id="log"></div>
<h3>Direction LTR</h3>
<pre>Item padding-left: 50%;</pre>
<div class="grid">
<div class="paddingLeft50Percent" data-expected-padding-left="50" data-expected-width="60" data-expected-height="10">X</div>
<div data-offset-x="60" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
</div>
<pre>Item padding-right: 50%;</pre>
<div class="grid">
<div class="paddingRight50Percent" data-expected-padding-right="50" data-expected-width="60" data-expected-height="10">X</div>
<div data-offset-x="60" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
</div>
<pre>Item padding-top: 50%;</pre>
<div class="grid">
<div class="paddingTop50Percent" data-expected-padding-top="50" data-expected-width="10" data-expected-height="60">X</div>
<div data-offset-x="10" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
</div>
<pre>Item padding-bottom: 50%;</pre>
<div class="grid">
<div class="paddingBottom50Percent" data-expected-padding-bottom="50" data-expected-width="10" data-expected-height="60">X</div>
<div data-offset-x="10" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
</div>
<h3>Direction RTL</h3>
<pre>Item padding-left: 50%;</pre>
<div class="grid directionRTL">
<div class="paddingLeft50Percent" data-expected-padding-left="50" data-expected-width="60" data-expected-height="10">X</div>
<div data-offset-x="60" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
</div>
<pre>Item padding-right: 50%;</pre>
<div class="grid directionRTL">
<div class="paddingRight50Percent" data-expected-padding-right="50" data-expected-width="60" data-expected-height="10">X</div>
<div data-offset-x="60" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
</div>
<pre>Item padding-top: 50%;</pre>
<div class="grid directionRTL">
<div class="paddingTop50Percent" data-expected-padding-top="50" data-expected-width="10" data-expected-height="60">X</div>
<div data-offset-x="10" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
</div>
<pre>Item padding-bottom: 50%;</pre>
<div class="grid directionRTL">
<div class="paddingBottom50Percent" data-expected-padding-bottom="50" data-expected-width="10" data-expected-height="60">X</div>
<div data-offset-x="10" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-rl-001.html 0 → 100644
View file @ ad7d8f49
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Grid items with percentage paddings vertical-rl</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
<meta name="assert" content="Checks grid items percentage paddings are resolved against the inline size of their grid area (in a fixed size track) in a vertical-rl grid container.">
<link rel="stylesheet" href="support/grid.css">
<style>
.grid {
font: 10px/1 Ahem;
grid-template-columns: 100px;
height: 500px;
justify-items: start;
position: relative;
writing-mode: vertical-rl;
}
.grid > div:nth-child(1) { background: cyan; }
.grid > div:nth-child(2) {
background: magenta;
width: 10px;
height: 100%;
}
.paddingLeft50Percent { padding-left: 50%; }
.paddingRight50Percent { padding-right: 50%; }
.paddingTop50Percent { padding-top: 50%; }
.paddingBottom50Percent { padding-bottom: 50%; }
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.grid')">
<div id="log"></div>
<h3>Direction LTR</h3>
<pre>Item padding-left: 50%;</pre>
<div class="grid">
<div class="paddingLeft50Percent" data-expected-padding-left="50" data-expected-width="60" data-expected-height="10">X</div>
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
</div>
<pre>Item padding-right: 50%;</pre>
<div class="grid">
<div class="paddingRight50Percent" data-expected-padding-right="50" data-expected-width="60" data-expected-height="10">X</div>
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
</div>
<pre>Item padding-top: 50%;</pre>
<div class="grid">
<div class="paddingTop50Percent" data-expected-padding-top="50" data-expected-width="10" data-expected-height="60">X</div>
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
</div>
<pre>Item padding-bottom: 50%;</pre>
<div class="grid">
<div class="paddingBottom50Percent" data-expected-padding-bottom="50" data-expected-width="10" data-expected-height="60">X</div>
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
</div>
<h3>Direction RTL</h3>
<pre>Item padding-left: 50%;</pre>
<div class="grid directionRTL">
<div class="paddingLeft50Percent" data-expected-padding-left="50" data-expected-width="60" data-expected-height="10">X</div>
<div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
</div>
<pre>Item padding-right: 50%;</pre>
<div class="grid directionRTL">
<div class="paddingRight50Percent" data-expected-padding-right="50" data-expected-width="60" data-expected-height="10">X</div>
<div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
</div>
<pre>Item padding-top: 50%;</pre>
<div class="grid directionRTL">
<div class="paddingTop50Percent" data-expected-padding-top="50" data-expected-width="10" data-expected-height="60">X</div>
<div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
</div>
<pre>Item padding-bottom: 50%;</pre>
<div class="grid directionRTL">
<div class="paddingBottom50Percent" data-expected-padding-bottom="50" data-expected-width="10" data-expected-height="60">X</div>
<div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-rl-002.html 0 → 100644
View file @ ad7d8f49
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Grid items with percentage paddings vertical-rl</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
<meta name="assert" content="Checks grid items percentage paddings are resolved against the inline size of their grid area (in a track with fixed max sizing function and intrinsic min) in a vertical-rl grid container.">
<link rel="stylesheet" href="support/grid.css">
<style>
.grid {
font: 10px/1 Ahem;
grid-template-columns: minmax(auto, 100px);
height: 500px;
justify-items: start;
position: relative;
writing-mode: vertical-rl;
}
.grid > div:nth-child(1) { background: cyan; }
.grid > div:nth-child(2) {
background: magenta;
width: 10px;
height: 100%;
}
.paddingLeft50Percent { padding-left: 50%; }
.paddingRight50Percent { padding-right: 50%; }
.paddingTop50Percent { padding-top: 50%; }
.paddingBottom50Percent { padding-bottom: 50%; }
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.grid')">
<div id="log"></div>
<h3>Direction LTR</h3>
<pre>Item padding-left: 50%;</pre>
<div class="grid">
<div class="paddingLeft50Percent" data-expected-padding-left="50" data-expected-width="60" data-expected-height="10">X</div>
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
</div>
<pre>Item padding-right: 50%;</pre>
<div class="grid">
<div class="paddingRight50Percent" data-expected-padding-right="50" data-expected-width="60" data-expected-height="10">X</div>
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
</div>
<pre>Item padding-top: 50%;</pre>
<div class="grid">
<div class="paddingTop50Percent" data-expected-padding-top="50" data-expected-width="10" data-expected-height="60">X</div>
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
</div>
<pre>Item padding-bottom: 50%;</pre>
<div class="grid">
<div class="paddingBottom50Percent" data-expected-padding-bottom="50" data-expected-width="10" data-expected-height="60">X</div>
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
</div>
<h3>Direction RTL</h3>
<pre>Item padding-left: 50%;</pre>
<div class="grid directionRTL">
<div class="paddingLeft50Percent" data-expected-padding-left="50" data-expected-width="60" data-expected-height="10">X</div>
<div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
</div>
<pre>Item padding-right: 50%;</pre>
<div class="grid directionRTL">
<div class="paddingRight50Percent" data-expected-padding-right="50" data-expected-width="60" data-expected-height="10">X</div>
<div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
</div>
<pre>Item padding-top: 50%;</pre>
<div class="grid directionRTL">
<div class="paddingTop50Percent" data-expected-padding-top="50" data-expected-width="10" data-expected-height="60">X</div>
<div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
</div>
<pre>Item padding-bottom: 50%;</pre>
<div class="grid directionRTL">
<div class="paddingBottom50Percent" data-expected-padding-bottom="50" data-expected-width="10" data-expected-height="60">X</div>
<div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
</div>
third_party/WebKit/Source/core/layout/LayoutBox.cpp
View file @ ad7d8f49
......@@ -2066,6 +2066,12 @@ LayoutUnit LayoutBox::ContainingBlockLogicalWidthForContent() const {
if (HasOverrideContainingBlockLogicalWidth())
return OverrideContainingBlockContentLogicalWidth();
// TODO(rego): Probably this should be done directly in
// HasOverrideContainingBlockLogicalWidth(), but that would imply more changes
// in other parts of the code so leaving it for a follow-up patch.
if (IsGridItem())
return LayoutUnit();
LayoutBlock* cb = ContainingBlock();
if (IsOutOfFlowPositioned())
return cb->ClientLogicalWidth();
......@@ -2077,6 +2083,12 @@ LayoutUnit LayoutBox::ContainingBlockLogicalHeightForContent(
if (HasOverrideContainingBlockLogicalHeight())
return OverrideContainingBlockContentLogicalHeight();
// TODO(rego): Probably this should be done directly in
// HasOverrideContainingBlockLogicalHeight(), but that would imply more
// changes in other parts of the code so leaving it for a follow-up patch.
if (IsGridItem())
return LayoutUnit();
LayoutBlock* cb = ContainingBlock();
return cb->AvailableLogicalHeight(height_type);
}
......
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