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

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-gutters-get-set.html

Issue 1309513008: [css-grid] Implement grid gutters (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Patch for landing v3 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-tracks-expected.txt ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-gutters-get-set-expected.txt » ('j') | third_party/WebKit/Source/core/css/CSSProperties.in » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-gutters-get-set.html
diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-gutters-get-set.html b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-gutters-get-set.html
new file mode 100644
index 0000000000000000000000000000000000000000..f742326cec6ee3e0f7b3f8325e5b7a7b1514ba76
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-gutters-get-set.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+.gridGap { grid-gap: 25px; }
+.gridNormalGap { grid-gap: normal; }
+.gridColumnGap { grid-column-gap: 2vw; }
+.gridRowGap { grid-row-gap: 2em; }
+.gridRowColumnGaps {
+ grid-row-gap: 12px;
+ grid-column-gap: 1rem;
+}
+.gridRowColumnInheritGaps {
+ grid-row-gap: inherit;
+ grid-column-gap: inherit;
+}
+.gridRowColumnInitialGaps {
+ grid-row-gap: initial;
+ grid-column-gap: initial;
+}
+.gridCalcGaps {
+ grid-row-gap: calc(10px + 3px);
+ grid-column-gap: calc(2px + 1vw);
+}
+.gridInvalidRowGap { grid-row-gap: 10%; }
+.gridInvalidColumnGap { grid-column-gap: -webkit-max-content; }
+.gridInvalidMultipleRowColumnGaps {
+ grid-row-gap: 10px 1px;
+ grid-column-gap: 0px 0px 0px;
+}
+.gridInvalidLengthRowColumnGaps {
+ grid-row-gap: 2dpi;
+ grid-column-gap: 3rad;
+}
+.gridInvalidGridGap { grid-gap: 20px 20px 10px; }
+.gridInvalidNoneGap { grid-gap: none; }
+.gridInvalidImplicitGridGap { grid-gap: -webkit-fit-content; }
+
+</style>
+<script src="../../resources/js-test.js"></script>
+</head>
+<body>
+
+<div class="grid" id="defaultGrid"></div>
+<div class="grid gridGap" id="gridGap"></div>
+<div class="grid normalGap" id="normalGap"></div>
+<div class="grid gridColumnGap" id="gridColumnGap"></div>
+<div class="grid gridRowGap" id="gridRowGap"></div>
+<div class="grid gridCalcGaps" id="gridCalcGaps"></div>
+<div class="grid gridRowColumnGaps" id="gridRowColumnGaps"></div>
+<div class="grid gridGap">
+ <div class="grid gridRowColumnInheritGaps" id="gridRowColumnInheritGaps"></div>
+</div>
+<div class="grid gridGap">
+ <div class="grid gridRowColumnInitialGaps" id="gridRowColumnInitialGaps"></div>
+</div>
+<div class="grid gridInvalidRowGap" id="gridInvalidRowGap"></div>
+<div class="grid gridInvalidColumnGap" id="gridInvalidColumnGap"></div>
+<div class="grid gridInvalidMultipleRowColumnGaps" id="gridInvalidMultipleRowColumnGaps"></div>
+<div class="grid gridInvalidGridGap" id="gridInvalidGridGap"></div>
+<div class="grid gridInvalidNoneGap" id="gridInvalidNoneGap"></div>
+<div class="grid gridInvalidImplicitGridGap" id="gridInvalidImplicitGridGap"></div>
+<div class="grid gridInvalidLengthRowColumnGaps" id="gridInvalidLengthRowColumnGaps"></div>
+
+<script src="resources/grid-definitions-parsing-utils.js"></script>
+<script>
+
+description('Test that setting and getting grid-column-gap and grid-row-gap works as expected');
+
+debug("Test getting grid-column-gap and grid-row-gap set through CSS");
+
+testGridGapDefinitionsValues("defaultGrid", "0px", "0px");
+testGridGapDefinitionsValues("normalGap", "0px", "0px");
+testGridGapDefinitionsValues("gridGap", "25px", "25px");
+testGridGapDefinitionsValues("gridColumnGap", "0px", "16px");
+testGridGapDefinitionsValues("gridRowGap", "32px", "0px");
+testGridGapDefinitionsValues("gridCalcGaps", "13px", "10px");
+testGridGapDefinitionsValues("gridRowColumnGaps", "12px", "16px");
+testGridGapDefinitionsValues("gridRowColumnGaps", "12px", "16px");
+testGridGapDefinitionsValues("gridRowColumnInheritGaps", "25px", "25px");
+testGridGapDefinitionsValues("gridRowColumnInitialGaps", "0px", "0px");
+
+debug("");
+debug("Test getting wrong values for grid-column-gap and grid-row-gap set through CSS");
+testGridGapDefinitionsValues("gridInvalidRowGap", "0px", "0px");
+testGridGapDefinitionsValues("gridInvalidColumnGap", "0px", "0px");
+testGridGapDefinitionsValues("gridInvalidMultipleRowColumnGaps", "0px", "0px");
+testGridGapDefinitionsValues("gridInvalidGridGap", "0px", "0px");
+testGridGapDefinitionsValues("gridInvalidNoneGap", "0px", "0px");
+testGridGapDefinitionsValues("gridInvalidImplicitGridGap", "0px", "0px");
+testGridGapDefinitionsValues("gridInvalidLengthRowColumnGaps", "0px", "0px");
+
+</script>
+</body>
+</html>
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-gutters-and-tracks-expected.txt ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-gutters-get-set-expected.txt » ('j') | third_party/WebKit/Source/core/css/CSSProperties.in » ('J')

Powered by Google App Engine
This is Rietveld 408576698