wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-09-23 10:21:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

Avoid wrapping floated tables using computed styles

Browse source 
Bug: T366314
Change-Id: I71657b7f1f26bcf52f5ade5b7668955a1f4df24b
This commit is contained in:
bwang 2024-06-07 10:52:40 -05:00 committed by Jdlrobson
parent 6298977161
commit 711f67ce00
3 changed files with 34 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
resources/skins.vector.js/tables.js
View file

@ -3,14 +3,18 @@ const init = () => {
if ( !config.VectorWrapTablesTemporary ) {
return;
}
const tables = document.querySelectorAll( '.mw-parser-output table.wikitable:not(.floatright):not(.floatleft)' );
const tables = document.querySelectorAll( '.mw-parser-output table.wikitable' );
Array.from( tables ).forEach( ( table ) => {
const styles = window.getComputedStyle( table );
const isFloat = styles.getPropertyValue( 'float' ) === 'right' || styles.getPropertyValue( 'float' ) === 'left';
// Don't wrap tables within tables
const parent = table.parentElement;
if (
parent && table.matches( '.wikitable' ) &&
parent &&
!parent.matches( '.noresize' ) &&
!parent.closest( 'table' )
!parent.closest( 'table' ) &&
!isFloat
) {
const wrapper = document.createElement( 'div' );
wrapper.classList.add( 'noresize' );

28
tests/jest/skins.vector.js/__snapshots__/tables.test.js.snap
View file

@ -1,5 +1,15 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`tables doesnt wrap floated tables 1`] = `
"
<table class=\\"wikitable\\" style=\\"float:right\\">
<tbody>
<tr><th>table table table</th></tr>
</tbody>
</table>
"
`;
exports[`tables doesnt wrap nested tables 1`] = `
"
<section class=\\"mw-parser-output\\">
@ -16,11 +26,10 @@ exports[`tables doesnt wrap nested tables 1`] = `
exports[`tables doesnt wrap tables that are already wrapped 1`] = `
"
<div class=\\"mw-parser-output\\">
<div>
<table>
<div class=\\"noresize\\">
<table class=\\"wikitable\\">
<tbody>
<tr><th>table table table</th></tr>
<tr><td><table><tbody><tr><th>table table table</th></tr></tbody></table></td><td></td></tr>
</tbody>
</table>
</div>
@ -39,19 +48,6 @@ exports[`tables doesnt wrap tables that are not wikitables 1`] = `
"
`;
exports[`tables only wraps wikitables 1`] = `
"
<section class=\\"mw-parser-output\\">
<table>
<tbody>
<tr><th>table table table</th></tr>
<tr><td><table><tbody><tr><th>table table table</th></tr></tbody></table></td><td></td></tr>
</tbody>
</table>
</section>
"
`;
exports[`tables wraps multiple table with div 1`] = `
"
<section class=\\"mw-parser-output\\">

34
tests/jest/skins.vector.js/tables.test.js
View file

@ -50,22 +50,6 @@ describe( 'tables', () => {
expect( document.body.innerHTML ).toMatchSnapshot();
} );
test( 'only wraps wikitables', () => {
document.body.innerHTML = `
<section class="mw-parser-output">
<table>
<tbody>
<tr><th>table table table</th></tr>
<tr><td><table><tbody><tr><th>table table table</th></tr></tbody></table><td></tr>
</tbody>
</table>
</section>
`;
tables();
expect( document.body.innerHTML ).toMatchSnapshot();
} );
test( 'doesnt wrap tables that are not wikitables', () => {
document.body.innerHTML = `
<table>
@ -83,11 +67,10 @@ describe( 'tables', () => {
test( 'doesnt wrap tables that are already wrapped', () => {
document.body.innerHTML = `
<div class="mw-parser-output">
<div>
<table>
<div class="noresize">
<table class="wikitable">
<tbody>
<tr><th>table table table</th></tr>
<tr><td><table><tbody><tr><th>table table table</th></tr></tbody></table><td></tr>
</tbody>
</table>
</div>
@ -97,4 +80,17 @@ describe( 'tables', () => {
expect( document.body.innerHTML ).toMatchSnapshot();
} );
test( 'doesnt wrap floated tables', () => {
document.body.innerHTML = `
<table class="wikitable" style="float:right">
<tbody>
<tr><th>table table table</th></tr>
</tbody>
</table>
`;
tables();
expect( document.body.innerHTML ).toMatchSnapshot();
} );
} );