feat(css): css 变量示例及测试

pages.json

@@ -999,6 +999,12 @@
         "navigationBarTitleText": "Rotate"
       }
     },
+    {
+      "path": "pages/CSS/variable/variable",
+      "style": {
+        "navigationBarTitleText": "css 变量"
+      }
+    },
     {
       "path": "pages/tabBar/template",
       "style": {

pages/CSS/variable/variable.test.js

+describe('css-variable', () => {
+  let page;
+  beforeAll(async () => {
+    page = await program.reLaunch('/pages/CSS/variable/variable');
+    await page.waitFor('view');
+  });
+
+  it('screenshot', async () => {
+    const image = await program.screenshot({
+      fullPage: true
+    })
+    expect(image).toMatchImageSnapshot()
+  });
+});

pages/CSS/variable/variable.uvue

+<template>
+  <view class="page">
+    <view class="status-bar-height">
+      <text>status bar height</text>
+    </view>
+    <view class="window-top">
+      <text>window top</text>
+    </view>
+    <view class="window-bottom">
+      <text>window bottom</text>
+    </view>
+  </view>
+</template>
+
+<style>
+  .status-bar-height {
+    height: var(--status-bar-height);
+    background-color: red;
+  }
+
+  .window-top {
+    height: var(--window-top);
+    background-color: green;
+  }
+
+  .window-bottom {
+    height: var(--window-bottom);
+    background-color: blue;
+  }
+</style>

pages/tabBar/CSS.uvue

@@ -349,6 +349,16 @@
                 url: '/pages/CSS/transition/transition',
               },
             ] as Page[],
+          },
+          {
+            id: 'variable',
+            name: 'variable',
+            pages: [
+              {
+                name: 'variable',
+                url: '/pages/CSS/variable/variable',
+              },
+            ] as Page[],
           }
         ] as ListItem[],
         arrowUpIcon: '/static/icons/arrow-up.png',