More experiments.

This commit is contained in:
thednp 2016-09-22 20:58:25 +03:00
parent 4ff44da4f9
commit 1c2650a154
6 changed files with 147 additions and 159 deletions

View file

@ -1,169 +1,156 @@
(function (){
"use strict";
//returns browser prefix
function getPrefix() {
var div = document.createElement('div'), i = 0, pf = ['Moz', 'moz', 'Webkit', 'webkit', 'O', 'o', 'Ms', 'ms'], pl = pf.length,
s = ['MozTransform', 'mozTransform', 'WebkitTransform', 'webkitTransform', 'OTransform', 'oTransform', 'MsTransform', 'msTransform'];
for (i; i < pl; i++) { if (s[i] in div.style) { return pf[i]; } }
div = null;
}
// testing grounds
"use strict";
// generate a random number within a given range
function random(min, max) {
return Math.random() * (max - min) + min;
}
// generate a random number within a given range
function random(min, max) {
return Math.random() * (max - min) + min;
}
// vendor prefix handle
var prefix = getPrefix(), // prefix
prefixRequired = (!('transform' in document.getElementsByTagName('div')[0].style)) ? true : false, // is prefix required for transform
transformProperty = prefixRequired ? prefix + 'Transform' : 'transform';
// vendor prefix handle
var transformProperty = KUTE.property('transform');
// the variables
var container = document.getElementById('container'),
easing = 'easingQuadraticInOut',
tweens = [];
// the variables
var container = document.getElementById('container'), tws = [];
function createTest(count, property, engine, repeat) {
"use strict";
var update;
for (var i = 0; i < count; i++) {
var div = document.createElement('div'),
windowHeight = document.documentElement.clientHeight - 10,
left = random(-200, 200),
toLeft = random(-200, 200),
top = Math.round(Math.random() * parseInt(windowHeight)),
background = 'rgb('+parseInt(random(0, 255))+','+parseInt(random(0, 255))+','+parseInt(random(0, 255))+')',
fromValues, toValues, fn = i===count-1 ? complete : null;
repeat = parseInt(repeat);
div.className = 'line';
div.style.top = top + 'px';
div.style.backgroundColor = background;
if (property==='left') {
div.style.left = left + 'px';
fromValues = engine==="tween" ? { left: left, div: div } : { left: left };
toValues = { left: toLeft }
} else {
div.style[transformProperty] = 'translate3d('+left + 'px,0px,0px)';
if (engine==="kute"){
fromValues = { translateX: left }
toValues = { translateX: toLeft }
} else if ((engine==="gsap") || (engine==="tween")) {
fromValues = engine==='gsap' ? { x: left } : { x: left, div : div }
toValues = { x: toLeft }
}
}
container.appendChild(div);
function complete(){
document.getElementById('info').style.display = 'block';
container.innerHTML = '';
tws = [];
}
function updateLeft(){
this.div.style['left'] = this.left+'px';
}
function updateTranslate(){
this.div.style[transformProperty] = 'translate3d('+this.x + 'px,0px,0px)';
}
function buildObjects(){
var c = document.querySelector('[data-count]'), e = document.querySelector('[data-engine]'), r = document.querySelector('[data-repeat]'),
p = document.querySelector('[data-property]'), ct = c && document.querySelector('[data-count]').getAttribute('data-count'),
count = ct ? parseInt(ct) : null,
engine = e && document.querySelector('[data-engine]').getAttribute('data-engine') || null,
repeat = r && document.querySelector('[data-repeat]').getAttribute('data-repeat') || null,
property = p && document.querySelector('[data-property]').getAttribute('data-property') || null,
warning = document.createElement('DIV');
// perf test
if (engine==='kute') {
tweens.push(KUTE.fromTo(div, fromValues, toValues, { delay: 100, easing: easing, repeat: repeat, yoyo: true, duration: 1000, complete: fn }));
} else if (engine==='gsap') {
if (property==="left"){
TweenMax.fromTo(div, 1, fromValues, {left : toValues.left, repeat : repeat, yoyo : true, ease : Quad.easeInOut, onComplete: fn });
} else {
TweenMax.fromTo(div, 1, fromValues, { x:toValues.x, repeat : repeat, yoyo : true, ease : Quad.easeInOut, onComplete: fn });
warning.className = 'text-warning padding lead';
container.innerHTML = '';
if (count && engine && property && repeat) {
if (engine === 'gsap') {
document.getElementById('info').style.display = 'none';
}
} else if (engine==='tween') {
if (property==="left"){
update = updateLeft;
} else if (property==="translateX"){
update = updateTranslate;
}
tweens.push(new TWEEN.Tween(fromValues).to(toValues,1000).easing( TWEEN.Easing.Quadratic.InOut ).onComplete( complete ).onUpdate( update).repeat(repeat).yoyo(true));
}
}
if (engine==='tween') {
animate();
function animate( time ) {
requestAnimationFrame( animate );
TWEEN.update( time );
}
}
}
createTest(count,property,engine,repeat);
// since our engines don't do sync, we make it our own here
if (engine==='tween'||engine==='kute') {
document.getElementById('info').style.display = 'none';
start();
}
} else {
function complete(){
document.getElementById('info').style.display = 'block';
container.innerHTML = '';
tweens = [];
}
function updateLeft(){
this.div.style['left'] = this.left+'px';
}
function updateTranslate(){
this.div.style[transformProperty] = 'translate3d('+this.x + 'px,0px,0px)';
}
//some button toggle
var btnGroups = document.querySelectorAll('.btn-group'), l = btnGroups.length;
for (var i=0; i<l; i++) {
var g = btnGroups[i], links = g.querySelectorAll('a'), ll = links.length;
for (var j=0; j<ll; j++) {
links[j].onclick = function() {
"use strict";
var link = this, b = link.parentNode.parentNode.parentNode.querySelector('.btn');
b.innerHTML = link.id.toUpperCase() + ' <span class="caret"></span>';
b.setAttribute('data-'+link.parentNode.parentNode.parentNode.id,link.id);
}
}
}
// the start button handle
document.getElementById('start').addEventListener('click', buildObjects, false);
function buildObjects(){
var c = document.querySelector('[data-count]'), e = document.querySelector('[data-engine]'), r = document.querySelector('[data-repeat]'),
p = document.querySelector('[data-property]'), ct = c && document.querySelector('[data-count]').getAttribute('data-count'),
count = ct ? parseInt(ct) : null,
engine = e && document.querySelector('[data-engine]').getAttribute('data-engine') || null,
repeat = r && document.querySelector('[data-repeat]').getAttribute('data-repeat') || null,
property = p && document.querySelector('[data-property]').getAttribute('data-property') || null,
warning = document.createElement('DIV');
warning.className = 'text-warning padding lead';
container.innerHTML = '';
if (count && engine && property && repeat) {
if (engine === 'gsap') {
document.getElementById('info').style.display = 'none';
}
createTest(count,property,engine,repeat);
// since our engines don't do sync, we make it our own here
if (engine==='tween'||engine==='kute') {
document.getElementById('info').style.display = 'none';
start();
}
if (!count && !property && !repeat && !engine){
warning.innerHTML = 'We are missing all the settings here.';
} else {
warning.innerHTML = 'Now missing<br>';
warning.innerHTML += !engine ? '- engine<br>' : '';
warning.innerHTML += !property ? '- property<br>' : '';
warning.innerHTML += !repeat ? '- repeat<br>' : '';
warning.innerHTML += !count ? '- count<br>' : '';
}
container.appendChild(warning);
}
}
if (!count && !property && !repeat && !engine){
warning.innerHTML = 'We are missing all the settings here.';
} else {
warning.innerHTML = 'Now missing<br>';
warning.innerHTML += !engine ? '- engine<br>' : '';
warning.innerHTML += !property ? '- property<br>' : '';
warning.innerHTML += !repeat ? '- repeat<br>' : '';
warning.innerHTML += !count ? '- count<br>' : '';
}
function start() {
var now = window.performance.now(), count = tws.length;
for (var t =0; t<count; t++){
tws[t].start(now+count/16)
}
}
function createTest(count, property, engine, repeat) {
var update;
for (var i = 0; i < count; i++) {
var div = document.createElement('div'),
windowHeight = document.documentElement.clientHeight - 10,
left = random(-200, 200),
toLeft = random(-200, 200),
top = Math.round(Math.random() * parseInt(windowHeight)),
background = 'rgb('+parseInt(random(0, 255))+','+parseInt(random(0, 255))+','+parseInt(random(0, 255))+')',
fromValues, toValues, fn = i===count-1 ? complete : null;
repeat = parseInt(repeat);
container.appendChild(warning);
div.className = 'line';
div.style.top = top + 'px';
div.style.backgroundColor = background;
if (property==='left') {
div.style.left = left + 'px';
fromValues = engine==="tween" ? { left: left, div: div } : { left: left };
toValues = { left: toLeft }
} else {
div.style[transformProperty] = 'translate3d('+left + 'px,0px,0px)';
if (engine==="kute"){
fromValues = { translateX: left }
toValues = { translateX: toLeft }
} else if ((engine==="gsap") || (engine==="tween")) {
fromValues = engine==='gsap' ? { x: left } : { x: left, div : div }
toValues = { x: toLeft }
}
}
container.appendChild(div);
// perf test
if (engine==='kute') {
tws.push(KUTE.fromTo(div, fromValues, toValues, { easing: easingQuadraticInOut, repeat: repeat, yoyo: true, duration: 1000, complete: fn }));
} else if (engine==='gsap') {
if (property==="left"){
TweenMax.fromTo(div, 1, fromValues, {left : toValues.left, repeat : repeat, yoyo : true, ease : Quad.easeInOut, onComplete: fn });
} else {
TweenMax.fromTo(div, 1, fromValues, { x:toValues.x, repeat : repeat, yoyo : true, ease : Quad.easeInOut, onComplete: fn });
}
} else if (engine==='tween') {
if (property==="left"){
update = updateLeft;
} else if (property==="translateX"){
update = updateTranslate;
}
tws.push(new TWEEN.Tween(fromValues).to(toValues,1000).easing( TWEEN.Easing.Quadratic.InOut ).onComplete( complete ).onUpdate( update).repeat(repeat).yoyo(true));
}
}
if (engine==='tween') {
animate();
function animate( time ) {
requestAnimationFrame( animate );
TWEEN.update( time );
}
}
function start() {
var now = window.performance.now(), count = tweens.length;
for (var t =0; t<count; t++){
tweens[t].start(now+count/16)
}
}
// the start button handle
document.getElementById('start').addEventListener('click', buildObjects, false);
//some button toggle
var btnGroups = document.querySelectorAll('.btn-group'), l = btnGroups.length;
for (var i=0; i<l; i++) {
var g = btnGroups[i], links = g.querySelectorAll('a'), ll = links.length;
for (var j=0; j<ll; j++) {
links[j].onclick = function() {
"use strict";
var link = this, b = link.parentNode.parentNode.parentNode.querySelector('.btn');
b.innerHTML = link.id.toUpperCase() + ' <span class="caret"></span>';
b.setAttribute('data-'+link.parentNode.parentNode.parentNode.id,link.id);
}
}
}());
}

View file

@ -125,6 +125,7 @@
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
<script src="./assets/js/tween.min.js"></script>
<script src="./src/kute.min.js"></script>
<!--<script src="./../kute.js"></script>-->
<script src="./assets/js/perf.js"></script>
<!--<![endif]-->
</body>

View file

@ -1 +1 @@
!function(t){if("function"==typeof define&&define.amd)define(["./kute.js"],function(e){return t(e),e});else if("object"==typeof module&&"function"==typeof require){var e=require("./kute.js");module.exports=t(e)}else{if("undefined"==typeof window.KUTE)throw new Error("Attributes Plugin require KUTE.js.");t(e)}}(function(t){"use strict";var e,r=window.KUTE,n=r.dom,i=r.prS,u=r.pp,a=r.Interpolate.unit,o=r.Interpolate.number,f=function(t,e){return t.getAttribute(e)},c=function(t){return/[A-Z]/g.test(t)?t.replace(t.match(/[A-Z]/g)[0],"-"+t.match(/[A-Z]/g)[0].toLowerCase()):t};i.attr=function(t,e,r){var n={};for(var i in r){var u=c(i).replace(/_+[a-z]+/,""),a=f(t,u);n[u]=a||(/opacity/i.test(i)?1:0)}return n},u.attr=function(t,i,u){"attr"in n||(n.attr=function(t,e,r,i,u){for(var a in i)n.attributes[a](t,a,r[a],i[a],u)},e=n.attributes={});var s,p={};for(s in i){var l=c(s),v=f(u,l.replace(/_+[a-z]+/,""));if(/(%|[a-z]+)$/.test(i[s])||/(%|[a-z]+)$/.test(v)){var d=r.truD(v).u||r.truD(i[s]).u,b=/%/.test(d)?"_percent":"_"+d;s+b in e||(e[s+b]=function(t,e,r,n,i){var u=u||c(e).replace(b,"");t.setAttribute(u,a(r.v,n.v,n.u,i))}),p[s+b]=r.truD(i[s])}else s in e||(e[s]=function(t,e,r,n,i){var u=u||c(e);t.setAttribute(u,o(r,n,i))}),p[s]=parseFloat(i[s])}return p}});
!function(t){if("function"==typeof define&&define.amd)define(["./kute.js"],function(e){return t(e),e});else if("object"==typeof module&&"function"==typeof require){var e=require("./kute.js");module.exports=t(e)}else{if("undefined"==typeof window.KUTE)throw new Error("Attributes Plugin require KUTE.js.");t(e)}}(function(t){"use strict";var e,r=window,n=r.KUTE,i=n.dom,u=n.prS,a=n.pp,o=r.unit,f=r.number,c=function(t,e){return t.getAttribute(e)},s=function(t){return/[A-Z]/g.test(t)?t.replace(t.match(/[A-Z]/g)[0],"-"+t.match(/[A-Z]/g)[0].toLowerCase()):t};u.attr=function(t,e,r){var n={};for(var i in r){var u=s(i).replace(/_+[a-z]+/,""),a=c(t,u);n[u]=a||(/opacity/i.test(i)?1:0)}return n},a.attr=function(t,r,u){"attr"in i||(i.attr=function(t,e,r,n,u){for(var a in n)i.attributes[a](t,a,r[a],n[a],u)},e=i.attributes={});var a,p={};for(a in r){var v=s(a),d=c(u,v.replace(/_+[a-z]+/,""));if(/(%|[a-z]+)$/.test(r[a])||/(%|[a-z]+)$/.test(d)){var l=n.truD(d).u||n.truD(r[a]).u,b=/%/.test(l)?"_percent":"_"+l;a+b in e||(e[a+b]=function(t,e,r,n,i){var u=u||s(e).replace(b,"");t.setAttribute(u,o(r.v,n.v,n.u,i))}),p[a+b]=n.truD(r[a])}else a in e||(e[a]=function(t,e,r,n,i){var u=u||s(e);t.setAttribute(u,f(r,n,i))}),p[a]=parseFloat(r[a])}return p}});

2
src/kute-css.min.js vendored
View file

@ -1 +1 @@
!function(t){if("function"==typeof define&&define.amd)define(["./kute.js"],function(r){return t(r),r});else if("object"==typeof module&&"function"==typeof require){var r=require("./kute.js");module.exports=t(r)}else{if("undefined"==typeof window.KUTE)throw new Error("CSS Plugin require KUTE.js.");t(r)}}(function(t){"use strict";for(var r,e=window.KUTE,o=e.dom,i=e.pp,n=e.prS,u=e.gCS,d=e.property("borderRadius"),a=e.property("borderTopLeftRadius"),l=e.property("borderTopRightRadius"),f=e.property("borderBottomLeftRadius"),p=e.property("borderBottomRightRadius"),c=["borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],g=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],s=["right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","margin","paddingTop","paddingBottom","paddingLeft","paddingRight","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],b=["fontSize","lineHeight","letterSpacing","wordSpacing"],h=["clip"],v=["backgroundPosition"],m=g.concat(s,b),R=c.concat(h,g,s,b,v),y=R.length,x=(e.Interpolate.number,e.Interpolate.unit),T=e.Interpolate.color,D=D||{},B=0;B<y;B++)r=R[B],c.indexOf(r)!==-1?D[r]="rgba(0,0,0,0)":m.indexOf(r)!==-1?D[r]=0:v.indexOf(r)!==-1?D[r]=[50,50]:"clip"===r&&(D[r]=[0,0,0,0]);for(var B=0,L=c.length;B<L;B++)r=c[B],i[r]=function(t,r){return t in o||(o[t]=function(t,r,e,o,i,n){t.style[r]=T(e,o,i,n.keepHex)}),i.cls(t,r)},n[r]=function(t,r,e){return u(t,r)||D[r]};for(var B=0,L=m.length;B<L;B++)r=m[B],i[r]=function(t,r){return t in o||(o[t]=function(t,r,e,o,i){t.style[r]=x(e.value,o.value,o.unit,i)}),i.box(t,r)},n[r]=function(t,r,e){return u(t,r)||D[r]};for(var B=0,L=g.length;B<L;B++)r=g[B],i[r]=function(t,r){return t in o||("borderRadius"===t?o[t]=function(t,r,e,o,i){t.style[d]=x(e.value,o.value,o.unit,i)}:"borderTopLeftRadius"===t?o[t]=function(t,r,e,o,i){t.style[a]=x(e.value,o.value,o.unit,i)}:"borderTopRightRadius"===t?o[t]=function(t,r,e,o,i){t.style[l]=x(e.value,o.value,o.unit,i)}:"borderBottomLeftRadius"===t?o[t]=function(t,r,e,o,i){t.style[f]=x(e.value,o.value,o.unit,i)}:"borderBottomRightRadius"===t&&(o[t]=function(t,r,e,o,i){t.style[p]=x(e.value,o.value,o.unit,i)})),i.box(t,r)},n[r]=function(t,r,e){return u(t,r)||D[r]};return i.clip=function(t,r){if(t in o||(o[t]=function(t,r,e,o,i){var n=0,u=[];for(n;n<4;n++){var d=e[n].v,a=o[n].v,l=o[n].u||"px";u[n]=x(d,a,l,i)}t.style[r]="rect("+u+")"}),r instanceof Array)return[e.truD(r[0]),e.truD(r[1]),e.truD(r[2]),e.truD(r[3])];var i=r.replace(/rect|\(|\)/g,"");return i=/\,/g.test(i)?i.split(/\,/g):i.split(/\s/g),[e.truD(i[0]),e.truD(i[1]),e.truD(i[2]),e.truD(i[3])]},n.clip=function(t,r,e){var o=u(t,r),i=u(t,"width"),n=u(t,"height");return/rect/.test(o)?o:[0,i,n,0]},i.backgroundPosition=function(t,r){if(t in o||(o[t]=function(t,r,e,o,i){t.style[r]=x(e.x.v,o.x.v,"%",i)+" "+x(e.y.v,o.y.v,"%",i)}),r instanceof Array)return{x:e.truD(r[0])||{v:50,u:"%"},y:e.truD(r[1])||{v:50,u:"%"}};var i,n,u=r.replace(/top|left/g,0).replace(/right|bottom/g,100).replace(/center|middle/g,50);return u=/\,/g.test(u)?u.split(/\,/g):u.split(/\s/g),u=2===u.length?u:[u[0],50],i=e.truD(u[0]),n=e.truD(u[1]),{x:i,y:n}},n.backgroundPosition=function(t,r,e){return u(t,r)||D[r]},this});
!function(t){if("function"==typeof define&&define.amd)define(["./kute.js"],function(r){return t(r),r});else if("object"==typeof module&&"function"==typeof require){var r=require("./kute.js");module.exports=t(r)}else{if("undefined"==typeof window.KUTE)throw new Error("CSS Plugin require KUTE.js.");t(r)}}(function(t){"use strict";for(var r,e=window,o=e.KUTE,i=o.dom,n=o.pp,u=o.prS,d=o.gCS,a=o.property("borderRadius"),f=o.property("borderTopLeftRadius"),l=o.property("borderTopRightRadius"),c=o.property("borderBottomLeftRadius"),p=o.property("borderBottomRightRadius"),g=["borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],s=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],b=["right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","margin","paddingTop","paddingBottom","paddingLeft","paddingRight","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],h=["fontSize","lineHeight","letterSpacing","wordSpacing"],v=["clip"],m=["backgroundPosition"],R=s.concat(b,h),y=g.concat(v,s,b,h,m),x=y.length,T=(e.number,e.unit),D=e.color,B=B||{},L=0;L<x;L++)r=y[L],g.indexOf(r)!==-1?B[r]="rgba(0,0,0,0)":R.indexOf(r)!==-1?B[r]=0:m.indexOf(r)!==-1?B[r]=[50,50]:"clip"===r&&(B[r]=[0,0,0,0]);for(var L=0,w=g.length;L<w;L++)r=g[L],n[r]=function(t,r){return t in i||(i[t]=function(t,r,e,o,i,n){t.style[r]=D(e,o,i,n.keepHex)}),n.cls(t,r)},u[r]=function(t,r,e){return d(t,r)||B[r]};for(var L=0,w=R.length;L<w;L++)r=R[L],n[r]=function(t,r){return t in i||(i[t]=function(t,r,e,o,i){t.style[r]=T(e.value,o.value,o.unit,i)}),n.box(t,r)},u[r]=function(t,r,e){return d(t,r)||B[r]};for(var L=0,w=s.length;L<w;L++)r=s[L],n[r]=function(t,r){return t in i||("borderRadius"===t?i[t]=function(t,r,e,o,i){t.style[a]=T(e.value,o.value,o.unit,i)}:"borderTopLeftRadius"===t?i[t]=function(t,r,e,o,i){t.style[f]=T(e.value,o.value,o.unit,i)}:"borderTopRightRadius"===t?i[t]=function(t,r,e,o,i){t.style[l]=T(e.value,o.value,o.unit,i)}:"borderBottomLeftRadius"===t?i[t]=function(t,r,e,o,i){t.style[c]=T(e.value,o.value,o.unit,i)}:"borderBottomRightRadius"===t&&(i[t]=function(t,r,e,o,i){t.style[p]=T(e.value,o.value,o.unit,i)})),n.box(t,r)},u[r]=function(t,r,e){return d(t,r)||B[r]};return n.clip=function(t,r){if(t in i||(i[t]=function(t,r,e,o,i){var n=0,u=[];for(n;n<4;n++){var d=e[n].v,a=o[n].v,f=o[n].u||"px";u[n]=T(d,a,f,i)}t.style[r]="rect("+u+")"}),r instanceof Array)return[o.truD(r[0]),o.truD(r[1]),o.truD(r[2]),o.truD(r[3])];var e=r.replace(/rect|\(|\)/g,"");return e=/\,/g.test(e)?e.split(/\,/g):e.split(/\s/g),[o.truD(e[0]),o.truD(e[1]),o.truD(e[2]),o.truD(e[3])]},u.clip=function(t,r,e){var o=d(t,r),i=d(t,"width"),n=d(t,"height");return/rect/.test(o)?o:[0,i,n,0]},n.backgroundPosition=function(t,r){if(t in i||(i[t]=function(t,r,e,o,i){t.style[r]=T(e.x.v,o.x.v,"%",i)+" "+T(e.y.v,o.y.v,"%",i)}),r instanceof Array)return{x:o.truD(r[0])||{v:50,u:"%"},y:o.truD(r[1])||{v:50,u:"%"}};var e,n,u=r.replace(/top|left/g,0).replace(/right|bottom/g,100).replace(/center|middle/g,50);return u=/\,/g.test(u)?u.split(/\,/g):u.split(/\s/g),u=2===u.length?u:[u[0],50],e=o.truD(u[0]),n=o.truD(u[1]),{x:e,y:n}},u.backgroundPosition=function(t,r,e){return d(t,r)||B[r]},this});

2
src/kute-svg.min.js vendored

File diff suppressed because one or more lines are too long

2
src/kute.min.js vendored

File diff suppressed because one or more lines are too long