Merge pull request #961 from openkraken/feat/support-variable

feat: add css variables and support link element

integration_tests/specs/css/css-variables/css-variables.ts

@@ -0,0 +1,167 @@
+describe('CSS Variables', () => {
+  // https://github.com/web-platform-tests/wpt/blob/master/css/css-variables/css-variable-change-style-001.html
+  it('change-style-001', async () => {
+
+    document.body.appendChild(createStyle(`
+      .outer {
+        --x: red;
+        --y: green;
+        --z: 28px;
+      }
+    `));
+    document.head.appendChild(createStyle(`
+      .inner {
+        font-size: var(--z);
+      }
+    `));
+
+    document.body.appendChild(
+      <div class="outer">
+        <div class="inbetween">
+          <div class="inner">FontSize should be 28px.</div>
+        </div>
+      </div>
+    );
+
+    await snapshot();
+  });
+
+  it('change-style-002', async () => {
+    document.head.appendChild(createStyle(`
+      .inner {
+
+        --x: red;
+        --y: green;
+        --z: 28px;
+        font-size: var(--z);
+      }
+    `));
+
+    document.body.appendChild(
+      <div class="outer">
+        <div class="inbetween">
+          <div class="inner">FontSize should be 28px.</div>
+        </div>
+      </div>
+    );
+
+    await snapshot();
+  });
+
+
+  it('variable resolve color', async () => {
+    document.head.appendChild(createStyle(`
+      .inner {
+        --x: red;
+        --y: green;
+        --z: 28px;
+        background-color: var(--x);
+      }
+    `));
+
+    document.body.appendChild(
+      <div class="outer">
+        <div class="inbetween">
+          <div class="inner">Background should be red.</div>
+        </div>
+      </div>
+    );
+
+    await snapshot();
+  });
+
+  describe('Shorthand CSS properties', () => {
+    it('background', async () => {
+      document.head.appendChild(createStyle(`
+        .inner {
+          --x: red;
+          --y: green;
+          --z: 28px;
+          background: var(--y);
+        }
+      `));
+
+      document.body.appendChild(
+        <div class="outer">
+          <div class="inbetween">
+            <div class="inner">Background should be green.</div>
+          </div>
+        </div>
+      );
+
+      await snapshot();
+    });
+
+    it('margin', async () => {
+      document.head.appendChild(createStyle(`
+        .inner {
+          --x: red;
+          --y: green;
+          --z: 28px;
+          margin: var(--z);
+          background: red;
+        }
+      `));
+
+      document.body.appendChild(
+        <div class="outer">
+          <div class="inbetween">
+            <div class="inner">Background should be red with 28px margin.</div>
+          </div>
+        </div>
+      );
+
+      await snapshot();
+    });
+
+    it('padding', async () => {
+      document.head.appendChild(createStyle(`
+        .inner {
+          --x: red;
+          --y: green;
+          --z: 28px;
+          padding: var(--z);
+          background: red;
+        }
+      `));
+
+      document.body.appendChild(
+        <div class="outer">
+          <div class="inbetween">
+            <div class="inner">Background should be red with 28px padding.</div>
+          </div>
+        </div>
+      );
+
+      await snapshot();
+    });
+
+    it('border', async () => {
+      document.head.appendChild(createStyle(`
+        .inner {
+          --x: 4px;
+          --y: solid;
+          --z: green;
+          border: var(--x) var(--y) var(--z);
+          background: red;
+        }
+      `));
+
+      document.body.appendChild(
+        <div class="outer">
+          <div class="inbetween">
+            <div class="inner">Background should be red with 4px green solid border.</div>
+          </div>
+        </div>
+      );
+
+      await snapshot();
+    });
+  });
+
+  function createStyle(text) {
+    const style = document.createElement('style');
+    style.appendChild(document.createTextNode(text));
+    return style;
+  }
+});

kraken/lib/css.dart

@@ -42,6 +42,7 @@ export 'src/css/object_fit.dart';
 export 'src/css/object_position.dart';
 export 'src/css/sliver.dart';
 export 'src/css/value.dart';
+export 'src/css/variable.dart';
 export 'src/css/keywords.dart';
 
 // CSS Values
@@ -56,3 +57,4 @@ export 'src/css/values/position.dart';
 export 'src/css/values/time.dart';
 export 'src/css/values/percentage.dart';
 export 'src/css/values/textual.dart';
+export 'src/css/values/variable.dart';

kraken/lib/src/bridge/to_native.dart

@@ -367,8 +367,8 @@ List<UICommand> readNativeUICommandToDart(Pointer<Uint64> nativeCommandItems, in
     // +-------+-------+
     // |  id   | type  |
     // +-------+-------+
-    int id = typeIdCombine >> 32;
-    int type = typeIdCombine ^ (id << 32);
+    int id = (typeIdCombine >> 32).toSigned(32);
+    int type = (typeIdCombine ^ (id << 32)).toSigned(32);
 
     command.type = UICommandType.values[type];
     command.id = id;
@@ -383,8 +383,8 @@ List<UICommand> readNativeUICommandToDart(Pointer<Uint64> nativeCommandItems, in
     if (args01And02Length == 0) {
       args01Length = args02Length = 0;
     } else {
-      args02Length = args01And02Length >> 32;
-      args01Length = args01And02Length ^ (args02Length << 32);
+      args02Length = (args01And02Length >> 32).toSigned(32);
+      args01Length = (args01And02Length ^ (args02Length << 32)).toSigned(32);
     }
 
     int args01StringMemory = rawMemory[i + args01StringMemOffset];

kraken/lib/src/css/animation.dart

@@ -501,7 +501,7 @@ class KeyframeEffect extends AnimationEffect {
 
         if (left == right) continue;
 
-        List? handlers = CSSTranstionHandlers[property];
+        List? handlers = CSSTransitionHandlers[property];
         handlers ??= [_defaultParse, _defaultLerp];
         Function parseProperty = handlers[0];