unifiedtransform
Version:
The RAW library to work with CSS transform strings
250 lines (230 loc) • 16.7 kB
JavaScript
const UnifiedTransform = require('unifiedtransform');
const assert = require('assert');
assert.v = function (a, b) {
if (a.length !== b.length) {
assert.equal(a.toString(), b.toString());
} else {
for (let i = 0; i < a.length; i++) {
if (Math.abs(a[i] - b[i]) > 0.005) {
assert.equal(a.toString(), b.toString());
break;
}
}
}
};
/*
function randomTransform() {
const transforms = [
function () {
const x = Math.random() * 1000 - 500;
const y = Math.random() * 1000 - 500;
return "translate(" + x + "px," + y + "px)";
},
function () {
const x = Math.random() * 1000 - 500;
const y = Math.random() * 1000 - 500;
return "translateX(" + x + "px)";
},
function () {
const x = Math.random() * 1000 - 500;
const y = Math.random() * 1000 - 500;
return "translateY(" + x + "px)";
},
function () {
const x = Math.random() * 2 - 1;
const y = Math.random() * 2 - 1;
return "scale(" + x + "," + y + ")";
},
function () {
const x = Math.random() + 1;
return "scale(" + x + ")";
},
function () {
const x = Math.random() * 360;
return "rotate(" + x + "deg)";
},
function () {
return "matrix(" + [Math.random(), Math.random(), Math.random(), Math.random(), Math.random(), Math.random()].join(",") + ")";
}
];
const n = Math.random() * 4 + 1;
let s = "";
for (let i = 0; i < n; i++) {
s += transforms[Math.random() * transforms.length | 0]();
}
return s;
}
let tests = [];
for (let i = 0; i < 50; i++) {
let s = randomTransform();
document.querySelector("h1").style.transform = s;
let t = window.getComputedStyle(document.querySelector("h1")).transform;
tests.push({ input: s, output: t })
}
JSON.stringify(tests);
*/
const tests = [{
"input": "translate(104.4173684517873px,174.15394529822527px)scale(1.0479738713479634)scale(1.885468512896281)scale(1.7751077036200529,1.4039650164536581)translate(-241.39259385286692px,-221.30715485791552px)",
"output": "matrix(3.50747, 0, 0, 2.77412, -742.261, -439.78)"
}, {
"input": "translateY(-404.9595512620463px)translate(-81.22187544825385px,455.2874056776584px)matrix(0.5731544071149695,0.7464516075777119,0.9270277921985717,0.4688645798040132,0.46528361844442134,0.8968286414416995)",
"output": "matrix(0.573154, 0.746452, 0.927028, 0.468865, -80.7566, 51.2247)"
}, {
"input": "scale(1.623979236669101,1.8575427761449952)scale(1.6296480855937379,1.5599982305816495)matrix(0.8454697271979952,0.4137778941132786,0.43647192331475737,0.26284805178107074,0.7431441036901167,0.5345101904265861)translate(-67.55245715426827px,448.58760427903735px)scale(1.3581426423969747)",
"output": "matrix(3.03891, 1.62845, 1.56883, 1.03446, 368.992, 262.228)"
}, {
"input": "translateX(371.64599551562776px)rotate(151.58206762386874deg)scale(1.7961706912270445,1.6587203848290666)",
"output": "matrix(-1.57973, 0.854797, -0.789384, -1.45884, 371.646, 0)"
}, {
"input": "translate(-273.30558207303346px,325.48248236252505px)scale(1.6799317496493769)scale(1.9420109768803622,1.3477837024515738)translate(-74.54754227591229px,84.23093176281031px)",
"output": "matrix(3.26245, 0, 0, 2.26418, -516.513, 516.197)"
}, {
"input": "scale(1.199681294160307)translate(-170.62312390144797px,168.49755091190843px)scale(1.9522584633736682)rotate(159.87670483776702deg)",
"output": "matrix(-2.19911, 0.805775, -0.805775, -2.19911, -204.693, 202.143)"
}, {
"input": "scale(1.6039592341038955,1.6094421634131992)translateX(-276.78077672411683px)matrix(0.36851316429991976,0.043824497399743256,0.8358202579375862,0.06699392939964888,0.48443576361259133,0.19426791212530392)matrix(0.4327859913899992,0.6773387750841604,0.7882691670117838,0.5300016268230177,0.7431652472043391,0.6143194011713837)",
"output": "matrix(1.16387, 0.103558, 1.17646, 0.112745, -441.905, 0.431318)"
}, {
"input": "translateY(-402.8792805633208px)translateX(266.02807651005685px)matrix(0.9093713633764631,0.10102117910128716,0.9923409293887706,0.9339598458046081,0.7421657652074307,0.07689645945760448)translateY(131.712314354991px)translate(407.1266610079565px,-387.08163613697707px)",
"output": "matrix(0.909371, 0.101021, 0.992341, 0.93396, 383.586, -600.179)"
}, {
"input": "translateY(-161.5099340215662px)matrix(0.4761352828650609,0.7213118541578112,0.9815121833114933,0.25565173994572654,0.5621247542170589,0.5891392642020019)translateX(-337.697983820833px)",
"output": "matrix(0.476135, 0.721312, 0.981512, 0.255652, -160.228, -404.506)"
}, {
"input": "rotate(168.57510462657675deg)scale(1.039587141590478,1.5731024622988545)scale(1.5530801540053238,1.69134494315833)",
"output": "matrix(-1.58257, 0.319818, -0.527032, -2.60794, 0, 0)"
}, {
"input": "matrix(0.8568569860185966,0.07733531921034076,0.37684710739936356,0.4767065093555789,0.23423864018582297,0.8694201258114276)rotate(130.4463081311058deg)matrix(0.723043136558928,0.0010568636204220105,0.33343063855125377,0.351758248671163,0.460439381437457,0.542854385994533)translateX(367.75792433553113px)",
"output": "matrix(-0.195509, 0.225642, -0.405092, -0.0252517, -72.2764, 83.795)"
}, {
"input": "translateX(-225.9470049389567px)translateY(-232.17845070087282px)scale(1.7886076316071995)",
"output": "matrix(1.78861, 0, 0, 1.78861, -225.947, -232.178)"
}, {
"input": "translate(-330.1975895866283px,-19.81195111553302px)translateX(-231.68753674881071px)matrix(0.23355259851444954,0.7282227808792254,0.2940740338217147,0.38059765858998285,0.20217777504751333,0.12180689606180417)translateX(241.82111779077343px)scale(1.2415946635684385,1.0698295076381554)",
"output": "matrix(0.289978, 0.904158, 0.314609, 0.407175, -505.205, 156.41)"
}, {
"input": "matrix(0.7205960672442666,0.8065705143217985,0.6706510622396913,0.5536719450791243,0.3276037526365887,0.10172495451557184)translate(217.68291719498495px,101.12824048236837px)scale(1.1144335495239355)translateX(460.9803921976037px)matrix(0.4032548620054133,0.08235360336963327,0.31950344326530833,0.5254196833668596,0.8827601926020929,0.2743370687961868)",
"output": "matrix(0.385387, 0.413288, 0.649276, 0.611392, 596.118, 646.994)"
}, {
"input": "rotate(54.437480330958deg)scale(1.1096128957841935)rotate(152.22251420377623deg)matrix(0.12602910103298837,0.9018295414344253,0.20381783819215737,0.327750504519305,0.3203089489650599,0.2752384266036001)",
"output": "matrix(0.324025, -0.957041, -0.0389351, -0.426488, -0.180597, -0.432413)"
}, {
"input": "scale(1.5331281674032018)matrix(0.5670205395878116,0.5421590188444034,0.3715586983541479,0.5348403888050386,0.28686363930088143,0.6283671117132852)",
"output": "matrix(0.869315, 0.831199, 0.569647, 0.819979, 0.439799, 0.963367)"
}, {
"input": "translateY(-227.52049926174675px)rotate(230.28874264715333deg)rotate(193.4831388540767deg)scale(1.1804768864091915,1.3049231926234657)",
"output": "matrix(0.521707, 1.05894, -1.17057, 0.576706, 0, -227.52)"
}, {
"input": "translateY(-113.99702019219228px)scale(1.3713953147670406,1.5447816089380317)matrix(0.3617171161639998,0.708074741200291,0.640763080599559,0.5972294256378197,0.12272109255664243,0.042984074243374915)scale(1.3791310726295776)",
"output": "matrix(0.684128, 1.50852, 1.2119, 1.27237, 0.168299, -113.931)"
}, {
"input": "translateX(263.5005500750292px)rotate(336.52577728642956deg)scale(1.9338533456947589)",
"output": "matrix(1.77381, -0.770324, 0.770324, 1.77381, 263.501, 0)"
}, {
"input": "matrix(0.9589996336188933,0.011345637567394373,0.37352975130611665,0.5370462928037396,0.29395230004665907,0.6703622833139582)scale(1.846762057265923,1.4630934198650842)scale(1.6300023144206797)rotate(292.1853320727926deg)scale(1.2770269035582495,1.2311906728922797)",
"output": "matrix(0.338677, -1.49803, 3.70522, 0.63437, 0.293952, 0.670362)"
}, {
"input": "matrix(0.2463492903362694,0.30084002567452006,0.3731565687711229,0.5986847336307906,0.6352950802075181,0.5721453025941323)scale(1.645835723144007,1.4551141635831817)matrix(0.4789600286767348,0.060066012978094774,0.9745097814668515,0.9579640641538583,0.17193261597827458,0.437190218256581)rotate(170.00564586207102deg)",
"output": "matrix(-0.0645205, -0.056508, -0.94075, -1.3473, 0.942393, 1.03814)"
}, {
"input": "matrix(0.9389529451228436,0.5575367599923828,0.18072680413320819,0.04262729459043957,0.20988095602538337,0.49815109410990255)scale(1.5972297880468336,1.4493143108797741)scale(1.0615392772256775)",
"output": "matrix(1.59202, 0.945316, 0.278049, 0.0655823, 0.209881, 0.498151)"
}, {
"input": "scale(1.0429377247185174,1.9734236588713359)translateY(-362.9761228254369px)",
"output": "matrix(1.04294, 0, 0, 1.97342, 0, -716.306)"
}, {
"input": "translateY(80.2535311703632px)translateX(447.5442374537429px)scale(1.065914336568952,1.4588267842403109)translate(-150.14813233380585px,488.4237821497517px)",
"output": "matrix(1.06591, 0, 0, 1.45883, 287.499, 792.779)"
}, {
"input": "matrix(0.508591217738412,0.9466659227676699,0.2783115167784336,0.8732406398834676,0.06690460889373462,0.24929057876213845)scale(1.8738104836752651,1.462788800032978)matrix(0.6282997902141405,0.23798328632540922,0.33973441030799867,0.8461635944162613,0.5554666520723681,0.23128383494711202)",
"output": "matrix(0.695658, 1.41852, 0.668251, 1.68351, 0.690425, 1.53005)"
}, {
"input": "translateX(-259.5211917383058px)scale(1.2585900752722707)matrix(0.34054403894783647,0.2465561253125832,0.28883816383826333,0.3205121927352095,0.48527817790346117,0.1542394204480897)",
"output": "matrix(0.428605, 0.310313, 0.363529, 0.403393, -258.91, 0.194124)"
}, {
"input": "translate(205.6579780081513px,476.4906492171525px)translate(-10.144520572735075px,140.07947492654478px)translateX(-193.58007226584004px)translateY(-155.94093023746194px)",
"output": "matrix(1, 0, 0, 1, 1.93338, 460.629)"
}, {
"input": "translate(347.22864854145087px,-399.66239946883707px)scale(1.0066338371980426)scale(1.0728365936162698)scale(1.0205159901939003,1.2148308442783955)translateX(325.1665543261905px)",
"output": "matrix(1.10211, 0, 0, 1.31196, 705.598, -399.662)"
}, {
"input": "translateX(226.31204583656347px)rotate(331.70276788684595deg)translateY(-385.35707132796506px)translate(-334.03609612138575px,63.976367606817234px)",
"output": "matrix(0.8805, -0.474046, 0.474046, 0.8805, -220.156, -124.627)"
}, {
"input": "translateX(186.68867678314723px)translateX(-174.2233855001316px)translateY(306.3022595268319px)matrix(0.0942963047321006,0.854599424080625,0.7981913158199561,0.3845381088910831,0.12179430622731924,0.6184798690141762)",
"output": "matrix(0.0942963, 0.854599, 0.798191, 0.384538, 12.5871, 306.921)"
}, {
"input": "rotate(195.83992134821924deg)translateY(-246.68496028450937px)scale(1.0707616927904666,1.9115204120085356)translate(-367.3913741486849px,408.1266851763594px)",
"output": "matrix(-1.0301, -0.292265, 0.521751, -1.83894, 524.058, -405.825)"
}, {
"input": "rotate(193.38349972722614deg)matrix(0.3879552907620707,0.005545023050091968,0.921123211251865,0.47603852463363205,0.7333299115577563,0.8054118213643906)translateY(-108.42409606298321px)",
"output": "matrix(-0.376136, -0.0951936, -0.78592, -0.676321, 84.6857, 72.3762)"
}, {
"input": "scale(1.6995580439377125,1.8490218018215285)scale(1.4743286560207265,1.5611638419292402)translate(-438.7147948751524px,397.68420426158775px)matrix(0.4176194813679466,0.09964571521010468,0.12806157192222112,0.6050993966292919,0.4486397248497216,0.118918175948872)translate(-129.19314862337086px,-103.34322875171284px)",
"output": "matrix(1.04643, 0.28764, 0.320885, 1.7467, -1266.52, 930.638)"
}, {
"input": "matrix(0.8815195580140924,0.38780362547486935,0.3173479828140837,0.10760321186050636,0.023454225024410302,0.7008005003105873)translateY(301.3590731943383px)",
"output": "matrix(0.88152, 0.387804, 0.317348, 0.107603, 95.6591, 33.128)"
}, {
"input": "translateX(-113.19358470644181px)translateY(265.2459354155543px)",
"output": "matrix(1, 0, 0, 1, -113.194, 265.246)"
}, {
"input": "rotate(111.4824431166599deg)matrix(0.43950658881547633,0.11004421114761653,0.990171023563938,0.4421282487440117,0.6431349706557539,0.5446166241904047)rotate(102.04277905148004deg)translateY(-440.6476990517947px)scale(1.6994221594709664,1.9828390784512053)",
"output": "matrix(-1.19308, 1.13153, 0.830915, -1.02913, -185.397, 229.103)"
}, {
"input": "scale(1.6665145297855588,1.025447942406149)translateX(350.0760697238983px)translate(-264.7373234124475px,244.3478863873379px)rotate(198.0809872450882deg)translateY(221.55300667384495px)",
"output": "matrix(-1.58422, -0.318259, 0.517221, -0.97481, 256.81, 34.5939)"
}, {
"input": "scale(1.8851078572219102)translateX(2.199452082336961px)matrix(0.19120892723008343,0.09042410443397952,0.3580124957729738,0.8365634207905197,0.2627292642388186,0.4962370294999079)matrix(0.3012901307956053,0.7632173209917159,0.954779920254393,0.13462198780471168,0.7272033003163685,0.634874132855149)",
"output": "matrix(0.623689, 1.25496, 0.435005, 0.375052, 5.33207, 2.06062)"
}, {
"input": "translateY(-100.49115201411672px)translate(304.9999287129142px,496.56713885356px)",
"output": "matrix(1, 0, 0, 1, 305, 396.076)"
}, {
"input": "translateX(490.6766449194639px)translate(59.022451948864955px,-198.48420623862074px)scale(1.0556009042585242,1.0755347529551578)translateX(-148.53023751779483px)",
"output": "matrix(1.0556, 0, 0, 1.07553, 392.91, -198.484)"
}, {
"input": "scale(1.2765551125305221,1.3979361853663395)rotate(202.21942922235053deg)translateY(269.9999998040747px)scale(1.4921193670146056)",
"output": "matrix(-1.76333, -0.788788, 0.720299, -1.93099, 130.339, -349.415)"
}, {
"input": "scale(1.0366736548959483,1.7579164142224322)rotate(134.62192984243967deg)scale(1.4013636779346479)scale(1.715896087606767,1.7161088530560524)",
"output": "matrix(-1.75099, 3.00865, -1.77447, -2.96957, 0, 0)"
}, {
"input": "rotate(239.86733644463132deg)translateY(477.19910216466883px)translateY(393.822256834123px)",
"output": "matrix(-0.502004, -0.864865, 0.864865, -0.502004, 753.316, -437.256)"
}, {
"input": "scale(1.6979120204889917)scale(1.4463554253670363,1.33163754241824)translateY(198.23724535638826px)",
"output": "matrix(2.45578, 0, 0, 2.261, 0, 448.215)"
}, {
"input": "matrix(0.7168078835878997,0.1051706835328774,0.18239516199885664,0.5683215433393454,0.39723656815091757,0.7033999268290927)translateX(362.2238696219631px)translate(23.556097866913547px,463.23268613065477px)",
"output": "matrix(0.716808, 0.105171, 0.182395, 0.568322, 361.419, 304.541)"
}, {
"input": "translateY(383.53414151230925px)rotate(230.20881668206357deg)",
"output": "matrix(-0.639991, -0.768382, 0.768382, -0.639991, 0, 383.534)"
}, {
"input": "translate(-226.67826060947237px,397.1140046995731px)scale(1.3019571504802945,1.1343328863280002)translateX(-315.50667932547947px)translateY(-435.831527728489px)",
"output": "matrix(1.30196, 0, 0, 1.13433, -637.454, -97.264)"
}, {
"input": "translate(-11.798783133072163px,87.02599318260957px)rotate(93.46322894826105deg)translate(-97.5220015125102px,225.79501002718393px)translateY(-496.7494133473327px)translate(384.9715381995003px,330.23418672827586px)",
"output": "matrix(-0.0604079, 0.998174, -0.998174, -0.0604079, -88.3345, 370.37)"
}, {
"input": "scale(1.5722762214633372)rotate(231.15757772973993deg)scale(1.6237050626996221,1.7788602282852486)scale(1.8105375169410576,1.2125082680670962)scale(1.034313165350199,1.2660441119182193)",
"output": "matrix(-2.99839, -3.7236, 3.34404, -2.69276, 0, 0)"
}, {
"input": "scale(1.3151917202044554)scale(1.015731784767992,1.4106178279716612)",
"output": "matrix(1.33588, 0, 0, 1.85523, 0, 0)"
}, {
"input": "rotate(-10 50 100) translate(-36 45.5) skewX(40) scale(1 0.5)",
"output": "matrix(0.984808, -0.173648, 0.5, 0.41955, -44.1573, 61.2617)"
}];
describe("UnifiedTransform", function () {
for (let t of tests) {
(function (t) {
it("should work with " + t.output, function () {
assert.v(
new UnifiedTransform().transform(t.input).matrix,
new UnifiedTransform().transform(t.output).matrix)
});
})(t)
}
});