testing/web-platform/tests/css/css-grid/grid-items/grid-items-relative-offsets-002.html
author Manuel Rego Casasnovas <rego@igalia.com>
Thu, 11 Oct 2018 09:31:59 +0000
changeset 496783 31a20d731a4041d04f4dd6f0d896b9444634ac1a
permissions -rw-r--r--
Bug 1493642 [wpt PR 13184] - [css-grid] Fix percentages in relative offsets for grid items, a=testonly Automatic update from web-platform-tests[css-grid] Fix percentages in relative offsets for grid items The method LayoutBoxModelObject::RelativePositionOffset() was not considering the case of grid items, where the containing block is the grid area. The patch modifies the method so the new code uses OverrideContainingBlockContentLogicalWidth|Height when required. Two new tests are added, the first one does not use percentages and is already passing. The second one has the very same output but using percentages which was not working before this patch. BUG=835607 TEST=external/wpt/css/css-grid/grid-items/grid-items-relative-offsets-001.html TEST=external/wpt/css/css-grid/grid-items/grid-items-relative-offsets-002.html Change-Id: Icb76f4a521566ad36f87924835b21ae450f2cb24 Reviewed-on: https://chromium-review.googlesource.com/c/1238726 Reviewed-by: Javier Fernandez <jfernandez@igalia.com> Commit-Queue: Manuel Rego <rego@igalia.com> Cr-Commit-Position: refs/heads/master@{#597543} -- Fix lint by syncing all support/grid.css -- wpt-commits: d66f26198d800f48078618eea47a9da20954f724, 907455e8cd08741745ad097e12806073c61830d2 wpt-pr: 13184

<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Grid items with relative offsets</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing">
<meta name="assert" content="Checks that relative percentage offests work for grid items.">
<link rel="stylesheet" href="support/grid.css">
<style>
.grid {
  position: relative;
  grid: 90px 60px 30px / 200px 150px 100px;
  inline-size: 600px;
  block-size: 300px;
}

.grid > div { position: relative; }
</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>

<div class="grid">
  <div class="firstRowFirstColumn" style="left: 5%; top: 10%;"
    data-offset-x="10" data-offest-y="9" data-expected-width="200" data-expected-height="90"></div>
  <div class="secondRowSecondColumn" style="left: -10%; top: -20%;"
    data-offset-x="185" data-offest-y="78" data-expected-width="150" data-expected-height="60"></div>
  <div class="thirdRowThirdColumn" style="right: 30%; bottom: 70%;"
    data-offset-x="320" data-offest-y="129" data-expected-width="100" data-expected-height="30"></div>
</div>

<h3>Direction RTL</h3>

<div class="grid directionRTL">
  <div class="firstRowFirstColumn" style="left: 5%; top: 10%;"
    data-offset-x="410" data-offest-y="9" data-expected-width="200" data-expected-height="90"></div>
  <div class="secondRowSecondColumn" style="left: -10%; top: -20%;"
    data-offset-x="235" data-offest-y="78" data-expected-width="150" data-expected-height="60"></div>
  <div class="thirdRowThirdColumn" style="right: 30%; bottom: 70%;"
    data-offset-x="120" data-offest-y="129" data-expected-width="100" data-expected-height="30"></div>
</div>

<h2>Writing Mode vertical-lr</h2>

<h3>Direction LTR</h3>

<div class="grid verticalLR">
  <div class="firstRowFirstColumn" style="left: 10%; top: 5%;"
    data-offset-x="9" data-offest-y="10" data-expected-width="90" data-expected-height="200"></div>
  <div class="secondRowSecondColumn" style="left: -20%; top: -10%;"
    data-offset-x="78" data-offest-y="75" data-expected-width="60" data-expected-height="150"></div>
  <div class="thirdRowThirdColumn" style="right: 70%; bottom: 30%;"
    data-offset-x="129" data-offest-y="120" data-expected-width="30" data-expected-height="100"></div>
</div>

<h3>Direction RTL</h3>

<div class="grid verticalLR directionRTL">
  <div class="firstRowFirstColumn" style="left: 10%; top: 5%;"
    data-offset-x="9" data-offest-y="10" data-expected-width="90" data-expected-height="200"></div>
  <div class="secondRowSecondColumn" style="left: -20%; top: -10%;"
    data-offset-x="78" data-offest-y="75" data-expected-width="60" data-expected-height="150"></div>
  <div class="thirdRowThirdColumn" style="right: 70%; bottom: 30%;"
    data-offset-x="129" data-offest-y="120" data-expected-width="30" data-expected-height="100"></div>
</div>

<h2>Writing Mode vertical-rl</h2>

<h3>Direction LTR</h3>

<div class="grid verticalRL">
  <div class="firstRowFirstColumn" style="left: 10%; top: 5%;"
    data-offset-x="219" data-offest-y="10" data-expected-width="90" data-expected-height="200"></div>
  <div class="secondRowSecondColumn" style="left: -20%; top: -10%;"
    data-offset-x="138" data-offest-y="75" data-expected-width="60" data-expected-height="150"></div>
  <div class="thirdRowThirdColumn" style="right: 70%; bottom: 30%;"
    data-offset-x="99" data-offest-y="120" data-expected-width="30" data-expected-height="100"></div>
</div>

<h3>Direction RTL</h3>

<div class="grid verticalRL directionRTL">
  <div class="firstRowFirstColumn" style="left: 10%; top: 5%;"
    data-offset-x="219" data-offest-y="10" data-expected-width="90" data-expected-height="200"></div>
  <div class="secondRowSecondColumn" style="left: -20%; top: -10%;"
    data-offset-x="138" data-offest-y="75" data-expected-width="60" data-expected-height="150"></div>
  <div class="thirdRowThirdColumn" style="right: 70%; bottom: 30%;"
    data-offset-x="99" data-offest-y="120" data-expected-width="30" data-expected-height="100"></div>
</div>