react-native-web-internals/dist/cjs/StyleSheet/__tests__/compiler-createReactDOMStyle-test.native.js

React Native for Web

"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf, __hasOwnProp = Object.prototype.hasOwnProperty;
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from == "object" || typeof from == "function")
    for (let key of __getOwnPropNames(from))
      !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: !0 }) : target,
  mod
));
var import_createReactDOMStyle = __toESM(require("../compiler/createReactDOMStyle")), reactNativeStyle = {
  boxShadow: "1px 1px 1px 1px #000",
  borderWidthLeft: 2,
  borderWidth: 1,
  borderWidthRight: 3,
  display: "flex",
  marginVertical: 0,
  opacity: 0,
  shadowColor: "red",
  shadowOffset: {
    width: 1,
    height: 2
  },
  resizeMode: "contain"
};
describe("compiler/createReactDOMStyle", function() {
  test("noop on DOM styles", function() {
    var firstStyle = (0, import_createReactDOMStyle.default)(reactNativeStyle), secondStyle = (0, import_createReactDOMStyle.default)(firstStyle);
    expect(firstStyle).toEqual(secondStyle);
  }), test("shortform -> longform for inline styles", function() {
    var style = {
      borderStyle: "solid",
      boxSizing: "border-box",
      borderBottomColor: "white",
      borderBottomWidth: 1,
      borderWidth: 0,
      marginTop: 50,
      marginVertical: 25,
      margin: 10,
      overflow: "hidden",
      overscrollBehavior: "contain",
      paddingLeft: 50,
      paddingHorizontal: 25,
      padding: 10
    };
    expect((0, import_createReactDOMStyle.default)(style, !0)).toMatchInlineSnapshot(`
      {
        "borderBottomColor": "rgba(255,255,255,1.00)",
        "borderBottomStyle": "solid",
        "borderBottomWidth": "1px",
        "borderLeftStyle": "solid",
        "borderLeftWidth": "0px",
        "borderRightStyle": "solid",
        "borderRightWidth": "0px",
        "borderTopStyle": "solid",
        "borderTopWidth": "0px",
        "boxSizing": "border-box",
        "marginBottom": "25px",
        "marginLeft": "10px",
        "marginRight": "10px",
        "marginTop": "50px",
        "overflowX": "hidden",
        "overflowY": "hidden",
        "overscrollBehaviorX": "contain",
        "overscrollBehaviorY": "contain",
        "paddingBottom": "10px",
        "paddingLeft": "50px",
        "paddingRight": "25px",
        "paddingTop": "10px",
      }
    `);
  }), test("aspectRatio", function() {
    expect((0, import_createReactDOMStyle.default)({
      aspectRatio: 9 / 16
    })).toEqual({
      aspectRatio: "0.5625"
    });
  }), describe("flexbox styles", function() {
    test("flex: -1", function() {
      expect((0, import_createReactDOMStyle.default)({
        flex: -1
      })).toEqual({
        flexGrow: 0,
        flexShrink: 1,
        flexBasis: "auto"
      });
    }), test("flex: 0", function() {
      expect((0, import_createReactDOMStyle.default)({
        flex: 0
      })).toEqual({
        flex: 0
      });
    }), test("flex: 1", function() {
      expect((0, import_createReactDOMStyle.default)({
        flex: 1
      })).toEqual({
        flex: 1
      });
    }), test("flex: 10", function() {
      expect((0, import_createReactDOMStyle.default)({
        flex: 10
      })).toEqual({
        flex: 10
      });
    }), test("flexBasis overrides", function() {
      expect((0, import_createReactDOMStyle.default)({
        flexBasis: "25%"
      })).toEqual({
        flexBasis: "25%"
      }), expect((0, import_createReactDOMStyle.default)({
        flex: 1,
        flexBasis: "25%"
      })).toEqual({
        flex: 1,
        flexBasis: "25%"
      });
    }), test("flexShrink overrides", function() {
      expect((0, import_createReactDOMStyle.default)({
        flexShrink: 1
      })).toEqual({
        flexShrink: 1
      }), expect((0, import_createReactDOMStyle.default)({
        flex: 1,
        flexShrink: 2
      })).toEqual({
        flex: 1,
        flexShrink: 2
      });
    });
  }), describe("fontFamily", function() {
    test("general case", function() {
      expect((0, import_createReactDOMStyle.default)({
        fontFamily: "Georgia, Times, serif"
      })).toMatchInlineSnapshot(`
        {
          "fontFamily": "Georgia, Times, serif",
        }
      `);
    }), test('"monospace"', function() {
      expect((0, import_createReactDOMStyle.default)({
        fontFamily: "monospace"
      })).toMatchInlineSnapshot(`
        {
          "fontFamily": "monospace,monospace",
        }
      `);
    }), test('"System"', function() {
      expect((0, import_createReactDOMStyle.default)({
        fontFamily: "System"
      })).toMatchInlineSnapshot(`
        {
          "fontFamily": "-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif",
        }
      `), expect((0, import_createReactDOMStyle.default)({
        font: "14px System"
      })).toMatchInlineSnapshot(`
        {
          "font": "14px -apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif",
        }
      `);
    }), test('"Noto, System"', function() {
      expect((0, import_createReactDOMStyle.default)({
        fontFamily: "Noto, System"
      })).toMatchInlineSnapshot(`
        {
          "fontFamily": "Noto,-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif",
        }
      `), expect((0, import_createReactDOMStyle.default)({
        font: "14px Noto, System"
      })).toMatchInlineSnapshot(`
        {
          "font": "14px Noto, -apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif",
        }
      `);
    }), test('"Noto, BlinkMacSystemFont"', function() {
      expect((0, import_createReactDOMStyle.default)({
        fontFamily: "Noto, BlinkMacSystemFont"
      })).toMatchInlineSnapshot(`
        {
          "fontFamily": "Noto,BlinkMacSystemFont",
        }
      `);
    });
  }), test("fontVariant", function() {
    expect((0, import_createReactDOMStyle.default)({
      fontVariant: [
        "common-ligatures",
        "small-caps"
      ]
    })).toEqual({
      fontVariant: "common-ligatures small-caps"
    });
  }), test("textAlignVertical", function() {
    expect((0, import_createReactDOMStyle.default)({
      textAlignVertical: "center"
    })).toEqual({
      verticalAlign: "middle"
    });
  }), describe("transform", function() {
    test("string", function() {
      var transform = "perspective(50px) scaleX(20) translateX(20px) rotate(20deg)", style = {
        transform
      }, resolved = (0, import_createReactDOMStyle.default)(style);
      expect(resolved).toEqual({
        transform
      });
    }), test("array", function() {
      var style = {
        transform: [
          {
            perspective: 50
          },
          {
            scaleX: 20
          },
          {
            translateX: 20
          },
          {
            rotate: "20deg"
          },
          {
            matrix: [
              1,
              2,
              3,
              4,
              5,
              6
            ]
          },
          {
            matrix3d: [
              1,
              1,
              1,
              1,
              2,
              2,
              2,
              2,
              3,
              3,
              3,
              3,
              4,
              4,
              4,
              4
            ]
          }
        ]
      }, resolved = (0, import_createReactDOMStyle.default)(style);
      expect(resolved).toEqual({
        transform: "perspective(50px) scaleX(20) translateX(20px) rotate(20deg) matrix(1,2,3,4,5,6) matrix3d(1,1,1,1,2,2,2,2,3,3,3,3,4,4,4,4)"
      });
    });
  });
});
//# sourceMappingURL=compiler-createReactDOMStyle-test.js.map