testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-lr-002.html
author Manuel Rego Casasnovas <rego@igalia.com>
Mon, 09 Apr 2018 21:29:17 +0000
changeset 467243 c1715027770e6a4a487ba2ad522b91a6a51691ac
child 539318 301063b1afcdeb135889a43606608277979dc60c
permissions -rw-r--r--
Bug 1449132 [wpt PR 10194] - [css-grid] Fix resolution of percentage paddings and margins of grid items, a=testonly Automatic update from web-platform-tests[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/980756 Reviewed-by: Javier Fernandez <jfernandez@igalia.com> Commit-Queue: Manuel Rego Casasnovas <rego@igalia.com> Cr-Commit-Position: refs/heads/master@{#547417} wpt-commits: e4efc10a82630de47f920a737aa8ea94845191af wpt-pr: 10194 wpt-commits: e4efc10a82630de47f920a737aa8ea94845191af wpt-pr: 10194

<!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>