Bug 1449820 [wpt PR 10229] - [css-typed-om] Add support for grid properties., a=testonly
authorDarren Shen <shend@chromium.org>
Mon, 09 Apr 2018 22:09:19 +0000
changeset 467279 f5c86491e3cc034d47e11781d7e70632e3cfdd49
parent 467278 0bef5ca2da96df2a75ffb1dab0f44f35b14c9624
child 467280 b77aba04cf62213ee8c9800f3725a99d7fc63f4e
push id9165
push userasasaki@mozilla.com
push dateThu, 26 Apr 2018 21:04:54 +0000
treeherdermozilla-beta@064c3804de2e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1449820, 10229, 820299, 984756, 548296
milestone61.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 1449820 [wpt PR 10229] - [css-typed-om] Add support for grid properties., a=testonly Automatic update from web-platform-tests[css-typed-om] Add support for grid properties. This patch adds support for some grid properties. We add a new <flex> CSS value object, which meant rebaselining all the tests. We're failing some tests because the 'grid', 'grid-template' and 'grid-gap' shorthands don't serialize to anything [1], so Typed OM can't create an unsupported style value from it. Not sure if this is a bug... [1] https://cs.chromium.org/chromium/src/third_party/WebKit/Source/core/css/StylePropertySerializer.cpp?type=cs&l=406 Bug: 820299 Change-Id: I8ff871fffed2977ca20a623bd283d7cbdc247870 Reviewed-on: https://chromium-review.googlesource.com/984756 Commit-Queue: Darren Shen <shend@chromium.org> Reviewed-by: Rune Lillesveen <futhark@chromium.org> Cr-Commit-Position: refs/heads/master@{#548296} wpt-commits: 1d216465df83a087ff7be270a17db4a0e380aece wpt-pr: 10229 wpt-commits: 1d216465df83a087ff7be270a17db4a0e380aece wpt-pr: 10229
testing/web-platform/meta/MANIFEST.json
testing/web-platform/tests/css/css-typed-om/the-stylepropertymap/properties/grid-area.html
testing/web-platform/tests/css/css-typed-om/the-stylepropertymap/properties/grid-auto-columns-rows.html
testing/web-platform/tests/css/css-typed-om/the-stylepropertymap/properties/grid-auto-flow.html
testing/web-platform/tests/css/css-typed-om/the-stylepropertymap/properties/grid-gap.html
testing/web-platform/tests/css/css-typed-om/the-stylepropertymap/properties/grid-start-end.html
testing/web-platform/tests/css/css-typed-om/the-stylepropertymap/properties/grid-template-areas.html
testing/web-platform/tests/css/css-typed-om/the-stylepropertymap/properties/grid-template-columns-rows.html
testing/web-platform/tests/css/css-typed-om/the-stylepropertymap/properties/grid-template.html
testing/web-platform/tests/css/css-typed-om/the-stylepropertymap/properties/grid.html
testing/web-platform/tests/css/css-typed-om/the-stylepropertymap/properties/resources/testsuite.js
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -318572,16 +318572,70 @@
     ]
    ],
    "css/css-typed-om/the-stylepropertymap/properties/gap.html": [
     [
      "/css/css-typed-om/the-stylepropertymap/properties/gap.html",
      {}
     ]
    ],
+   "css/css-typed-om/the-stylepropertymap/properties/grid-area.html": [
+    [
+     "/css/css-typed-om/the-stylepropertymap/properties/grid-area.html",
+     {}
+    ]
+   ],
+   "css/css-typed-om/the-stylepropertymap/properties/grid-auto-columns-rows.html": [
+    [
+     "/css/css-typed-om/the-stylepropertymap/properties/grid-auto-columns-rows.html",
+     {}
+    ]
+   ],
+   "css/css-typed-om/the-stylepropertymap/properties/grid-auto-flow.html": [
+    [
+     "/css/css-typed-om/the-stylepropertymap/properties/grid-auto-flow.html",
+     {}
+    ]
+   ],
+   "css/css-typed-om/the-stylepropertymap/properties/grid-gap.html": [
+    [
+     "/css/css-typed-om/the-stylepropertymap/properties/grid-gap.html",
+     {}
+    ]
+   ],
+   "css/css-typed-om/the-stylepropertymap/properties/grid-start-end.html": [
+    [
+     "/css/css-typed-om/the-stylepropertymap/properties/grid-start-end.html",
+     {}
+    ]
+   ],
+   "css/css-typed-om/the-stylepropertymap/properties/grid-template-areas.html": [
+    [
+     "/css/css-typed-om/the-stylepropertymap/properties/grid-template-areas.html",
+     {}
+    ]
+   ],
+   "css/css-typed-om/the-stylepropertymap/properties/grid-template-columns-rows.html": [
+    [
+     "/css/css-typed-om/the-stylepropertymap/properties/grid-template-columns-rows.html",
+     {}
+    ]
+   ],
+   "css/css-typed-om/the-stylepropertymap/properties/grid-template.html": [
+    [
+     "/css/css-typed-om/the-stylepropertymap/properties/grid-template.html",
+     {}
+    ]
+   ],
+   "css/css-typed-om/the-stylepropertymap/properties/grid.html": [
+    [
+     "/css/css-typed-om/the-stylepropertymap/properties/grid.html",
+     {}
+    ]
+   ],
    "css/css-typed-om/the-stylepropertymap/properties/height.html": [
     [
      "/css/css-typed-om/the-stylepropertymap/properties/height.html",
      {}
     ]
    ],
    "css/css-typed-om/the-stylepropertymap/properties/image-rendering.html": [
     [
@@ -524735,16 +524789,52 @@
   "css/css-typed-om/the-stylepropertymap/properties/font.html": [
    "6f3f672ecb0ad0b4391b7c7fbd8bb666b77a1efc",
    "testharness"
   ],
   "css/css-typed-om/the-stylepropertymap/properties/gap.html": [
    "e113dfd152548c6ba612d40af13ba5877673b043",
    "testharness"
   ],
+  "css/css-typed-om/the-stylepropertymap/properties/grid-area.html": [
+   "3f139dfec90a4ed0a460530fe5736475b6c25540",
+   "testharness"
+  ],
+  "css/css-typed-om/the-stylepropertymap/properties/grid-auto-columns-rows.html": [
+   "ff3e9e2b1186aed0e9ecf17cebe40316880d447d",
+   "testharness"
+  ],
+  "css/css-typed-om/the-stylepropertymap/properties/grid-auto-flow.html": [
+   "25af714f7993ad00a36cf9a96cc0218aaed9f53f",
+   "testharness"
+  ],
+  "css/css-typed-om/the-stylepropertymap/properties/grid-gap.html": [
+   "1fbe50656f4d598f3baed2116c51b47fe3187b92",
+   "testharness"
+  ],
+  "css/css-typed-om/the-stylepropertymap/properties/grid-start-end.html": [
+   "12c4d77ab5df2b6e9f673a9f83ffcb583ccb9fe1",
+   "testharness"
+  ],
+  "css/css-typed-om/the-stylepropertymap/properties/grid-template-areas.html": [
+   "5bcd38d13e904ca4e74aef5701f10f325c1f702f",
+   "testharness"
+  ],
+  "css/css-typed-om/the-stylepropertymap/properties/grid-template-columns-rows.html": [
+   "1f6e412eb1a862b8c3bdd2d4fa30e6495ebfdbb0",
+   "testharness"
+  ],
+  "css/css-typed-om/the-stylepropertymap/properties/grid-template.html": [
+   "f1bb1330c555ffdedcd0b53c879d18f0b4ddedea",
+   "testharness"
+  ],
+  "css/css-typed-om/the-stylepropertymap/properties/grid.html": [
+   "13ec601464ba9935b2167493c77d6189737f5380",
+   "testharness"
+  ],
   "css/css-typed-om/the-stylepropertymap/properties/height.html": [
    "617ec941ab1cbd02b31b8a9bb7ce6da311109476",
    "testharness"
   ],
   "css/css-typed-om/the-stylepropertymap/properties/image-rendering.html": [
    "6d1fffc1886bf0318487e7b51d48a30a467d55dd",
    "testharness"
   ],
@@ -524856,17 +524946,17 @@
    "ae21056fb993efb7112e0bc42fe1269f6bc0c72e",
    "testharness"
   ],
   "css/css-typed-om/the-stylepropertymap/properties/resize.html": [
    "533f287facbc82118469f75f9f88a1372848d3b2",
    "testharness"
   ],
   "css/css-typed-om/the-stylepropertymap/properties/resources/testsuite.js": [
-   "a11458935f17ace154a68314677a4a868ba55273",
+   "9e7a4bb8fa2d8ad491353117b409a2a7ff314d7f",
    "support"
   ],
   "css/css-typed-om/the-stylepropertymap/properties/right.html": [
    "68a2611eaf9eecb7393c2b0db0f4378ebe285f22",
    "testharness"
   ],
   "css/css-typed-om/the-stylepropertymap/properties/scroll-margin.html": [
    "7d4636be3e35639b915917412465b443241e95b1",
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-typed-om/the-stylepropertymap/properties/grid-area.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>'grid-area' property</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../../resources/testhelper.js"></script>
+<script src="resources/testsuite.js"></script>
+<body>
+<div id="log"></div>
+<script>
+'use strict';
+
+runUnsupportedPropertyTests('grid-area', [
+  'a', 'a / a', 'auto', 'auto / auto', '2 / 1 / 2',
+  'span 3', '2 span / a span'
+]);
+
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-typed-om/the-stylepropertymap/properties/grid-auto-columns-rows.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>'grid-auto-columns' and 'grid-auto-rows' properties</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../../resources/testhelper.js"></script>
+<script src="resources/testsuite.js"></script>
+<body>
+<div id="log"></div>
+<script>
+'use strict';
+
+// grid-auto-columns/rows are list-valued.
+// Run list-valued tests here too.
+for (const suffix of ['columns', 'rows']) {
+  runPropertyTests(`grid-auto-${suffix}`, [
+    { syntax: 'min-content' },
+    { syntax: 'max-content' },
+    { syntax: 'auto' },
+    { syntax: '<length>' },
+    { syntax: '<percentage>' },
+    { syntax: '<flex>' },
+  ]);
+
+  runUnsupportedPropertyTests(`grid-auto-${suffix}`, [
+    'minmax(100px, auto)', 'fit-content(400px)'
+  ]);
+}
+
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-typed-om/the-stylepropertymap/properties/grid-auto-flow.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>'grid-auto-flow' property</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../../resources/testhelper.js"></script>
+<script src="resources/testsuite.js"></script>
+<body>
+<div id="log"></div>
+<script>
+'use strict';
+
+runPropertyTests('grid-auto-flow', [
+  { syntax: 'row' },
+  { syntax: 'column' },
+]);
+
+runUnsupportedPropertyTests('grid-auto-flow', [
+  'row dense', 'column dense',
+]);
+
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-typed-om/the-stylepropertymap/properties/grid-gap.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>'grid-gap' property</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../../resources/testhelper.js"></script>
+<script src="resources/testsuite.js"></script>
+<body>
+<div id="log"></div>
+<script>
+'use strict';
+
+runUnsupportedPropertyTests('grid-gap', [
+  '20px', '16%', '20px 10px', '15% 100%', '21px 82%'
+]);
+
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-typed-om/the-stylepropertymap/properties/grid-start-end.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>'grid-{row/column}-{start/end}' properties</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../../resources/testhelper.js"></script>
+<script src="resources/testsuite.js"></script>
+<body>
+<div id="log"></div>
+<script>
+'use strict';
+
+for (const orientation of ['row', 'column']) {
+  for (const suffix of ['start', 'end']) {
+    runPropertyTests(`grid-${orientation}-${suffix}`, [
+      { syntax: 'auto' },
+    ]);
+
+    runUnsupportedPropertyTests(`grid-${orientation}-${suffix}`, [
+      '3', 'span 2', '5 somegridarea span'
+    ]);
+  }
+}
+
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-typed-om/the-stylepropertymap/properties/grid-template-areas.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>'grid-template-areas' property</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../../resources/testhelper.js"></script>
+<script src="resources/testsuite.js"></script>
+<body>
+<div id="log"></div>
+<script>
+'use strict';
+
+runPropertyTests('grid-template-areas', [
+  { syntax: 'none' },
+]);
+
+runUnsupportedPropertyTests('grid-template-areas', [
+  '"a a a"', '"a a a" "b b b"',
+]);
+
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-typed-om/the-stylepropertymap/properties/grid-template-columns-rows.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>'grid-template-columns' and 'grid-template-rows' properties</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../../resources/testhelper.js"></script>
+<script src="resources/testsuite.js"></script>
+<body>
+<div id="log"></div>
+<script>
+'use strict';
+
+for (const suffix of ['columns', 'rows']) {
+  runPropertyTests(`grid-template-${suffix}`, [
+    { syntax: 'none' },
+  ]);
+
+  runUnsupportedPropertyTests(`grid-template-${suffix}`, [
+    '[linename1] 100px [linename2 linename3]',
+    '200px repeat(auto-fill, 100px) 300px'
+  ]);
+}
+
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-typed-om/the-stylepropertymap/properties/grid-template.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>'grid-template' property</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../../resources/testhelper.js"></script>
+<script src="resources/testsuite.js"></script>
+<body>
+<div id="log"></div>
+<script>
+'use strict';
+
+runUnsupportedPropertyTests('grid-template', [
+  'none', '100px 1fr / 50px 1fr', '[linename] 100px / [columnname1] 30% [columname2] 70%',
+  'fit-content(100px) / fit-content(40%)', '"a a a" "b b b"',
+  '[header-top] "a a a" [header-bottom] [main-top] "b b b" 1fr [main-bottom] / auto 1fr auto'
+]);
+
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-typed-om/the-stylepropertymap/properties/grid.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>'grid' property</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../../resources/testhelper.js"></script>
+<script src="resources/testsuite.js"></script>
+<body>
+<div id="log"></div>
+<script>
+'use strict';
+
+runUnsupportedPropertyTests('grid', [
+  'auto-flow / 1fr 1fr 1fr', 'auto-flow dense / 40px 40px 1fr',
+  'repeat(3, 80px) / auto-flow'
+]);
+
+</script>
--- a/testing/web-platform/tests/css/css-typed-om/the-stylepropertymap/properties/resources/testsuite.js
+++ b/testing/web-platform/tests/css/css-typed-om/the-stylepropertymap/properties/resources/testsuite.js
@@ -115,16 +115,35 @@ const gTestSyntaxExamples = {
         input: new CSSMathSum(new CSSUnitValue(0, 's'), new CSSUnitValue(0, 'ms')),
         // Specified/computed calcs are usually simplified.
         // FIXME: Test this properly
         defaultSpecified: (_, result) => assert_is_calc_sum(result),
         defaultComputed: (_, result) => assert_is_unit('s', result)
       }
     ],
   },
+  '<flex>': {
+    description: 'a flexible length',
+    examples: [
+      {
+        description: "zero fractions",
+        input: new CSSUnitValue(0, 'fr')
+      },
+      {
+        description: "one fraction",
+        input: new CSSUnitValue(0, 'fr')
+      },
+      {
+        description: "negative fraction",
+        input: new CSSUnitValue(-3.14, 'fr')
+      },
+      // TODO(https://github.com/w3c/css-houdini-drafts/issues/734):
+      // Add calc tests involving 'fr' when that is spec'd in CSS.
+    ],
+  },
   '<number>': {
     description: 'a number',
     examples: [
       {
         description: 'the number zero',
         input: new CSSUnitValue(0, 'number')
       },
       {