Bug 1582904 [wpt PR 19194] - Expansion of shorthands, a=testonly
authorEric Willigers <ewilligers@users.noreply.github.com>
Mon, 23 Sep 2019 12:26:46 +0000
changeset 494716 27c03039e5a2cfc21e9988a847b4a16cef5a6e58
parent 494715 fe5c1d9e099a09c31a524733ebcb32d88d595c97
child 494717 9d4af69f12043fdc8bddb3d8559c9471c89c5bb7
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
bugs1582904, 19194
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 1582904 [wpt PR 19194] - Expansion of shorthands, a=testonly Automatic update from web-platform-tests Expansion of shorthands (#19194) We check the values assigned to longhand properties by the following shorthand properties: - flex - flex-flow - inset - list-style - margin - outline - padding - text-decoration -- wpt-commits: cd5c82839b6bb825f636744b35d623886dd4c180 wpt-pr: 19194
testing/web-platform/tests/css/css-box/parsing/margin-shorthand.html
testing/web-platform/tests/css/css-box/parsing/padding-shorthand.html
testing/web-platform/tests/css/css-flexbox/parsing/flex-flow-shorthand.html
testing/web-platform/tests/css/css-flexbox/parsing/flex-shorthand.html
testing/web-platform/tests/css/css-lists/parsing/list-style-shorthand.sub.html
testing/web-platform/tests/css/css-logical/parsing/inset-shorthand.html
testing/web-platform/tests/css/css-text-decor/parsing/text-decoration-shorthand.html
testing/web-platform/tests/css/css-ui/parsing/outline-shorthand.html
testing/web-platform/tests/css/support/shorthand-testcommon.js
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/parsing/margin-shorthand.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS basic box model: margin sets longhands</title>
+<link rel="help" href="https://drafts.csswg.org/css-box-3/#propdef-margin">
+<meta name="assert" content="margin supports the full grammar '<length-percentage>{1,4}'.">
+<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('margin', '1px 2px 3px 4px', {
+  'margin-top': '1px',
+  'margin-right': '2px',
+  'margin-bottom': '3px',
+  'margin-left': '4px'
+});
+
+test_shorthand_value('margin', '1px 2px 3px', {
+  'margin-top': '1px',
+  'margin-right': '2px',
+  'margin-bottom': '3px',
+  'margin-left': '2px'
+});
+
+test_shorthand_value('margin', '1px 2px', {
+  'margin-top': '1px',
+  'margin-right': '2px',
+  'margin-bottom': '1px',
+  'margin-left': '2px'
+});
+
+test_shorthand_value('margin', '1px', {
+  'margin-top': '1px',
+  'margin-right': '1px',
+  'margin-bottom': '1px',
+  'margin-left': '1px'
+});
+</script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/parsing/padding-shorthand.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS basic box model: padding sets longhands</title>
+<link rel="help" href="https://drafts.csswg.org/css-box-3/#propdef-padding">
+<meta name="assert" content="padding supports the full grammar '<length-percentage>{1,4}'.">
+<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('padding', '1px 2px 3px 4px', {
+  'padding-top': '1px',
+  'padding-right': '2px',
+  'padding-bottom': '3px',
+  'padding-left': '4px'
+});
+
+test_shorthand_value('padding', '1px 2px 3px', {
+  'padding-top': '1px',
+  'padding-right': '2px',
+  'padding-bottom': '3px',
+  'padding-left': '2px'
+});
+
+test_shorthand_value('padding', '1px 2px', {
+  'padding-top': '1px',
+  'padding-right': '2px',
+  'padding-bottom': '1px',
+  'padding-left': '2px'
+});
+
+test_shorthand_value('padding', '1px', {
+  'padding-top': '1px',
+  'padding-right': '1px',
+  'padding-bottom': '1px',
+  'padding-left': '1px'
+});
+</script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-flexbox/parsing/flex-flow-shorthand.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Flexible Box Layout Module Level 1: flex-flow sets longhands</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-flow">
+<meta name="assert" content="flex-flow supports the full grammar '<flex-direction> || <flex-wrap>'.">
+<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('flex-flow', 'nowrap column', {
+  'flex-direction': 'column',
+  'flex-wrap': 'nowrap'
+});
+
+test_shorthand_value('flex-flow', 'wrap row-reverse', {
+  'flex-direction': 'row-reverse',
+  'flex-wrap': 'wrap'
+});
+</script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-flexbox/parsing/flex-shorthand.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Flexible Box Layout Module Level 1: flex sets longhands</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex">
+<meta name="assert" content="flex supports the full grammar 'none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]'.">
+<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('flex', 'none', {
+  'flex-grow': '0',
+  'flex-shrink': '0',
+  'flex-basis': 'auto'
+});
+
+test_shorthand_value('flex', '1', {
+  'flex-grow': '1',
+  'flex-shrink': '1',
+  'flex-basis': '0%'
+});
+
+test_shorthand_value('flex', '2 3', {
+  'flex-grow': '2',
+  'flex-shrink': '3',
+  'flex-basis': '0%'
+});
+
+test_shorthand_value('flex', '4 5 6px', {
+  'flex-grow': '4',
+  'flex-shrink': '5',
+  'flex-basis': '6px'
+});
+
+test_shorthand_value('flex', '7% 8', {
+  'flex-grow': '8',
+  'flex-shrink': '1',
+  'flex-basis': '7%'
+});
+
+test_shorthand_value('flex', '8 auto', {
+  'flex-grow': '8',
+  'flex-shrink': '1',
+  'flex-basis': 'auto'
+});
+</script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-lists/parsing/list-style-shorthand.sub.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Lists: list-style sets longhands</title>
+<link rel="help" href="https://drafts.csswg.org/css-lists-3/#propdef-list-style">
+<meta name="assert" content="list-style supports the full grammar '<'list-style-position'> || <'list-style-image'> || <'list-style-type'>'.">
+<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('list-style', 'square url("https://{{host}}/") inside', {
+  'list-style-position': 'inside',
+  'list-style-image': 'url("https://{{host}}/")',
+  'list-style-type': 'square'
+});
+</script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/parsing/inset-shorthand.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: inset sets longhands</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-inset">
+<meta name="assert" content="inset supports the full grammar '<'top'>{1,4}'.">
+<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('inset', '1px 2px 3px 4px', {
+  'top': '1px',
+  'right': '2px',
+  'bottom': '3px',
+  'left': '4px'
+});
+
+test_shorthand_value('inset', '1px 2px 3px', {
+  'top': '1px',
+  'right': '2px',
+  'bottom': '3px',
+  'left': '2px'
+});
+
+test_shorthand_value('inset', '1px 2px', {
+  'top': '1px',
+  'right': '2px',
+  'bottom': '1px',
+  'left': '2px'
+});
+
+test_shorthand_value('inset', '1px', {
+  'top': '1px',
+  'right': '1px',
+  'bottom': '1px',
+  'left': '1px'
+});
+</script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text-decor/parsing/text-decoration-shorthand.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Decoration: text-decoration sets longhands</title>
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#propdef-text-decoration">
+<meta name="assert" content="text-decoration supports the full grammar '<‘text-decoration-line’> || <‘text-decoration-style’> || <‘text-decoration-color’>'.">
+<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('text-decoration', 'overline dotted green', {
+  'text-decoration-line': 'overline',
+  'text-decoration-style': 'dotted',
+  'text-decoration-color': 'green'
+});
+</script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/parsing/outline-shorthand.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS UI Level 3: outline sets longhands</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-3/#outline">
+<link rel="help" href="https://drafts.csswg.org/cssom/#serializing-css-values">
+<meta name="assert" content="outline supports the full grammar '<outline-color> || <outline> || <outline>'.">
+<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('outline', '3px ridge blue', {
+  'outline-color': 'blue',
+  'outline-style': 'ridge',
+  'outline-width': '3px'
+});
+</script>
+</body>
+</html>
--- a/testing/web-platform/tests/css/support/shorthand-testcommon.js
+++ b/testing/web-platform/tests/css/support/shorthand-testcommon.js
@@ -1,20 +1,24 @@
 '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;
+        try {
+            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");
 
-        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");
+                div.style[longhand] = "";
+                div.style[longhand] = readValue;
+                assert_equals(div.style[longhand], readValue, "serialization should round-trip");
+            }
+        } finally {
+            div.style[property] = "";
         }
     }, "e.style['" + property + "'] = " + stringifiedValue + " should set the longhand values");
 }