Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Fixes edge-case bug which made it impossible to clear a dynamic backg…

…roundColor.
  • Loading branch information...
commit 6f23d90148c039a46939979800bf780c3d1749cb 1 parent 7040df4
@dcporter dcporter authored
View
44 frameworks/core_foundation/tests/views/view/background_color.js
@@ -0,0 +1,44 @@
+// ==========================================================================
+// Project: SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+// ©2008-2011 Apple Inc. All rights reserved.
+// License: Licensed under MIT license (see license.js)
+// ==========================================================================
+
+module("SC.View - backgroundColor");
+
+test("Basic use", function() {
+ var view = SC.View.create({
+ backgroundColor: "red"
+ });
+
+ view.createLayer();
+
+ equals(view.get('layer').style.backgroundColor, "red", "backgroundColor sets the CSS background-color value");
+
+});
+
+test("Dynamic use", function() {
+ var view = SC.View.create({
+ backgroundColor: 'red',
+ displayProperties: ['backgroundColor']
+ });
+
+ view.createLayer();
+ view.viewState = SC.View.ATTACHED_SHOWN; // hack to get view properties to update.
+
+ equals(view.get('layer').style.backgroundColor, 'red', "PRELIM: backgroundColor sets the CSS background-color value");
+
+ SC.run(function() {
+ view.set('backgroundColor', 'blue');
+ });
+
+ equals(view.get('layer').style.backgroundColor, 'blue', "Changing backgroundColor when it is a display property updates the CSS background-color value");
+
+ SC.run(function() {
+ view.set('backgroundColor', null);
+ });
+
+ ok(!view.get('layer').style.backgroundColor, "Setting backgroundColor to null clears the CSS background-color value");
+
+});
View
10 frameworks/core_foundation/tests/views/view/static_layout.js
@@ -16,13 +16,3 @@ test("Static layout", function() {
ok(view.$().is('.sc-static-layout'), "views with useStaticLayout get the sc-static-layout class");
});
-
-test("Background color", function() {
- var view = SC.View.create({
- backgroundColor: "red"
- });
-
- view.createLayer();
-
- equals(view.get('layer').style.backgroundColor, "red", "backgroundColor sets the CSS background-color class");
-});
View
26 frameworks/core_foundation/views/view/layout.js
@@ -37,17 +37,21 @@ SC.View.reopen(
/** @scope SC.View.prototype */ {
/**
- Set to YES to indicate the view has layout support added.
+ Walks like a duck. Is YES to indicate that a view has layout support.
*/
hasLayout: YES,
/**
- Optional background color. Will be applied to the view's element if
- set. This property is intended for one-off views that need a background
- element. If you plan to create many view instances it is probably better
- to use CSS.
+ The view's background color. Only recommended for use during prototyping and in views
+ where the background color may change arbitrarily, for example in connection with an
+ instance of `SC.Color`. Otherwise you should use CSS and `classNames` or
+ `classNameBindings`.
+
+ If set at create time, will be added to the view's layer. For dynamic background colors,
+ you must add `backgroundColor` to the view's `displayProperties`.
@type String
+ @default null
*/
backgroundColor: null,
@@ -55,10 +59,10 @@ SC.View.reopen(
_previousLayout: null,
/**
- Activates use of brower's static layout. To activate, set this
- property to YES.
+ Activates use of brower's static layout. To activate, set this property to YES.
@type Boolean
+ @default NO
*/
useStaticLayout: NO,
@@ -1109,9 +1113,13 @@ SC.View.reopen(
if (this.get('useStaticLayout')) { context.addClass('sc-static-layout'); }
+ // Background color defaults to null; for performance reasons we should ignore it
+ // unless it's ever been non-null.
var backgroundColor = this.get('backgroundColor');
- if (backgroundColor) {
- context.setStyle('backgroundColor', backgroundColor);
+ if (!SC.none(backgroundColor) || this._scv_hasBackgroundColor) {
+ this._scv_hasBackgroundColor = YES;
+ if (backgroundColor) context.setStyle('backgroundColor', backgroundColor);
+ else context.removeStyle('backgroundColor');
}
}.enhance(),
Please sign in to comment.
Something went wrong with that request. Please try again.