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

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-gutters-and-flex-content.html

Issue 1309513008: [css-grid] Implement grid gutters (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Rebased patch for landing Created 5 years, 2 months 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 | « third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-gutters-and-alignment-expected.txt ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-gutters-and-flex-content-expected.txt » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-gutters-and-flex-content.html
diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-gutters-and-flex-content.html b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-gutters-and-flex-content.html
new file mode 100644
index 0000000000000000000000000000000000000000..1fe22b574c89eb0aedb590fbf72dacc954197ea5
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-gutters-and-flex-content.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel=stylesheet>
+<script src="../../resources/check-layout.js"></script>
+<script src="../../resources/js-test.js"></script>
+<style>
+.gridMaxFlexContent { grid-template: minmax(30px, 2fr) / 50px; }
+.gridTwoDoubleMaxFlexContent { grid-template: minmax(10px, 0.5fr) minmax(10px, 2fr) / 50px; }
+.gridIgnoreSecondGridItem { grid-template: minmax(300px, 3fr) minmax(150px, 1fr) / 50px; }
+
+.gridRowsMaxFlexContent { grid-template: 50px / minmax(30px, 2fr); }
+.gridRowsTwoMaxFlexContent { grid-template: 50px / minmax(10px, 1fr) minmax(10px, 2fr); }
+.gridRowsTwoDoubleMaxFlexContent { grid-template: 50px / minmax(10px, 0.5fr) minmax(10px, 2fr); }
+
+.gridMinMaxFlexFixedAndMinContentAndFixed { grid-template-columns: minmax(0.5fr, 35px) min-content 25px; }
+.gridMinContentAndMinMaxFixedMinContentAndFlex { grid-template-columns: min-content minmax(20px, min-content) 2fr; }
+.gridMaxContentAndMinMaxFixedMaxContentAndFlex { grid-template-columns: max-content minmax(20px, max-content) 1fr; }
+
+div.grid > div { font: 10px/1 Ahem; }
+
+.gridRowColumnGaps {
+ grid-row-gap: 33px;
+ grid-column-gap: 19px;
+}
+
+</style>
+<body onload="checkLayout('.grid');">
+
+<!-- Check that gutters do not interfere with flex content resolution for columns -->
+
+<div style="width: 120px; height: 10px;">
+ <div class="grid gridTwoDoubleMaxFlexContent gridRowColumnGaps" data-expected-width="120" data-expected-height="50">
+ <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="20" data-expected-height="50"></div>
+ <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="81" data-expected-height="50"></div>
+ </div>
+</div>
+
+<div style="width: 570px; height: 10px;">
+ <div class="grid gridIgnoreSecondGridItem gridRowColumnGaps" data-expected-width="570" data-expected-height="50">
+ <div class="firstRowFirstColumn" data-expected-width="401" data-expected-height="50"></div>
+ <div class="firstRowSecondColumn" data-expected-width="150" data-expected-height="50"></div>
+ </div>
+</div>
+
+<!-- Check that gutters do not interfere with flex content resolution for rows -->
+
+<div style="width: 10px; height: 60px">
+ <div class="grid gridRowsTwoMaxFlexContent gridRowColumnGaps" style="height: 100%" data-expected-width="10" data-expected-height="60">
+ <div class="firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
+ <div class="secondRowFirstColumn" data-expected-width="50" data-expected-height="17"></div>
+ </div>
+</div>
+
+<div style="width: 10px; height: 60px">
+ <div class="grid gridRowsTwoDoubleMaxFlexContent gridRowColumnGaps" data-expected-width="10" data-expected-height="63">
+ <div class="firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
+ <div class="secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
+ </div>
+</div>
+
+<!-- Check that gutters do not interfere with flex content resolution with content sized tracks -->
+
+<div style="position: relative; width: 100px;">
+ <div class="grid gridMinMaxFlexFixedAndMinContentAndFixed gridRowColumnGaps" data-expected-width="100" data-expected-height="199">
+ <div style="grid-column: 1 / span 2;" data-expected-width="54" data-expected-height="20">XXXX XXXX</div>
+ <div style="grid-column: 2 / span 2; grid-row: 2;" data-expected-width="44" data-expected-height="20">XXX XXX</div>
+ <div style="grid-column: 1 / -1; grid-row: 3;" data-expected-width="98" data-expected-height="20">XXXXX XXXXX</div>
+ <div style="grid-column: 2 / span 2; grid-row: 4;" data-expected-width="44" data-expected-height="40">XX XX XX XX</div>
+ </div>
+</div>
+
+<div style="position: relative; width: 100px;">
+ <div class="grid gridMinContentAndMinMaxFixedMinContentAndFlex gridRowColumnGaps" data-expected-width="100" data-expected-height="149">
+ <div style="grid-column: 2 / span 2;" data-expected-width="80">XXXXX</div>
+ <div style="grid-column: 1 / -1; grid-row: 2;" data-expected-width="100">XXX XXX XXX</div>
+ <div style="grid-column: 1 / span 2; grid-row: 3;" data-expected-width="40">XXXX XXXX</div>
+ <div style="grid-column: 1; grid-row: 4;" data-expected-width="1" data-expected-height="0"></div>
+ </div>
+</div>
+
+<div style="position: relative; width: 100px;">
+ <div class="grid gridMaxContentAndMinMaxFixedMaxContentAndFlex gridRowColumnGaps" data-expected-width="100" data-expected-height="139">
+ <div style="grid-column: 2 / span 2;" data-expected-width="39">XX</div>
+ <div style="grid-column: 1 / -1; grid-row: 2;" data-expected-width="109">XXX XXX XXX</div>
+ <div style="grid-column: 1 / span 2; grid-row: 3;" data-expected-width="90">XXXX XXXX</div>
+ <div style="grid-column: 1; grid-row: 4;" data-expected-width="51" data-expected-height="0"></div>
+ </div>
+</div>
+
+</body>
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-gutters-and-alignment-expected.txt ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-gutters-and-flex-content-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698