kempo-css 1.3.13 → 2.0.0

package/tests/display_flex.browser-test.js

@@ -1,159 +1,159 @@
-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 display block with .d-b': ({pass, fail}) => {
-    const el = document.createElement('span');
-    el.className = 'd-b';
-    document.body.appendChild(el);
-    const display = getStyle(el, 'display');
-    el.remove();
-    if(display === 'block'){
-      pass('.d-b sets display: block');
-    } else {
-      fail(`Expected block, got ${display}`);
-    }
-  },
-
-  'should apply display inline-block with .d-ib': ({pass, fail}) => {
-    const el = document.createElement('div');
-    el.className = 'd-ib';
-    document.body.appendChild(el);
-    const display = getStyle(el, 'display');
-    el.remove();
-    if(display === 'inline-block'){
-      pass('.d-ib sets display: inline-block');
-    } else {
-      fail(`Expected inline-block, got ${display}`);
-    }
-  },
-
-  'should apply display grid with .d-g': ({pass, fail}) => {
-    const el = document.createElement('div');
-    el.className = 'd-g';
-    document.body.appendChild(el);
-    const display = getStyle(el, 'display');
-    el.remove();
-    if(display === 'grid'){
-      pass('.d-g sets display: grid');
-    } else {
-      fail(`Expected grid, got ${display}`);
-    }
-  },
-
-  'should apply display inline with .d-i': ({pass, fail}) => {
-    const el = document.createElement('div');
-    el.className = 'd-i';
-    document.body.appendChild(el);
-    const display = getStyle(el, 'display');
-    el.remove();
-    if(display === 'inline'){
-      pass('.d-i sets display: inline');
-    } else {
-      fail(`Expected inline, got ${display}`);
-    }
-  },
-
-  'should apply display none with .d-n': ({pass, fail}) => {
-    const el = document.createElement('div');
-    el.className = 'd-n';
-    document.body.appendChild(el);
-    const display = getStyle(el, 'display');
-    el.remove();
-    if(display === 'none'){
-      pass('.d-n sets display: none');
-    } else {
-      fail(`Expected none, got ${display}`);
-    }
-  },
-
-  'should apply display flex with .d-f': ({pass, fail}) => {
-    const el = document.createElement('div');
-    el.className = 'd-f';
-    document.body.appendChild(el);
-    const display = getStyle(el, 'display');
-    const flexWrap = getStyle(el, 'flexWrap');
-    el.remove();
-    if(display === 'flex' && flexWrap === 'wrap'){
-      pass('.d-f sets display: flex with wrap');
-    } else {
-      fail(`Expected flex with wrap, got display: ${display}, flex-wrap: ${flexWrap}`);
-    }
-  },
-
-  'should apply display inline-flex with .d-if': ({pass, fail}) => {
-    const el = document.createElement('div');
-    el.className = 'd-if';
-    document.body.appendChild(el);
-    const display = getStyle(el, 'display');
-    const flexWrap = getStyle(el, 'flexWrap');
-    el.remove();
-    if(display === 'inline-flex' && flexWrap === 'wrap'){
-      pass('.d-if sets display: inline-flex with wrap');
-    } else {
-      fail(`Expected inline-flex with wrap, got display: ${display}, flex-wrap: ${flexWrap}`);
-    }
-  },
-
-  'should apply flex grow with .flex classes': ({pass, fail}) => {
-    const el = document.createElement('div');
-    el.className = 'flex';
-    document.body.appendChild(el);
-    const flexGrow = getStyle(el, 'flexGrow');
-    el.remove();
-    if(flexGrow === '1'){
-      pass('.flex sets flex-grow: 1');
-    } else {
-      fail(`Expected flex-grow: 1, got ${flexGrow}`);
-    }
-  },
-
-  'should apply flex-0 correctly': ({pass, fail}) => {
-    const el = document.createElement('div');
-    el.className = 'flex-0';
-    document.body.appendChild(el);
-    const flexGrow = getStyle(el, 'flexGrow');
-    el.remove();
-    if(flexGrow === '0'){
-      pass('.flex-0 sets flex-grow: 0');
-    } else {
-      fail(`Expected flex-grow: 0, got ${flexGrow}`);
-    }
-  },
-
-  'should apply higher flex values': ({pass, fail}) => {
-    const el = document.createElement('div');
-    el.className = 'flex-5';
-    document.body.appendChild(el);
-    const flexGrow = getStyle(el, 'flexGrow');
-    el.remove();
-    if(flexGrow === '5'){
-      pass('.flex-5 sets flex-grow: 5');
-    } else {
-      fail(`Expected flex-grow: 5, got ${flexGrow}`);
-    }
-  },
-
-  'should apply fixed positioning with .fixed': ({pass, fail}) => {
-    const el = document.createElement('div');
-    el.className = 'fixed';
-    document.body.appendChild(el);
-    const position = getStyle(el, 'position');
-    const top = getStyle(el, 'top');
-    const width = getStyle(el, 'width');
-    const zIndex = getStyle(el, 'zIndex');
-    el.remove();
-    if(position === 'fixed' && top === '0px' && zIndex !== 'auto'){
-      pass('.fixed applies fixed positioning at top with z-index');
-    } else {
-      fail(`Expected fixed position at top, got position: ${position}, top: ${top}, z-index: ${zIndex}`);
-    }
-  }
-};
+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 display block with .d-b': ({pass, fail}) => {
+    const el = document.createElement('span');
+    el.className = 'd-b';
+    document.body.appendChild(el);
+    const display = getStyle(el, 'display');
+    el.remove();
+    if(display === 'block'){
+      pass('.d-b sets display: block');
+    } else {
+      fail(`Expected block, got ${display}`);
+    }
+  },
+
+  'should apply display inline-block with .d-ib': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'd-ib';
+    document.body.appendChild(el);
+    const display = getStyle(el, 'display');
+    el.remove();
+    if(display === 'inline-block'){
+      pass('.d-ib sets display: inline-block');
+    } else {
+      fail(`Expected inline-block, got ${display}`);
+    }
+  },
+
+  'should apply display grid with .d-g': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'd-g';
+    document.body.appendChild(el);
+    const display = getStyle(el, 'display');
+    el.remove();
+    if(display === 'grid'){
+      pass('.d-g sets display: grid');
+    } else {
+      fail(`Expected grid, got ${display}`);
+    }
+  },
+
+  'should apply display inline with .d-i': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'd-i';
+    document.body.appendChild(el);
+    const display = getStyle(el, 'display');
+    el.remove();
+    if(display === 'inline'){
+      pass('.d-i sets display: inline');
+    } else {
+      fail(`Expected inline, got ${display}`);
+    }
+  },
+
+  'should apply display none with .d-n': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'd-n';
+    document.body.appendChild(el);
+    const display = getStyle(el, 'display');
+    el.remove();
+    if(display === 'none'){
+      pass('.d-n sets display: none');
+    } else {
+      fail(`Expected none, got ${display}`);
+    }
+  },
+
+  'should apply display flex with .d-f': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'd-f';
+    document.body.appendChild(el);
+    const display = getStyle(el, 'display');
+    const flexWrap = getStyle(el, 'flexWrap');
+    el.remove();
+    if(display === 'flex' && flexWrap === 'wrap'){
+      pass('.d-f sets display: flex with wrap');
+    } else {
+      fail(`Expected flex with wrap, got display: ${display}, flex-wrap: ${flexWrap}`);
+    }
+  },
+
+  'should apply display inline-flex with .d-if': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'd-if';
+    document.body.appendChild(el);
+    const display = getStyle(el, 'display');
+    const flexWrap = getStyle(el, 'flexWrap');
+    el.remove();
+    if(display === 'inline-flex' && flexWrap === 'wrap'){
+      pass('.d-if sets display: inline-flex with wrap');
+    } else {
+      fail(`Expected inline-flex with wrap, got display: ${display}, flex-wrap: ${flexWrap}`);
+    }
+  },
+
+  'should apply flex grow with .flex classes': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'flex';
+    document.body.appendChild(el);
+    const flexGrow = getStyle(el, 'flexGrow');
+    el.remove();
+    if(flexGrow === '1'){
+      pass('.flex sets flex-grow: 1');
+    } else {
+      fail(`Expected flex-grow: 1, got ${flexGrow}`);
+    }
+  },
+
+  'should apply flex-0 correctly': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'flex-0';
+    document.body.appendChild(el);
+    const flexGrow = getStyle(el, 'flexGrow');
+    el.remove();
+    if(flexGrow === '0'){
+      pass('.flex-0 sets flex-grow: 0');
+    } else {
+      fail(`Expected flex-grow: 0, got ${flexGrow}`);
+    }
+  },
+
+  'should apply higher flex values': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'flex-5';
+    document.body.appendChild(el);
+    const flexGrow = getStyle(el, 'flexGrow');
+    el.remove();
+    if(flexGrow === '5'){
+      pass('.flex-5 sets flex-grow: 5');
+    } else {
+      fail(`Expected flex-grow: 5, got ${flexGrow}`);
+    }
+  },
+
+  'should apply fixed positioning with .fixed': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'fixed';
+    document.body.appendChild(el);
+    const position = getStyle(el, 'position');
+    const top = getStyle(el, 'top');
+    const width = getStyle(el, 'width');
+    const zIndex = getStyle(el, 'zIndex');
+    el.remove();
+    if(position === 'fixed' && top === '0px' && zIndex !== 'auto'){
+      pass('.fixed applies fixed positioning at top with z-index');
+    } else {
+      fail(`Expected fixed position at top, got position: ${position}, top: ${top}, z-index: ${zIndex}`);
+    }
+  }
+};

package/tests/elevation.browser-test.js

@@ -0,0 +1,239 @@
+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 {
+  'elevation-0 should set z-index 0': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'elevation-0';
+    el.style.position = 'relative';
+    document.body.appendChild(el);
+    const zIndex = getStyle(el, 'zIndex');
+    el.remove();
+    if(zIndex === '0'){
+      pass(`elevation-0 has z-index: ${zIndex}`);
+    } else {
+      fail(`Expected z-index 0, got ${zIndex}`);
+    }
+  },
+
+  'elevation-2 should set z-index 20': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'elevation-2';
+    el.style.position = 'relative';
+    document.body.appendChild(el);
+    const zIndex = getStyle(el, 'zIndex');
+    el.remove();
+    if(zIndex === '20'){
+      pass(`elevation-2 has z-index: ${zIndex}`);
+    } else {
+      fail(`Expected z-index 20, got ${zIndex}`);
+    }
+  },
+
+  'elevation-5 should set z-index 50': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'elevation-5';
+    el.style.position = 'relative';
+    document.body.appendChild(el);
+    const zIndex = getStyle(el, 'zIndex');
+    el.remove();
+    if(zIndex === '50'){
+      pass(`elevation-5 has z-index: ${zIndex}`);
+    } else {
+      fail(`Expected z-index 50, got ${zIndex}`);
+    }
+  },
+
+  'elevation-10 should set z-index 100': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'elevation-10';
+    el.style.position = 'relative';
+    document.body.appendChild(el);
+    const zIndex = getStyle(el, 'zIndex');
+    el.remove();
+    if(zIndex === '100'){
+      pass(`elevation-10 has z-index: ${zIndex}`);
+    } else {
+      fail(`Expected z-index 100, got ${zIndex}`);
+    }
+  },
+
+  'elevation-* should not set background-color': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'elevation-5';
+    document.body.appendChild(el);
+    const bg = getStyle(el, 'backgroundColor');
+    const bodyBg = getStyle(document.body, 'backgroundColor');
+    el.remove();
+    if(bg === bodyBg || bg === 'rgba(0, 0, 0, 0)' || bg === 'transparent'){
+      pass(`elevation-5 does not set background-color (got: ${bg})`);
+    } else {
+      fail(`elevation-5 should not set background-color, got ${bg}`);
+    }
+  },
+
+  'elevation-* should not set box-shadow': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'elevation-5';
+    document.body.appendChild(el);
+    const shadow = getStyle(el, 'boxShadow');
+    el.remove();
+    if(shadow === 'none'){
+      pass('elevation-5 does not set box-shadow');
+    } else {
+      fail(`elevation-5 should not set box-shadow, got ${shadow}`);
+    }
+  },
+
+  '.shadow.elevation-0 should have inset box-shadow': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'elevation-0 shadow';
+    document.body.appendChild(el);
+    const shadow = getStyle(el, 'boxShadow');
+    el.remove();
+    if(shadow && shadow !== 'none' && shadow.includes('inset')){
+      pass(`.shadow.elevation-0 has inset shadow: ${shadow}`);
+    } else {
+      fail(`Expected inset shadow for elevation-0 shadow, got ${shadow}`);
+    }
+  },
+
+  '.shadow.elevation-1 should have inset box-shadow': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'elevation-1 shadow';
+    document.body.appendChild(el);
+    const shadow = getStyle(el, 'boxShadow');
+    el.remove();
+    if(shadow && shadow !== 'none' && shadow.includes('inset')){
+      pass(`.shadow.elevation-1 has inset shadow: ${shadow}`);
+    } else {
+      fail(`Expected inset shadow for elevation-1 shadow, got ${shadow}`);
+    }
+  },
+
+  '.shadow.elevation-2 should have no box-shadow': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'elevation-2 shadow';
+    document.body.appendChild(el);
+    const shadow = getStyle(el, 'boxShadow');
+    el.remove();
+    if(shadow === 'none'){
+      pass('.shadow.elevation-2 has no shadow (page level)');
+    } else {
+      fail(`Expected no shadow for elevation-2 shadow, got ${shadow}`);
+    }
+  },
+
+  '.shadow.elevation-3 should have outset box-shadow': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'elevation-3 shadow';
+    document.body.appendChild(el);
+    const shadow = getStyle(el, 'boxShadow');
+    el.remove();
+    if(shadow && shadow !== 'none' && !shadow.includes('inset')){
+      pass(`.shadow.elevation-3 has outset shadow: ${shadow}`);
+    } else {
+      fail(`Expected outset shadow for elevation-3 shadow, got ${shadow}`);
+    }
+  },
+
+  '.shadow.elevation-10 should have large outset box-shadow': ({pass, fail}) => {
+    const el3 = document.createElement('div');
+    el3.className = 'elevation-3 shadow';
+    document.body.appendChild(el3);
+    const shadow3 = getStyle(el3, 'boxShadow');
+    el3.remove();
+
+    const el10 = document.createElement('div');
+    el10.className = 'elevation-10 shadow';
+    document.body.appendChild(el10);
+    const shadow10 = getStyle(el10, 'boxShadow');
+    el10.remove();
+
+    if(shadow10 && shadow10 !== 'none' && !shadow10.includes('inset') && shadow10 !== shadow3){
+      pass(`.shadow.elevation-10 has larger shadow than elevation-3`);
+    } else {
+      fail(`Expected elevation-10 shadow to be larger than elevation-3. elevation-3=${shadow3}, elevation-10=${shadow10}`);
+    }
+  },
+
+  '.bg-elevation.elevation-0 should apply background color': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'elevation-0 bg-elevation';
+    document.body.appendChild(el);
+    const bg = getStyle(el, 'backgroundColor');
+    el.remove();
+    if(bg && bg !== 'rgba(0, 0, 0, 0)'){
+      pass(`.bg-elevation.elevation-0 has background: ${bg}`);
+    } else {
+      fail(`Expected background color for bg-elevation elevation-0, got ${bg}`);
+    }
+  },
+
+  '.bg-elevation.elevation-2 should match --c_bg': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'elevation-2 bg-elevation';
+    document.body.appendChild(el);
+    const bg = getStyle(el, 'backgroundColor');
+    const bodyBg = getStyle(document.body, 'backgroundColor');
+    el.remove();
+    if(bg === bodyBg){
+      pass(`.bg-elevation.elevation-2 matches body background: ${bg}`);
+    } else {
+      fail(`Expected elevation-2 bg-elevation to match body bg. got ${bg}, body=${bodyBg}`);
+    }
+  },
+
+  '.bg-elevation.elevation-0 should be darker than elevation-2 in light mode': ({pass, fail}) => {
+    const el0 = document.createElement('div');
+    el0.className = 'elevation-0 bg-elevation';
+    document.body.appendChild(el0);
+    const bg0 = getStyle(el0, 'backgroundColor');
+    el0.remove();
+
+    const el2 = document.createElement('div');
+    el2.className = 'elevation-2 bg-elevation';
+    document.body.appendChild(el2);
+    const bg2 = getStyle(el2, 'backgroundColor');
+    el2.remove();
+
+    const parseRgb = (s) => {
+      const m = s.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+      return m ? parseInt(m[1]) + parseInt(m[2]) + parseInt(m[3]) : 0;
+    };
+
+    const brightness0 = parseRgb(bg0);
+    const brightness2 = parseRgb(bg2);
+
+    if(brightness0 < brightness2){
+      pass(`elevation-0 bg (${bg0}) is darker than elevation-2 bg (${bg2})`);
+    } else {
+      fail(`Expected elevation-0 to be darker than elevation-2. bg0=${bg0}, bg2=${bg2}`);
+    }
+  },
+
+  '.bg-elevation lower levels should have distinct backgrounds': ({pass, fail}) => {
+    const levels = [0, 1, 2, 3, 4];
+    const bgs = levels.map(n => {
+      const el = document.createElement('div');
+      el.className = `elevation-${n} bg-elevation`;
+      document.body.appendChild(el);
+      const bg = getStyle(el, 'backgroundColor');
+      el.remove();
+      return bg;
+    });
+    const unique = new Set(bgs);
+    if(unique.size === bgs.length){
+      pass(`bg-elevation levels 0–4 all have distinct background colors`);
+    } else {
+      fail(`Expected distinct backgrounds for levels ${levels.join(', ')}, got: ${bgs.join(', ')}`);
+    }
+  },
+};