kempo-css 1.1.1 → 1.1.2

package/tests/rows_columns.browser-test.js

@@ -0,0 +1,171 @@
+const getStyle = (el, prop) => getComputedStyle(el)[prop];
+
+export const beforeAll = async () => {
+  const link = document.createElement('link');
+  link.rel = 'stylesheet';
+  link.href = '/src/kempo.css';
+  document.head.appendChild(link);
+  await new Promise(resolve => link.onload = resolve);
+};
+
+export default {
+  'should apply flex display to .row': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'row';
+    document.body.appendChild(el);
+    const display = getStyle(el, 'display');
+    const flexWrap = getStyle(el, 'flexWrap');
+    el.remove();
+    if(display === 'flex' && flexWrap === 'wrap'){
+      pass('.row applies flex with wrap');
+    } else {
+      fail(`Expected flex/wrap, got display: ${display}, wrap: ${flexWrap}`);
+    }
+  },
+
+  'should apply flex to .col': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'col';
+    document.body.appendChild(el);
+    const flexGrow = getStyle(el, 'flexGrow');
+    el.remove();
+    if(flexGrow === '1'){
+      pass('.col has flex-grow: 1');
+    } else {
+      fail(`Expected flex-grow: 1, got ${flexGrow}`);
+    }
+  },
+
+  'should apply span-6 as 50% width': ({pass, fail}) => {
+    const row = document.createElement('div');
+    row.className = 'row';
+    row.style.width = '1000px';
+    const col = document.createElement('div');
+    col.className = 'span-6';
+    row.appendChild(col);
+    document.body.appendChild(row);
+    const flexBasis = getStyle(col, 'flexBasis');
+    row.remove();
+    if(flexBasis === '50%'){
+      pass('.span-6 sets flex-basis to 50%');
+    } else {
+      fail(`Expected 50%, got ${flexBasis}`);
+    }
+  },
+
+  'should apply span-12 as 100% width': ({pass, fail}) => {
+    const col = document.createElement('div');
+    col.className = 'span-12';
+    document.body.appendChild(col);
+    const flexBasis = getStyle(col, 'flexBasis');
+    col.remove();
+    if(flexBasis === '100%'){
+      pass('.span-12 sets flex-basis to 100%');
+    } else {
+      fail(`Expected 100%, got ${flexBasis}`);
+    }
+  },
+
+  'should apply span-4 as ~33.333% width': ({pass, fail}) => {
+    const col = document.createElement('div');
+    col.className = 'span-4';
+    document.body.appendChild(col);
+    const flexBasis = getStyle(col, 'flexBasis');
+    col.remove();
+    if(flexBasis.includes('33.333')){
+      pass(`.span-4 sets flex-basis to ${flexBasis}`);
+    } else {
+      fail(`Expected ~33.333%, got ${flexBasis}`);
+    }
+  },
+
+  'should apply span-3 as 25% width': ({pass, fail}) => {
+    const col = document.createElement('div');
+    col.className = 'span-3';
+    document.body.appendChild(col);
+    const flexBasis = getStyle(col, 'flexBasis');
+    col.remove();
+    if(flexBasis === '25%'){
+      pass('.span-3 sets flex-basis to 25%');
+    } else {
+      fail(`Expected 25%, got ${flexBasis}`);
+    }
+  },
+
+  'should apply grid columns with .cols-2': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'd-g cols-2';
+    document.body.appendChild(el);
+    const cols = getStyle(el, 'gridTemplateColumns');
+    el.remove();
+    if(cols.split(' ').length === 2){
+      pass(`.cols-2 creates 2 columns: ${cols}`);
+    } else {
+      fail(`Expected 2 columns, got ${cols}`);
+    }
+  },
+
+  'should apply grid columns with .cols-3': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'd-g cols-3';
+    document.body.appendChild(el);
+    const cols = getStyle(el, 'gridTemplateColumns');
+    el.remove();
+    if(cols.split(' ').length === 3){
+      pass(`.cols-3 creates 3 columns: ${cols}`);
+    } else {
+      fail(`Expected 3 columns, got ${cols}`);
+    }
+  },
+
+  'should apply grid columns with .cols-4': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'd-g cols-4';
+    document.body.appendChild(el);
+    const cols = getStyle(el, 'gridTemplateColumns');
+    el.remove();
+    if(cols.split(' ').length === 4){
+      pass(`.cols-4 creates 4 columns: ${cols}`);
+    } else {
+      fail(`Expected 4 columns, got ${cols}`);
+    }
+  },
+
+  'should have all span classes 1-12': ({pass, fail}) => {
+    const missing = [];
+    for(let i = 1; i <= 12; i++){
+      const col = document.createElement('div');
+      col.className = `span-${i}`;
+      document.body.appendChild(col);
+      const flexBasis = getStyle(col, 'flexBasis');
+      col.remove();
+      if(!flexBasis || flexBasis === '0%' || flexBasis === 'auto'){
+        missing.push(i);
+      }
+    }
+    if(missing.length === 0){
+      pass('All span-1 through span-12 classes exist');
+    } else {
+      fail(`Missing spans: ${missing.join(', ')}`);
+    }
+  },
+
+  'should have cols classes 2-10': ({pass, fail}) => {
+    const working = [];
+    for(let i = 2; i <= 10; i++){
+      const el = document.createElement('div');
+      el.className = `d-g cols-${i}`;
+      document.body.appendChild(el);
+      const cols = getStyle(el, 'gridTemplateColumns');
+      el.remove();
+      if(cols.split(' ').length === i){
+        working.push(i);
+      }
+    }
+    if(working.length === 9){
+      pass('All cols-2 through cols-10 classes work');
+    } else {
+      fail(`Working: ${working.join(', ')}, expected 2-10`);
+    }
+  }
+};

package/tests/spacing.browser-test.js

@@ -0,0 +1,310 @@
+const getStyle = (el, prop) => getComputedStyle(el)[prop];
+
+export const beforeAll = async () => {
+  const link = document.createElement('link');
+  link.rel = 'stylesheet';
+  link.href = '/src/kempo.css';
+  document.head.appendChild(link);
+  await new Promise(resolve => link.onload = resolve);
+};
+
+export default {
+  'should apply full padding with .p': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'p';
+    document.body.appendChild(el);
+    const pt = parseFloat(getStyle(el, 'paddingTop'));
+    const pr = parseFloat(getStyle(el, 'paddingRight'));
+    const pb = parseFloat(getStyle(el, 'paddingBottom'));
+    const pl = parseFloat(getStyle(el, 'paddingLeft'));
+    el.remove();
+    if(pt > 0 && pr > 0 && pb > 0 && pl > 0 && pt === pr && pr === pb && pb === pl){
+      pass(`.p applies equal padding on all sides: ${pt}px`);
+    } else {
+      fail(`Expected equal padding, got t:${pt} r:${pr} b:${pb} l:${pl}`);
+    }
+  },
+
+  'should apply directional padding classes': ({pass, fail}) => {
+    const tests = [
+      {className: 'pt', prop: 'paddingTop'},
+      {className: 'pr', prop: 'paddingRight'},
+      {className: 'pb', prop: 'paddingBottom'},
+      {className: 'pl', prop: 'paddingLeft'}
+    ];
+    const failed = [];
+    tests.forEach(({className, prop}) => {
+      const el = document.createElement('div');
+      el.className = className;
+      document.body.appendChild(el);
+      const value = parseFloat(getStyle(el, prop));
+      el.remove();
+      if(value <= 0){
+        failed.push(`${className}: ${value}`);
+      }
+    });
+    if(failed.length === 0){
+      pass('Directional padding classes work');
+    } else {
+      fail(`Failed: ${failed.join(', ')}`);
+    }
+  },
+
+  'should apply axis padding with .px and .py': ({pass, fail}) => {
+    const elX = document.createElement('div');
+    elX.className = 'px';
+    const elY = document.createElement('div');
+    elY.className = 'py';
+    document.body.appendChild(elX);
+    document.body.appendChild(elY);
+    const pxL = parseFloat(getStyle(elX, 'paddingLeft'));
+    const pxR = parseFloat(getStyle(elX, 'paddingRight'));
+    const pyT = parseFloat(getStyle(elY, 'paddingTop'));
+    const pyB = parseFloat(getStyle(elY, 'paddingBottom'));
+    elX.remove();
+    elY.remove();
+    if(pxL > 0 && pxR > 0 && pyT > 0 && pyB > 0){
+      pass('.px and .py apply axis padding');
+    } else {
+      fail(`px: L${pxL}/R${pxR}, py: T${pyT}/B${pyB}`);
+    }
+  },
+
+  'should apply half padding with .ph': ({pass, fail}) => {
+    const full = document.createElement('div');
+    full.className = 'p';
+    const half = document.createElement('div');
+    half.className = 'ph';
+    document.body.appendChild(full);
+    document.body.appendChild(half);
+    const fullVal = parseFloat(getStyle(full, 'paddingTop'));
+    const halfVal = parseFloat(getStyle(half, 'paddingTop'));
+    full.remove();
+    half.remove();
+    if(halfVal < fullVal && halfVal > 0){
+      pass(`.ph is smaller than .p (${halfVal}px < ${fullVal}px)`);
+    } else {
+      fail(`Expected half: ${halfVal} < full: ${fullVal}`);
+    }
+  },
+
+  'should apply quarter padding with .pq': ({pass, fail}) => {
+    const full = document.createElement('div');
+    full.className = 'p';
+    const quarter = document.createElement('div');
+    quarter.className = 'pq';
+    document.body.appendChild(full);
+    document.body.appendChild(quarter);
+    const fullVal = parseFloat(getStyle(full, 'paddingTop'));
+    const quarterVal = parseFloat(getStyle(quarter, 'paddingTop'));
+    full.remove();
+    quarter.remove();
+    if(quarterVal < fullVal && quarterVal > 0){
+      pass(`.pq is smaller than .p (${quarterVal}px < ${fullVal}px)`);
+    } else {
+      fail(`Expected quarter: ${quarterVal} < full: ${fullVal}`);
+    }
+  },
+
+  'should reset padding with .p0': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'p0';
+    el.style.padding = '50px';
+    document.body.appendChild(el);
+    const pt = parseFloat(getStyle(el, 'paddingTop'));
+    el.remove();
+    if(pt < 1){
+      pass('.p0 resets padding to ~0');
+    } else {
+      fail(`Expected ~0, got ${pt}px`);
+    }
+  },
+
+  'should apply full margin with .m': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'm';
+    document.body.appendChild(el);
+    const mt = parseFloat(getStyle(el, 'marginTop'));
+    const mr = parseFloat(getStyle(el, 'marginRight'));
+    const mb = parseFloat(getStyle(el, 'marginBottom'));
+    const ml = parseFloat(getStyle(el, 'marginLeft'));
+    el.remove();
+    if(mt > 0 && mr > 0 && mb > 0 && ml > 0){
+      pass(`.m applies margin on all sides: ${mt}px`);
+    } else {
+      fail(`Expected positive margins, got t:${mt} r:${mr} b:${mb} l:${ml}`);
+    }
+  },
+
+  'should apply directional margin classes': ({pass, fail}) => {
+    const tests = [
+      {className: 'mt', prop: 'marginTop'},
+      {className: 'mr', prop: 'marginRight'},
+      {className: 'mb', prop: 'marginBottom'},
+      {className: 'ml', prop: 'marginLeft'}
+    ];
+    const failed = [];
+    tests.forEach(({className, prop}) => {
+      const el = document.createElement('div');
+      el.className = className;
+      document.body.appendChild(el);
+      const value = parseFloat(getStyle(el, prop));
+      el.remove();
+      if(value <= 0){
+        failed.push(`${className}: ${value}`);
+      }
+    });
+    if(failed.length === 0){
+      pass('Directional margin classes work');
+    } else {
+      fail(`Failed: ${failed.join(', ')}`);
+    }
+  },
+
+  'should reset margin with .m0': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'm0';
+    el.style.margin = '50px';
+    document.body.appendChild(el);
+    const mt = parseFloat(getStyle(el, 'marginTop'));
+    el.remove();
+    if(mt === 0){
+      pass('.m0 resets margin to 0');
+    } else {
+      fail(`Expected 0, got ${mt}px`);
+    }
+  },
+
+  'should apply negative margin with .-m': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = '-m';
+    document.body.appendChild(el);
+    const mt = parseFloat(getStyle(el, 'marginTop'));
+    el.remove();
+    if(mt < 0){
+      pass(`.-m applies negative margin: ${mt}px`);
+    } else {
+      fail(`Expected negative margin, got ${mt}px`);
+    }
+  },
+
+  'should apply border with .b': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'b';
+    document.body.appendChild(el);
+    const bt = parseFloat(getStyle(el, 'borderTopWidth'));
+    const br = parseFloat(getStyle(el, 'borderRightWidth'));
+    const bb = parseFloat(getStyle(el, 'borderBottomWidth'));
+    const bl = parseFloat(getStyle(el, 'borderLeftWidth'));
+    el.remove();
+    if(bt > 0 && br > 0 && bb > 0 && bl > 0){
+      pass('.b applies border on all sides');
+    } else {
+      fail(`Expected borders, got t:${bt} r:${br} b:${bb} l:${bl}`);
+    }
+  },
+
+  'should apply directional borders': ({pass, fail}) => {
+    const tests = [
+      {className: 'bt', prop: 'borderTopWidth'},
+      {className: 'br', prop: 'borderRightWidth'},
+      {className: 'bb', prop: 'borderBottomWidth'},
+      {className: 'bl', prop: 'borderLeftWidth'}
+    ];
+    const failed = [];
+    tests.forEach(({className, prop}) => {
+      const el = document.createElement('div');
+      el.className = className;
+      document.body.appendChild(el);
+      const value = parseFloat(getStyle(el, prop));
+      el.remove();
+      if(value <= 0){
+        failed.push(`${className}: ${value}`);
+      }
+    });
+    if(failed.length === 0){
+      pass('Directional border classes work');
+    } else {
+      fail(`Failed: ${failed.join(', ')}`);
+    }
+  },
+
+  'should remove border with .b0': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'b0';
+    el.style.border = '5px solid red';
+    document.body.appendChild(el);
+    const bt = getStyle(el, 'borderTopStyle');
+    el.remove();
+    if(bt === 'none'){
+      pass('.b0 removes borders');
+    } else {
+      fail(`Expected none, got ${bt}`);
+    }
+  },
+
+  'should apply border radius with .r': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'r';
+    document.body.appendChild(el);
+    const radius = parseFloat(getStyle(el, 'borderTopLeftRadius'));
+    el.remove();
+    if(radius > 0){
+      pass(`.r applies border radius: ${radius}px`);
+    } else {
+      fail(`Expected radius, got ${radius}`);
+    }
+  },
+
+  'should apply corner-specific radius': ({pass, fail}) => {
+    const tests = [
+      {className: 'rtl', prop: 'borderTopLeftRadius'},
+      {className: 'rtr', prop: 'borderTopRightRadius'},
+      {className: 'rbr', prop: 'borderBottomRightRadius'},
+      {className: 'rbl', prop: 'borderBottomLeftRadius'}
+    ];
+    const failed = [];
+    tests.forEach(({className, prop}) => {
+      const el = document.createElement('div');
+      el.className = className;
+      document.body.appendChild(el);
+      const value = parseFloat(getStyle(el, prop));
+      el.remove();
+      if(value <= 0){
+        failed.push(`${className}: ${value}`);
+      }
+    });
+    if(failed.length === 0){
+      pass('Corner radius classes work');
+    } else {
+      fail(`Failed: ${failed.join(', ')}`);
+    }
+  },
+
+  'should remove radius with .r0': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'r0';
+    el.style.borderRadius = '20px';
+    document.body.appendChild(el);
+    const radius = parseFloat(getStyle(el, 'borderTopLeftRadius'));
+    el.remove();
+    if(radius === 0){
+      pass('.r0 removes border radius');
+    } else {
+      fail(`Expected 0, got ${radius}`);
+    }
+  },
+
+  'should apply pill shape with .round': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'round';
+    document.body.appendChild(el);
+    const radius = parseFloat(getStyle(el, 'borderTopLeftRadius'));
+    el.remove();
+    if(radius > 1000){
+      pass(`.round applies large radius: ${radius}px`);
+    } else {
+      fail(`Expected very large radius, got ${radius}`);
+    }
+  }
+};

package/tests/tables.browser-test.js

@@ -0,0 +1,192 @@
+const getStyle = (el, prop) => getComputedStyle(el)[prop];
+
+export const beforeAll = async () => {
+  const link = document.createElement('link');
+  link.rel = 'stylesheet';
+  link.href = '/src/kempo.css';
+  document.head.appendChild(link);
+  await new Promise(resolve => link.onload = resolve);
+};
+
+export default {
+  'should make table full width': ({pass, fail}) => {
+    const table = document.createElement('table');
+    document.body.appendChild(table);
+    const width = getStyle(table, 'width');
+    table.remove();
+    if(width.endsWith('%') || parseFloat(width) > 500){
+      pass(`Table has full width: ${width}`);
+    } else {
+      fail(`Expected full width, got ${width}`);
+    }
+  },
+
+  'should collapse table borders': ({pass, fail}) => {
+    const table = document.createElement('table');
+    document.body.appendChild(table);
+    const borderSpacing = getStyle(table, 'borderSpacing');
+    table.remove();
+    if(borderSpacing === '0px' || borderSpacing === '0px 0px'){
+      pass('Table has collapsed borders (border-spacing: 0)');
+    } else {
+      fail(`Expected 0 border-spacing, got ${borderSpacing}`);
+    }
+  },
+
+  'should style th with bold font': ({pass, fail}) => {
+    const table = document.createElement('table');
+    const tr = document.createElement('tr');
+    const th = document.createElement('th');
+    th.textContent = 'Header';
+    tr.appendChild(th);
+    table.appendChild(tr);
+    document.body.appendChild(table);
+    const fontWeight = getStyle(th, 'fontWeight');
+    table.remove();
+    if(parseInt(fontWeight) >= 700){
+      pass(`th has bold font weight: ${fontWeight}`);
+    } else {
+      fail(`Expected bold, got ${fontWeight}`);
+    }
+  },
+
+  'should style th with background': ({pass, fail}) => {
+    const table = document.createElement('table');
+    const tr = document.createElement('tr');
+    const th = document.createElement('th');
+    tr.appendChild(th);
+    table.appendChild(tr);
+    document.body.appendChild(table);
+    const bg = getStyle(th, 'backgroundColor');
+    table.remove();
+    if(bg && bg !== 'rgba(0, 0, 0, 0)' && bg !== 'transparent'){
+      pass(`th has background: ${bg}`);
+    } else {
+      fail('th should have background color');
+    }
+  },
+
+  'should apply left text-align to th': ({pass, fail}) => {
+    const table = document.createElement('table');
+    const tr = document.createElement('tr');
+    const th = document.createElement('th');
+    tr.appendChild(th);
+    table.appendChild(tr);
+    document.body.appendChild(table);
+    const textAlign = getStyle(th, 'textAlign');
+    table.remove();
+    if(textAlign === 'left' || textAlign === 'start'){
+      pass(`th has left alignment: ${textAlign}`);
+    } else {
+      fail(`Expected left alignment, got ${textAlign}`);
+    }
+  },
+
+  'should apply padding to th and td': ({pass, fail}) => {
+    const table = document.createElement('table');
+    const tr = document.createElement('tr');
+    const th = document.createElement('th');
+    const td = document.createElement('td');
+    tr.appendChild(th);
+    tr.appendChild(td);
+    table.appendChild(tr);
+    document.body.appendChild(table);
+    const thPadding = parseFloat(getStyle(th, 'padding'));
+    const tdPadding = parseFloat(getStyle(td, 'padding'));
+    table.remove();
+    if(thPadding > 0 && tdPadding > 0){
+      pass(`th and td have padding: th=${thPadding}px, td=${tdPadding}px`);
+    } else {
+      fail(`Expected padding, got th: ${thPadding}, td: ${tdPadding}`);
+    }
+  },
+
+  'should apply borders to th and td': ({pass, fail}) => {
+    const table = document.createElement('table');
+    const tr = document.createElement('tr');
+    const th = document.createElement('th');
+    const td = document.createElement('td');
+    tr.appendChild(th);
+    tr.appendChild(td);
+    table.appendChild(tr);
+    document.body.appendChild(table);
+    const thBorder = parseFloat(getStyle(th, 'borderBottomWidth'));
+    const tdBorder = parseFloat(getStyle(td, 'borderBottomWidth'));
+    table.remove();
+    if(thBorder > 0 && tdBorder > 0){
+      pass('th and td have borders');
+    } else {
+      fail(`Expected borders, got th: ${thBorder}, td: ${tdBorder}`);
+    }
+  },
+
+  'should apply border radius to first th': ({pass, fail}) => {
+    const table = document.createElement('table');
+    const tr = document.createElement('tr');
+    const th = document.createElement('th');
+    tr.appendChild(th);
+    table.appendChild(tr);
+    document.body.appendChild(table);
+    const radius = parseFloat(getStyle(th, 'borderTopLeftRadius'));
+    table.remove();
+    if(radius > 0){
+      pass(`First th has border-top-left-radius: ${radius}px`);
+    } else {
+      fail('First th should have border radius');
+    }
+  },
+
+  'should apply border radius to last th': ({pass, fail}) => {
+    const table = document.createElement('table');
+    const tr = document.createElement('tr');
+    const th1 = document.createElement('th');
+    const th2 = document.createElement('th');
+    tr.appendChild(th1);
+    tr.appendChild(th2);
+    table.appendChild(tr);
+    document.body.appendChild(table);
+    const radius = parseFloat(getStyle(th2, 'borderTopRightRadius'));
+    table.remove();
+    if(radius > 0){
+      pass(`Last th has border-top-right-radius: ${radius}px`);
+    } else {
+      fail('Last th should have border radius');
+    }
+  },
+
+  'should apply border radius to last row cells': ({pass, fail}) => {
+    const table = document.createElement('table');
+    const tr1 = document.createElement('tr');
+    const th = document.createElement('th');
+    tr1.appendChild(th);
+    const tr2 = document.createElement('tr');
+    const td1 = document.createElement('td');
+    const td2 = document.createElement('td');
+    tr2.appendChild(td1);
+    tr2.appendChild(td2);
+    table.appendChild(tr1);
+    table.appendChild(tr2);
+    document.body.appendChild(table);
+    const td1Radius = parseFloat(getStyle(td1, 'borderBottomLeftRadius'));
+    const td2Radius = parseFloat(getStyle(td2, 'borderBottomRightRadius'));
+    table.remove();
+    if(td1Radius > 0 && td2Radius > 0){
+      pass('Last row has corner border radius');
+    } else {
+      fail(`Expected radius, got td1: ${td1Radius}, td2: ${td2Radius}`);
+    }
+  },
+
+  'should style .table-wrapper with overflow-x auto': ({pass, fail}) => {
+    const wrapper = document.createElement('div');
+    wrapper.className = 'table-wrapper';
+    document.body.appendChild(wrapper);
+    const overflow = getStyle(wrapper, 'overflowX');
+    wrapper.remove();
+    if(overflow === 'auto'){
+      pass('.table-wrapper has overflow-x: auto');
+    } else {
+      fail(`Expected auto, got ${overflow}`);
+    }
+  }
+};