Bug 1582131 [wpt PR 19137] - CSS: WPTs for shorthand expansion, a=testonly
authorEric Willigers <ericwilligers@chromium.org>
Mon, 23 Sep 2019 12:24:12 +0000
changeset 494687 a5c687a3b004a9b3d17bdbc26c79278708febcad
parent 494686 3506fb6955b86be99e249d4922e374753abc1da6
child 494688 ab438452cdfc98656c31a23a80c1dd389d6b3c63
push id114126
push userwptsync@mozilla.com
push dateTue, 24 Sep 2019 19:34:44 +0000
treeherdermozilla-inbound@068d8731f1c4 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1582131, 19137, 1810877, 698320
milestone71.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1582131 [wpt PR 19137] - CSS: WPTs for shorthand expansion, a=testonly Automatic update from web-platform-tests 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} -- wpt-commits: 6e2637cce436a9ef1bcbbcd4fa4e086c19d24300 wpt-pr: 19137
testing/web-platform/tests/css/css-align/parsing/gap-shorthand.html
testing/web-platform/tests/css/css-align/parsing/place-content-shorthand.html
testing/web-platform/tests/css/css-align/parsing/place-items-shorthand.html
testing/web-platform/tests/css/css-align/parsing/place-self-shorthand.html
testing/web-platform/tests/css/support/shorthand-testcommon.js
testing/web-platform/tests/svg/painting/parsing/marker-shorthand.svg
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/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>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/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>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/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>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/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>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/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");
+}
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/svg/painting/parsing/marker-shorthand.svg
@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: marker sets longhands</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#MarkerProperty"/>
+    <h:meta name="assert" content="marker supports the full paint grammar 'none | marker-ref'."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/shorthand-testcommon.js"/>
+  <script><![CDATA[
+
+test_shorthand_value('marker', 'none', {
+  'marker-start': 'none',
+  'marker-mid': 'none',
+  'marker-end': 'none'
+});
+
+test_shorthand_value('marker', 'url("https://example.com/")', {
+  'marker-start': 'url("https://example.com/")',
+  'marker-mid': 'url("https://example.com/")',
+  'marker-end': 'url("https://example.com/")'
+});
+
+  ]]></script>
+</svg>