Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(312)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: LayoutTests/fast/css-grid-layout/absolutely-positioned-grid-children.html

Issue 637033003: [CSS Grid Layout] Fix positioned grid children position and size (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Remove FIXME Created 6 years, 1 month ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | LayoutTests/fast/css-grid-layout/absolutely-positioned-grid-children-expected.txt » ('j') | Source/core/rendering/RenderGrid.cpp » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: LayoutTests/fast/css-grid-layout/absolutely-positioned-grid-children.html
diff --git a/LayoutTests/fast/css-grid-layout/absolutely-positioned-grid-children.html b/LayoutTests/fast/css-grid-layout/absolutely-positioned-grid-children.html
new file mode 100644
index 0000000000000000000000000000000000000000..d685e56fd835fbf232380bc432b2abf665315e7a
--- /dev/null
+++ b/LayoutTests/fast/css-grid-layout/absolutely-positioned-grid-children.html
@@ -0,0 +1,333 @@
+<!DOCTYPE html>
+<html>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+
+.grid {
+ grid-template-columns: 50px 100px 150px 200px;
+ grid-template-rows: 50px 100px 150px 200px;
+ width: 500px;
+ height: 500px;
+ border: 5px solid black;
+ margin: 10px;
+ padding: 15px;
Julien - ping for review 2014/11/18 21:12:44 Ideally we don't want border + margin == padding a
Manuel Rego 2014/11/19 15:18:29 Sure, I've modified it so now we have margin 30, p
+ /* Ensures that the grid container is the contaning block of the grid children. */
+ position: relative;
+}
+
+.absolute {
+ position: absolute;
+}
+
+.thirdRowThirdColumnSpanning2Rows {
+ grid-column: 3;
+ grid-row: 3 / span 2;
+ background-color: maroon;
+}
+
+.thirdRowThirdColumnSpanning2Rows2Columns {
+ grid-column: 3 / span 2;
+ grid-row: 3 / span 2;
+ background-color: aqua;
+}
+
+.endFirstRowEndFirstColumn {
+ background-color: blue;
+ grid-column-end: 2;
+ grid-row-end: 2;
+}
+
+.endFirstRowEndSecondColumn {
+ background-color: lime;
+ grid-column-end: 3;
+ grid-row-end: 2;
+}
+
+.endSecondRowEndFirstColumn {
+ background-color: purple;
+ grid-column-end: 2;
+ grid-row-end: 3;
+}
+
+.endSecondRowEndSecondColumn {
+ background-color: orange;
+ grid-column-end: 3;
+ grid-row-end: 3;
+}
+
+.endThirdRowEndThirdColumnSpanning2Rows {
+ grid-column-end: 4;
+ grid-row: span 2 / 4;
+ background-color: maroon;
+}
+
+.endThirdRowEndThirdColumnSpanning2Rows2Columns {
+ grid-column: span 2 / 4;
+ grid-row: span 2 / 4;
+ background-color: aqua;
+}
+
+.onlyFirstRowOnlyFirstColumn {
+ background-color: blue;
+ grid-column: 1 / 2;
+ grid-row: 1 / 2;
+}
+
+.onlyFirstRowOnlySecondColumn {
+ background-color: lime;
+ grid-column: 2 / 3;
+ grid-row: 1 / 2;
+}
+
+.onlySecondRowOnlyFirstColumn {
+ background-color: purple;
+ grid-column: 1 / 2;
+ grid-row: 2 / 3;
+}
+
+.onlySecondRowOnlySecondColumn {
+ background-color: orange;
+ grid-column: 2 / 3;
+ grid-row: 2 / 3;
+}
+
+.onlyThirdRowOnlyThirdColumnSpanning2Rows {
+ grid-column: 3 / 4;
+ grid-row: 3 / 5;
+ background-color: maroon;
+}
+
+.onlyThirdRowOnlyThirdColumnSpanning2Rows2Columns {
+ grid-column: 3 / 5;
+ grid-row: 3 / 5;
+ background-color: aqua;
+}
+
+.offsetLeft25 {
+ left: 25px;
+}
+
+.offsetRight50 {
+ right: 50px;
+}
+
+.offsetTop75 {
+ top: 75px;
+}
+
+.offsetBottom100 {
+ bottom: 100px;
+}
+
+.offsetLeftMinus20 {
+ left: -20px;
+}
+
+.offsetRightMinus40 {
+ right: -40px;
+}
+
+.offsetTopMinus60 {
+ top: -60px;
+}
+
+.offsetBottomMinus80 {
+ bottom: -80px;
+}
+
+</style>
+<script src="../../resources/check-layout.js"></script>
+<body onload="checkLayout('.grid')">
+
+<p>This test checks the behavior of the absolutely positioned grid children.</p>
+
+<div class="grid">
+ <div class="sizedToGridArea absolute autoRowAutoColumn"
+ data-offset-x="15" data-offset-y="15" data-expected-width="530" data-expected-height="530">
+ </div>
+ <div class="sizedToGridArea absolute firstRowFirstColumn"
+ data-offset-x="15" data-offset-y="15" data-expected-width="515" data-expected-height="515">
+ </div>
+ <div class="sizedToGridArea absolute secondRowFirstColumn"
+ data-offset-x="15" data-offset-y="65" data-expected-width="515" data-expected-height="465">
+ </div>
+ <div class="sizedToGridArea absolute firstRowSecondColumn"
+ data-offset-x="65" data-offset-y="15" data-expected-width="465" data-expected-height="515">
+ </div>
+ <div class="sizedToGridArea absolute secondRowSecondColumn"
+ data-offset-x="65" data-offset-y="65" data-expected-width="465" data-expected-height="465">
+ </div>
+ <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows"
+ data-offset-x="165" data-offset-y="165" data-expected-width="365" data-expected-height="350">
+ </div>
+ <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows2Columns"
+ data-offset-x="165" data-offset-y="165" data-expected-width="350" data-expected-height="350">
+ </div>
+</div>
+
+<div class="grid">
+ <div>
+ <div class="sizedToGridArea absolute autoRowAutoColumn"
+ data-offset-x="15" data-offset-y="15" data-expected-width="530" data-expected-height="530">
+ </div>
+ <div class="sizedToGridArea absolute firstRowFirstColumn"
+ data-offset-x="15" data-offset-y="15" data-expected-width="515" data-expected-height="515">
+ </div>
+ <div class="sizedToGridArea absolute secondRowFirstColumn"
+ data-offset-x="15" data-offset-y="65" data-expected-width="515" data-expected-height="465">
+ </div>
+ <div class="sizedToGridArea absolute firstRowSecondColumn"
+ data-offset-x="65" data-offset-y="15" data-expected-width="465" data-expected-height="515">
+ </div>
+ <div class="sizedToGridArea absolute secondRowSecondColumn"
+ data-offset-x="65" data-offset-y="65" data-expected-width="465" data-expected-height="465">
+ </div>
+ <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows"
+ data-offset-x="165" data-offset-y="165" data-expected-width="365" data-expected-height="350">
+ </div>
+ <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows2Columns"
+ data-offset-x="165" data-offset-y="165" data-expected-width="350" data-expected-height="350">
+ </div>
+ </div>
+</div>
+
+<div class="grid">
+ <div class="sizedToGridArea absolute endThirdRowEndThirdColumnSpanning2Rows"
+ data-offset-x="0" data-offset-y="65" data-expected-width="315" data-expected-height="250">
+ </div>
+ <div class="sizedToGridArea absolute endThirdRowEndThirdColumnSpanning2Rows2Columns"
+ data-offset-x="65" data-offset-y="65" data-expected-width="250" data-expected-height="250">
+ </div>
+ <div class="sizedToGridArea absolute endSecondRowEndSecondColumn"
+ data-offset-x="0" data-offset-y="0" data-expected-width="165" data-expected-height="165">
+ </div>
+ <div class="sizedToGridArea absolute endSecondRowEndFirstColumn"
+ data-offset-x="0" data-offset-y="0" data-expected-width="65" data-expected-height="165">
+ </div>
+ <div class="sizedToGridArea absolute endFirstRowEndSecondColumn"
+ data-offset-x="0" data-offset-y="0" data-expected-width="165" data-expected-height="65">
+ </div>
+ <div class="sizedToGridArea absolute endFirstRowEndFirstColumn"
+ data-offset-x="0" data-offset-y="0" data-expected-width="65" data-expected-height="65">
+ </div>
+</div>
+
+<div class="grid">
+ <div>
+ <div class="sizedToGridArea absolute endThirdRowEndThirdColumnSpanning2Rows"
+ data-offset-x="0" data-offset-y="65" data-expected-width="315" data-expected-height="250">
+ </div>
+ <div class="sizedToGridArea absolute endThirdRowEndThirdColumnSpanning2Rows2Columns"
+ data-offset-x="65" data-offset-y="65" data-expected-width="250" data-expected-height="250">
+ </div>
+ <div class="sizedToGridArea absolute endSecondRowEndSecondColumn"
+ data-offset-x="0" data-offset-y="0" data-expected-width="165" data-expected-height="165">
+ </div>
+ <div class="sizedToGridArea absolute endSecondRowEndFirstColumn"
+ data-offset-x="0" data-offset-y="0" data-expected-width="65" data-expected-height="165">
+ </div>
+ <div class="sizedToGridArea absolute endFirstRowEndSecondColumn"
+ data-offset-x="0" data-offset-y="0" data-expected-width="165" data-expected-height="65">
+ </div>
+ <div class="sizedToGridArea absolute endFirstRowEndFirstColumn"
+ data-offset-x="0" data-offset-y="0" data-expected-width="65" data-expected-height="65">
+ </div>
+ </div>
+</div>
+
+<div class="grid">
+ <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn"
+ data-offset-x="15" data-offset-y="15" data-expected-width="50" data-expected-height="50">
+ </div>
+ <div class="sizedToGridArea absolute onlySecondRowOnlyFirstColumn"
+ data-offset-x="15" data-offset-y="65" data-expected-width="50" data-expected-height="100">
+ </div>
+ <div class="sizedToGridArea absolute onlyFirstRowOnlySecondColumn"
+ data-offset-x="65" data-offset-y="15" data-expected-width="100" data-expected-height="50">
+ </div>
+ <div class="sizedToGridArea absolute onlySecondRowOnlySecondColumn"
+ data-offset-x="65" data-offset-y="65" data-expected-width="100" data-expected-height="100">
+ </div>
+ <div class="sizedToGridArea absolute onlyThirdRowOnlyThirdColumnSpanning2Rows2Columns"
+ data-offset-x="165" data-offset-y="165" data-expected-width="350" data-expected-height="350">
+ </div>
+ <div class="sizedToGridArea absolute onlyThirdRowOnlyThirdColumnSpanning2Rows"
+ data-offset-x="165" data-offset-y="165" data-expected-width="150" data-expected-height="350">
+ </div>
+</div>
+
+<div class="grid">
+ <div>
+ <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn"
+ data-offset-x="15" data-offset-y="15" data-expected-width="50" data-expected-height="50">
+ </div>
+ <div class="sizedToGridArea absolute onlySecondRowOnlyFirstColumn"
+ data-offset-x="15" data-offset-y="65" data-expected-width="50" data-expected-height="100">
+ </div>
+ <div class="sizedToGridArea absolute onlyFirstRowOnlySecondColumn"
+ data-offset-x="65" data-offset-y="15" data-expected-width="100" data-expected-height="50">
+ </div>
+ <div class="sizedToGridArea absolute onlySecondRowOnlySecondColumn"
+ data-offset-x="65" data-offset-y="65" data-expected-width="100" data-expected-height="100">
+ </div>
+ <div class="sizedToGridArea absolute onlyThirdRowOnlyThirdColumnSpanning2Rows2Columns"
+ data-offset-x="165" data-offset-y="165" data-expected-width="350" data-expected-height="350">
+ </div>
+ <div class="sizedToGridArea absolute onlyThirdRowOnlyThirdColumnSpanning2Rows"
+ data-offset-x="165" data-offset-y="165" data-expected-width="150" data-expected-height="350">
+ </div>
+ </div>
+</div>
+
+<div class="grid">
+ <div class="sizedToGridArea absolute autoRowAutoColumn offsetLeft25 offsetTop75"
+ data-offset-x="25" data-offset-y="75" data-expected-width="530" data-expected-height="530">
+ </div>
+ <div class="sizedToGridArea absolute firstRowFirstColumn offsetRightMinus40 offsetBottomMinus80"
+ data-offset-x="55" data-offset-y="95" data-expected-width="515" data-expected-height="515">
+ </div>
+ <div class="sizedToGridArea absolute secondRowFirstColumn offsetRight50 offsetBottom100"
+ data-offset-x="-35" data-offset-y="-35" data-expected-width="515" data-expected-height="465">
+ </div>
+ <div class="sizedToGridArea absolute firstRowSecondColumn offsetLeftMinus20 offsetTopMinus60"
+ data-offset-x="45" data-offset-y="-45" data-expected-width="465" data-expected-height="515">
+ </div>
+ <div class="sizedToGridArea absolute secondRowSecondColumn offsetRight50 offsetTop75"
+ data-offset-x="15" data-offset-y="140" data-expected-width="465" data-expected-height="465">
+ </div>
+ <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows offsetLeft25 offsetBottom100"
+ data-offset-x="190" data-offset-y="65" data-expected-width="365" data-expected-height="350">
+ </div>
+ <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows2Columns offsetLeftMinus20 offsetRight50 offsetTopMinus60 offsetBottom100"
+ data-offset-x="145" data-offset-y="105" data-expected-width="350" data-expected-height="350">
+ </div>
+</div>
+
+<div class="grid">
+ <div>
+ <div class="sizedToGridArea absolute autoRowAutoColumn offsetLeft25 offsetTop75"
+ data-offset-x="25" data-offset-y="75" data-expected-width="530" data-expected-height="530">
+ </div>
+ <div class="sizedToGridArea absolute firstRowFirstColumn offsetRightMinus40 offsetBottomMinus80"
+ data-offset-x="55" data-offset-y="95" data-expected-width="515" data-expected-height="515">
+ </div>
+ <div class="sizedToGridArea absolute secondRowFirstColumn offsetRight50 offsetBottom100"
+ data-offset-x="-35" data-offset-y="-35" data-expected-width="515" data-expected-height="465">
+ </div>
+ <div class="sizedToGridArea absolute firstRowSecondColumn offsetLeftMinus20 offsetTopMinus60"
+ data-offset-x="45" data-offset-y="-45" data-expected-width="465" data-expected-height="515">
+ </div>
+ <div class="sizedToGridArea absolute secondRowSecondColumn offsetRight50 offsetTop75"
+ data-offset-x="15" data-offset-y="140" data-expected-width="465" data-expected-height="465">
+ </div>
+ <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows offsetLeft25 offsetBottom100"
+ data-offset-x="190" data-offset-y="65" data-expected-width="365" data-expected-height="350">
+ </div>
+ <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows2Columns offsetLeftMinus20 offsetRight50 offsetTopMinus60 offsetBottom100"
+ data-offset-x="145" data-offset-y="105" data-expected-width="350" data-expected-height="350">
+ </div>
+ </div>
+</div>
+
+</body>
+</html>
« no previous file with comments | « no previous file | LayoutTests/fast/css-grid-layout/absolutely-positioned-grid-children-expected.txt » ('j') | Source/core/rendering/RenderGrid.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698