Browse files

Merge remote-tracking branch 'anastasia/FLUID-4703-uie-line-height'

* anastasia/FLUID-4703-uie-line-height:
  FLUID-4703: More adjustments to the tests to account for browser differences.
  FLUID-4703: Update tests to pass in IE, to account for IE strangeness.
  FLUID-4703: Remove the unit 'em' from the line-height that UIE adds to the body.
  • Loading branch information...
2 parents 0155954 + 0a5b4b3 commit ddecffb33b1ddd45813abe23edc46bbfde9ed239 @jobara jobara committed Apr 20, 2012
View
2 src/webapp/components/uiOptions/js/UIEnhancer.js
@@ -503,7 +503,7 @@ var fluid_1_5 = fluid_1_5 || {};
// @ See fluid.uiEnhancer.numerizeLineHeight() & http://issues.fluidproject.org/browse/FLUID-4500
if (that.initialSize) {
var targetLineSpacing = times * that.initialSize;
- that.container.css("line-height", targetLineSpacing + "em");
+ that.container.css("line-height", targetLineSpacing);
}
};
View
3 src/webapp/demos/uiOptions/css/uiOptions.css
@@ -36,7 +36,6 @@ img {
margin-bottom: 0.5em;
font-weight: normal;
font-size: 1.6em;
- line-height: 100%;
}
.header,
.instructions {
@@ -45,13 +44,11 @@ img {
.header h1 {
font-family: LoveYaLikeASister, "Courier New, Courier", monospace;
font-size: 3em;
- line-height: 1em;
margin-bottom: 20px;
}
.header .tagline {
font-family: LatoLightItalic, Helvetica, Tahoma, Verdana, sans-serif;
font-size: 1.3em;
- line-height: 130%;
font-style: italic;
}
.header .disp-pref {
View
10 src/webapp/tests/component-tests/uiOptions/html/UIEnhancer-test.html
@@ -67,13 +67,19 @@ <h2 id="qunit-userAgent"></h2>
<span class="fl-font-comic-sans" />
</div>
- <div class="flt-lineSpacer-parent" style="font-size: 16px">
- <div class="flt-lineSpacer" style="line-height: 12px; font-size: 8px">
+ <div class="flt-lineSpacer-parent" style="font-size: 24px">
+ <div class="flt-lineSpacer" style="line-height: 12px; font-size: 6px">
</div>
</div>
<div class="fl-inverted-color">
</div>
+
+ <!-- For test for FLUID-4703 -->
+ <div class="flt-lineHeight" style="font-size: 16px">
+ <div class="flt-lineHeight-child-1em">Test</div>
+ <div class="flt-lineHeight-child-2em" style="font-size: 2em">Test</div>
+ </div>
</div>
</body>
View
29 src/webapp/tests/component-tests/uiOptions/js/UIEnhancerTests.js
@@ -139,7 +139,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
var uiEnhancer = fluid.uiEnhancer(".flt-lineSpacer", uiEnhancerOptions);
var fontSize = fluid.uiEnhancer.getTextSizeInPx(uiEnhancer.container, uiEnhancer.options.fontSizeMap);
- var numerizedLineHeight = fluid.uiEnhancer.numerizeLineHeight(lineHeight, fontSize);
+ var numerizedLineHeight = fluid.uiEnhancer.numerizeLineHeight(lineHeight, Math.round(fontSize));
jqUnit.assertEquals("line-height value '" + lineHeight + "' has been converted correctly", expected, numerizedLineHeight);
});
@@ -148,17 +148,27 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
var undefinedLineHeight;
testNumerizeLineHeight(undefinedLineHeight, 0);
testNumerizeLineHeight("normal", 1.2);
- testNumerizeLineHeight("8px", 1);
+ testNumerizeLineHeight("6px", 1);
testNumerizeLineHeight("1.5", 1.5);
+ // This is necessary to work around IE differences in handling line-height unitless factors
+ var convertLineHeightFactor = function (lineHeight, fontSize) {
+ // Continuing the work-around of jQuery + IE bug - http://bugs.jquery.com/ticket/2671
+ if (lineHeight.match(/[0-9]$/)) {
+ return Math.round(lineHeight * parseFloat(fontSize)) + "px";
+ } else {
+ return lineHeight;
+ }
+ };
+
tests.test("LineSpacer", function () {
var uiEnhancer = fluid.uiEnhancer(".flt-lineSpacer", uiEnhancerOptions);
var lineSpacer = uiEnhancer.lineSpacing;
- jqUnit.assertEquals("Check that the size is pulled from the container correctly", 1.5, lineSpacer.initialSize);
- jqUnit.assertEquals("Check the line spacing size in pixels", "12px", lineSpacer.container.css("lineHeight"));
+ jqUnit.assertEquals("Check that the size is pulled from the container correctly", 2, Math.round(lineSpacer.initialSize));
+ jqUnit.assertEquals("Check the line spacing size in pixels", "12px", convertLineHeightFactor(lineSpacer.container.css("lineHeight"), lineSpacer.container.css("fontSize")));
lineSpacer.set(2);
- jqUnit.assertEquals("The size should be doubled", "24px", lineSpacer.container.css("lineHeight"));
+ jqUnit.assertEquals("The size should be doubled", "24px", convertLineHeightFactor(lineSpacer.container.css("lineHeight"), lineSpacer.container.css("fontSize")));
});
function cleanStaticEnvironment() {
@@ -264,5 +274,14 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
jqUnit.assertTrue("The initial test theme is set correctly", body.hasClass("fl-test"));
});
+ tests.test("FLUID-4703: Line height unit", function () {
+ var child1El = $(".flt-lineHeight-child-1em");
+ var child2El = $(".flt-lineHeight-child-2em");
+
+ var child1emHeight = child1El.height() - 1; // adjusted to account for rounding by jQuery
+ var child2emHeight = child2El.height();
+ jqUnit.assertTrue("The line height of the 2em child should be close to twice the size of the 1em child", 2*child1emHeight < child2emHeight);
+ });
+
});
})(jQuery);

0 comments on commit ddecffb

Please sign in to comment.