Skip to content

Commit

Permalink
Fix global styles tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@aaronrobertshaw
aaronrobertshaw committed Feb 20, 2024
1 parent 3817e5e commit 2fd08c2
Showing 1 changed file with 10 additions and 7 deletions.
17 changes: 10 additions & 7 deletions packages/block-editor/src/components/global-styles/test/use-global-styles-output.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,9 @@ import {
} from '../use-global-styles-output';
import { ROOT_BLOCK_SELECTOR } from '../utils';

const BASE_STYLES =
'body {margin: 0;}body .is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }body .is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }body .is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }body .is-layout-constrained > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }body .is-layout-constrained > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }body .is-layout-constrained > .aligncenter { margin-left: auto !important; margin-right: auto !important; }body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: var(--wp--style--global--content-size); margin-left: auto !important; margin-right: auto !important; }body .is-layout-constrained > .alignwide { max-width: var(--wp--style--global--wide-size); }:where(body .is-layout-flex) { display:flex; }body .is-layout-flex { flex-wrap: wrap; align-items: center; }body .is-layout-flex > * { margin: 0; }:where(body .is-layout-grid) { display:grid; }body .is-layout-grid > * { margin: 0; }';

describe( 'global styles renderer', () => {
describe( 'getNodesWithStyles', () => {
it( 'should return the nodes with styles', () => {
Expand Down Expand Up @@ -479,7 +482,7 @@ describe( 'global styles renderer', () => {
};

expect( toStyles( tree, blockSelectors ) ).toEqual(
'body {margin: 0;}:where(body .is-layout-flow > .alignleft) { float: left; margin-inline-start: 0; margin-inline-end: 2em; }:where(body .is-layout-flow > .alignright) { float: right; margin-inline-start: 2em; margin-inline-end: 0; }:where(body .is-layout-flow > .aligncenter) { margin-left: auto !important; margin-right: auto !important; }:where(body .is-layout-constrained > .alignleft) { float: left; margin-inline-start: 0; margin-inline-end: 2em; }:where(body .is-layout-constrained > .alignright) { float: right; margin-inline-start: 2em; margin-inline-end: 0; }:where(body .is-layout-constrained > .aligncenter) { margin-left: auto !important; margin-right: auto !important; }:where(body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull))) { max-width: var(--wp--style--global--content-size); margin-left: auto !important; margin-right: auto !important; }:where(body .is-layout-constrained > .alignwide) { max-width: var(--wp--style--global--wide-size); }:where(body .is-layout-flex) { display:flex; }:where(body .is-layout-flex) { flex-wrap: wrap; align-items: center; }:where(body .is-layout-flex > *) { margin: 0; }:where(body .is-layout-grid) { display:grid; }:where(body .is-layout-grid > *) { margin: 0; }' +
BASE_STYLES +
':where(body) {background-color: red;margin: 10px;padding: 10px;}:where(a) {color: blue;}a:hover{color: orange;}a:focus{color: orange;}:where(h1) {font-size: 42px;}:where(.wp-block-group) {margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;padding-top: 11px;padding-right: 22px;padding-bottom: 33px;padding-left: 44px;}:where(h1,h2,h3,h4,h5,h6) {color: orange;}:where(h1 a,h2 a,h3 a,h4 a,h5 a,h6 a) {color: hotpink;}h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover{color: red;}h1 a:focus,h2 a:focus,h3 a:focus,h4 a:focus,h5 a:focus,h6 a:focus{color: red;}' +
':where(.wp-block-image img, .wp-block-image .wp-crop-area) {border-radius: 9999px;}:where(.wp-block-image) {color: red;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }' +
'.has-white-color{color: var(--wp--preset--color--white) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}h1.has-blue-color,h2.has-blue-color,h3.has-blue-color,h4.has-blue-color,h5.has-blue-color,h6.has-blue-color{color: var(--wp--preset--color--blue) !important;}h1.has-blue-background-color,h2.has-blue-background-color,h3.has-blue-background-color,h4.has-blue-background-color,h5.has-blue-background-color,h6.has-blue-background-color{background-color: var(--wp--preset--color--blue) !important;}h1.has-blue-border-color,h2.has-blue-border-color,h3.has-blue-border-color,h4.has-blue-border-color,h5.has-blue-border-color,h6.has-blue-border-color{border-color: var(--wp--preset--color--blue) !important;}'
Expand Down Expand Up @@ -522,7 +525,7 @@ describe( 'global styles renderer', () => {
};

expect( toStyles( Object.freeze( tree ), blockSelectors ) ).toEqual(
'body {margin: 0;}:where(body .is-layout-flow > .alignleft) { float: left; margin-inline-start: 0; margin-inline-end: 2em; }:where(body .is-layout-flow > .alignright) { float: right; margin-inline-start: 2em; margin-inline-end: 0; }:where(body .is-layout-flow > .aligncenter) { margin-left: auto !important; margin-right: auto !important; }:where(body .is-layout-constrained > .alignleft) { float: left; margin-inline-start: 0; margin-inline-end: 2em; }:where(body .is-layout-constrained > .alignright) { float: right; margin-inline-start: 2em; margin-inline-end: 0; }:where(body .is-layout-constrained > .aligncenter) { margin-left: auto !important; margin-right: auto !important; }:where(body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull))) { max-width: var(--wp--style--global--content-size); margin-left: auto !important; margin-right: auto !important; }:where(body .is-layout-constrained > .alignwide) { max-width: var(--wp--style--global--wide-size); }:where(body .is-layout-flex) { display:flex; }:where(body .is-layout-flex) { flex-wrap: wrap; align-items: center; }:where(body .is-layout-flex > *) { margin: 0; }:where(body .is-layout-grid) { display:grid; }:where(body .is-layout-grid > *) { margin: 0; }' +
BASE_STYLES +
':where(.wp-image-spacing) {padding-top: 1px;}:where(.wp-image-border-color) {border-color: red;}:where(.wp-image-border) {border-radius: 9999px;}:where(.wp-image) {color: red;}' +
'.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'
);
Expand Down Expand Up @@ -570,7 +573,7 @@ describe( 'global styles renderer', () => {
};

expect( toStyles( Object.freeze( tree ), blockSelectors ) ).toEqual(
'body {margin: 0;}:where(body .is-layout-flow > .alignleft) { float: left; margin-inline-start: 0; margin-inline-end: 2em; }:where(body .is-layout-flow > .alignright) { float: right; margin-inline-start: 2em; margin-inline-end: 0; }:where(body .is-layout-flow > .aligncenter) { margin-left: auto !important; margin-right: auto !important; }:where(body .is-layout-constrained > .alignleft) { float: left; margin-inline-start: 0; margin-inline-end: 2em; }:where(body .is-layout-constrained > .alignright) { float: right; margin-inline-start: 2em; margin-inline-end: 0; }:where(body .is-layout-constrained > .aligncenter) { margin-left: auto !important; margin-right: auto !important; }:where(body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull))) { max-width: var(--wp--style--global--content-size); margin-left: auto !important; margin-right: auto !important; }:where(body .is-layout-constrained > .alignwide) { max-width: var(--wp--style--global--wide-size); }:where(body .is-layout-flex) { display:flex; }:where(body .is-layout-flex) { flex-wrap: wrap; align-items: center; }:where(body .is-layout-flex > *) { margin: 0; }:where(body .is-layout-grid) { display:grid; }:where(body .is-layout-grid > *) { margin: 0; }' +
BASE_STYLES +
'.is-style-foo.wp-image.wp-image-spacing{padding-top: 2px;}.is-style-foo.wp-image.wp-image-border-color{border-color: blue;}.is-style-foo.wp-image{color: blue;}' +
'.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'
);
Expand All @@ -597,7 +600,7 @@ describe( 'global styles renderer', () => {
};

expect( toStyles( Object.freeze( tree ), blockSelectors ) ).toEqual(
'body {margin: 0;}:where(body .is-layout-flow > .alignleft) { float: left; margin-inline-start: 0; margin-inline-end: 2em; }:where(body .is-layout-flow > .alignright) { float: right; margin-inline-start: 2em; margin-inline-end: 0; }:where(body .is-layout-flow > .aligncenter) { margin-left: auto !important; margin-right: auto !important; }:where(body .is-layout-constrained > .alignleft) { float: left; margin-inline-start: 0; margin-inline-end: 2em; }:where(body .is-layout-constrained > .alignright) { float: right; margin-inline-start: 2em; margin-inline-end: 0; }:where(body .is-layout-constrained > .aligncenter) { margin-left: auto !important; margin-right: auto !important; }:where(body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull))) { max-width: var(--wp--style--global--content-size); margin-left: auto !important; margin-right: auto !important; }:where(body .is-layout-constrained > .alignwide) { max-width: var(--wp--style--global--wide-size); }:where(body .is-layout-flex) { display:flex; }:where(body .is-layout-flex) { flex-wrap: wrap; align-items: center; }:where(body .is-layout-flex > *) { margin: 0; }:where(body .is-layout-grid) { display:grid; }:where(body .is-layout-grid > *) { margin: 0; }' +
BASE_STYLES +
'.wp-image img{filter: blur(5px);}' +
'.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'
);
Expand Down Expand Up @@ -716,7 +719,7 @@ describe( 'global styles renderer', () => {
} );

expect( layoutStyles ).toEqual(
':where(.is-layout-flex) { gap: 0.5em; }:where(body .is-layout-flow > .alignleft) { float: left; margin-inline-start: 0; margin-inline-end: 2em; }:where(body .is-layout-flow > .alignright) { float: right; margin-inline-start: 2em; margin-inline-end: 0; }:where(body .is-layout-flow > .aligncenter) { margin-left: auto !important; margin-right: auto !important; }:where(body .is-layout-flex) { display:flex; }:where(body .is-layout-flex) { flex-wrap: wrap; align-items: center; }:where(body .is-layout-flex > *) { margin: 0; }'
':where(.is-layout-flex) { gap: 0.5em; }body .is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }body .is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }body .is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }:where(body .is-layout-flex) { display:flex; }body .is-layout-flex { flex-wrap: wrap; align-items: center; }body .is-layout-flex > * { margin: 0; }'
);
} );

Expand All @@ -733,7 +736,7 @@ describe( 'global styles renderer', () => {
} );

expect( layoutStyles ).toEqual(
':where(body .is-layout-flow) > * { margin-block-start: 0; margin-block-end: 0; }:where(body .is-layout-flow) > * + * { margin-block-start: 0.5em; margin-block-end: 0; }:where(body .is-layout-flex) { gap: 0.5em; }body { --wp--style--block-gap: 0.5em; }:where(body .is-layout-flow > .alignleft) { float: left; margin-inline-start: 0; margin-inline-end: 2em; }:where(body .is-layout-flow > .alignright) { float: right; margin-inline-start: 2em; margin-inline-end: 0; }:where(body .is-layout-flow > .aligncenter) { margin-left: auto !important; margin-right: auto !important; }:where(body .is-layout-flex) { display:flex; }:where(body .is-layout-flex) { flex-wrap: wrap; align-items: center; }:where(body .is-layout-flex > *) { margin: 0; }'
':where(body .is-layout-flow) > * { margin-block-start: 0; margin-block-end: 0; }:where(body .is-layout-flow) > * + * { margin-block-start: 0.5em; margin-block-end: 0; }:where(body .is-layout-flex) { gap: 0.5em; }body { --wp--style--block-gap: 0.5em; }body .is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }body .is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }body .is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }:where(body .is-layout-flex) { display:flex; }body .is-layout-flex { flex-wrap: wrap; align-items: center; }body .is-layout-flex > * { margin: 0; }'
);
} );

Expand All @@ -750,7 +753,7 @@ describe( 'global styles renderer', () => {
} );

expect( layoutStyles ).toEqual(
':where(body .is-layout-flow) > * { margin-block-start: 0; margin-block-end: 0; }:where(body .is-layout-flow) > * + * { margin-block-start: 12px; margin-block-end: 0; }:where(body .is-layout-flex) { gap: 12px; }body { --wp--style--block-gap: 12px; }:where(body .is-layout-flow > .alignleft) { float: left; margin-inline-start: 0; margin-inline-end: 2em; }:where(body .is-layout-flow > .alignright) { float: right; margin-inline-start: 2em; margin-inline-end: 0; }:where(body .is-layout-flow > .aligncenter) { margin-left: auto !important; margin-right: auto !important; }:where(body .is-layout-flex) { display:flex; }:where(body .is-layout-flex) { flex-wrap: wrap; align-items: center; }:where(body .is-layout-flex > *) { margin: 0; }'
':where(body .is-layout-flow) > * { margin-block-start: 0; margin-block-end: 0; }:where(body .is-layout-flow) > * + * { margin-block-start: 12px; margin-block-end: 0; }:where(body .is-layout-flex) { gap: 12px; }body { --wp--style--block-gap: 12px; }body .is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }body .is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }body .is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }:where(body .is-layout-flex) { display:flex; }body .is-layout-flex { flex-wrap: wrap; align-items: center; }body .is-layout-flex > * { margin: 0; }'
);
} );

Expand Down

0 comments on commit 2fd08c2

Please sign in to comment.