



<script src="/lib/lodash/dist/lodash.js"></script>
<script src="/lib/platform/platform.js"></script>
<script src="/lib/benchmark/benchmark.js"></script>
<script src="/js/testrunner.js?v=Rd75-VVkcFniJ1QX2nmMLEUUGEwdYLf0L4zaIB-OPUI"></script>


<div id="validation-html-preparation"></div>

<script type="text/javascript">
    pageController = new TestRunnerController();
</script>
<textarea id="benchmark_definition_json" style="display:none">
    {&quot;ScriptPreparationCode&quot;:&quot;const FALLBACK = Symbol(\u0027FALLBACK\u0027);\r\nconst DIFF_DEEP_VALUE = Symbol(\u0027DIFF_DEEP_VALUE\u0027);\r\nconst DIFF_VALUE = Symbol(\u0027DIFF_VALUE\u0027);\r\nconst DIFF_SAME = Symbol(\u0027DIFF_SAME\u0027);\r\nfunction valuesEqualsDeep(val1, val2) {\r\n    // truthiness differs\r\n    if ((val1 \u0026\u0026 !val2) || (!val1 \u0026\u0026 val2)) {\r\n        return {\r\n            type: DIFF_VALUE,\r\n            firstFalse: {\r\n                key: undefined,\r\n                targets: [val1, val2],\r\n                values: [val1, val2],\r\n            },\r\n        };\r\n    }\r\n    const constructor1 = (val1 ?? FALLBACK).constructor;\r\n    const constructor2 = (val2 ?? FALLBACK).constructor;\r\n    // constructor differs\r\n    if (constructor1 !== constructor2) {\r\n        return {\r\n            type: DIFF_DEEP_VALUE,\r\n            firstFalse: {\r\n                key: \u0027constructor\u0027,\r\n                targets: [val1, val2],\r\n                values: [constructor1, constructor2],\r\n            },\r\n        };\r\n    }\r\n    switch (constructor1) {\r\n        case Array: {\r\n            // some child differs\r\n            const arr1 = val1;\r\n            const arr2 = val2;\r\n            const maxLength = Math.max(arr1.length, arr2.length);\r\n            for (let i = 0; i \u003C maxLength; i\u002B\u002B) {\r\n                const result = valuesEqualsDeep(arr1[i], arr2[i]);\r\n                if (result.type === DIFF_DEEP_VALUE) {\r\n                    return result;\r\n                }\r\n                if (result.type === DIFF_VALUE) {\r\n                    return {\r\n                        type: DIFF_DEEP_VALUE,\r\n                        firstFalse: {\r\n                            key: i,\r\n                            targets: [arr1, arr2],\r\n                            values: [arr1[i], arr2[i]],\r\n                        },\r\n                    };\r\n                }\r\n            }\r\n            return { type: DIFF_SAME };\r\n        }\r\n        case Object: {\r\n            const keys1 = Object.keys(val1);\r\n            const keys2 = Object.keys(val2);\r\n            // keys length differs\r\n            if (keys1.length !== keys2.length) {\r\n                return {\r\n                    type: DIFF_DEEP_VALUE,\r\n                    firstFalse: {\r\n                        key: \u0027keys\u0027,\r\n                        targets: [val1, val2],\r\n                        values: [keys1, keys2],\r\n                    },\r\n                };\r\n            }\r\n            const obj1 = val1;\r\n            const obj2 = val2;\r\n            const keys = new Set([...keys1, ...keys2]);\r\n            for (const key of keys) {\r\n                // key existence differs\r\n                if (!(key in obj1 \u0026\u0026 key in obj2)) {\r\n                    return {\r\n                        type: DIFF_DEEP_VALUE,\r\n                        firstFalse: {\r\n                            key,\r\n                            targets: [obj1, obj2],\r\n                            values: [obj1[key], obj2[key]],\r\n                        },\r\n                    };\r\n                }\r\n                // some deep value differs\r\n                const result = valuesEqualsDeep(obj1[key], obj2[key]);\r\n                if (result.type === DIFF_DEEP_VALUE) {\r\n                    return result;\r\n                }\r\n                if (result.type === DIFF_VALUE) {\r\n                    return {\r\n                        type: DIFF_DEEP_VALUE,\r\n                        firstFalse: {\r\n                            key,\r\n                            targets: [obj1, obj2],\r\n                            values: [obj1[key], obj2[key]],\r\n                        },\r\n                    };\r\n                }\r\n            }\r\n            return { type: DIFF_SAME };\r\n        }\r\n        default: {\r\n            if (val1 !== val2) {\r\n                return {\r\n                    type: DIFF_VALUE,\r\n                    firstFalse: {\r\n                        key: undefined,\r\n                        targets: [undefined, undefined],\r\n                        values: [val1, val2],\r\n                    },\r\n                };\r\n            }\r\n        }\r\n    }\r\n    return { type: DIFF_SAME };\r\n}\r\n\r\nfunction deepClone(object) {\r\n    if (typeof object !== \u0027object\u0027 || !object)\r\n        return object;\r\n    switch (object.constructor) {\r\n        case Array:\r\n            return object.map(deepClone);\r\n        case Object: {\r\n            const clone = {};\r\n            const keys = Object.keys(object);\r\n            for (let i = 0; i \u003C keys.length; i\u002B\u002B) {\r\n                const key = keys[i];\r\n                clone[key] = deepClone(object[key]);\r\n            }\r\n            return clone;\r\n        }\r\n        default:\r\n            return object;\r\n    }\r\n}\r\n\r\nconst exampleObject = {\r\n  props: {\r\n    \u0027:root\u0027: {\r\n      id: \u0027$R3\u0027,\r\n      width: 374.5,\r\n      height: 100,\r\n      viewBox: \u00270 0 374.5 100\u0027,\r\n      skew: 0,\r\n      ratioToMillimeters: 0.1,\r\n    },\r\n    $outline: {\r\n      id: \u0027$outline\u0027,\r\n      value: 20,\r\n      broadcast: false,\r\n    },\r\n    $width: {\r\n      id: \u0027$width\u0027,\r\n      value: 374.5,\r\n      broadcast: true,\r\n    },\r\n    $height: {\r\n      id: \u0027$height\u0027,\r\n      value: 100,\r\n      broadcast: true,\r\n    },\r\n    $shapeMask: {\r\n      hidden: false,\r\n      id: \u0027$shapeMask\u0027,\r\n      x: 10,\r\n      y: 50,\r\n      r: 5,\r\n      width: 80,\r\n      height: 80,\r\n      origin: [0, 0.5],\r\n      shape: \u0027rect\u0027,\r\n    },\r\n    $background: {\r\n      hidden: false,\r\n      id: \u0027$background\u0027,\r\n      fill: \u0027black\u0027,\r\n      outline: 20,\r\n      rounded: true,\r\n      points:\r\n        \u002710,10 280.9179992675781,10 280.9179992675781,45.1870002746582 364.5,45.1870002746582 364.5,90 10,90\u0027,\r\n    },\r\n    $image: {\r\n      hidden: false,\r\n      id: \u0027$image\u0027,\r\n      mask: \u0027$shapeMask\u0027,\r\n      src: \u0027/images/stepan.jpg\u0027,\r\n      ratio: 1,\r\n      height: 80,\r\n      x: 50,\r\n      y: 50,\r\n      origin: [0.5, 0.5],\r\n      flip: \u0027\u0027,\r\n      attach: [0.5, 0.5],\r\n      fit: true,\r\n      rotate: 0,\r\n      scale: 1,\r\n    },\r\n    $text1: {\r\n      hidden: false,\r\n      id: \u0027$text1\u0027,\r\n      value: \u0027Skoda\u0027,\r\n      size: 38,\r\n      sizeFactor: 1,\r\n      x: 100,\r\n      y: 10,\r\n      origin: [0, 0],\r\n      length: 16,\r\n      fill: \u0027#ffffff\u0027,\r\n      font: \u0027bauer\u0027,\r\n    },\r\n    $text2: {\r\n      hidden: false,\r\n      id: \u0027$text2\u0027,\r\n      value: \u0027Kodiak\u0027,\r\n      size: 50,\r\n      sizeFactor: 1,\r\n      x: 100,\r\n      y: 90,\r\n      origin: [0, 1],\r\n      length: 32,\r\n      fill: \u0027#ffffff\u0027,\r\n      font: \u0027bauer\u0027,\r\n    },\r\n    $zr86xocz8if: {\r\n      id: \u0027$zr86xocz8if\u0027,\r\n      label: \u0027Velikost samolepky\u0027,\r\n    },\r\n    $vmybmb201n: {\r\n      id: \u0027$vmybmb201n\u0027,\r\n      label: \u0027Naklon\u011Bn\u00ED\u0027,\r\n    },\r\n    $iqxrp4hp34e: {\r\n      id: \u0027$iqxrp4hp34e\u0027,\r\n      label: \u0027Nastaveni ikony\u0027,\r\n    },\r\n    $vxk8upsqmvf: {\r\n      id: \u0027$vxk8upsqmvf\u0027,\r\n      target: \u0027$image\u0027,\r\n      label: \u0027Ikona\u0027,\r\n      prop: \u0027src\u0027,\r\n    },\r\n    $dm6lx4tzycd: {\r\n      id: \u0027$dm6lx4tzycd\u0027,\r\n      target: \u0027$image\u0027,\r\n      label: \u0027Rotace\u0027,\r\n    },\r\n    $30d447fwvzu: {\r\n      id: \u0027$30d447fwvzu\u0027,\r\n      target: \u0027$image\u0027,\r\n      label: \u0027Zv\u011Bt\u0161en\u00ED\u0027,\r\n    },\r\n    $0ni2n3xr7z: {\r\n      id: \u0027$0ni2n3xr7z\u0027,\r\n      target: \u0027$image\u0027,\r\n      label: \u0027Zarovn\u00E1n\u00ED\u0027,\r\n    },\r\n    $8wg7uiyvbw7: {\r\n      id: \u0027$8wg7uiyvbw7\u0027,\r\n      target: \u0027$image\u0027,\r\n      label: \u0027O\u0159\u00EDznut\u00ED\u0027,\r\n    },\r\n    $3hv104efbdp: {\r\n      id: \u0027$3hv104efbdp\u0027,\r\n      target: \u0027$image\u0027,\r\n      label: \u0027Oto\u010Den\u00ED\u0027,\r\n    },\r\n    $h2k2l96a2x: {\r\n      id: \u0027$h2k2l96a2x\u0027,\r\n      label: \u0027Nastaveni textu\u0027,\r\n    },\r\n    $d1bj9lmbsv8: {\r\n      id: \u0027$d1bj9lmbsv8\u0027,\r\n      target: \u0027$text1\u0027,\r\n      label: \u0027Pom\u011Br text\u016F\u0027,\r\n      min: 0.5,\r\n      max: 1.5,\r\n      step: 0.1,\r\n    },\r\n    $guepgvgmxtg: {\r\n      id: \u0027$guepgvgmxtg\u0027,\r\n      target: \u0027$text1\u0027,\r\n      label: \u0027Barva\u0027,\r\n    },\r\n    $oj3d5a71c2b: {\r\n      id: \u0027$oj3d5a71c2b\u0027,\r\n      target: \u0027$text1\u0027,\r\n      label: \u0027Font\u0027,\r\n      fonts: [\r\n        \u0027bauer\u0027,\r\n        \u0027ethnocentric\u0027,\r\n        \u0027skoda-pro\u0027,\r\n        \u0027skoda-pro-bold\u0027,\r\n        \u0027skoda-pro-extrabold\u0027,\r\n      ],\r\n    },\r\n    $szes01kqa0h: {\r\n      id: \u0027$szes01kqa0h\u0027,\r\n      target: \u0027$text1\u0027,\r\n      label: \u0027Text 1\u0027,\r\n    },\r\n    $cdr97wzatj8: {\r\n      id: \u0027$cdr97wzatj8\u0027,\r\n      target: \u0027$text2\u0027,\r\n      label: \u0027Text 2\u0027,\r\n    },\r\n  },\r\n  scope: {\r\n    $width: 374.5,\r\n    $height: 100,\r\n    $outline: 20,\r\n    $shapeMask: {\r\n      l: 10,\r\n      t: 10,\r\n      r: 90,\r\n      b: 90,\r\n      w: 80,\r\n      h: 80,\r\n      props: {\r\n        hidden: false,\r\n        id: \u0027$shapeMask\u0027,\r\n        x: 10,\r\n        y: 50,\r\n        r: 5,\r\n        width: 80,\r\n        height: 80,\r\n        origin: [0, 0.5],\r\n        shape: \u0027rect\u0027,\r\n      },\r\n    },\r\n    $background: {\r\n      l: 10,\r\n      t: 10,\r\n      r: 364.5,\r\n      b: 90,\r\n      w: 354.5,\r\n      h: 80,\r\n      props: {\r\n        hidden: false,\r\n        id: \u0027$background\u0027,\r\n        fill: \u0027black\u0027,\r\n        outline: 20,\r\n        rounded: true,\r\n        points:\r\n          \u002710,10 280.9179992675781,10 280.9179992675781,45.1870002746582 364.5,45.1870002746582 364.5,90 10,90\u0027,\r\n      },\r\n    },\r\n    $image: {\r\n      l: 10,\r\n      t: 10,\r\n      r: 90,\r\n      b: 90,\r\n      w: 80,\r\n      h: 80,\r\n      props: {\r\n        hidden: false,\r\n        id: \u0027$image\u0027,\r\n        mask: \u0027$shapeMask\u0027,\r\n        src: \u0027/images/stepan.jpg\u0027,\r\n        ratio: 1,\r\n        height: 80,\r\n        x: 50,\r\n        y: 50,\r\n        origin: [0.5, 0.5],\r\n        flip: \u0027\u0027,\r\n        attach: [0.5, 0.5],\r\n        fit: true,\r\n        rotate: 0,\r\n        scale: 1,\r\n      },\r\n    },\r\n    $text1: {\r\n      l: 100,\r\n      t: 10,\r\n      r: 280.9179992675781,\r\n      b: 40.32400131225586,\r\n      w: 180.91799926757812,\r\n      h: 30.32400131225586,\r\n      props: {\r\n        hidden: false,\r\n        id: \u0027$text1\u0027,\r\n        value: \u0027Skoda\u0027,\r\n        size: 38,\r\n        sizeFactor: 1,\r\n        x: 100,\r\n        y: 10,\r\n        origin: [0, 0],\r\n        length: 16,\r\n        fill: \u0027#ffffff\u0027,\r\n        font: \u0027bauer\u0027,\r\n      },\r\n    },\r\n    $text2: {\r\n      l: 100,\r\n      t: 50.04999923706055,\r\n      r: 364.5,\r\n      b: 90,\r\n      w: 264.5,\r\n      h: 39.95000076293945,\r\n      props: {\r\n        hidden: false,\r\n        id: \u0027$text2\u0027,\r\n        value: \u0027Kodiak\u0027,\r\n        size: 50,\r\n        sizeFactor: 1,\r\n        x: 100,\r\n        y: 90,\r\n        origin: [0, 1],\r\n        length: 32,\r\n        fill: \u0027#ffffff\u0027,\r\n        font: \u0027bauer\u0027,\r\n      },\r\n    },\r\n  },\r\n};\r\n\r\n\r\n\r\n&quot;,&quot;TestCases&quot;:[{&quot;Name&quot;:&quot;structuredClone \u002B valuesEqualsDeep&quot;,&quot;Code&quot;:&quot;const updatedObject = structuredClone(exampleObject);\r\n\r\nupdatedObject.props.$cdr97wzatj8.label = \u0060Text ${ Math.random() }\u0060;\r\n\r\nconst diff = valuesEqualsDeep(exampleObject, updatedObject);&quot;,&quot;IsDeferred&quot;:false},{&quot;Name&quot;:&quot;deepClone \u002B valuesEqualsDeep&quot;,&quot;Code&quot;:&quot;const updatedObject = deepClone(exampleObject);\r\n\r\nupdatedObject.props.$cdr97wzatj8.label = \u0060Text ${ Math.random() }\u0060;\r\n\r\nconst diff = valuesEqualsDeep(exampleObject, updatedObject);&quot;,&quot;IsDeferred&quot;:false},{&quot;Name&quot;:&quot;JSON \u002B valuesEqualsDeep&quot;,&quot;Code&quot;:&quot;const updatedObject = JSON.parse(JSON.stringify(exampleObject));\r\n\r\nupdatedObject.props.$cdr97wzatj8.label = \u0060Text ${ Math.random() }\u0060;\r\n\r\nconst diff = valuesEqualsDeep(exampleObject, updatedObject);&quot;,&quot;IsDeferred&quot;:false},{&quot;Name&quot;:&quot;structuredClone \u002B stringify&quot;,&quot;Code&quot;:&quot;const stringified = JSON.stringify(exampleObject);\r\nconst updatedObject = structuredClone(exampleObject);\r\n\r\nupdatedObject.props.$cdr97wzatj8.label = \u0060Text ${ Math.random() }\u0060;\r\n\r\nconst diff = stringified === JSON.stringify(updatedObject);&quot;,&quot;IsDeferred&quot;:false},{&quot;Name&quot;:&quot;deepClone \u002B stringify&quot;,&quot;Code&quot;:&quot;const stringified = JSON.stringify(exampleObject);\r\nconst updatedObject = deepClone(exampleObject);\r\n\r\nupdatedObject.props.$cdr97wzatj8.label = \u0060Text ${ Math.random() }\u0060;\r\n\r\nconst diff = stringified === JSON.stringify(updatedObject);&quot;,&quot;IsDeferred&quot;:false},{&quot;Name&quot;:&quot;JSON \u002B stringify&quot;,&quot;Code&quot;:&quot;const stringified = JSON.stringify(exampleObject);\r\nconst updatedObject = JSON.parse(stringified);\r\n\r\nupdatedObject.props.$cdr97wzatj8.label = \u0060Text ${ Math.random() }\u0060;\r\n\r\nconst diff = stringified === JSON.stringify(updatedObject);&quot;,&quot;IsDeferred&quot;:false}]}
</textarea>

<form style="display:none;" id="autoreload_form" action="/Benchmarks/TestFrameForValidationWithHtmlPrepCode?autostart=1" method="post">
    <input type="hidden" name="htmlPrepCode" id="htmlPrepCode">
</form>