diff --git a/debug/src/debug.js b/debug/src/debug.js index d0190594d4..e06c430151 100644 --- a/debug/src/debug.js +++ b/debug/src/debug.js @@ -341,7 +341,14 @@ export function initDebug() { // with false positives, which we'd like to avoid. let domParentName = getClosestDomNodeParentName(parent); if (domParentName !== '') { - if (type === 'table' && isTableElement(domParentName)) { + if ( + type === 'table' && + // Tables can be nested inside each other if it's inside a cell. + // See https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Advanced#nesting_tables + domParentName !== 'td' && + isTableElement(domParentName) + ) { + console.log(domParentName, parent._dom); console.error( 'Improper nesting of table. Your should not have a table-node parent.' + serializeVNode(vnode) + diff --git a/debug/test/browser/debug.test.js b/debug/test/browser/debug.test.js index b7eb6d29a4..54be87578a 100644 --- a/debug/test/browser/debug.test.js +++ b/debug/test/browser/debug.test.js @@ -550,6 +550,33 @@ describe('debug', () => { render(
, scratch); expect(console.error).to.be.calledOnce; }); + + it('accepts valid nested tables', () => { + const Table = () => ( +
+ + + + + + + + + +
foo
+ + + + + + +
cell1cell2cell3
+
bar
+ ); + + render(, scratch); + expect(console.error).to.not.be.called; + }); }); describe('paragraph nesting', () => {