openkraken / kraken Goto Github PK

element.setAttribute("style", "color:red; border: 1px solid blue;")

kraken.methodChannel.setMethodCallHandler(() => {
// not working
});


kraken.methodChannel.setMethodCallHandler(() => {
// works
});

// test file: /Users/andycall/work/kraken/tests/integration/specs/css/css-position/position-absolute.ts
// it: in-inline-002

let BODY = document.body;
BODY.style.margin = '0px';

let split;
let containerSpan;
let outerSpan;
outerSpan = create(
  'span',
  {
    'box-sizing': 'border-box',
  },
  [
    createText(`outer span`),
    (containerSpan = create(
      'span',
      {
        position: 'relative',
        border: '1px solid gray',
        'box-sizing': 'border-box',
      },
      [
        createText(`container span start`),
        (split = create('div', {
          width: '10px',
          height: '10px',
          'box-sizing': 'border-box',
        })),
        createText(`container span end`),
      ]
    )),
    createText(`outer span end`),
  ]
);
BODY.appendChild(outerSpan);


/**
 * Kraken cli compact library. used to preview kraken rendering.
 */
function setStyle(dom, object) {
    if (object == null)
        return;
    for (let key in object) {
        if (object.hasOwnProperty(key)) {
            dom.style[key] = object[key];
        }
    }
}
function setAttributes(dom, object) {
    for (const key in object) {
        if (object.hasOwnProperty(key)) {
            dom.setAttribute(key, object[key]);
        }
    }
}
function sleep(second) {
    return new Promise(done => setTimeout(done, second * 1000));
}
function create(tag, style, child) {
    const el = document.createElement(tag);
    setStyle(el, style);
    if (Array.isArray(child)) {
        child.forEach(c => el.appendChild(c));
    }
    else if (child) {
        el.appendChild(child);
    }
    return el;
}
function createText(content) {
    return document.createTextNode(content);
}
function append(parent, child) {
    parent.appendChild(child);
}
async function matchScreenshot() {
    return new Promise((resolve) => {
        requestAnimationFrame(() => {
            resolve();
        });
    });
}
async function matchElementImageSnapshot(element) {
    return Promise.resolve();
}
async function it(name, fn) {
    console.log('starting ' + name);
    if (fn.length > 0) {
        const timer = setTimeout(() => {
            throw new Error('it execute timeout of 5000ms');
        }, 5000);
        const done = () => {
            console.log('done call');
            clearTimeout(timer);
        };
        fn(done);
    }
    else {
        fn();
    }
}
function xit(name, fn) {
    it(name, fn);
}

    

const Something = function(element) {
  // |this| is a newly created object
  this.name = 'Something Good';
  this.handleEvent = function(event) {
    console.log(this.name); // 'Something Good', as this is bound to newly created object
    switch(event.type) {
      case 'click':
        // some code here...
        break;
      case 'dblclick':
        // some code here...
        break;
    }
  };

  // Note that the listeners in this case are |this|, not this.handleEvent
  element.addEventListener('click', this, false);
  element.addEventListener('dblclick', this, false);

  // You can properly remove the listeners
  element.removeEventListener('click', this, false);
  element.removeEventListener('dblclick', this, false);
}
const s = new Something(document.body);

it('should work with image of no width in flex layout', async (done) => {
    let div;
    let image;
    div = createElement(
      'div',
      {
        style: {
          display: 'flex',
        },
      },
      [
        image = createElement('div', {
            style: {
                width: '100px',
                height: '100px',
                backgroundRepeat: 'no-repeat',
                backgroundImage: 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsBAMAAADsqkcyAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAPUExURWp6mWp6mWp6mUdwTGx8mzOT1N8AAAAFdFJOU0lVPgAikM5KZwAAASZJREFUKM9t042NwyAMBWDDdQB81wFcyABNwgBJ6P4znW1+mwRVVfTp6RVTAmtb26M/Q3uKiOGGZ8S/G94Rf28YeV05CqcLz8I/F96Fnxc2wu7MWo0unXgRNSacWKude37zkcMGpsbxQ5ib0QHA9BGOLyyLs/yRNSWYq3I4o7U2wBh24hbIPzrXsKQ97E3BuYJ+gqVle5gSrK9enZHTvO8a1wpe3vog47wyOuhh4UXn41myE4f1TDhelYgkrLzIIWWVjlBP0GD9vRLOPJfdqYbGi3OtmQbuE47pt2nFduA5N+djGlnDntN8eo0308Mj57DgyAT5z6IrU033Kcvg/sROwyl+c9Rd8GVVP1JnsnqF2Q+fhu5ysePYvUF7UeOwwTX11zrq9z/4k3nshwNivwAAAABJRU5ErkJggg==)'
            }
        }),
      ]
    );
    BODY.appendChild(div);

    image.onload = async () => {
      await matchViewportSnapshot();
      done();
    };
  });