Merge pull request #475 from openkraken/feat/rem-em

feat: support rem and em unit

integration_tests/pubspec.yaml

@@ -30,7 +30,7 @@ dependencies:
   kraken_video_player: ^0.4.0
   kraken_websocket: ^0.2.0
   kraken_animation_player: ^0.2.0
-  kraken_webview: ^0.6.0
+  kraken_webview: ^0.7.0
 
 dev_dependencies:
   test: ^1.16.8

integration_tests/specs/css/css-flexbox/align-items.ts

@@ -165,7 +165,8 @@ describe('align-items', () => {
           height: '100px',
           width: '300px',
           color: 'yellow',
-          font: '20px/1em Ahem',
+          // @TODO: disable line-height cause line-height rule for inline level element differs from browser.
+          font: '20px Ahem',
           'box-sizing': 'border-box',
         },
       },

integration_tests/specs/css/css-position/position-sticky.ts

@@ -2906,6 +2906,41 @@ describe('position-sticky', () => {
     await snapshot();
   });
 
+  it('transforms-translate works with position sticky element', async (done) => {
+    let sticky;
+    let scroller;
+    scroller = createElementWithStyle(
+      'div',
+      {
+        position: 'relative',
+        width: '100px',
+        height: '200px',
+        overflow: 'scroll',
+        border: '1px solid rgb(0, 0, 0)',
+      },
+      [
+        (sticky = createElementWithStyle('div', {
+          display: 'flex',
+          top: '50px',
+          position: 'sticky',
+          height: '100px',
+          width: '100px',
+          'background-color': 'green',
+        })),
+      ]
+    );
+
+    BODY.appendChild(scroller);
+
+    await snapshot();
+
+    requestAnimationFrame(async () => {
+      sticky.style.transform = 'translateY(-100px)';
+      await snapshot();
+      done();
+    });
+  });
+
   it('should work with image', async () => {
     let div;
     div = createElement(

integration_tests/specs/css/css-values/em.ts

@@ -0,0 +1,255 @@
+describe("em", () => {
+  it("should works with style of font size", async () => {
+    let div;
+    let div2;
+    let div3;
+    div = createElement(
+      "div",
+      {
+        style: {
+          position: "relative",
+          width: "200px",
+          height: "200px",
+          backgroundColor: "green"
+        }
+      },
+      [
+        (div2 = createElement(
+          "div",
+          {
+            style: {
+              width: "150px",
+              height: "150px",
+              backgroundColor: "yellow"
+            }
+          },
+          [
+            (div3 = createElement(
+              "div",
+              {
+                style: {
+                  fontSize: "2em",
+                  width: "100px",
+                  height: "100px",
+                  backgroundColor: "blue"
+                }
+              },
+              [createText("font-size")]
+            ))
+          ]
+        ))
+      ]
+    );
+
+    BODY.appendChild(div);
+
+    await snapshot();
+  });
+
+  it("should works with style other than font size", async () => {
+    let div;
+    let div2;
+    let div3;
+    div = createElement(
+      "div",
+      {
+        style: {
+          position: "relative",
+          width: "200px",
+          height: "200px",
+          backgroundColor: "green"
+        }
+      },
+      [
+        (div2 = createElement(
+          "div",
+          {
+            style: {
+              width: "150px",
+              height: "150px",
+              backgroundColor: "yellow"
+            }
+          },
+          [
+            (div3 = createElement(
+              "div",
+              {
+                style: {
+                  width: "8em",
+                  height: "100px",
+                  backgroundColor: "blue"
+                }
+              },
+              [createText("font-size")]
+            ))
+          ]
+        ))
+      ]
+    );
+
+    BODY.appendChild(div);
+
+    await snapshot();
+  }); 
+
+  it("should works with font size of own change", async (done) => {
+    let div;
+    let div2;
+    let div3;
+    div = createElement(
+      "div",
+      {
+        style: {
+          position: "relative",
+          width: "200px",
+          height: "200px",
+          backgroundColor: "green"
+        }
+      },
+      [
+        (div2 = createElement(
+          "div",
+          {
+            style: {
+              width: "150px",
+              height: "150px",
+              backgroundColor: "yellow"
+            }
+          },
+          [
+            (div3 = createElement(
+              "div",
+              {
+                style: {
+                  width: "5em",
+                  height: "100px",
+                  backgroundColor: "blue"
+                }
+              },
+              [createText("font-size")]
+            ))
+          ]
+        ))
+      ]
+    );
+
+    BODY.appendChild(div);
+
+    await snapshot();
+
+    window.requestAnimationFrame(async () => {
+      div3.style.fontSize = '30px';
+      await snapshot();
+      done();
+    })
+
+  }); 
+
+  it("should works with font size of parent change when own element has no font size", async (done) => {
+    let div;
+    let div2;
+    let div3;
+    div = createElement(
+      "div",
+      {
+        style: {
+          position: "relative",
+          width: "200px",
+          height: "200px",
+          backgroundColor: "green"
+        }
+      },
+      [
+        (div2 = createElement(
+          "div",
+          {
+            style: {
+              width: "150px",
+              height: "150px",
+              backgroundColor: "yellow"
+            }
+          },
+          [
+            (div3 = createElement(
+              "div",
+              {
+                style: {
+                  width: "5em",
+                  height: "100px",
+                  backgroundColor: "blue"
+                }
+              },
+              [createText("font-size")]
+            ))
+          ]
+        ))
+      ]
+    );
+
+    BODY.appendChild(div);
+
+    await snapshot();
+
+    window.requestAnimationFrame(async () => {
+      div.style.fontSize = '30px';
+      await snapshot();
+      done();
+    })
+
+  }); 
+
+  it("should works with font size of parent change when own element has font size", async (done) => {
+    let div;
+    let div2;
+    let div3;
+    div = createElement(
+      "div",
+      {
+        style: {
+          position: "relative",
+          width: "200px",
+          height: "200px",
+          backgroundColor: "green"
+        }
+      },
+      [
+        (div2 = createElement(
+          "div",
+          {
+            style: {
+              width: "150px",
+              height: "150px",
+              backgroundColor: "yellow"
+            }
+          },
+          [
+            (div3 = createElement(
+              "div",
+              {
+                style: {
+                  fontSize: '20px',
+                  width: "5em",
+                  height: "100px",
+                  backgroundColor: "blue"
+                }
+              },
+              [createText("font-size")]
+            ))
+          ]
+        ))
+      ]
+    );
+
+    BODY.appendChild(div);
+
+    await snapshot();
+
+    window.requestAnimationFrame(async () => {
+      div.style.fontSize = '30px';
+      await snapshot();
+      done();
+    })
+
+  }); 
+
+});