[css-grid] Add support for orthogonal positioned grid items

        https://bugs.webkit.org/show_bug.cgi?id=172591

        Reviewed by NOBODY (OOPS!).

        This patch adds support for positioned grid items with orthogonal flows.

        Basically it just needs to check if the item is orthogonal to use

        the column or row offset as logical left or top depending on the case.

        Tests: imported/w3c/web-platform-tests/css/css-grid-1/abspos/orthogonal-positioned-grid-items-***.html

        * rendering/RenderGrid.cpp:

        (WebCore::RenderGrid::layoutPositionedObject):

2017-05-25  Manuel Rego Casasnovas  <rego@igalia.com>

2017-05-25  Manuel Rego Casasnovas  <rego@igalia.com>

        [css-grid] Add support for orthogonal positioned grid items

        https://bugs.webkit.org/show_bug.cgi?id=172591

        Reviewed by NOBODY (OOPS!).

        Two of the new imported tests are failing due to an issue with margins

        and orthogonal items, which is unrelated to this patch (see bug #172590).

        * TestExpectations:

2017-05-25  Manuel Rego Casasnovas  <rego@igalia.com>

        [css-grid] Add support for orthogonal positioned grid items

        https://bugs.webkit.org/show_bug.cgi?id=172591

        Reviewed by NOBODY (OOPS!).

        Imported new tests for this feature from WPT repository.

        * resources/import-expectations.json:

        * web-platform-tests/css/css-grid-1/abspos/orthogonal-positioned-grid-items-001-expected.html: Added.

        * web-platform-tests/css/css-grid-1/abspos/orthogonal-positioned-grid-items-001.html: Added.

        * web-platform-tests/css/css-grid-1/abspos/orthogonal-positioned-grid-items-002-expected.html: Added.

        * web-platform-tests/css/css-grid-1/abspos/orthogonal-positioned-grid-items-002.html: Added.

        * web-platform-tests/css/css-grid-1/abspos/orthogonal-positioned-grid-items-003-expected.html: Added.

        * web-platform-tests/css/css-grid-1/abspos/orthogonal-positioned-grid-items-003.html: Added.

        * web-platform-tests/css/css-grid-1/abspos/orthogonal-positioned-grid-items-004-expected.html: Added.

        * web-platform-tests/css/css-grid-1/abspos/orthogonal-positioned-grid-items-004.html: Added.

        * web-platform-tests/css/css-grid-1/abspos/orthogonal-positioned-grid-items-005-expected.html: Added.

        * web-platform-tests/css/css-grid-1/abspos/orthogonal-positioned-grid-items-005.html: Added.

        * web-platform-tests/css/css-grid-1/abspos/orthogonal-positioned-grid-items-006-expected.html: Added.

        * web-platform-tests/css/css-grid-1/abspos/orthogonal-positioned-grid-items-006.html: Added.

        * web-platform-tests/css/css-grid-1/abspos/orthogonal-positioned-grid-items-007-expected.html: Added.

        * web-platform-tests/css/css-grid-1/abspos/orthogonal-positioned-grid-items-007.html: Added.

        * web-platform-tests/css/css-grid-1/abspos/orthogonal-positioned-grid-items-008-expected.html: Added.

        * web-platform-tests/css/css-grid-1/abspos/orthogonal-positioned-grid-items-008.html: Added.

        * web-platform-tests/css/css-grid-1/abspos/orthogonal-positioned-grid-items-009-expected.html: Added.

        * web-platform-tests/css/css-grid-1/abspos/orthogonal-positioned-grid-items-009.html: Added.

        * web-platform-tests/css/css-grid-1/abspos/orthogonal-positioned-grid-items-010-expected.html: Added.

        * web-platform-tests/css/css-grid-1/abspos/orthogonal-positioned-grid-items-010.html: Added.

        * web-platform-tests/css/css-grid-1/abspos/orthogonal-positioned-grid-items-011-expected.html: Added.

        * web-platform-tests/css/css-grid-1/abspos/orthogonal-positioned-grid-items-011.html: Added.

        * web-platform-tests/css/css-grid-1/abspos/orthogonal-positioned-grid-items-012-expected.html: Added.

        * web-platform-tests/css/css-grid-1/abspos/orthogonal-positioned-grid-items-012.html: Added.

        * web-platform-tests/css/css-grid-1/abspos/orthogonal-positioned-grid-items-013-expected.html: Added.

        * web-platform-tests/css/css-grid-1/abspos/orthogonal-positioned-grid-items-013.html: Added.

        * web-platform-tests/css/css-grid-1/abspos/orthogonal-positioned-grid-items-014-expected.html: Added.

        * web-platform-tests/css/css-grid-1/abspos/orthogonal-positioned-grid-items-014.html: Added.

        * web-platform-tests/css/css-grid-1/abspos/orthogonal-positioned-grid-items-015-expected.html: Added.

        * web-platform-tests/css/css-grid-1/abspos/orthogonal-positioned-grid-items-015.html: Added.

        * web-platform-tests/css/css-grid-1/abspos/orthogonal-positioned-grid-items-016-expected.html: Added.

        * web-platform-tests/css/css-grid-1/abspos/orthogonal-positioned-grid-items-016.html: Added.

        * web-platform-tests/css/css-grid-1/abspos/orthogonal-positioned-grid-items-017-expected.html: Added.

        * web-platform-tests/css/css-grid-1/abspos/orthogonal-positioned-grid-items-017.html: Added.

        * web-platform-tests/css/css-grid-1/abspos/w3c-import.log:

webkit.org/b/172590 imported/w3c/web-platform-tests/css/css-grid-1/abspos/orthogonal-positioned-grid-items-013.html [ ImageOnlyFailure ]

webkit.org/b/172590 imported/w3c/web-platform-tests/css/css-grid-1/abspos/orthogonal-positioned-grid-items-017.html [ ImageOnlyFailure ]

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Grid Layout Test: Orthogonal positioned grid items reference file</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<style>

#grid {

  display: grid;

  grid: 150px 100px / 200px 300px;

  place-items: start;

  margin: 1px 2px 3px 4px;

  padding: 20px 15px 10px 5px;

  border-width: 9px 3px 12px 6px;

  border-style: solid;

  width: 550px;

  height: 400px;

}

#grid > div {

  writing-mode: vertical-lr;

}

#firstItem {

  background: magenta;

}

#secondItem {

  background: cyan;

}

#thirdItem {

  background: yellow;

}

#fourthItem {

  background: lime;

}

</style>

<p>The test passes if it has the same output than the reference.</p>

<div id="grid">

  <div id="firstItem">First item</div>

  <div id="secondItem">Second item</div>

  <div id="thirdItem">Third item</div>

  <div id="fourthItem">Fourth item</div>

</div>

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Grid Layout Test: Orthogonal positioned grid items</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">

<link rel="match" href="orthogonal-positioned-grid-items-001-ref.html">

<meta name="assert" content="Checks that absolutely positioned orthogonal grid items are properly placed and sized when they have a static position (left/rigth and top/bottom are 'auto').">

<style>

#grid {

  display: grid;

  grid: 150px 100px / 200px 300px;

  margin: 1px 2px 3px 4px;

  padding: 20px 15px 10px 5px;

  border-width: 9px 3px 12px 6px;

  border-style: solid;

  width: 550px;

  height: 400px;

  position: relative;

}

#grid > div {

  writing-mode: vertical-lr;

  position: absolute;

}

#firstItem {

  background: magenta;

  grid-column: 1 / 2;

  grid-row: 1 / 2;

}

#secondItem {

  background: cyan;

  grid-column: 2 / 3;

  grid-row: 1 / 2;

}

#thirdItem {

  background: yellow;

  grid-column: 1 / 2;

  grid-row: 2 / 3;

}

#fourthItem {

  background: lime;

  grid-column: 2 / 3;

  grid-row: 2 / 3;

}

</style>

<p>The test passes if it has the same output than the reference.</p>

<div id="grid">

  <div id="firstItem">First item</div>

  <div id="secondItem">Second item</div>

  <div id="thirdItem">Third item</div>

  <div id="fourthItem">Fourth item</div>

</div>

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Grid Layout Test: Orthogonal positioned grid items reference file</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<style>

#grid {

  display: grid;

  grid: 150px 100px / 200px 300px;

  place-items: start;

  margin: 1px 2px 3px 4px;

  padding: 20px 15px 10px 5px;

  border-width: 9px 3px 12px 6px;

  border-style: solid;

  width: 550px;

  height: 400px;

}

#grid > div {

  writing-mode: vertical-lr;

}

#firstItem {

  background: magenta;

}

#secondItem {

  background: cyan;

}

#thirdItem {

  background: yellow;

}

#fourthItem {

  background: lime;

}

</style>

<p>The test passes if it has the same output than the reference.</p>

<div id="grid">

  <div id="firstItem">First item</div>

  <div id="secondItem">Second item</div>

  <div id="thirdItem">Third item</div>

  <div id="fourthItem">Fourth item</div>

</div>

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Grid Layout Test: Orthogonal positioned grid items</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">

<link rel="match" href="orthogonal-positioned-grid-items-001-ref.html">

<meta name="assert" content="Checks that absolutely positioned orthogonal grid items are properly placed and sized when they have a specific 'left' offset and a static block position (top/bottom are 'auto').">

<style>

#grid {

  display: grid;

  grid: 150px 100px / 200px 300px;

  margin: 1px 2px 3px 4px;

  padding: 20px 15px 10px 5px;

  border-width: 9px 3px 12px 6px;

  border-style: solid;

  width: 550px;

  height: 400px;

  position: relative;

}

#grid > div {

  writing-mode: vertical-lr;

  position: absolute;

  left: 0;

}

#firstItem {

  background: magenta;

  grid-column: 1 / 2;

  grid-row: 1 / 2;

}

#secondItem {

  background: cyan;

  grid-column: 2 / 3;

  grid-row: 1 / 2;

}

#thirdItem {

  background: yellow;

  grid-column: 1 / 2;

  grid-row: 2 / 3;

}

#fourthItem {

  background: lime;

  grid-column: 2 / 3;

  grid-row: 2 / 3;

}

</style>

<p>The test passes if it has the same output than the reference.</p>

<div id="grid">

  <div id="firstItem">First item</div>

  <div id="secondItem">Second item</div>

  <div id="thirdItem">Third item</div>

  <div id="fourthItem">Fourth item</div>

</div>

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Grid Layout Test: Orthogonal positioned grid items reference file</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<style>

#grid {

  display: grid;

  grid: 150px 100px / 200px 300px;

  place-items: start;

  margin: 1px 2px 3px 4px;

  padding: 20px 15px 10px 5px;

  border-width: 9px 3px 12px 6px;

  border-style: solid;

  width: 550px;

  height: 400px;

}

#grid > div {

  writing-mode: vertical-lr;

}

#firstItem {

  background: magenta;

}

#secondItem {

  background: cyan;

}

#thirdItem {

  background: yellow;

}

#fourthItem {

  background: lime;

}

</style>

<p>The test passes if it has the same output than the reference.</p>

<div id="grid">

  <div id="firstItem">First item</div>

  <div id="secondItem">Second item</div>

  <div id="thirdItem">Third item</div>

  <div id="fourthItem">Fourth item</div>

</div>

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Grid Layout Test: Orthogonal positioned grid items</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">

<link rel="match" href="orthogonal-positioned-grid-items-001-ref.html">

<meta name="assert" content="Checks that absolutely positioned orthogonal grid items are properly placed and sized when they have a specific 'top' offset and a static inline position (left/right are 'auto').">

<style>

#grid {

  display: grid;

  grid: 150px 100px / 200px 300px;

  margin: 1px 2px 3px 4px;

  padding: 20px 15px 10px 5px;

  border-width: 9px 3px 12px 6px;

  border-style: solid;

  width: 550px;

  height: 400px;

  position: relative;

}

#grid > div {

  writing-mode: vertical-lr;

  position: absolute;

  top: 0;

}

#firstItem {

  background: magenta;

  grid-column: 1 / 2;

  grid-row: 1 / 2;

}

#secondItem {

  background: cyan;

  grid-column: 2 / 3;

  grid-row: 1 / 2;

}

#thirdItem {

  background: yellow;

  grid-column: 1 / 2;

  grid-row: 2 / 3;

}

#fourthItem {

  background: lime;

  grid-column: 2 / 3;

  grid-row: 2 / 3;

}

</style>

<p>The test passes if it has the same output than the reference.</p>

<div id="grid">

  <div id="firstItem">First item</div>

  <div id="secondItem">Second item</div>

  <div id="thirdItem">Third item</div>

  <div id="fourthItem">Fourth item</div>

</div>

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Grid Layout Test: Orthogonal positioned grid items reference file</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<style>

#grid {

  display: grid;

  grid: 150px 100px / 200px 300px;

  place-items: start;

  margin: 1px 2px 3px 4px;

  padding: 20px 15px 10px 5px;

  border-width: 9px 3px 12px 6px;

  border-style: solid;

  width: 550px;

  height: 400px;

}

#grid > div {

  writing-mode: vertical-lr;

}

#firstItem {

  background: magenta;

}

#secondItem {

  background: cyan;

}

#thirdItem {

  background: yellow;

}

#fourthItem {

  background: lime;

}

</style>

<p>The test passes if it has the same output than the reference.</p>

<div id="grid">

  <div id="firstItem">First item</div>

  <div id="secondItem">Second item</div>

  <div id="thirdItem">Third item</div>

  <div id="fourthItem">Fourth item</div>

</div>

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Grid Layout Test: Orthogonal positioned grid items</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">

<link rel="match" href="orthogonal-positioned-grid-items-001-ref.html">

<meta name="assert" content="Checks that absolutely positioned orthogonal grid items are properly placed and sized when they have specific 'left' and 'top' offsets.">

<style>

#grid {

  display: grid;

  grid: 150px 100px / 200px 300px;

  margin: 1px 2px 3px 4px;

  padding: 20px 15px 10px 5px;

  border-width: 9px 3px 12px 6px;

  border-style: solid;

  width: 550px;

  height: 400px;

  position: relative;

}

#grid > div {

  writing-mode: vertical-lr;

  position: absolute;

  left: 0;

  top: 0;

}

#firstItem {

  background: magenta;

  grid-column: 1 / 2;

  grid-row: 1 / 2;

}

#secondItem {

  background: cyan;

  grid-column: 2 / 3;

  grid-row: 1 / 2;

}

#thirdItem {

  background: yellow;

  grid-column: 1 / 2;

  grid-row: 2 / 3;

}

#fourthItem {

  background: lime;

  grid-column: 2 / 3;

  grid-row: 2 / 3;

}

</style>

<p>The test passes if it has the same output than the reference.</p>

<div id="grid">

  <div id="firstItem">First item</div>

  <div id="secondItem">Second item</div>

  <div id="thirdItem">Third item</div>

  <div id="fourthItem">Fourth item</div>

</div>

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Grid Layout Test: Orthogonal positioned grid items reference file</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<style>

#grid {

  display: grid;

  grid: 150px 100px / 200px 300px;

  justify-items: end;

  align-items: start;

  margin: 1px 2px 3px 4px;

  padding: 20px 15px 10px 5px;

  border-width: 9px 3px 12px 6px;

  border-style: solid;

  width: 550px;

  height: 400px;

}

#grid > div {

  writing-mode: vertical-lr;

}

#firstItem {

  background: magenta;

}

#secondItem {

  background: cyan;

}

#thirdItem {

  background: yellow;

}

#fourthItem {

  background: lime;

}

</style>

<p>The test passes if it has the same output than the reference.</p>

<div id="grid">

  <div id="firstItem">First item</div>

  <div id="secondItem">Second item</div>

  <div id="thirdItem">Third item</div>

  <div id="fourthItem">Fourth item</div>

</div>

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Grid Layout Test: Orthogonal positioned grid items</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">

<link rel="match" href="orthogonal-positioned-grid-items-005-ref.html">

<meta name="assert" content="Checks that absolutely positioned orthogonal grid items are properly placed and sized when they have a specific 'right' offset and a static block position (top/bottom are 'auto').">

<style>

#grid {

  display: grid;

  grid: 150px 100px / 200px 300px;

  margin: 1px 2px 3px 4px;

  padding: 20px 15px 10px 5px;

  border-width: 9px 3px 12px 6px;

  border-style: solid;

  width: 550px;

  height: 400px;

  position: relative;

}

#grid > div {

  writing-mode: vertical-lr;

  position: absolute;

  right: 0;

}

#firstItem {

  background: magenta;

  grid-column: 1 / 2;

  grid-row: 1 / 2;

}

#secondItem {

  background: cyan;

  grid-column: 2 / 3;

  grid-row: 1 / 2;

}

#thirdItem {

  background: yellow;

  grid-column: 1 / 2;

  grid-row: 2 / 3;

}

#fourthItem {

  background: lime;

  grid-column: 2 / 3;

  grid-row: 2 / 3;

}

</style>

<p>The test passes if it has the same output than the reference.</p>

<div id="grid">

  <div id="firstItem">First item</div>

  <div id="secondItem">Second item</div>

  <div id="thirdItem">Third item</div>

  <div id="fourthItem">Fourth item</div>

</div>

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Grid Layout Test: Orthogonal positioned grid items reference file</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<style>

#grid {

  display: grid;

  grid: 150px 100px / 200px 300px;

  justify-items: start;

  align-items: end;

  margin: 1px 2px 3px 4px;

  padding: 20px 15px 10px 5px;

  border-width: 9px 3px 12px 6px;

  border-style: solid;

  width: 550px;

  height: 400px;

}

#grid > div {

  writing-mode: vertical-lr;

}

#firstItem {

  background: magenta;

}

#secondItem {

  background: cyan;

}

#thirdItem {

  background: yellow;

}

#fourthItem {

  background: lime;

}

</style>

<p>The test passes if it has the same output than the reference.</p>

<div id="grid">

  <div id="firstItem">First item</div>

  <div id="secondItem">Second item</div>

  <div id="thirdItem">Third item</div>

  <div id="fourthItem">Fourth item</div>

</div>

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Grid Layout Test: Orthogonal positioned grid items</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">

<link rel="match" href="orthogonal-positioned-grid-items-006-ref.html">

<meta name="assert" content="Checks that absolutely positioned orthogonal grid items are properly placed and sized when they have a specific 'bottom' offset and a static inline position (left/right are 'auto').">

<style>

#grid {

  display: grid;

  grid: 150px 100px / 200px 300px;

  margin: 1px 2px 3px 4px;

  padding: 20px 15px 10px 5px;

  border-width: 9px 3px 12px 6px;

  border-style: solid;

  width: 550px;

  height: 400px;

  position: relative;

}

#grid > div {

  writing-mode: vertical-lr;

  position: absolute;

  bottom: 0;

}

#firstItem {

  background: magenta;

  grid-column: 1 / 2;

  grid-row: 1 / 2;

}

#secondItem {

  background: cyan;

  grid-column: 2 / 3;

  grid-row: 1 / 2;

}

#thirdItem {

  background: yellow;

  grid-column: 1 / 2;

  grid-row: 2 / 3;

}

#fourthItem {

  background: lime;

  grid-column: 2 / 3;

  grid-row: 2 / 3;

}

</style>

<p>The test passes if it has the same output than the reference.</p>

<div id="grid">

  <div id="firstItem">First item</div>

  <div id="secondItem">Second item</div>

  <div id="thirdItem">Third item</div>

  <div id="fourthItem">Fourth item</div>

</div>

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Grid Layout Test: Orthogonal positioned grid items reference file</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<style>

#grid {

  display: grid;

  grid: 150px 100px / 200px 300px;

  align-items: start;

  margin: 1px 2px 3px 4px;

  padding: 20px 15px 10px 5px;

  border-width: 9px 3px 12px 6px;

  border-style: solid;

  width: 550px;

  height: 400px;

}

#grid > div {

  writing-mode: vertical-lr;

}

#firstItem {

  background: magenta;

}

#secondItem {

  background: cyan;

}

#thirdItem {

  background: yellow;

}

#fourthItem {

  background: lime;

}

</style>

<p>The test passes if it has the same output than the reference.</p>

<div id="grid">

  <div id="firstItem">First item</div>

  <div id="secondItem">Second item</div>

  <div id="thirdItem">Third item</div>

  <div id="fourthItem">Fourth item</div>

</div>

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Grid Layout Test: Orthogonal positioned grid items</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">

<link rel="match" href="orthogonal-positioned-grid-items-007-ref.html">

<meta name="assert" content="Checks that absolutely positioned orthogonal grid items are properly placed and sized when they have specific 'left' and 'right' offsets and a static block position (top/bottom are 'auto').">

<style>

#grid {

  display: grid;

  grid: 150px 100px / 200px 300px;

  margin: 1px 2px 3px 4px;

  padding: 20px 15px 10px 5px;

  border-width: 9px 3px 12px 6px;

  border-style: solid;

  width: 550px;

  height: 400px;

  position: relative;

}

#grid > div {

  writing-mode: vertical-lr;

  position: absolute;

  left: 0;

  right: 0;

}

#firstItem {

  background: magenta;

  grid-column: 1 / 2;

  grid-row: 1 / 2;

}

#secondItem {

  background: cyan;

  grid-column: 2 / 3;

  grid-row: 1 / 2;

}

#thirdItem {

  background: yellow;

  grid-column: 1 / 2;

  grid-row: 2 / 3;

}

#fourthItem {

  background: lime;

  grid-column: 2 / 3;

  grid-row: 2 / 3;

}

</style>

<p>The test passes if it has the same output than the reference.</p>

<div id="grid">

  <div id="firstItem">First item</div>

  <div id="secondItem">Second item</div>

  <div id="thirdItem">Third item</div>

  <div id="fourthItem">Fourth item</div>

</div>

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Grid Layout Test: Orthogonal positioned grid items reference file</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<style>

#grid {

  display: grid;

  grid: 150px 100px / 200px 300px;

  justify-items: start;

  margin: 1px 2px 3px 4px;

  padding: 20px 15px 10px 5px;

  border-width: 9px 3px 12px 6px;

  border-style: solid;

  width: 550px;

  height: 400px;

}

#grid > div {

  writing-mode: vertical-lr;

}

#firstItem {

  background: magenta;

}

#secondItem {

  background: cyan;

}

#thirdItem {

  background: yellow;

}

#fourthItem {

  background: lime;

}

</style>

<p>The test passes if it has the same output than the reference.</p>

<div id="grid">

  <div id="firstItem">First item</div>

  <div id="secondItem">Second item</div>

  <div id="thirdItem">Third item</div>

  <div id="fourthItem">Fourth item</div>

</div>

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Grid Layout Test: Orthogonal positioned grid items</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">

<link rel="match" href="orthogonal-positioned-grid-items-008-ref.html">

<meta name="assert" content="Checks that absolutely positioned orthogonal grid items are properly placed and sized when they have specific 'top' and 'bottom' offsets and a static inline position (left/right are 'auto').">

<style>

#grid {

  display: grid;

  grid: 150px 100px / 200px 300px;

  margin: 1px 2px 3px 4px;

  padding: 20px 15px 10px 5px;

  border-width: 9px 3px 12px 6px;

  border-style: solid;

  width: 550px;

  height: 400px;

  position: relative;

}

#grid > div {

  writing-mode: vertical-lr;

  position: absolute;

  top: 0;

  bottom: 0;

}

#firstItem {

  background: magenta;

  grid-column: 1 / 2;

  grid-row: 1 / 2;

}

#secondItem {

  background: cyan;

  grid-column: 2 / 3;

  grid-row: 1 / 2;

}

#thirdItem {

  background: yellow;

  grid-column: 1 / 2;

  grid-row: 2 / 3;

}

#fourthItem {

  background: lime;

  grid-column: 2 / 3;

  grid-row: 2 / 3;

}

</style>

<p>The test passes if it has the same output than the reference.</p>

<div id="grid">

  <div id="firstItem">First item</div>

  <div id="secondItem">Second item</div>

  <div id="thirdItem">Third item</div>

  <div id="fourthItem">Fourth item</div>

</div>

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Grid Layout Test: Orthogonal positioned grid items reference file</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<style>

#grid {

  display: grid;

  grid: 150px 100px / 200px 300px;

  margin: 1px 2px 3px 4px;

  padding: 20px 15px 10px 5px;

  border-width: 9px 3px 12px 6px;

  border-style: solid;

  width: 550px;

  height: 400px;

}

#grid > div {

  writing-mode: vertical-lr;

}

#firstItem {

  background: magenta;

}

#secondItem {

  background: cyan;

}

#thirdItem {

  background: yellow;

}

#fourthItem {

  background: lime;

}

</style>

<p>The test passes if it has the same output than the reference.</p>

<div id="grid">

  <div id="firstItem">First item</div>

  <div id="secondItem">Second item</div>

  <div id="thirdItem">Third item</div>

  <div id="fourthItem">Fourth item</div>

</div>

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Grid Layout Test: Orthogonal positioned grid items</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">

<link rel="match" href="orthogonal-positioned-grid-items-009-ref.html">

<meta name="assert" content="Checks that absolutely positioned orthogonal grid items are properly placed and sized when they have specific 'left, 'right', 'top' and 'bottom' offsets.">

<style>

#grid {

  display: grid;

  grid: 150px 100px / 200px 300px;

  margin: 1px 2px 3px 4px;

  padding: 20px 15px 10px 5px;

  border-width: 9px 3px 12px 6px;

  border-style: solid;

  width: 550px;

  height: 400px;

  position: relative;

}

#grid > div {

  writing-mode: vertical-lr;

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

}

#firstItem {

  background: magenta;

  grid-column: 1 / 2;

  grid-row: 1 / 2;

}

#secondItem {

  background: cyan;

  grid-column: 2 / 3;

  grid-row: 1 / 2;

}

#thirdItem {

  background: yellow;

  grid-column: 1 / 2;

  grid-row: 2 / 3;

}

#fourthItem {

  background: lime;

  grid-column: 2 / 3;

  grid-row: 2 / 3;

}

</style>

<p>The test passes if it has the same output than the reference.</p>

<div id="grid">

  <div id="firstItem">First item</div>

  <div id="secondItem">Second item</div>

  <div id="thirdItem">Third item</div>

  <div id="fourthItem">Fourth item</div>

</div>

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Grid Layout Test: Orthogonal positioned grid items reference file</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<style>

#grid {

  display: grid;

  grid: 150px 100px / 200px 300px;

  margin: 1px 2px 3px 4px;

  padding: 20px 15px 10px 5px;

  border-width: 9px 3px 12px 6px;

  border-style: solid;

  width: 550px;

  height: 400px;

}

#grid > div {

  writing-mode: vertical-lr;

}

#firstItem {

  background: magenta;

}

#secondItem {

  background: cyan;

}

#thirdItem {

  background: yellow;

}

#fourthItem {

  background: lime;

}

</style>

<p>The test passes if it has the same output than the reference.</p>

<div id="grid">

  <div id="firstItem">First item</div>

  <div id="secondItem">Second item</div>

  <div id="thirdItem">Third item</div>

  <div id="fourthItem">Fourth item</div>

</div>

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Grid Layout Test: Orthogonal positioned grid items</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">

<link rel="match" href="orthogonal-positioned-grid-items-009-ref.html">

<meta name="assert" content="Checks that absolutely positioned orthogonal grid items are properly placed and sized when they have a static position (left/rigth and top/bottom are 'auto') and a specific size.">

<style>

#grid {

  display: grid;

  grid: 150px 100px / 200px 300px;

  margin: 1px 2px 3px 4px;

  padding: 20px 15px 10px 5px;

  border-width: 9px 3px 12px 6px;

  border-style: solid;

  width: 550px;

  height: 400px;

  position: relative;

}

#grid > div {

  writing-mode: vertical-lr;

  position: absolute;

  width: 100%;

  height: 100%;

}

#firstItem {

  background: magenta;

  grid-column: 1 / 2;

  grid-row: 1 / 2;

}

#secondItem {

  background: cyan;

  grid-column: 2 / 3;

  grid-row: 1 / 2;

}

#thirdItem {

  background: yellow;

  grid-column: 1 / 2;

  grid-row: 2 / 3;

}

#fourthItem {

  background: lime;

  grid-column: 2 / 3;

  grid-row: 2 / 3;

}

</style>

<p>The test passes if it has the same output than the reference.</p>

<div id="grid">

  <div id="firstItem">First item</div>

  <div id="secondItem">Second item</div>

  <div id="thirdItem">Third item</div>

  <div id="fourthItem">Fourth item</div>

</div>

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Grid Layout Test: Orthogonal positioned grid items reference file</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<style>

#grid {

  display: grid;

  grid: 150px 100px / 200px 300px;

  place-items: start;

  margin: 1px 2px 3px 4px;

  padding: 20px 15px 10px 5px;

  border-width: 9px 3px 12px 6px;

  border-style: solid;

  width: 550px;

  height: 400px;

}

#grid > div {

  writing-mode: vertical-lr;

  margin-left: 10px;

}

#firstItem {

  background: magenta;

}

#secondItem {

  background: cyan;

}

#thirdItem {

  background: yellow;

}

#fourthItem {

  background: lime;

}

</style>

<p>The test passes if it has the same output than the reference.</p>

<div id="grid">

  <div id="firstItem">First item</div>

  <div id="secondItem">Second item</div>

  <div id="thirdItem">Third item</div>

  <div id="fourthItem">Fourth item</div>

</div>

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Grid Layout Test: Orthogonal positioned grid items</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">

<link rel="match" href="orthogonal-positioned-grid-items-011-ref.html">

<meta name="assert" content="Checks that absolutely positioned orthogonal grid items are properly placed and sized when they have a specific 'left' offset and a static block position (top/bottom are 'auto').">

<style>

#grid {

  display: grid;

  grid: 150px 100px / 200px 300px;

  margin: 1px 2px 3px 4px;

  padding: 20px 15px 10px 5px;

  border-width: 9px 3px 12px 6px;

  border-style: solid;

  width: 550px;

  height: 400px;

  position: relative;

}

#grid > div {

  writing-mode: vertical-lr;

  position: absolute;

  left: 10px;

}

#firstItem {

  background: magenta;

  grid-column: 1 / 2;

  grid-row: 1 / 2;

}

#secondItem {

  background: cyan;

  grid-column: 2 / 3;

  grid-row: 1 / 2;

}

#thirdItem {

  background: yellow;

  grid-column: 1 / 2;

  grid-row: 2 / 3;

}

#fourthItem {

  background: lime;

  grid-column: 2 / 3;

  grid-row: 2 / 3;

}

</style>

<p>The test passes if it has the same output than the reference.</p>

<div id="grid">

  <div id="firstItem">First item</div>

  <div id="secondItem">Second item</div>

  <div id="thirdItem">Third item</div>

  <div id="fourthItem">Fourth item</div>

</div>

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Grid Layout Test: Orthogonal positioned grid items reference file</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<style>

#grid {

  display: grid;

  grid: 150px 100px / 200px 300px;

  justify-items: end;

  align-items: start;

  margin: 1px 2px 3px 4px;

  padding: 20px 15px 10px 5px;

  border-width: 9px 3px 12px 6px;

  border-style: solid;

  width: 550px;

  height: 400px;

}

#grid > div {

  writing-mode: vertical-lr;

  margin-right: 5px;

}

#firstItem {

  background: magenta;

}

#secondItem {

  background: cyan;

}

#thirdItem {

  background: yellow;

}

#fourthItem {

  background: lime;

}

</style>

<p>The test passes if it has the same output than the reference.</p>

<div id="grid">

  <div id="firstItem">First item</div>

  <div id="secondItem">Second item</div>

  <div id="thirdItem">Third item</div>

  <div id="fourthItem">Fourth item</div>

</div>

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Grid Layout Test: Orthogonal positioned grid items</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">

<link rel="match" href="orthogonal-positioned-grid-items-012-ref.html">

<meta name="assert" content="Checks that absolutely positioned orthogonal grid items are properly placed and sized when they have a specific 'right' offset and a static block position (top/bottom are 'auto').">

<style>

#grid {

  display: grid;

  grid: 150px 100px / 200px 300px;

  margin: 1px 2px 3px 4px;

  padding: 20px 15px 10px 5px;

  border-width: 9px 3px 12px 6px;

  border-style: solid;

  width: 550px;

  height: 400px;

  position: relative;

}

#grid > div {

  writing-mode: vertical-lr;

  position: absolute;

  right: 5px;

}

#firstItem {

  background: magenta;

  grid-column: 1 / 2;

  grid-row: 1 / 2;

}

#secondItem {

  background: cyan;

  grid-column: 2 / 3;

  grid-row: 1 / 2;

}

#thirdItem {

  background: yellow;

  grid-column: 1 / 2;

  grid-row: 2 / 3;

}

#fourthItem {

  background: lime;

  grid-column: 2 / 3;

  grid-row: 2 / 3;

}

</style>

<p>The test passes if it has the same output than the reference.</p>

<div id="grid">

  <div id="firstItem">First item</div>

  <div id="secondItem">Second item</div>

  <div id="thirdItem">Third item</div>

  <div id="fourthItem">Fourth item</div>

</div>

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Grid Layout Test: Orthogonal positioned grid items reference file</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<style>

#grid {

  display: grid;

  grid: 150px 100px / 200px 300px;

  align-items: start;

  margin: 1px 2px 3px 4px;

  padding: 20px 15px 10px 5px;

  border-width: 9px 3px 12px 6px;

  border-style: solid;

  width: 550px;

  height: 400px;

}

#grid > div {

  writing-mode: vertical-lr;

  margin-left: 10px;

  margin-right: 5px;

}

#firstItem {

  background: magenta;

}

#secondItem {

  background: cyan;

}

#thirdItem {

  background: yellow;

}

#fourthItem {

  background: lime;

}

</style>

<p>The test passes if it has the same output than the reference.</p>

<div id="grid">

  <div id="firstItem">First item</div>

  <div id="secondItem">Second item</div>

  <div id="thirdItem">Third item</div>

  <div id="fourthItem">Fourth item</div>

</div>

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Grid Layout Test: Orthogonal positioned grid items</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">

<link rel="match" href="orthogonal-positioned-grid-items-013-ref.html">

<meta name="assert" content="Checks that absolutely positioned orthogonal grid items are properly placed and sized when they have specific 'left' and 'right' offsets and a static block position (top/bottom are 'auto').">

<style>

#grid {

  display: grid;

  grid: 150px 100px / 200px 300px;

  margin: 1px 2px 3px 4px;

  padding: 20px 15px 10px 5px;

  border-width: 9px 3px 12px 6px;

  border-style: solid;

  width: 550px;

  height: 400px;

  position: relative;

}

#grid > div {

  writing-mode: vertical-lr;

  position: absolute;

  left: 10px;

  right: 5px;

}

#firstItem {

  background: magenta;

  grid-column: 1 / 2;

  grid-row: 1 / 2;

}

#secondItem {

  background: cyan;

  grid-column: 2 / 3;

  grid-row: 1 / 2;

}

#thirdItem {

  background: yellow;

  grid-column: 1 / 2;

  grid-row: 2 / 3;

}

#fourthItem {

  background: lime;

  grid-column: 2 / 3;

  grid-row: 2 / 3;

}

</style>

<p>The test passes if it has the same output than the reference.</p>

<div id="grid">

  <div id="firstItem">First item</div>

  <div id="secondItem">Second item</div>

  <div id="thirdItem">Third item</div>

  <div id="fourthItem">Fourth item</div>

</div>

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Grid Layout Test: Orthogonal positioned grid items reference file</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<style>

#grid {

  display: grid;

  grid: 150px 100px / 200px 300px;

  place-items: start;

  margin: 1px 2px 3px 4px;

  padding: 20px 15px 10px 5px;

  border-width: 9px 3px 12px 6px;

  border-style: solid;

  width: 550px;

  height: 400px;

}

#grid > div {

  writing-mode: vertical-lr;

  margin-top: 15px;

}

#firstItem {

  background: magenta;

}

#secondItem {

  background: cyan;

}

#thirdItem {

  background: yellow;

}

#fourthItem {

  background: lime;

}

</style>

<p>The test passes if it has the same output than the reference.</p>

<div id="grid">

  <div id="firstItem">First item</div>

  <div id="secondItem">Second item</div>

  <div id="thirdItem">Third item</div>

  <div id="fourthItem">Fourth item</div>

</div>

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Grid Layout Test: Orthogonal positioned grid items</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">

<link rel="match" href="orthogonal-positioned-grid-items-014-ref.html">

<meta name="assert" content="Checks that absolutely positioned orthogonal grid items are properly placed and sized when they have a specific 'top' offset and a static inline position (left/right are 'auto').">

<style>

#grid {

  display: grid;

  grid: 150px 100px / 200px 300px;

  margin: 1px 2px 3px 4px;

  padding: 20px 15px 10px 5px;

  border-width: 9px 3px 12px 6px;

  border-style: solid;

  width: 550px;

  height: 400px;

  position: relative;

}

#grid > div {

  writing-mode: vertical-lr;

  position: absolute;

  top: 15px;

}

#firstItem {

  background: magenta;

  grid-column: 1 / 2;

  grid-row: 1 / 2;

}

#secondItem {

  background: cyan;

  grid-column: 2 / 3;

  grid-row: 1 / 2;

}

#thirdItem {

  background: yellow;

  grid-column: 1 / 2;

  grid-row: 2 / 3;

}

#fourthItem {

  background: lime;

  grid-column: 2 / 3;

  grid-row: 2 / 3;

}

</style>

<p>The test passes if it has the same output than the reference.</p>

<div id="grid">

  <div id="firstItem">First item</div>

  <div id="secondItem">Second item</div>

  <div id="thirdItem">Third item</div>

  <div id="fourthItem">Fourth item</div>

</div>

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Grid Layout Test: Orthogonal positioned grid items reference file</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<style>

#grid {

  display: grid;

  grid: 150px 100px / 200px 300px;

  justify-items: start;

  align-items: end;

  margin: 1px 2px 3px 4px;

  padding: 20px 15px 10px 5px;

  border-width: 9px 3px 12px 6px;

  border-style: solid;

  width: 550px;

  height: 400px;

}

#grid > div {

  writing-mode: vertical-lr;

  margin-bottom: 20px;

}

#firstItem {

  background: magenta;

}

#secondItem {

  background: cyan;

}

#thirdItem {

  background: yellow;

}

#fourthItem {

  background: lime;

}

</style>

<p>The test passes if it has the same output than the reference.</p>

<div id="grid">

  <div id="firstItem">First item</div>

  <div id="secondItem">Second item</div>

  <div id="thirdItem">Third item</div>

  <div id="fourthItem">Fourth item</div>

</div>

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Grid Layout Test: Orthogonal positioned grid items</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">

<link rel="match" href="orthogonal-positioned-grid-items-015-ref.html">

<meta name="assert" content="Checks that absolutely positioned orthogonal grid items are properly placed and sized when they have a specific 'bottom' offset and a static inline position (left/right are 'auto').">

<style>

#grid {

  display: grid;

  grid: 150px 100px / 200px 300px;

  margin: 1px 2px 3px 4px;

  padding: 20px 15px 10px 5px;

  border-width: 9px 3px 12px 6px;

  border-style: solid;

  width: 550px;

  height: 400px;

  position: relative;

}

#grid > div {

  writing-mode: vertical-lr;

  position: absolute;

  bottom: 20px;

}

#firstItem {

  background: magenta;

  grid-column: 1 / 2;

  grid-row: 1 / 2;

}

#secondItem {

  background: cyan;

  grid-column: 2 / 3;

  grid-row: 1 / 2;

}

#thirdItem {

  background: yellow;

  grid-column: 1 / 2;

  grid-row: 2 / 3;

}

#fourthItem {

  background: lime;

  grid-column: 2 / 3;

  grid-row: 2 / 3;

}

</style>

<p>The test passes if it has the same output than the reference.</p>

<div id="grid">

  <div id="firstItem">First item</div>

  <div id="secondItem">Second item</div>

  <div id="thirdItem">Third item</div>

  <div id="fourthItem">Fourth item</div>

</div>

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Grid Layout Test: Orthogonal positioned grid items reference file</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<style>

#grid {

  display: grid;

  grid: 150px 100px / 200px 300px;

  justify-items: start;

  margin: 1px 2px 3px 4px;

  padding: 20px 15px 10px 5px;

  border-width: 9px 3px 12px 6px;

  border-style: solid;

  width: 550px;

  height: 400px;

}

#grid > div {

  writing-mode: vertical-lr;

  margin-top: 15px;

  margin-bottom: 20px;

}

#firstItem {

  background: magenta;

}

#secondItem {

  background: cyan;

}

#thirdItem {

  background: yellow;

}

#fourthItem {

  background: lime;

}

</style>

<p>The test passes if it has the same output than the reference.</p>

<div id="grid">

  <div id="firstItem">First item</div>

  <div id="secondItem">Second item</div>

  <div id="thirdItem">Third item</div>

  <div id="fourthItem">Fourth item</div>

</div>

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Grid Layout Test: Orthogonal positioned grid items</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">

<link rel="match" href="orthogonal-positioned-grid-items-016-ref.html">

<meta name="assert" content="Checks that absolutely positioned orthogonal grid items are properly placed and sized when they have specific 'top' and 'bottom' offsets and a static inline position (left/right are 'auto').">

<style>

#grid {

  display: grid;

  grid: 150px 100px / 200px 300px;

  margin: 1px 2px 3px 4px;

  padding: 20px 15px 10px 5px;

  border-width: 9px 3px 12px 6px;

  border-style: solid;

  width: 550px;

  height: 400px;

  position: relative;

}