umy-ui-table 1.2.4 → 1.2.6

package/packages/ux-grid/test/browser-acceptance.cjs

@@ -0,0 +1,192 @@
+// Run with UX_GRID_TEST_DEPENDENCIES pointing to an installed legacy consumer.
+// No dependencies downloaded; creates a temporary bundle and isolated Chrome profile.
+const fs = require('fs');
+const os = require('os');
+const path = require('path');
+const http = require('http');
+const { spawn } = require('child_process');
+const webpack = require('webpack');
+const WebSocket = require('ws');
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
+const root = path.resolve(__dirname, '../../..');
+const consumer = process.env.UX_GRID_TEST_DEPENDENCIES;
+if (!consumer) throw Error('Set UX_GRID_TEST_DEPENDENCIES to legacy consumer project');
+const output = fs.mkdtempSync(path.join(os.tmpdir(), 'ux-grid-browser-'));
+const chromePath = process.env.UX_GRID_TEST_CHROME || '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome';
+let chrome, server, ws;
+const results = {};
+const uiOnly = process.env.UX_GRID_TEST_SUITE === 'ui';
+const extendedOnly = process.env.UX_GRID_TEST_SUITE === 'extended';
+const persist = () => fs.writeFileSync(path.join(output, 'results.json'), JSON.stringify(results, null, 2));
+const pending = new Map();
+let id = 0;
+function call(method, params = {}, sessionId) {
+  return new Promise((resolve, reject) => {
+    const requestId = ++id;
+    const timer = setTimeout(() => { pending.delete(requestId); reject(Error('CDP timeout: ' + method)); }, 60000);
+    pending.set(requestId, { resolve: result => { clearTimeout(timer); resolve(result); }, reject: error => { clearTimeout(timer); reject(error); } });
+    ws.send(JSON.stringify({ id: requestId, method, params, sessionId }));
+  });
+}
+(async () => {
+  const config = {
+    mode: 'development', devtool: false, entry: path.join(__dirname, 'browser-entry.js'),
+    output: { path: output, filename: 'bundle.js' },
+    resolve: { extensions: ['.js', '.vue', '.json'], alias: {
+      'vue$': require.resolve('vue/dist/vue.runtime.esm.js'),
+      'element-ui': path.join(consumer, 'node_modules/element-ui'),
+      'umy-table': path.join(consumer, 'node_modules/umy-table'),
+      'umy-ui': root
+    }, modules: [path.join(root, 'node_modules'), path.join(consumer, 'node_modules')] },
+    module: { rules: [
+      { test: /\.vue$/, loader: 'vue-loader' },
+      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' },
+      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
+      { test: /\.(woff|ttf)$/, loader: 'file-loader' }
+    ] }, plugins: [new VueLoaderPlugin(), new webpack.NormalModuleReplacementPlugin(/^xe-utils(?:\/.*)?$/, resource => {
+      if (resource.context.includes(path.join(consumer, 'node_modules/umy-table'))) resource.request = require.resolve(resource.request, { paths: [consumer] });
+    })], performance: { hints: false }
+  };
+  await new Promise((resolve, reject) => webpack(config, (error, stats) => error || stats.hasErrors() ? reject(error || Error(stats.toString({ all: false, errors: true }))) : resolve()));
+  const baselineConfig = { ...config, output: { ...config.output, filename: 'baseline.js' }, module: { rules: [
+    { test: /\.(js|vue)$/, enforce: 'pre', include: path.join(root, 'packages/ux-grid'), exclude: path.join(__dirname), loader: path.join(__dirname, 'browser-baseline-loader.cjs') },
+    ...config.module.rules
+  ] } };
+  if (!uiOnly && !extendedOnly) await new Promise((resolve, reject) => webpack(baselineConfig, (error, stats) => error || stats.hasErrors() ? reject(error || Error(stats.toString({ all: false, errors: true }))) : resolve()));
+  server = http.createServer((request, response) => {
+    const asset = path.join(output, path.basename(request.url.split('?')[0]));
+    if (fs.existsSync(asset) && fs.statSync(asset).isFile()) { response.setHeader('Content-Type', request.url.endsWith('.js') ? 'application/javascript; charset=utf-8' : 'application/octet-stream'); fs.createReadStream(asset).pipe(response); }
+    else { response.setHeader('Content-Type', 'text/html; charset=utf-8'); response.end('<!doctype html><html><head><meta charset="utf-8"></head><body><script>window.bootErrors=[];window.onerror=function(m,u,l,c,e){bootErrors.push({message:m,url:u,line:l,stack:e&&e.stack})}</script><script src="/' + (request.url.includes('baseline=1') ? 'baseline.js' : 'bundle.js') + '"></script></body></html>'); }
+  });
+  await new Promise(resolve => server.listen(0, '127.0.0.1', resolve));
+  const endpoint = await new Promise((resolve, reject) => {
+    chrome = spawn(chromePath, ['--headless=new', '--disable-gpu', '--no-first-run', '--no-default-browser-check', '--remote-debugging-port=0', '--user-data-dir=' + path.join(output, 'profile'), 'about:blank']);
+    chrome.on('error', reject);
+    chrome.on('exit', code => reject(Error('Chrome exited: ' + code)));
+    chrome.stderr.on('data', data => { const match = String(data).match(/DevTools listening on (ws:\/\/[^\s]+)/); if (match) resolve(match[1]); });
+  });
+  ws = new WebSocket(endpoint);
+  await new Promise(resolve => ws.on('open', resolve));
+  ws.on('message', message => {
+    const data = JSON.parse(message);
+    if (pending.has(data.id)) { const entry = pending.get(data.id); pending.delete(data.id); data.error ? entry.reject(Error(JSON.stringify(data.error))) : entry.resolve(data.result); }
+  });
+  for (const version of (uiOnly || extendedOnly ? ['current'] : ['legacy', 'baseline', 'current'])) {
+    const legacy = version === 'legacy';
+    const { targetId } = await call('Target.createTarget', { url: 'about:blank' });
+    const { sessionId } = await call('Target.attachToTarget', { targetId, flatten: true });
+    await call('Emulation.setDeviceMetricsOverride', { width: 1200, height: 800, deviceScaleFactor: 1, mobile: false }, sessionId);
+    const evaluate = async expression => {
+      const result = await call('Runtime.evaluate', { expression, awaitPromise: true, returnByValue: true }, sessionId);
+      if (result.exceptionDetails) throw Error(JSON.stringify(result.exceptionDetails));
+      return result.result.value;
+    };
+    await call('Page.navigate', { url: 'http://127.0.0.1:' + server.address().port + '/?legacy=' + Number(legacy) + '&baseline=' + Number(version === 'baseline') }, sessionId);
+    for (let attempt = 0; attempt < 100; attempt++) {
+      if (await evaluate('Boolean(window.acceptance)')) break;
+      await new Promise(resolve => setTimeout(resolve, 100));
+    }
+    const suite = results[version] = {};
+    console.log('boot errors:', await evaluate('window.bootErrors'));
+    if (extendedOnly) {
+      suite.mount = await evaluate('acceptance.mount(20)');
+      suite.prepare = await evaluate('acceptance.pointerAndKeyboardPrepare()');
+      for (const [key, code] of [['ArrowDown', 40], ['Enter', 13]]) {
+        await call('Input.dispatchKeyEvent', { type: 'keyDown', key, code: key, windowsVirtualKeyCode: code }, sessionId);
+        await call('Input.dispatchKeyEvent', { type: 'keyUp', key, code: key, windowsVirtualKeyCode: code }, sessionId);
+        await evaluate('new Promise(resolve => setTimeout(resolve, 150))');
+        suite[key] = await evaluate('({selected: (grid.getSelectedCell() || {}).row && grid.getSelectedCell().row.id, field: (grid.getSelectedCell() || {}).column && grid.getSelectedCell().column.field, input: Boolean(document.querySelector(".el-input__inner")), errors: window.testErrors})');
+      }
+      suite.layout = await evaluate('acceptance.complexLayout()');
+      const shot = await call('Page.captureScreenshot', { format: 'png' }, sessionId);
+      fs.writeFileSync(path.join(output, 'extended.png'), Buffer.from(shot.data, 'base64'));
+      persist(); console.log(JSON.stringify(suite, null, 2));
+      if (suite.ArrowDown.selected !== 2 || suite.ArrowDown.field !== 'name' || suite.Enter.selected !== 3 || suite.Enter.field !== 'name' || !suite.layout.merged || !suite.layout.fixed || !suite.layout.bottomVisible || suite.layout.renderedRows > 100 || suite.layout.errors.length) process.exitCode = 1;
+      await call('Target.closeTarget', { targetId });
+      continue;
+    }
+    if (uiOnly) {
+      suite.mount = await evaluate('acceptance.mountUI()');
+      await call('Input.dispatchMouseEvent', { type: 'mouseMoved', x: suite.mount.x, y: suite.mount.y }, sessionId);
+      suite.tooltip = await evaluate('acceptance.tooltipResult()');
+      for (const [name, expression] of [['tooltip', null], ['validation', 'acceptance.validationUI()'], ['loading', 'acceptance.loadingUI(true)']]) {
+        if (expression) suite[name] = await evaluate(expression);
+        const shot = await call('Page.captureScreenshot', { format: 'png' }, sessionId);
+        fs.writeFileSync(path.join(output, name + '.png'), Buffer.from(shot.data, 'base64'));
+      }
+      suite.loadingOff = await evaluate('acceptance.loadingUI(false)');
+      suite.legacyIcons = await evaluate('acceptance.legacyIconStyles()');
+      suite.customIcon = await evaluate('acceptance.customIconOverride()');
+      persist();
+      console.log(JSON.stringify(suite, null, 2));
+      if (!suite.mount.overflow || !suite.tooltip.visible || !suite.validation.visible || !suite.loading.visible || !suite.loading.fontLoaded || !suite.loading.animated || !suite.loading.glyph || ['none', 'normal', '""'].includes(suite.loading.glyph) || !suite.loadingOff.hidden || Object.values(suite).some(item => item.failure || item.errors && item.errors.length)) process.exitCode = 1;
+      if (!suite.legacyIcons.every(icon => icon.preserved)) process.exitCode = 1;
+      if (!suite.customIcon.preserved) process.exitCode = 1;
+      await call('Target.closeTarget', { targetId });
+      continue;
+    }
+    for (const [name, expression] of [
+      ['mount', 'acceptance.mount(20)'], ['interaction', 'acceptance.exercise()'],
+      ['pointer', 'acceptance.pointerAndKeyboardPrepare()'],
+      ['treeMount', 'acceptance.mount(2, true)'], ['tree', 'acceptance.tree()'],
+      ['lazyTreeMount', 'acceptance.mount(2, "lazy")'], ['lazyTree', 'acceptance.tree()'],
+      ['legacyScrollConfig', 'acceptance.mount(200, false, false)'],
+      ['mount10000', 'acceptance.mount(10000)'], ['performance10000', 'acceptance.performance()'],
+      ['mount50000', 'acceptance.mount(50000)'], ['performance50000', 'acceptance.performance()']
+    ]) {
+      try { suite[name] = await evaluate(expression); } catch (error) { suite[name] = { failure: error.message }; }
+      console.log(version + ' ' + name + ': ' + JSON.stringify(suite[name]));
+      persist();
+      if (name === 'interaction') {
+        const screenshot = await call('Page.captureScreenshot', { format: 'png' }, sessionId);
+        fs.writeFileSync(path.join(output, version + '.png'), Buffer.from(screenshot.data, 'base64'));
+        await evaluate('acceptance.openSelect()');
+        const selectShot = await call('Page.captureScreenshot', { format: 'png' }, sessionId);
+        fs.writeFileSync(path.join(output, version + '-select.png'), Buffer.from(selectShot.data, 'base64'));
+      }
+      if (name === 'pointer' && !suite[name].failure) {
+        await call('Input.dispatchMouseEvent', { type: 'mousePressed', x: suite[name].x, y: suite[name].y, button: 'left', clickCount: 1 }, sessionId);
+        await call('Input.dispatchMouseEvent', { type: 'mouseReleased', x: suite[name].x, y: suite[name].y, button: 'left', clickCount: 1 }, sessionId);
+        await call('Input.dispatchKeyEvent', { type: 'keyDown', key: 'Tab', code: 'Tab', windowsVirtualKeyCode: 9 }, sessionId);
+        await call('Input.dispatchKeyEvent', { type: 'keyUp', key: 'Tab', code: 'Tab', windowsVirtualKeyCode: 9 }, sessionId);
+        suite.keyboard = await evaluate('acceptance.keyboardResult()');
+        console.log(version + ' keyboard: ' + JSON.stringify(suite.keyboard));
+      }
+    }
+    for (const count of [10000, 50000]) {
+      suite['samples' + count] = [];
+      for (let round = 0; round < 3; round++) {
+        const mount = await evaluate('acceptance.mount(' + count + ')');
+        const operation = await evaluate('acceptance.performance()');
+        suite['samples' + count].push({ mountMs: mount.mountMs, ...operation });
+      }
+      console.log(version + ' samples' + count + ': ' + JSON.stringify(suite['samples' + count]));
+    }
+    await call('Target.closeTarget', { targetId });
+  }
+  console.log('Result directory: ' + output);
+  persist();
+  if (uiOnly || extendedOnly) return;
+  for (const version of ['legacy', 'current']) {
+    const suite = results[version];
+    const required = ['interaction', 'lazyTree', 'tree', 'legacyScrollConfig', 'pointer', 'keyboard'];
+    if (required.some(name => !suite[name] || suite[name].failure) || !Array.isArray(suite.pointer.selectionEvents)) {
+      suite.assertionFailure = 'Missing or failed required interaction result';
+      process.exitCode = 1;
+      continue;
+    }
+    const interaction = suite.interaction;
+    if (!suite.lazyTree || !suite.lazyTree.childVisible || suite.lazyTree.lazyCalls !== 1) process.exitCode = 1;
+    if (!interaction || interaction.sortedFirst !== 1 || interaction.selected !== 20 || interaction.edited !== 'Edited' || interaction.role !== 'b' || !interaction.invalid || !interaction.valid || !suite.tree.childVisible || suite.legacyScrollConfig.renderedRows >= 100 || suite.pointer.checked !== 1 || suite.pointer.selectionEvents.join(',') !== '1' || suite.keyboard.field !== 'amount') process.exitCode = 1;
+    for (const count of [10000, 50000]) {
+      if (!Array.isArray(suite['samples' + count]) || suite['samples' + count].some(sample => sample.selected !== count || !sample.lastRowVisible || !sample.editInputPresent || sample.renderedRows > 100 || !Array.isArray(sample.errors) || sample.errors.length)) process.exitCode = 1;
+    }
+  }
+  fs.writeFileSync(path.join(output, 'results.json'), JSON.stringify(results, null, 2));
+  if (Object.values(results).some(suite => Object.values(suite).some(result => result.failure || result.errors && result.errors.length))) process.exitCode = 1;
+})().catch(error => { results.failure = error.stack || String(error); persist(); console.error(error); console.error('Result directory: ' + output); process.exitCode = 1; }).finally(() => {
+  if (ws) ws.close();
+  if (chrome) chrome.kill();
+  if (server) server.close();
+  setTimeout(() => process.exit(process.exitCode || 0), 500);
+});

package/packages/ux-grid/test/browser-baseline-loader.cjs

@@ -0,0 +1,10 @@
+// Read committed source without modifying the worktree; all dependencies stay fixed.
+const { execFileSync } = require('child_process');
+const path = require('path');
+module.exports = function (source) {
+  const root = path.resolve(__dirname, '../../..');
+  const relative = path.relative(root, this.resourcePath);
+  if (!/^packages\/ux-grid\/(src|mixins)\//.test(relative)) return source;
+  try { return execFileSync('git', ['show', 'HEAD:' + relative], { cwd: root, encoding: 'utf8', stdio: ['ignore', 'pipe', 'ignore'] }); }
+  catch (error) { throw Error('Missing committed baseline source: ' + relative); }
+};

package/packages/ux-grid/test/browser-entry.js

@@ -0,0 +1,242 @@
+/* Real-layout acceptance page; loaded in an isolated Chromium context. */
+import 'babel-polyfill';
+import Vue from 'vue';
+import Element from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+Vue.use(Element);
+Vue.config.productionTip = false;
+window.testErrors = [];
+window.longTasks = [];
+if (window.PerformanceObserver) new PerformanceObserver(list => window.longTasks.push(...list.getEntries().map(entry => ({ start: entry.startTime, duration: entry.duration })))).observe({ entryTypes: ['longtask'] });
+Vue.config.errorHandler = error => window.testErrors.push(error.stack || String(error));
+const legacy = new URLSearchParams(location.search).get('legacy') === '1';
+let Grid;
+if (legacy) {
+  const old = require('umy-table/lib/umy-table.common.js');
+  Vue.use(old.default || old);
+  Grid = Vue.options.components.UxGrid;
+  require('umy-table/lib/theme-chalk/index.css');
+} else {
+  Grid = require('../src/ux-grid.vue').default;
+  require('../../../lib/theme-chalk/ux-grid.css');
+}
+const delay = (ms = 100) => new Promise(resolve => setTimeout(resolve, ms));
+window.acceptance = {
+  async mountUI() {
+    if (window.vm) { window.vm.$destroy(); window.vm.$el.remove(); }
+    window.vm = new Vue({
+      data: () => ({ loading: false, rows: [{ id: 1, name: 'Overflow tooltip must display this entire long sentence', required: '' }] }),
+      render(h) { return h(Grid, { ref: 'grid', props: {
+        data: this.rows, height: 300, loading: this.loading, showOverflow: 'tooltip',
+        validConfig: { message: 'tooltip' }, editConfig: { trigger: 'click', mode: 'cell' },
+        rules: { required: [{ required: true, message: 'Required tooltip validation' }] },
+        columns: [{ field: 'name', title: 'Overflow', width: 120 }, { field: 'required', title: 'Required', width: 160, editRender: { name: 'ElInput' } }]
+      } }); }
+    }).$mount();
+    document.body.appendChild(vm.$el);
+    await delay(350);
+    window.grid = vm.$refs.grid.$refs.singleTable;
+    const cell = document.querySelector('tbody tr td .vxe-cell');
+    const rect = cell.getBoundingClientRect();
+    const textRange = document.createRange();
+    textRange.selectNodeContents(cell);
+    return { x: rect.x + 25, y: rect.y + 12, overflow: textRange.getBoundingClientRect().width > cell.closest('td').getBoundingClientRect().width };
+  },
+  async tooltipResult(validation = false) {
+    await delay(750);
+    const expected = validation ? 'Required tooltip validation' : vm.rows[0].name;
+    const popups = Array.from(document.querySelectorAll('.vxe-tooltip--wrapper'));
+    return { visible: popups.some(el => el.textContent.includes(expected) && el.getBoundingClientRect().width > 0 && getComputedStyle(el).visibility !== 'hidden' && getComputedStyle(el).display !== 'none'), expected, errors: window.testErrors };
+  },
+  async validationUI() {
+    try { await grid.fullValidate(vm.rows); } catch (_) { /* Legacy and new rejection conventions differ. */ }
+    return this.tooltipResult(true);
+  },
+  async loadingUI(value) {
+    vm.loading = value;
+    await delay(150);
+    const mask = document.querySelector('.vxe-loading.is--visible');
+    if (!value) return { hidden: !mask || getComputedStyle(mask).display === 'none', errors: window.testErrors };
+    const icon = mask && mask.querySelector('.vxe-loading--icon i');
+    if (!icon) return { visible: Boolean(mask), failure: 'Default loading icon missing' };
+    await document.fonts.ready;
+    const style = getComputedStyle(icon), pseudo = getComputedStyle(icon, '::before'), rect = icon.getBoundingClientRect();
+    const first = style.transform;
+    await delay(170);
+    return { visible: rect.width > 0 && rect.height > 0 && style.visibility !== 'hidden' && style.display !== 'none',
+      glyph: pseudo.content, font: pseudo.fontFamily,
+      fontLoaded: Array.from(document.fonts).some(font => pseudo.fontFamily.includes(font.family.replace(/['"]/g, '')) && font.status === 'loaded'),
+      animated: first !== getComputedStyle(icon).transform, firstTransform: first, secondTransform: getComputedStyle(icon).transform, errors: window.testErrors };
+  },
+  legacyIconStyles() {
+    const parent = document.createElement('div');
+    parent.style.fontSize = '23px';
+    document.body.appendChild(parent);
+    const result = ['vxe-icon--upload', 'vxe-icon--eye'].map(name => {
+      const icon = document.createElement('i');
+      icon.className = name;
+      parent.appendChild(icon);
+      const style = getComputedStyle(icon);
+      return { name, font: style.fontFamily, size: style.fontSize, parentSize: getComputedStyle(parent).fontSize,
+        preserved: !style.fontFamily.includes('vxeiconfont') && style.fontSize === getComputedStyle(parent).fontSize };
+    });
+    parent.remove();
+    return result;
+  },
+  customIconOverride() {
+    const style = document.createElement('style');
+    style.textContent = '.vxe-icon-spinner{font-family:consumer-test!important}';
+    document.head.appendChild(style);
+    const icon = document.createElement('i');
+    icon.className = 'vxe-icon-spinner';
+    document.body.appendChild(icon);
+    const font = getComputedStyle(icon).fontFamily;
+    icon.remove(); style.remove();
+    return { font, preserved: font.includes('consumer-test') };
+  },
+  async complexLayout() {
+    await this.mount(200);
+    await grid.loadColumn([{ field: 'name', title: 'Fixed name', fixed: 'left', width: 200 }, { field: 'amount', title: 'Merged amount', width: 300 }, { field: 'role', title: 'Wide role', width: 1400 }]);
+    await grid.setMergeCells([{ row: 0, col: 1, rowspan: 2, colspan: 1 }]);
+    await delay(200);
+    const merged = document.querySelector('td[rowspan="2"]');
+    const fixed = document.querySelector('.vxe-table--fixed-left-wrapper');
+    const result = { merged: Boolean(merged), fixed: Boolean(fixed && fixed.getBoundingClientRect().width > 0), renderedRows: document.querySelectorAll('tbody tr').length };
+    await grid.scrollTo(800, 100000);
+    await delay(250);
+    result.bottomVisible = document.body.innerText.includes('Row 199');
+    result.errors = window.testErrors;
+    return result;
+  },
+  async mount(count, tree = false, explicitEnabled = true) {
+    if (window.vm) { window.vm.$destroy(); window.vm.$el.remove(); }
+    const rows = Array.from({ length: count }, (_, index) => ({ id: index + 1, name: 'Row ' + index, amount: count - index, role: 'a' }));
+    window.lazyCalls = 0;
+    if (tree === 'lazy') rows[0].hasChildren = true;
+    else if (tree) rows[0].children = [{ id: 'child', name: 'Child row', amount: 0, role: 'a' }];
+    const start = performance.now();
+    window.vm = new Vue({
+      data: () => ({ rows }),
+      render(h) {
+        return h(Grid, { ref: 'grid', props: {
+          data: this.rows, height: 420, rowId: 'id', border: true,
+          scrollY: explicitEnabled ? { enabled: true, gt: 0 } : { gt: 0 }, scrollX: { enabled: true, gt: 0 },
+          treeConfig: tree === 'lazy' ? { children: 'children', lazy: true, hasChild: 'hasChildren', loadMethod: ({ row }) => { window.lazyCalls++; return Promise.resolve([{ id: row.id + '-child', name: 'Child row', amount: 0, role: 'a' }]); } } : tree ? { children: 'children' } : null,
+          editConfig: { trigger: 'click', mode: 'cell' },
+          keyboardConfig: { isTab: true, isArrow: true, isEdit: true, isEnter: true }, mouseConfig: { selected: true },
+          rules: { name: [{ required: true, message: 'Name required' }] },
+          columns: [
+            { type: 'checkbox', width: 50 },
+            { field: 'name', title: 'Name', width: 200, treeNode: tree, editRender: { name: 'ElInput' } },
+            { field: 'amount', title: 'Amount', width: 150, sortable: true },
+            { field: 'role', title: 'Role', width: 180, editRender: { name: 'ElSelect', options: [{ label: 'Alpha', value: 'a' }, { label: 'Beta', value: 'b' }] } }
+          ]
+        } });
+      }
+    }).$mount();
+    document.body.appendChild(window.vm.$el);
+    await delay(350);
+    window.wrapper = window.vm.$refs.grid;
+    window.grid = window.wrapper.$refs.singleTable;
+    return { count, mountMs: performance.now() - start, renderedRows: document.querySelectorAll('tbody tr').length, text: document.body.innerText.slice(0, 250) };
+  },
+  async exercise() {
+    const g = window.grid;
+    await g.sort('amount', 'asc');
+    const sorted = g.getTableData().visibleData || g.getTableData().fullData;
+    await g.setAllCheckboxRow(true);
+    const selected = g.getCheckboxRecords().length;
+    await g.clearCheckboxRow();
+    const row = window.vm.rows[0];
+    await (g.setEditCell || g.setActiveCell).call(g, row, 'name');
+    await delay();
+    const input = document.querySelector('.el-input__inner');
+    if (!input) throw Error('Element edit input missing');
+    input.value = 'Edited';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    await Vue.nextTick();
+    const edited = row.name;
+    await (g.clearEdit || g.clearActived).call(g);
+    await (g.setEditCell || g.setActiveCell).call(g, row, 'role');
+    await delay();
+    document.querySelector('.el-select .el-input__inner').click();
+    await delay();
+    const options = Array.from(document.querySelectorAll('.el-select-dropdown__item'));
+    const labels = options.map(option => option.textContent.trim());
+    const beta = options.find(option => option.textContent.trim() === 'Beta');
+    if (beta) beta.click();
+    await delay();
+    await (g.clearEdit || g.clearActived).call(g);
+    row.name = '';
+    let invalid = false;
+    try { const errors = await g.fullValidate([row]); invalid = Boolean(errors && errors.name); }
+    catch (errors) { invalid = Boolean(errors && errors.name); }
+    row.name = 'Edited';
+    await g.clearValidate();
+    const valid = !(await g.fullValidate([row]));
+    return { sortedFirst: sorted[0].amount, selected, edited, labels, role: row.role, invalid, valid, errors: window.testErrors };
+  },
+  async openSelect() {
+    await (grid.setEditCell || grid.setActiveCell).call(grid, vm.rows[0], 'role');
+    await delay();
+    document.querySelector('.el-select .el-input__inner').click();
+    await delay();
+    return { optionCount: document.querySelectorAll('.el-select-dropdown__item').length };
+  },
+  async pointerAndKeyboardPrepare() {
+    await (grid.clearEdit || grid.clearActived).call(grid);
+    await grid.clearSort();
+    await grid.clearCheckboxRow();
+    await grid.scrollTo(0, 0);
+    await delay();
+    window.selectionEvents = [];
+    wrapper.$on('selection-change', rows => window.selectionEvents.push(typeof rows === 'function' ? rows().length : rows.length));
+    const checkbox = document.querySelector('tbody tr .vxe-cell--checkbox,tbody tr .elx-cell--checkbox');
+    checkbox.click();
+    const checked = grid.getCheckboxRecords().length;
+    const cell = document.querySelector('tbody tr td:nth-child(2)');
+    const contextEvent = new MouseEvent('contextmenu', { bubbles: true, cancelable: true });
+    cell.dispatchEvent(contextEvent);
+    await grid.setSelectCell(vm.rows[0], 'name');
+    const bounds = cell.getBoundingClientRect();
+    return { checked, selectionEvents: window.selectionEvents, contextPrevented: contextEvent.defaultPrevented, x: bounds.x + 30, y: bounds.y + 15 };
+  },
+  async keyboardResult() {
+    await delay();
+    const selected = (grid.getSelectedCell || grid.getSelectCell).call(grid);
+    return { field: selected && selected.column && (selected.column.field || selected.column.property), errors: window.testErrors };
+  },
+  async performance() {
+    const g = window.grid;
+    const operationStart = performance.now();
+    let start = performance.now();
+    await g.setAllCheckboxRow(true);
+    const selectMs = performance.now() - start;
+    const selected = g.getCheckboxRecords().length;
+    await g.clearCheckboxRow();
+    const body = document.querySelector('.vxe-table--scroll-y-handle') || document.querySelector('.vxe-table--body-wrapper,.elx-table--body-wrapper');
+    start = performance.now();
+    body.scrollTop = body.scrollHeight;
+    body.dispatchEvent(new Event('scroll'));
+    await delay(200);
+    const result = { selectMs, selected, scrollMs: performance.now() - start, scrollTop: body.scrollTop, renderedRows: document.querySelectorAll('tbody tr').length, lastRowVisible: document.body.innerText.includes('Row ' + (window.vm.rows.length - 1)), errors: window.testErrors };
+    start = performance.now();
+    await (g.setEditCell || g.setActiveCell).call(g, window.vm.rows[window.vm.rows.length - 1], 'name');
+    await Vue.nextTick();
+    result.editMs = performance.now() - start;
+    result.editInputPresent = Boolean(document.querySelector('.el-input__inner'));
+    await (g.clearEdit || g.clearActived).call(g);
+    start = performance.now();
+    await g.refreshColumn();
+    result.refreshColumnMs = performance.now() - start;
+    await delay(50);
+    result.longTasks = window.longTasks.filter(task => task.start >= operationStart);
+    result.usedJSHeapSize = performance.memory ? performance.memory.usedJSHeapSize : null;
+    return result;
+  },
+  async tree() {
+    await window.grid.setTreeExpand(window.vm.rows[0], true);
+    await delay();
+    return { childVisible: document.body.innerText.includes('Child row'), lazyCalls: window.lazyCalls, errors: window.testErrors };
+  }
+};

package/packages/ux-grid/test/browser-layout-contracts.cjs

@@ -0,0 +1,105 @@
+// Real Chrome geometry, not jsdom. Uses only installed dependencies, isolated assets/profile.
+const fs = require('fs'), os = require('os'), path = require('path'), http = require('http');
+const { spawn } = require('child_process');
+const assert = require('assert');
+const webpack = require('webpack'), WebSocket = require('ws');
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
+const root = path.resolve(__dirname, '../../..');
+const consumer = process.env.UX_GRID_TEST_DEPENDENCIES;
+if (!consumer) throw Error('Set UX_GRID_TEST_DEPENDENCIES');
+const output = fs.mkdtempSync(path.join(os.tmpdir(), 'ux-grid-layout-browser-'));
+const results = {};
+results.observerMode = process.env.UX_GRID_LAYOUT_POLYFILL === '1' ? 'polyfill' : 'native';
+results.manifestVersion = require('vxe-table/package.json').version;
+let chrome, server, ws, nextId = 0;
+const pending = new Map();
+function call(method, params = {}, sessionId) {
+  return new Promise((resolve, reject) => {
+    const id = ++nextId, timer = setTimeout(() => { pending.delete(id); reject(Error('Timeout: ' + method)); }, 60000);
+    pending.set(id, { resolve: result => { clearTimeout(timer); resolve(result); }, reject: error => { clearTimeout(timer); reject(error); } });
+    ws.send(JSON.stringify({ id, method, params, sessionId }));
+  });
+}
+function check(m, limit, exact = true) {
+  assert.deepStrictEqual(m.errors, []);
+  assert(m.table.height > 0 && m.body.height > 0, 'actual table/body visible');
+  const end = m.pager ? m.pager.bottom : m.table.bottom;
+  if (m.pager) assert(m.table.bottom <= m.pager.top + 1, 'pager overlaps table');
+  assert(end <= m.root.top + limit + 1, 'height budget exceeded: ' + JSON.stringify(m));
+  if (exact) assert(Math.abs(m.root.height - limit) <= 1, 'root height differs');
+  if (exact) assert(Math.abs(end - (m.root.bottom - m.bottomInset)) <= 1, 'unused height budget');
+  assert(m.calls < 30, 'unbounded observer callbacks');
+}
+(async () => {
+  await new Promise((resolve, reject) => webpack({ mode:'development', devtool:false,
+    entry:path.join(__dirname, 'browser-layout-entry.js'), output:{ path:output, filename:'bundle.js' },
+    resolve:{ extensions:['.js','.vue','.json'], alias:{ 'vue$':require.resolve('vue/dist/vue.runtime.esm.js'), 'element-ui':path.join(consumer,'node_modules/element-ui'), 'umy-ui':root }, modules:[path.join(root,'node_modules'),path.join(consumer,'node_modules')] },
+    module:{ rules:[{test:/\.vue$/,loader:'vue-loader'}, {test:/\.js$/,exclude:/node_modules/,loader:'babel-loader'}, {test:/\.css$/,use:['style-loader','css-loader']}, {test:/\.(woff|ttf)$/,loader:'file-loader'}] },
+    plugins:[new VueLoaderPlugin()], performance:{hints:false}
+  }, (error, stats) => error || stats.hasErrors() ? reject(error || Error(stats.toString({all:false, errors:true}))) : resolve()));
+  server = http.createServer((request, response) => {
+    const asset = path.join(output, path.basename(request.url));
+    if (fs.existsSync(asset) && fs.statSync(asset).isFile()) { response.setHeader('Content-Type', request.url.endsWith('.js') ? 'application/javascript; charset=utf-8' : 'application/octet-stream'); fs.createReadStream(asset).pipe(response); }
+    else { response.setHeader('Content-Type','text/html; charset=utf-8'); response.end('<!doctype html><html><head><meta charset="utf-8"></head><body><script>' + (results.observerMode === 'polyfill' ? 'window.ResizeObserver=undefined;' : '') + 'window.bootErrors=[];window.onerror=function(m,u,l,c,e){bootErrors.push(String(e&&e.stack||m))}</script><script src="/bundle.js"></script></body></html>'); }
+  });
+  await new Promise((resolve, reject) => { server.once('error', reject); server.listen(0,'127.0.0.1',resolve); });
+  const endpoint = await new Promise((resolve, reject) => {
+    chrome = spawn(process.env.UX_GRID_TEST_CHROME || '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome', ['--headless=new','--disable-gpu','--no-first-run','--no-default-browser-check','--remote-debugging-port=0','--user-data-dir=' + path.join(output,'profile'),'about:blank']);
+    chrome.on('error',reject); chrome.on('exit',code => reject(Error('Chrome exited: ' + code)));
+    chrome.stderr.on('data',data => { const m = String(data).match(/DevTools listening on (ws:\/\/[^\s]+)/); if(m) resolve(m[1]); });
+  });
+  ws = new WebSocket(endpoint); await new Promise(resolve => ws.on('open',resolve));
+  ws.on('message',message => { const data = JSON.parse(message), entry = pending.get(data.id); if(entry) { pending.delete(data.id); data.error ? entry.reject(Error(JSON.stringify(data.error))) : entry.resolve(data.result); } });
+  const {targetId} = await call('Target.createTarget',{url:'about:blank'});
+  const {sessionId} = await call('Target.attachToTarget',{targetId,flatten:true});
+  await call('Emulation.setDeviceMetricsOverride',{width:1200,height:900,deviceScaleFactor:1,mobile:false},sessionId);
+  const evaluate = async expression => { const r = await call('Runtime.evaluate',{expression,awaitPromise:true,returnByValue:true},sessionId); if(r.exceptionDetails) throw Error(JSON.stringify(r.exceptionDetails)); return r.result.value; };
+  await call('Page.navigate',{url:'http://127.0.0.1:' + server.address().port},sessionId);
+  for(let i=0;i<100;i++) { if(await evaluate('Boolean(window.layout)')) break; await new Promise(resolve=>setTimeout(resolve,100)); }
+  results.boot = await evaluate('window.bootErrors'); console.log('boot',results.boot);
+  assert.deepStrictEqual(results.boot, []);
+  for(const [name,config,limit,exact] of [
+    ['numeric',{height:400},400,true], ['px',{height:'400px'},400,true],
+    ['percent',{height:'80%'},400,true], ['auto',{height:'auto'},500,true],
+    ['calc',{height:'calc(100% - 100px)'},400,true],
+    ['border-box',{height:400,rootStyle:{boxSizing:'border-box',padding:'10px',border:'2px solid red'}},400,true],
+    ['flex',{height:'100%',parent:{display:'flex',flexDirection:'column'}},500,true],
+    ['grid',{height:'100%',parent:{display:'grid',gridTemplateRows:'500px'}},500,true],
+    ['flex-header',{height:'auto',parent:{display:'flex',flexDirection:'column'},sibling:{height:'100px',flex:'none'},rootStyle:{flex:'1',minHeight:0}},400,true],
+    ['flex-two-grow',{height:'50%',parent:{display:'flex',flexDirection:'column'},sibling:{height:'50%',flex:'1',minHeight:0},rootStyle:{flex:'1',minHeight:0}},250,true],
+    ['grid-second-track',{height:'100%',parent:{display:'grid',gridTemplateRows:'100px 1fr'},sibling:{},rootStyle:{minHeight:0}},400,true],
+    ['grid-second-track-half',{height:'50%',parent:{display:'grid',gridTemplateRows:'100px 1fr'},sibling:{},rootStyle:{minHeight:0}},200,true],
+    ['max-many',{maxHeight:'80%'},400,false], ['max-few',{maxHeight:'80%',rows:1},400,false],
+    ['max-calc',{maxHeight:'calc(100% - 100px)'},400,false], ['no-pager',{height:400,pager:false},400,true]
+  ]) { const m = results[name] = await evaluate('layout.mount(' + JSON.stringify(config) + ')'); check(m,limit,exact); console.log('PASS ' + name); }
+  assert(results['max-few'].root.height < results['max-many'].root.height - 100, 'maxHeight preserves short content natural height');
+  results.priority = await evaluate('layout.mount({height:400,maxHeight:200})'); check(results.priority,400); assert.strictEqual(results.priority.maxHeight,null);
+  results.fallbackMax = await evaluate('layout.patch({height:null})'); check(results.fallbackMax,200,false); assert.strictEqual(results.fallbackMax.maxHeight,200-results.fallbackMax.pager.height);
+  results.resizeMount = await evaluate('layout.mount({height:"80%"})');
+  results.resize = await evaluate('layout.patch({parent:{height:"600px"}})'); check(results.resize,480);
+  results.pagerOff = await evaluate('layout.patch({pager:false})'); check(results.pagerOff,480);
+  results.pagerOn = await evaluate('layout.patch({pager:true})'); check(results.pagerOn,480);
+  results.pagerSize = await evaluate('layout.pagerSize()'); check(results.pagerSize,480);
+  assert(results.pagerSize.pager.height > results.pagerOn.pager.height && results.pagerSize.table.height < results.pagerOn.table.height);
+  results.pagerShrink = await evaluate('layout.pagerSize(0)'); check(results.pagerShrink,480); assert.strictEqual(results.pagerShrink.table.height,results.pagerOn.table.height);
+  if (results.observerMode === 'native') {
+    results.parentTheme = await evaluate('layout.parentTheme(true)'); check(results.parentTheme,480); assert(results.parentTheme.pager.height > results.pagerOn.pager.height);
+    results.parentThemeReset = await evaluate('layout.parentTheme(false)'); check(results.parentThemeReset,480);
+  }
+  await evaluate('layout.hide(true)'); results.show = await evaluate('layout.hide(false)'); check(results.show,480);
+  results.deactivated = await evaluate('layout.active(false)'); assert(!results.deactivated.observing);
+  results.inactiveMutation = await evaluate('layout.inactiveMutation()'); assert.strictEqual(results.inactiveMutation,0);
+  results.activated = await evaluate('layout.active(true)'); check(results.activated,480);
+  results.stable = await evaluate('layout.stable()'); assert(results.stable.delta <= 2);
+  results.clearHeight = await evaluate('layout.patch({height:null})'); assert.strictEqual(results.clearHeight.height,null); assert(!results.clearHeight.observing);
+  results.destroyed = await evaluate('layout.destroy()'); assert.deepStrictEqual(results.destroyed,{delta:0,scheduleDelta:0,observing:false});
+  results.natural = await evaluate('layout.mount({height:"100%",rows:2,parent:{height:"auto"}})'); assert.strictEqual(results.natural.height,null); assert(results.natural.observing);
+  results.naturalStable = await evaluate('layout.stable()'); assert(results.naturalStable.delta <= 2);
+  results.naturalDestroyed = await evaluate('layout.destroy()'); assert.deepStrictEqual(results.naturalDestroyed,{delta:0,scheduleDelta:0,observing:false});
+  results.finalErrors = await evaluate('({boot:window.bootErrors,vue:window.layoutErrors})'); assert.deepStrictEqual(results.finalErrors,{boot:[],vue:[]});
+  console.log('PASS lifecycle/resize/pager/stability/destruction');
+})().catch(error => { results.failure = error.stack || String(error); console.error(error); process.exitCode=1; }).finally(() => {
+  fs.writeFileSync(path.join(output,'results.json'),JSON.stringify(results,null,2)); console.log('Result directory: ' + output);
+  if(ws) ws.close(); if(chrome) chrome.kill(); if(server) server.close();
+  setTimeout(()=>process.exit(process.exitCode || 0),500);
+});

package/packages/ux-grid/test/browser-layout-entry.js

@@ -0,0 +1,66 @@
+import 'babel-polyfill';
+import Vue from 'vue';
+import Element from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+import Grid from '../src/ux-grid.vue';
+import { version as runtimeVersion } from 'vxe-table/lib/ui';
+import '../../../lib/theme-chalk/ux-grid.css';
+Vue.use(Element);
+window.layoutErrors = [];
+Vue.config.errorHandler = error => layoutErrors.push(String(error.stack || error));
+const theme = document.createElement('style');
+theme.textContent = '.layout-padded-pager .myPagination { padding-block: 12px !important; }';
+document.head.appendChild(theme);
+const wait = (ms = 350) => new Promise(resolve => setTimeout(resolve, ms));
+const rect = el => {
+  if (!el) return null;
+  const r = el.getBoundingClientRect();
+  return { top: r.top, bottom: r.bottom, height: r.height, width: r.width };
+};
+let vm, wrapper, calls, schedules;
+window.layout = {
+  async mount(config) {
+    if (vm) { vm.$destroy(); vm.$el.remove(); }
+    calls = 0;
+    schedules = 0;
+    vm = new Vue({
+      data: () => ({ config, active: true, hidden: false }),
+      render(h) {
+        const c = this.config;
+        return h('div', { style: Object.assign({ width: '800px', height: '500px' }, c.parent, this.hidden ? { display: 'none' } : {}) }, [
+          c.sibling ? h('div', { style: c.sibling }, ['Sibling']) : null,
+          h('keep-alive', [this.active ? h(Grid, { ref: 'grid', style: c.rootStyle || {}, props: {
+            data: Array.from({ length: c.rows === undefined ? 100 : c.rows }, (_, i) => ({ id: i, name: 'Row ' + i })),
+            columns: [{ field: 'name', title: 'Name', width: 160 }], height: c.height, maxHeight: c.maxHeight,
+            paginationShow: c.pager !== false, total: 100, pageSize: 10
+          } }) : h('div')])
+        ]);
+      }
+    }).$mount();
+    document.body.appendChild(vm.$el);
+    wrapper = vm.$refs.grid;
+    const original = wrapper.setHeight;
+    wrapper.setHeight = function () { calls++; return original.apply(this, arguments); };
+    const schedule = wrapper.scheduleHeight;
+    wrapper.scheduleHeight = function () { schedules++; return schedule.apply(this, arguments); };
+    await wait();
+    return this.measure();
+  },
+  measure() {
+    const root = wrapper.$el;
+    const style = getComputedStyle(root);
+    return { root: rect(root), parent: rect(vm.$el), table: rect(wrapper.$refs.singleTable.$el),
+      body: rect(root.querySelector('.vxe-table--main-wrapper .vxe-table--body-wrapper')),
+      pager: rect(wrapper.$refs.myPagination), height: wrapper.newHeight, maxHeight: wrapper.newMaxHeight,
+      bottomInset: parseFloat(style.paddingBottom) + parseFloat(style.borderBottomWidth),
+      runtimeVersion, calls, observing: !!wrapper._stopHeightObserver, errors: layoutErrors.slice() };
+  },
+  async patch(config) { vm.config = Object.assign({}, vm.config, config); await wait(); return this.measure(); },
+  async hide(value) { vm.hidden = value; await wait(); return this.measure(); },
+  async active(value) { vm.active = value; await wait(); return this.measure(); },
+  async stable() { const before = calls; await wait(650); return { delta: calls - before, measurement: this.measure() }; },
+  async pagerSize(size = 20) { wrapper.$refs.myPagination.style.padding = size + 'px 0'; await wait(); return this.measure(); },
+  async parentTheme(value) { vm.$el.classList.toggle('layout-padded-pager', value); await wait(); return this.measure(); },
+  async inactiveMutation() { const before = schedules; wrapper.$refs.myPagination.style.padding = '10px'; await wait(); return schedules - before; },
+  async destroy() { const root = vm.$el, pager = wrapper.$refs.myPagination; vm.$destroy(); root.remove(); const before = calls, beforeSchedules = schedules; if (pager) pager.style.padding = '15px'; window.dispatchEvent(new Event('resize')); await wait(); return { delta: calls - before, scheduleDelta: schedules - beforeSchedules, observing: !!wrapper._stopHeightObserver }; }
+};