Codebase Browser
chromium
Go to App

chromium/third_party/blink/web_tests/fast/css-grid-layout/grid-item-auto-margins-must-respect-specified-margins.html 

<!DOCTYPE html>
<html>
<head>
<link href="resources/grid.css" rel="stylesheet">
<link href="resources/grid-alignment.css" rel="stylesheet">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/check-layout-th.js"></script>
<style>
body {
    margin: 0;
}

.grid {
    grid-template-columns: 100px;
    grid-template-rows: 100px;
    width: -webkit-fit-content;
    position: relative;
}

.item {
    width: 20px;
    height: 40px;
    margin: 5px 7px 11px 13px;
    background-color: lime;
    grid-column: 1;
    grid-row: 1;
}

.autoMarginTop { margin-top: auto; }
.autoMarginRight { margin-right: auto; }
.autoMarginBottom { margin-bottom: auto; }
.autoMarginLeft { margin-left: auto; }
.autoMargin { margin: auto; }
</style>
</head>
<body onload="checkLayout('.grid')">
<div id=log></div>

<p>This test checks auto-margins alignment respects the specified margins.</p>

<p>margin: 5px 7px 11px 13px | <b>margin-left: auto</b> </p>
<div class="grid">
    <div class="item autoMarginLeft" data-offset-x="73" data-offset-y="5"></div>
</div>

<p>margin: 5px 7px 11px 13px | <b>margin-right: auto</b> </p>
<div class="grid">
    <div class="item autoMarginRight" data-offset-x="13" data-offset-y="5"></div>
</div>

<p>margin: 5px 7px 11px 13px | <b>margin-left: auto</b> and <b>margin-right: auto</b></p>
<div class="grid">
    <div class="item autoMarginLeft autoMarginRight" data-offset-x="40" data-offset-y="5"></div>
</div>

<p>margin: 5px 7px 11px 13px | <b>margin-top: auto</b> </p>
<div class="grid">
    <div class="item autoMarginTop" data-offset-x="13" data-offset-y="49"></div>
</div>

<p>margin: 5px 7px 11px 13px | <b>margin-bottom: auto</b> </p>
<div class="grid">
    <div class="item autoMarginBottom" data-offset-x="13" data-offset-y="5"></div>
</div>

<p>margin: 5px 7px 11px 13px | <b>margin-bottom: auto</b> and <b>margin-top: auto</b></p>
<div class="grid">
    <div class="item autoMarginTop autoMarginBottom" data-offset-x="13" data-offset-y="30"></div>
</div>

<p>margin: 5px 7px 11px 13px | <b>margin: auto</b></p>
<div class="grid">
    <div class="item autoMargin" data-offset-x="40" data-offset-y="30"></div>
</div>