Test usage of registered custom properties in custom paint

third_party/WebKit/LayoutTests/csspaint/registered-properties-in-custom-paint.html

Index: third_party/WebKit/LayoutTests/csspaint/registered-properties-in-custom-paint.html
diff --git a/third_party/WebKit/LayoutTests/csspaint/style-before-pseudo.html b/third_party/WebKit/LayoutTests/csspaint/registered-properties-in-custom-paint.html
similarity index 57%
copy from third_party/WebKit/LayoutTests/csspaint/style-before-pseudo.html
copy to third_party/WebKit/LayoutTests/csspaint/registered-properties-in-custom-paint.html
index 6b4a08898621d82cdf99228ba281fab38ecb5ddb..1615ed1531c09e040a0530bbaafd75ae259234bd 100644
--- a/third_party/WebKit/LayoutTests/csspaint/style-before-pseudo.html
+++ b/third_party/WebKit/LayoutTests/csspaint/registered-properties-in-custom-paint.html
@@ -6,17 +6,13 @@
 <script src="resources/generate-paint-style-logging.js"></script>
 <style>
     div {
-        border-radius: 3px;
-    }
-
-    div::before {
         width: 100px;
         height: 100px;
-        content: 'foo';
 
         background-image: paint(test);
-        border-radius: 2px;
-        --foo: bar;
+
+        --length: 10px;
+        --number: 10;
     }
 </style>
 </head>
@@ -26,17 +22,21 @@
     if (window.testRunner)
         testRunner.dumpAsText();
 
+    CSS.registerProperty({name: '--length', syntax: '<length>', initialValue: '0px'});
+    CSS.registerProperty({name: '--length-initial', syntax: '<length>', initialValue: '20px'});
+    CSS.registerProperty({name: '--number', syntax: '<number>', initialValue: '0'});
+
     importPaintWorkletAndTerminateTestAfterAsyncPaint(
             generatePaintStyleLogging([
-                '--bar',
-                '--foo',
-                'border-radius',
+                '--length',
+                '--length-initial',
+                '--number',
             ]));
 </script>
 <p>This tests the style information in the paint callback.</p>
 <p>See the devtools console for test output. The console should log:</p>
---bar: [null]<br>
---foo: bar<br>
-border-radius: 2px
-</body>
+--length: [CSSSimpleLength=10px]<br>
+--length-initial: [CSSSimpleLength=20px]<br>
+--number: [CSSNumberValue=10]<br>
+
 </html>