row-negative-margin-003-ref.html

Enable keyboard shortcuts

<!DOCTYPE html>

<html>

<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com">

<style>

body, html {

  color:black;

  font-size:15px/1 monospace;

  padding-left: 20px;

.grid {

    display: grid;

    grid-template-rows: repeat(3, 50px);

.orthogonal {

    writing-mode: vertical-rl;

</style>

<body>

  <p>Tests that orthogonal items with negative margins are handled correctly in grid-lanes in the row direction.</p>

  <div class="grid">

    <div style="grid-row: 1;">

      <div style="background: aquamarine; width: 50px; height: 50px;">

        item 1

      </div>

    </div>

    <div style="grid-row: 2; display: flex;">

      <div class="orthogonal" style="background: lightsteelblue; width: 50px; margin-left: -20px; margin-right: -30px;">

        item 2

      </div>

      <div class="orthogonal" style="background: lightpink; height: 20px; width: max-content;">

        item 4

      </div>

    </div>

    <div style="grid-row: 3; display: flex;">

      <div style="background: lightblue; width: 20px;">

        item 3

      </div>

      <div class="orthogonal" style="background: yellow; width: 20px; height: 50px;">

        item 5

      </div>

    </div>

  </div>

</body>

</html>