Unverified Commit f574b8c6 authored by Tasso Evangelista's avatar Tasso Evangelista Committed by GitHub
Browse files

fix: Use dir attribute from documentElement (#304)

parent 4ec074c1
......@@ -11,7 +11,7 @@ describe('border-start-start-radius', () => {
it('fallbacks', () => {
expect(transpile('div', 'border-start-start-radius: inherit;'))
.toBe('*:not([dir=rtl]) div{border-top-left-radius:inherit;}[dir=rtl] div{border-top-right-radius:inherit;}');
.toBe('html:not([dir=rtl]) div{border-top-left-radius:inherit;}[dir=rtl] div{border-top-right-radius:inherit;}');
});
});
......@@ -26,7 +26,7 @@ describe('border-start-end-radius', () => {
it('fallbacks', () => {
expect(transpile('div', 'border-start-end-radius: inherit;'))
.toBe('*:not([dir=rtl]) div{border-top-right-radius:inherit;}[dir=rtl] div{border-top-left-radius:inherit;}');
.toBe('html:not([dir=rtl]) div{border-top-right-radius:inherit;}[dir=rtl] div{border-top-left-radius:inherit;}');
});
});
......@@ -41,7 +41,7 @@ describe('border-end-start-radius', () => {
it('fallbacks', () => {
expect(transpile('div', 'border-end-start-radius: inherit;'))
.toBe('*:not([dir=rtl]) div{border-bottom-left-radius:inherit;}[dir=rtl] div{border-bottom-right-radius:inherit;}');
.toBe('html:not([dir=rtl]) div{border-bottom-left-radius:inherit;}[dir=rtl] div{border-bottom-right-radius:inherit;}');
});
});
......@@ -56,6 +56,6 @@ describe('border-end-end-radius', () => {
it('fallbacks', () => {
expect(transpile('div', 'border-end-end-radius: inherit;'))
.toBe('*:not([dir=rtl]) div{border-bottom-right-radius:inherit;}[dir=rtl] div{border-bottom-left-radius:inherit;}');
.toBe('html:not([dir=rtl]) div{border-bottom-right-radius:inherit;}[dir=rtl] div{border-bottom-left-radius:inherit;}');
});
});
......@@ -19,7 +19,7 @@ describe('border-inline', () => {
it('fallbacks', () => {
expect(transpile('div', 'border-inline: inherit;'))
.toBe('*:not([dir=rtl]) div{border-left:inherit;border-right:inherit;}[dir=rtl] div{border-right:inherit;border-left:inherit;}');
.toBe('html:not([dir=rtl]) div{border-left:inherit;border-right:inherit;}[dir=rtl] div{border-right:inherit;border-left:inherit;}');
});
});
......@@ -34,7 +34,7 @@ describe('border-inline-start', () => {
it('fallbacks', () => {
expect(transpile('div', 'border-inline-start: inherit;'))
.toBe('*:not([dir=rtl]) div{border-left:inherit;}[dir=rtl] div{border-right:inherit;}');
.toBe('html:not([dir=rtl]) div{border-left:inherit;}[dir=rtl] div{border-right:inherit;}');
});
});
......@@ -49,7 +49,7 @@ describe('border-inline-end', () => {
it('fallbacks', () => {
expect(transpile('div', 'border-inline-end: inherit;'))
.toBe('*:not([dir=rtl]) div{border-right:inherit;}[dir=rtl] div{border-left:inherit;}');
.toBe('html:not([dir=rtl]) div{border-right:inherit;}[dir=rtl] div{border-left:inherit;}');
});
});
......@@ -125,7 +125,7 @@ describe('border-inline-width', () => {
it('fallbacks', () => {
expect(transpile('div', 'border-inline-width: inherit;'))
.toBe('*:not([dir=rtl]) div{border-left-width:inherit;border-right-width:inherit;}[dir=rtl] div{border-right-width:inherit;border-left-width:inherit;}');
.toBe('html:not([dir=rtl]) div{border-left-width:inherit;border-right-width:inherit;}[dir=rtl] div{border-right-width:inherit;border-left-width:inherit;}');
});
});
......@@ -140,7 +140,7 @@ describe('border-inline-start-width', () => {
it('fallbacks', () => {
expect(transpile('div', 'border-inline-start-width: inherit;'))
.toBe('*:not([dir=rtl]) div{border-left-width:inherit;}[dir=rtl] div{border-right-width:inherit;}');
.toBe('html:not([dir=rtl]) div{border-left-width:inherit;}[dir=rtl] div{border-right-width:inherit;}');
});
});
......@@ -155,7 +155,7 @@ describe('border-inline-end-width', () => {
it('fallbacks', () => {
expect(transpile('div', 'border-inline-end-width: inherit;'))
.toBe('*:not([dir=rtl]) div{border-right-width:inherit;}[dir=rtl] div{border-left-width:inherit;}');
.toBe('html:not([dir=rtl]) div{border-right-width:inherit;}[dir=rtl] div{border-left-width:inherit;}');
});
});
......@@ -231,7 +231,7 @@ describe('border-inline-style', () => {
it('fallbacks', () => {
expect(transpile('div', 'border-inline-style: inherit;'))
.toBe('*:not([dir=rtl]) div{border-left-style:inherit;border-right-style:inherit;}[dir=rtl] div{border-right-style:inherit;border-left-style:inherit;}');
.toBe('html:not([dir=rtl]) div{border-left-style:inherit;border-right-style:inherit;}[dir=rtl] div{border-right-style:inherit;border-left-style:inherit;}');
});
});
......@@ -246,7 +246,7 @@ describe('border-inline-start-style', () => {
it('fallbacks', () => {
expect(transpile('div', 'border-inline-start-style: inherit;'))
.toBe('*:not([dir=rtl]) div{border-left-style:inherit;}[dir=rtl] div{border-right-style:inherit;}');
.toBe('html:not([dir=rtl]) div{border-left-style:inherit;}[dir=rtl] div{border-right-style:inherit;}');
});
});
......@@ -261,7 +261,7 @@ describe('border-inline-end-style', () => {
it('fallbacks', () => {
expect(transpile('div', 'border-inline-end-style: inherit;'))
.toBe('*:not([dir=rtl]) div{border-right-style:inherit;}[dir=rtl] div{border-left-style:inherit;}');
.toBe('html:not([dir=rtl]) div{border-right-style:inherit;}[dir=rtl] div{border-left-style:inherit;}');
});
});
......@@ -337,7 +337,7 @@ describe('border-inline-color', () => {
it('fallbacks', () => {
expect(transpile('div', 'border-inline-color: inherit;'))
.toBe('*:not([dir=rtl]) div{border-left-color:inherit;border-right-color:inherit;}[dir=rtl] div{border-right-color:inherit;border-left-color:inherit;}');
.toBe('html:not([dir=rtl]) div{border-left-color:inherit;border-right-color:inherit;}[dir=rtl] div{border-right-color:inherit;border-left-color:inherit;}');
});
});
......@@ -352,7 +352,7 @@ describe('border-inline-start-color', () => {
it('fallbacks', () => {
expect(transpile('div', 'border-inline-start-color: inherit;'))
.toBe('*:not([dir=rtl]) div{border-left-color:inherit;}[dir=rtl] div{border-right-color:inherit;}');
.toBe('html:not([dir=rtl]) div{border-left-color:inherit;}[dir=rtl] div{border-right-color:inherit;}');
});
});
......@@ -367,7 +367,7 @@ describe('border-inline-end-color', () => {
it('fallbacks', () => {
expect(transpile('div', 'border-inline-end-color: inherit;'))
.toBe('*:not([dir=rtl]) div{border-right-color:inherit;}[dir=rtl] div{border-left-color:inherit;}');
.toBe('html:not([dir=rtl]) div{border-right-color:inherit;}[dir=rtl] div{border-left-color:inherit;}');
});
});
......
......@@ -25,7 +25,7 @@ describe('inset', () => {
it('fallbacks', () => {
expect(transpile('div', 'inset: inherit;'))
.toBe('*:not([dir=rtl]) div{left:inherit;top:inherit;right:inherit;bottom:inherit;}[dir=rtl] div{right:inherit;top:inherit;left:inherit;bottom:inherit;}');
.toBe('html:not([dir=rtl]) div{left:inherit;top:inherit;right:inherit;bottom:inherit;}[dir=rtl] div{right:inherit;top:inherit;left:inherit;bottom:inherit;}');
});
});
......@@ -48,7 +48,7 @@ describe('inset-inline', () => {
it('fallbacks', () => {
expect(transpile('div', 'inset-inline: inherit;'))
.toBe('*:not([dir=rtl]) div{left:inherit;right:inherit;}[dir=rtl] div{right:inherit;left:inherit;}');
.toBe('html:not([dir=rtl]) div{left:inherit;right:inherit;}[dir=rtl] div{right:inherit;left:inherit;}');
});
});
......@@ -63,7 +63,7 @@ describe('inset-inline-start', () => {
it('fallbacks', () => {
expect(transpile('div', 'inset-inline-start: inherit;'))
.toBe('*:not([dir=rtl]) div{left:inherit;}[dir=rtl] div{right:inherit;}');
.toBe('html:not([dir=rtl]) div{left:inherit;}[dir=rtl] div{right:inherit;}');
});
});
......@@ -78,7 +78,7 @@ describe('inset-inline-end', () => {
it('fallbacks', () => {
expect(transpile('div', 'inset-inline-end: inherit;'))
.toBe('*:not([dir=rtl]) div{right:inherit;}[dir=rtl] div{left:inherit;}');
.toBe('html:not([dir=rtl]) div{right:inherit;}[dir=rtl] div{left:inherit;}');
});
});
......
......@@ -27,7 +27,7 @@ export const createLogicalPropertiesPlugin = (options: LogicalPropertiesOptions)
const ltrFn = (value: string): string => ltr.map((property) => `${ property }:${ value }`).join(';');
const rtlFn = (value: string): string => rtl.map((property) => `${ property }:${ value }`).join(';');
buffer += `*:not([dir=rtl]) ${ selectors.join(',') }{${ ltrFn(value) };}`
buffer += `html:not([dir=rtl]) ${ selectors.join(',') }{${ ltrFn(value) };}`
+ `[dir=rtl] ${ selectors.join(',') }{${ rtlFn(value) };}`;
return '';
......
......@@ -17,7 +17,7 @@ describe('margin-inline', () => {
it('fallbacks', () => {
expect(transpile('div', 'margin-inline: inherit;'))
.toBe('*:not([dir=rtl]) div{margin-left:inherit;margin-right:inherit;}[dir=rtl] div{margin-right:inherit;margin-left:inherit;}');
.toBe('html:not([dir=rtl]) div{margin-left:inherit;margin-right:inherit;}[dir=rtl] div{margin-right:inherit;margin-left:inherit;}');
});
});
......@@ -31,7 +31,7 @@ describe('margin-inline-start', () => {
it('fallbacks', () => {
expect(transpile('div', 'margin-inline-start: inherit;'))
.toBe('*:not([dir=rtl]) div{margin-left:inherit;}[dir=rtl] div{margin-right:inherit;}');
.toBe('html:not([dir=rtl]) div{margin-left:inherit;}[dir=rtl] div{margin-right:inherit;}');
});
});
......@@ -45,7 +45,7 @@ describe('margin-inline-end', () => {
it('fallbacks', () => {
expect(transpile('div', 'margin-inline-end: inherit;'))
.toBe('*:not([dir=rtl]) div{margin-right:inherit;}[dir=rtl] div{margin-left:inherit;}');
.toBe('html:not([dir=rtl]) div{margin-right:inherit;}[dir=rtl] div{margin-left:inherit;}');
});
});
......
......@@ -17,7 +17,7 @@ describe('padding-inline', () => {
it('fallbacks', () => {
expect(transpile('div', 'padding-inline: inherit;'))
.toBe('*:not([dir=rtl]) div{padding-left:inherit;padding-right:inherit;}[dir=rtl] div{padding-right:inherit;padding-left:inherit;}');
.toBe('html:not([dir=rtl]) div{padding-left:inherit;padding-right:inherit;}[dir=rtl] div{padding-right:inherit;padding-left:inherit;}');
});
});
......@@ -31,7 +31,7 @@ describe('padding-inline-start', () => {
it('fallbacks', () => {
expect(transpile('div', 'padding-inline-start: inherit;'))
.toBe('*:not([dir=rtl]) div{padding-left:inherit;}[dir=rtl] div{padding-right:inherit;}');
.toBe('html:not([dir=rtl]) div{padding-left:inherit;}[dir=rtl] div{padding-right:inherit;}');
});
});
......@@ -45,7 +45,7 @@ describe('padding-inline-end', () => {
it('fallbacks', () => {
expect(transpile('div', 'padding-inline-end: inherit;'))
.toBe('*:not([dir=rtl]) div{padding-right:inherit;}[dir=rtl] div{padding-left:inherit;}');
.toBe('html:not([dir=rtl]) div{padding-right:inherit;}[dir=rtl] div{padding-left:inherit;}');
});
});
......
......@@ -16,8 +16,5 @@ it('patches non-`Box` children', () => {
</Margins>, root);
const div = root.firstChild;
expect(getComputedStyle(div).marginLeft).toBe('10px');
expect(getComputedStyle(div).marginTop).toBe('10px');
expect(getComputedStyle(div).marginRight).toBe('10px');
expect(getComputedStyle(div).marginBottom).toBe('10px');
expect(div.className).not.toBeFalsy();
});
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment