| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../resources/run-after-layout-and-paint.js"></script> |
| <script src="resources/test-runner-paint-worklet.js"></script> |
| <script src="resources/generate-paint-style-logging.js"></script> |
| <style> |
| div { |
| width: 100px; |
| height: 100px; |
| |
| background-image: paint(test); |
| |
| --length: 10px; |
| --number: 10; |
| } |
| </style> |
| </head> |
| <body> |
| <div></div> |
| <script> |
| 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([ |
| '--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> |
| --length: [CSSSimpleLength=10px]<br> |
| --length-initial: [CSSSimpleLength=20px]<br> |
| --number: [CSSNumberValue=10]<br> |
| |
| </html> |
