CSS: WPTs for shorthand expansion

Web platform tests are added for the expansion of the following shorthands into longhand values: - gap - marker - place-content - place-items - place-self Change-Id: Ic985380e2a1e9348a64ee1170839c2e0e40313ec Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1810877 Commit-Queue: Eric Willigers <ericwilligers@chromium.org> Reviewed-by: Oriol Brufau <obrufau@igalia.com> Auto-Submit: Eric Willigers <ericwilligers@chromium.org> Cr-Commit-Position: refs/heads/master@{#698320}
faceless2 · Sep 20, 2019 · 6e2637c · 6e2637c
1 parent 5de6672
commit 6e2637c
Show file tree

Hide file tree

Showing 6 changed files with 194 additions and 0 deletions.
diff --git a/css/css-align/parsing/gap-shorthand.html b/css/css-align/parsing/gap-shorthand.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Box Alignment Level 3: gap sets longhands</title>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-gap">
+<meta name="assert" content="row-gap supports the full grammar '<row-gap> <column-gap>?'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/shorthand-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_shorthand_value('gap', 'normal', {
+  'row-gap': 'normal',
+  'column-gap': 'normal'
+});
+
+test_shorthand_value('gap', '10px 20%', {
+  'row-gap': '10px',
+  'column-gap': '20%'
+});
+
+test_shorthand_value('gap', '10px normal', {
+  'row-gap': '10px',
+  'column-gap': 'normal'
+});
+
+test_shorthand_value('gap', 'normal calc(20% + 10px)', {
+  'row-gap': 'normal',
+  'column-gap': 'calc(20% + 10px)'
+});
+</script>
+</body>
+</html>
diff --git a/css/css-align/parsing/place-content-shorthand.html b/css/css-align/parsing/place-content-shorthand.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Box Alignment Level 3: place-content sets longhands</title>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-place-content">
+<meta name="assert" content="place-content supports the full grammar '<align-content> <justify-content>?'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/shorthand-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_shorthand_value('place-content', 'normal', {
+  'align-content': 'normal',
+  'justify-content': 'normal'
+});
+
+test_shorthand_value('place-content', 'first baseline', {
+  'align-content': 'baseline',
+  'justify-content': 'start'
+});
+
+test_shorthand_value('place-content', 'last baseline flex-start', {
+  'align-content': 'last baseline',
+  'justify-content': 'flex-start'
+});
+
+test_shorthand_value('place-content', 'space-around', {
+  'align-content': 'space-around',
+  'justify-content': 'space-around'
+});
+
+test_shorthand_value('place-content', 'space-evenly unsafe end', {
+  'align-content': 'space-evenly',
+  'justify-content': 'unsafe end'
+});
+</script>
+</body>
+</html>
diff --git a/css/css-align/parsing/place-items-shorthand.html b/css/css-align/parsing/place-items-shorthand.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Box Alignment Level 3: place-items sets longhands</title>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-place-items">
+<meta name="assert" content="place-items supports the full grammar '<align-items> <justify-items>?'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/shorthand-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_shorthand_value('place-items', 'normal', {
+  'align-items': 'normal',
+  'justify-items': 'normal'
+});
+
+test_shorthand_value('place-items', 'first baseline', {
+  'align-items': 'baseline',
+  'justify-items': 'baseline'
+});
+
+test_shorthand_value('place-items', 'last baseline flex-start', {
+  'align-items': 'last baseline',
+  'justify-items': 'flex-start'
+});
+
+test_shorthand_value('place-items', 'stretch right legacy', {
+  'align-items': 'stretch',
+  'justify-items': 'legacy right'
+});
+</script>
+</body>
+</html>
diff --git a/css/css-align/parsing/place-self-shorthand.html b/css/css-align/parsing/place-self-shorthand.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Box Alignment Level 3: place-self sets longhands</title>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-place-self">
+<meta name="assert" content="place-self supports the full grammar '<align-self> <justify-self>?'.">
+<meta name="assert" content="<baseline-position> and <baseline-position> start are equivalent.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/shorthand-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_shorthand_value('place-self', 'normal', {
+  'align-self': 'normal',
+  'justify-self': 'normal'
+});
+
+test_shorthand_value('place-self', 'first baseline', {
+  'align-self': 'baseline',
+  'justify-self': 'baseline'
+});
+
+test_shorthand_value('place-self', 'last baseline flex-start', {
+  'align-self': 'last baseline',
+  'justify-self': 'flex-start'
+});
+
+test_shorthand_value('place-self', 'unsafe self-start stretch', {
+  'align-self': 'unsafe self-start',
+  'justify-self': 'stretch'
+});
+</script>
+</body>
+</html>
diff --git a/css/support/shorthand-testcommon.js b/css/support/shorthand-testcommon.js
@@ -0,0 +1,20 @@
+'use strict';
+
+function test_shorthand_value(property, value, longhands) {
+    const stringifiedValue = JSON.stringify(value);
+
+    test(function(){
+        var div = document.getElementById('target') || document.createElement('div');
+        div.style[property] = "";
+        div.style[property] = value;
+
+        for (let longhand of Object.keys(longhands).sort()) {
+            const readValue = div.style[longhand];
+            assert_equals(readValue, longhands[longhand], longhand + " should be canonical");
+
+            div.style[longhand] = "";
+            div.style[longhand] = readValue;
+            assert_equals(div.style[longhand], readValue, "serialization should round-trip");
+        }
+    }, "e.style['" + property + "'] = " + stringifiedValue + " should set the longhand values");
+}
diff --git a/svg/painting/parsing/marker-shorthand.svg b/svg/painting/parsing/marker-shorthand.svg