[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
web-platform-tests · Mar 29, 2018 · 901fbf8 · 901fbf8
1 parent 55846d5
commit 901fbf8
Show file tree

Hide file tree

Showing 10 changed files with 240 additions and 0 deletions.
diff --git a/css/css-typed-om/the-stylepropertymap/properties/grid-area.html b/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>
diff --git a/css/css-typed-om/the-stylepropertymap/properties/grid-auto-columns-rows.html b/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>
diff --git a/css/css-typed-om/the-stylepropertymap/properties/grid-auto-flow.html b/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>
diff --git a/css/css-typed-om/the-stylepropertymap/properties/grid-gap.html b/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>
diff --git a/css/css-typed-om/the-stylepropertymap/properties/grid-start-end.html b/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>
diff --git a/css/css-typed-om/the-stylepropertymap/properties/grid-template-areas.html b/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>
diff --git a/css/css-typed-om/the-stylepropertymap/properties/grid-template-columns-rows.html b/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>
diff --git a/css/css-typed-om/the-stylepropertymap/properties/grid-template.html b/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>
diff --git a/css/css-typed-om/the-stylepropertymap/properties/grid.html b/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>
diff --git a/css/css-typed-om/the-stylepropertymap/properties/resources/testsuite.js b/css/css-typed-om/the-stylepropertymap/properties/resources/testsuite.js
@@ -118,6 +118,25 @@ const gTestSyntaxExamples = {
       }
     ],
   },
+  '<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: [