Adds typed-om flow relative border tests (#25342)

* adding border color, width and style logical tests * adding border-radius logical tests * clearer syntax tests * fixes after oriol's great review
web-platform-tests · Sep 17, 2020 · 68ef251 · 68ef251
1 parent 92053e1
commit 68ef251
Showing 1 changed file with 43 additions and 4 deletions.
diff --git a/css/css-typed-om/the-stylepropertymap/properties/logical.html b/css/css-typed-om/the-stylepropertymap/properties/logical.html
@@ -1,6 +1,6 @@
 <!doctype html>
 <meta charset="utf-8">
-<title>margin properties</title>
+<title>logical margin, inset, padding & border 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">
@@ -13,15 +13,54 @@
 <script>
 'use strict';
 
+const logical = {
+  axes: ['block', 'inline'],
+  sides: ['block-start', 'block-end', 'inline-start', 'inline-end'],
+  corners: ['start-start', 'start-end', 'end-start', 'end-end'],
+};
+
 for (const prefix of ['margin-', 'inset-', 'padding-']) {
-  for (const suffix of ['block-start', 'block-end', 'inline-start', 'inline-end']) {
-    runPropertyTests(prefix + suffix, [
+  for (const side of [...logical.sides, ...logical.axes]) {
+    runPropertyTests(prefix + side, [
       // TODO: Test 'auto'
       { syntax: '<percentage>' },
       { syntax: '<length>' },
     ]);
   }
 }
 
-// TODO: test shorthands and other logical properties.
+// BORDERS
+for (const side of [...logical.sides, ...logical.axes]) {
+  runPropertyTests('border-' + side, [
+    //{ syntax: 'thin solid green' },
+    //{ syntax: 'thin solid' },
+    //{ syntax: 'thick' },
+    { syntax: 'none' },
+  ]);
+
+  runPropertyTests(`border-${side}-width`, [
+    { syntax: 'thin' },
+    { syntax: 'medium' },
+    { syntax: 'thick' },
+    { syntax: '<length>' },
+  ]);
+
+  runPropertyTests(`border-${side}-color`, [
+    { syntax: 'currentcolor' },
+    //{ syntax: '<color>' },
+  ]);
+
+  runPropertyTests(`border-${side}-style`, [
+    { syntax: 'none' },
+    { syntax: 'solid' },
+  ]);
+}
+
+// border radius
+for (const side of logical.corners) {
+  runPropertyTests(`border-${side}-radius`, [
+    { syntax: '<percentage>' },
+    { syntax: '<length>' },
+  ]);
+}
 </script>