From f1fcc81bc3957e0671e045924aa76d2efbfbfbc1 Mon Sep 17 00:00:00 2001 From: Wilson Page Date: Wed, 28 Jan 2015 18:57:02 +0000 Subject: [PATCH] Bug 1124582 - [RTL][Video]The title '1 selected' does not read right to left --- dist/gaia-header.js | 29 +++++++++++++++++++++++++---- gaia-header.js | 29 +++++++++++++++++++++++++---- index.html | 6 ++++++ test/test.js | 34 +++++++++++++++++----------------- 4 files changed, 73 insertions(+), 25 deletions(-) diff --git a/dist/gaia-header.js b/dist/gaia-header.js index c6433ee..714d278 100644 --- a/dist/gaia-header.js +++ b/dist/gaia-header.js @@ -735,17 +735,22 @@ module.exports = component.register('gaia-header', { * Fit text and center a title between * the buttons before and after. * + * Right now, because gaia-header is not + * fully rtl-compatible (due to Gaia), + * we're using `marginLeft` etc. These + * will be changed to `marginStart` etc + * when we become fully RTL. + * * @param {HTMLH1Element} title * @param {Number} space - * @return {Promise} * @private */ setTitleStyle: function(el, style) { debug('set title style', style); this.observerStop(); - el.style.MozMarginStart = style.marginStart + 'px'; - el.style.MozPaddingStart = style.padding.start + 'px'; - el.style.MozPaddingEnd = style.padding.end + 'px'; + el.style.marginLeft = style.marginStart + 'px'; + el.style.paddingLeft = style.padding.start + 'px'; + el.style.paddingRight = style.padding.end + 'px'; el.style.fontSize = style.fontSize + 'px'; setStyleId(el, style.id); this.observerStart(); @@ -1224,6 +1229,22 @@ module.exports = component.register('gaia-header', { inherit)))); } + /** + * [dir=rtl] + * + * When the document is in RTL mode we still + * want the

text to be reversed to that + * strings like '1 selected' become 'selected 1'. + * + * When we're happy for gaia-header to be fully + * RTL responsive we won't need this rule anymore, + * but this depends on all Gaia apps being ready. + */ + + :host-context([dir=rtl]) ::content h1 { + direction: rtl; + } + /** Buttons ---------------------------------------------------------*/ diff --git a/gaia-header.js b/gaia-header.js index 4481132..2918d56 100644 --- a/gaia-header.js +++ b/gaia-header.js @@ -270,17 +270,22 @@ module.exports = component.register('gaia-header', { * Fit text and center a title between * the buttons before and after. * + * Right now, because gaia-header is not + * fully rtl-compatible (due to Gaia), + * we're using `marginLeft` etc. These + * will be changed to `marginStart` etc + * when we become fully RTL. + * * @param {HTMLH1Element} title * @param {Number} space - * @return {Promise} * @private */ setTitleStyle: function(el, style) { debug('set title style', style); this.observerStop(); - el.style.MozMarginStart = style.marginStart + 'px'; - el.style.MozPaddingStart = style.padding.start + 'px'; - el.style.MozPaddingEnd = style.padding.end + 'px'; + el.style.marginLeft = style.marginStart + 'px'; + el.style.paddingLeft = style.padding.start + 'px'; + el.style.paddingRight = style.padding.end + 'px'; el.style.fontSize = style.fontSize + 'px'; setStyleId(el, style.id); this.observerStart(); @@ -759,6 +764,22 @@ module.exports = component.register('gaia-header', { inherit)))); } + /** + * [dir=rtl] + * + * When the document is in RTL mode we still + * want the

text to be reversed to that + * strings like '1 selected' become 'selected 1'. + * + * When we're happy for gaia-header to be fully + * RTL responsive we won't need this rule anymore, + * but this depends on all Gaia apps being ready. + */ + + :host-context([dir=rtl]) ::content h1 { + direction: rtl; + } + /** Buttons ---------------------------------------------------------*/ diff --git a/index.html b/index.html index 0e2840f..dec8627 100644 --- a/index.html +++ b/index.html @@ -106,6 +106,12 @@

Ḿḗḗşşȧȧɠḗḗş

+ +

1 Selected

+ + + +
diff --git a/test/test.js b/test/test.js index 845848f..8a11011 100644 --- a/test/test.js +++ b/test/test.js @@ -142,14 +142,14 @@ suite('GaiaHeader', function() { afterNext(el, 'runFontFit').then(() => { assert.equal(h1.style.fontSize, '', 'font-size should not have been set'); - assert.equal(h1.style.MozMarginStart, '', 'margin should not have been set'); + assert.equal(h1.style.marginLeft, '', 'margin should not have been set'); h1.textContent = 'Localized title'; return afterNext(el, 'runFontFit'); }).then(() => { sinon.assert.calledOnce(this.fontFit); assert.equal(h1.style.fontSize, '24px', 'font-size has been set'); - assert.equal(h1.style.MozMarginStart, '-50px', 'margin has been set'); + assert.equal(h1.style.marginLeft, '-50px', 'margin has been set'); }).then(done, done); }); @@ -161,7 +161,7 @@ suite('GaiaHeader', function() { afterNext(el, 'runFontFit').then(() => { assert.equal(h1.style.fontSize, '', 'font-size should not have been set'); - assert.equal(h1.style.MozMarginStart, '', 'margin should not have been set'); + assert.equal(h1.style.marginLeft, '', 'margin should not have been set'); sinon.assert.notCalled(this.fontFit); }).then(done, done); }); @@ -174,7 +174,7 @@ suite('GaiaHeader', function() { afterNext(el, 'runFontFit').then(() => { assert.equal(h1.style.fontSize, '24px'); - assert.equal(h1.style.MozMarginStart, '-50px'); + assert.equal(h1.style.marginLeft, '-50px'); h1.textContent = 'Title'; h1.setAttribute('foo', 'bar'); @@ -360,31 +360,31 @@ suite('GaiaHeader', function() { }); test('are correctly taken into account', function() { - assert.equal(h1.style.MozMarginStart, '50px'); + assert.equal(h1.style.marginLeft, '50px'); }); test('changing start attribute is taken into account', function(done) { el.setAttribute('title-start', '0'); afterNext(el, 'runFontFit').then(() => { - assert.equal(h1.style.MozMarginStart, '100px'); + assert.equal(h1.style.marginLeft, '100px'); el.removeAttribute('title-start'); return afterNext(el, 'runFontFit'); }).then(() => { - assert.equal(h1.style.MozMarginStart, '100px'); + assert.equal(h1.style.marginLeft, '100px'); }).then(done, done); }); test('changing end attribute is taken into account', function(done) { - assert.equal(h1.style.MozMarginStart, '50px'); + assert.equal(h1.style.marginLeft, '50px'); el.setAttribute('title-end', '0'); afterNext(el, 'runFontFit').then(() => { - assert.equal(h1.style.MozMarginStart, '-50px'); + assert.equal(h1.style.marginLeft, '-50px'); el.removeAttribute('title-end'); return afterNext(el, 'runFontFit'); }).then(() => { - assert.equal(h1.style.MozMarginStart, '-50px'); + assert.equal(h1.style.marginLeft, '-50px'); }).then(done, done); }); @@ -704,7 +704,7 @@ suite('GaiaHeader', function() { var h1 = el.querySelector('h1'); afterNext(el, 'runFontFit').then(() => { - assert.equal(h1.style.MozMarginStart, '50px'); + assert.equal(h1.style.marginLeft, '50px'); this.dom.innerHTML = `

Header title

@@ -715,7 +715,7 @@ suite('GaiaHeader', function() { return afterNext(el, 'runFontFit'); }).then(() => { - assert.equal(h1.style.MozMarginStart, '-50px'); + assert.equal(h1.style.marginLeft, '-50px'); }).then(done, done); }); @@ -730,7 +730,7 @@ suite('GaiaHeader', function() { var h1 = el.querySelector('h1'); afterNext(el, 'runFontFit').then(() => { - assert.equal(h1.style.MozMarginStart, '0px'); + assert.equal(h1.style.marginLeft, '0px'); }).then(done, done); }); @@ -878,8 +878,8 @@ suite('GaiaHeader', function() { var title2 = el.querySelector('.title-2'); afterNext(el, 'runFontFit').then(() => { - assert.equal(title1.style.MozMarginStart, '50px'); - assert.equal(title2.style.MozMarginStart, '50px'); + assert.equal(title1.style.marginLeft, '50px'); + assert.equal(title2.style.marginLeft, '50px'); }).then(() => { this.fontFit.reset(); title1.hidden = true; @@ -887,8 +887,8 @@ suite('GaiaHeader', function() { return afterNext(el, 'runFontFit'); }).then(() => { sinon.assert.notCalled(this.fontFit, 'font-fit not required'); - assert.equal(title1.style.MozMarginStart, '50px'); - assert.equal(title2.style.MozMarginStart, '50px'); + assert.equal(title1.style.marginLeft, '50px'); + assert.equal(title2.style.marginLeft, '50px'); }).then(done, done); });