Permalink
Browse files

[css-grid] Unprefix gutter properties

This patch applies the resoultion of the CSS WG to unprefix
the CSS Grid Layout gutter properties:
w3c/csswg-drafts#1696

That is:
* grid-column-gap => column-gap
* grid-row-gap => row-gap
* grid-gap => gap

column-gap already existed before, as it's part of Multicol,
and it already has an alias -webkit-column-gap.
For that reason it's not possible to implement another alias
for grid-column-gap, so it was done with a shorthand.
To follow the same pattern the shorthand approach was used for
grid-row-gap and grid-gap too.

As column-gap was already animatable, this change takes advantage
to make animatable row-gap too.

Intent to Implement and Ship thread:
https://groups.google.com/a/chromium.org/d/msg/blink-dev/UViBfJuuIq8/w7_2W7lLAgAJ

Converted grid-gutters-get-set.html in some WPT tests covering
a few extra cases.
Added WPT test to verify the animation of these properties too.

BUG=761904
TEST=external/wpt/css/css-align/gaps/

Change-Id: If49ec34116eff0b3b745fc89b01b15b14c71d4a9
Reviewed-on: https://chromium-review.googlesource.com/890446
Reviewed-by: Javier Fernandez <jfernandez@igalia.com>
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Reviewed-by: Kent Tamura <tkent@chromium.org>
Commit-Queue: Manuel Rego Casasnovas <rego@igalia.com>
Cr-Commit-Position: refs/heads/master@{#534351}
  • Loading branch information...
mrego authored and chromium-wpt-export-bot committed Feb 5, 2018
1 parent b210660 commit a6698cfbd1d092aa3c490fedd2a8f06fc060d099
@@ -0,0 +1,36 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Box Alignment Test: column-gap test animation</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap">
<link rel="help" href="https://www.w3.org/TR/css-animations-1/#keyframes">
<meta name="assert" content="This test checks that column-gap property is interpolable.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
@keyframes column-gap-0-to-100 {
from { column-gap: 0px; }
to { column-gap: 100px; }
}
#target {
animation-name: column-gap-0-to-100;
animation-timing-function: linear;
animation-duration: 2s;
animation-delay: -1s;
animation-play-state: paused;
}
</style>
<body>
<div id="target"></div>
<div id="log"></div>
<script>
test(
function(){
var target = document.getElementById("target");
assert_equals(getComputedStyle(target).columnGap, "50px");
}, "column-gap is interpolable");
</script>
</body>
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Box Alignment Test: column-gap normal test animation</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap">
<link rel="help" href="https://www.w3.org/TR/css-animations-1/#keyframes">
<meta name="assert" content="This test checks that 'normal' value for column-gap property is not interpolable.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
@keyframes column-gap-normal-to-100 {
from { column-gap: normal; }
to { column-gap: 100px; }
}
#target {
animation-name: column-gap-normal-to-100;
animation-duration: 2s;
animation-delay: -1s;
animation-play-state: paused;
}
</style>
<body>
<div id="target"></div>
<div id="log"></div>
<script>
test(
function(){
var target = document.getElementById("target");
assert_equals(getComputedStyle(target).columnGap, "100px");
}, "column-gap: normal is not interpolable");
</script>
</body>
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Box Alignment Test: Default column-gap test animation</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap">
<link rel="help" href="https://www.w3.org/TR/css-animations-1/#keyframes">
<meta name="assert" content="This test checks that the default value for column-gap property, which is 'normal', is not interpolable.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
@keyframes column-gap-to-100 {
to { column-gap: 100px; }
}
#target {
animation-name: column-gap-to-100;
animation-duration: 2s;
animation-delay: -1s;
animation-play-state: paused;
}
</style>
<body>
<div id="target"></div>
<div id="log"></div>
<script>
test(
function(){
var target = document.getElementById("target");
assert_equals(getComputedStyle(target).columnGap, "100px");
}, "Default column-gap is not interpolable");
</script>
</body>
@@ -0,0 +1,144 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Box Alignment Test: column-gap parsing</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
.columnGapPx { column-gap: 12px; }
#columnGapEm { column-gap: 2em; font: 10px/1 Monospace; }
#columnGapVw { column-gap: 2vw; }
#columnGapPercent { column-gap: 15%; }
#columnGapCalc { column-gap: calc(10px + 4px); }
.columnGapInitial { column-gap: initial; }
.columnGapInherit { column-gap: inherit; }
#invalidColumnGapNegative { column-gap: -10px; }
#invalidColumnGapMaxContent { column-gap: max-content; }
#invalidColumnGapNone { column-gap: none; }
#invalidColumnGapMultiple { column-gap: 10px 1px; }
#invalidColumnGapAngle { column-gap: 3rad; }
#invalidColumnGapResolution { column-gap: 2dpi; }
#invalidColumnGapTime { column-gap: 200ms; }
</style>
<body>
<div id="log"></div>
<div id="default"></div>
<div id="columnGapPx" class="columnGapPx"></div>
<div id="columnGapEm"></div>
<div id="columnGapVw"></div>
<div id="columnGapPercent"></div>
<div id="columnGapCalc"></div>
<div id="columnGapInitial" class="columnGapInitial"></div>
<div class="columnGapPx">
<div id="columnGapInitialPx" class="columnGapInitial"></div>
</div>
<div id="columnGapInherit" class="columnGapInherit"></div>
<div class="columnGapPx">
<div id="columnGapInheritPx" class="columnGapInherit"></div>
</div>
<div id="invalidColumnGapNegative"></div>
<div id="invalidColumnGapMaxContent"></div>
<div id="invalidColumnGapNone"></div>
<div id="invalidColumnGapMultiple"></div>
<div id="invalidColumnGapAngle"></div>
<div id="invalidColumnGapResolution"></div>
<div id="invalidColumnGapTime"></div>
<script>
test(
function(){
var target = document.getElementById("default");
assert_equals(getComputedStyle(target).columnGap, "normal");
}, "Default column-gap is 'normal'");
test(
function(){
var target = document.getElementById("columnGapPx");
assert_equals(getComputedStyle(target).columnGap, "12px");
}, "column-gap accepts pixels");
test(
function(){
var target = document.getElementById("columnGapEm");
assert_equals(getComputedStyle(target).columnGap, "20px");
}, "column-gap accepts em");
test(
function(){
var target = document.getElementById("columnGapVw");
// The columnGap size would depend on the viewport width, so to make the test pass
// in any window size we just check it's not "normal".
assert_not_equals(getComputedStyle(target).columnGap, "normal");
}, "column-gap accepts vw");
test(
function(){
var target = document.getElementById("columnGapPercent");
assert_equals(getComputedStyle(target).columnGap, "15%");
}, "column-gap accepts percentage");
test(
function(){
var target = document.getElementById("columnGapCalc");
assert_equals(getComputedStyle(target).columnGap, "14px");
}, "column-gap accepts calc()");
test(
function(){
var target = document.getElementById("columnGapInitial");
assert_equals(getComputedStyle(target).columnGap, "normal");
}, "Initial column-gap is 'normal'");
test(
function(){
var target = document.getElementById("columnGapInitialPx");
assert_equals(getComputedStyle(target).columnGap, "normal");
}, "Initial column-gap is 'normal' 2");
test(
function(){
var target = document.getElementById("columnGapInherit");
assert_equals(getComputedStyle(target).columnGap, "normal");
}, "Initial inherited column-gap is 'normal'");
test(
function(){
var target = document.getElementById("columnGapInheritPx");
assert_equals(getComputedStyle(target).columnGap, "12px");
}, "column-gap is inheritable");
test(
function(){
var target = document.getElementById("invalidColumnGapNegative");
assert_equals(getComputedStyle(target).columnGap, "normal");
}, "Negative column-gap is invalid");
test(
function(){
var target = document.getElementById("invalidColumnGapMaxContent");
assert_equals(getComputedStyle(target).columnGap, "normal");
}, "'max-content' column-gap is invalid");
test(
function(){
var target = document.getElementById("invalidColumnGapNone");
assert_equals(getComputedStyle(target).columnGap, "normal");
}, "'none' column-gap is invalid");
test(
function(){
var target = document.getElementById("invalidColumnGapMultiple");
assert_equals(getComputedStyle(target).columnGap, "normal");
}, "column-gap with multiple values is invalid");
test(
function(){
var target = document.getElementById("invalidColumnGapAngle");
assert_equals(getComputedStyle(target).columnGap, "normal");
}, "Angle column-gap is invalid");
test(
function(){
var target = document.getElementById("invalidColumnGapResolution");
assert_equals(getComputedStyle(target).columnGap, "normal");
}, "Resolution column-gap is invalid");
test(
function(){
var target = document.getElementById("invalidColumnGapTime");
assert_equals(getComputedStyle(target).columnGap, "normal");
}, "Time column-gap is invalid");
</script>
</body>
@@ -0,0 +1,38 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Box Alignment Test: gap test animation</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap">
<link rel="help" href="https://www.w3.org/TR/css-animations-1/#keyframes">
<meta name="assert" content="This test checks that gap property is interpolable.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
@keyframes gap-0-to-100 {
from { gap: 0px; }
to { gap: 100px; }
}
#target {
animation-name: gap-0-to-100;
animation-timing-function: linear;
animation-duration: 2s;
animation-delay: -1s;
animation-play-state: paused;
}
</style>
<body>
<div id="target"></div>
<div id="log"></div>
<script>
test(
function(){
var target = document.getElementById("target");
assert_equals(getComputedStyle(target).gap, "50px 50px");
assert_equals(getComputedStyle(target).rowGap, "50px");
assert_equals(getComputedStyle(target).columnGap, "50px");
}, "gap is interpolable");
</script>
</body>
@@ -0,0 +1,36 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Box Alignment Test: gap normal test animation</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap">
<link rel="help" href="https://www.w3.org/TR/css-animations-1/#keyframes">
<meta name="assert" content="This test checks that 'normal' value for gap property is not interpolable.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
@keyframes gap-normal-to-100 {
from { gap: normal; }
to { gap: 100px; }
}
#target {
animation-name: gap-normal-to-100;
animation-duration: 2s;
animation-delay: -1s;
animation-play-state: paused;
}
</style>
<body>
<div id="target"></div>
<div id="log"></div>
<script>
test(
function(){
var target = document.getElementById("target");
assert_equals(getComputedStyle(target).gap, "100px 100px");
assert_equals(getComputedStyle(target).rowGap, "100px");
assert_equals(getComputedStyle(target).columnGap, "100px");
}, "gap: normal is not interpolable");
</script>
</body>
@@ -0,0 +1,35 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Box Alignment Test: Default gap test animation</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap">
<link rel="help" href="https://www.w3.org/TR/css-animations-1/#keyframes">
<meta name="assert" content="This test checks that the default value for gap property, which is 'normal', is not interpolable.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
@keyframes gap-to-100 {
to { gap: 100px; }
}
#target {
animation-name: gap-to-100;
animation-duration: 2s;
animation-delay: -1s;
animation-play-state: paused;
}
</style>
<body>
<div id="target"></div>
<div id="log"></div>
<script>
test(
function(){
var target = document.getElementById("target");
assert_equals(getComputedStyle(target).gap, "100px 100px");
assert_equals(getComputedStyle(target).rowGap, "100px");
assert_equals(getComputedStyle(target).columnGap, "100px");
}, "Default gap is not interpolable");
</script>
</body>
Oops, something went wrong.

0 comments on commit a6698cf

Please sign in to comment.