<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dynamic nested ngStyles</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.1/angular.min.js"></script>
</head>
<body ng-app="">
<h1>Dynamic nested ngStyles for web components with Angular 1.4.5</h1>
<input type="button" value="set color" ng-click="myStyle={color:'red'}">
<input type="button" value="set background" ng-click="myStyle={'background-color':'blue'}">
<input type="button" value="clear" ng-click="myStyle={}">
<br/>
<input type="button" value="set color" ng-click="myStyle2={color:'green'}">
<input type="button" value="set background" ng-click="myStyle2={'background-color':'black'}">
<input type="button" value="clear" ng-click="myStyle2={}">
<br/>
<div ng-style="myStyle">Sample Text
<div ng-style="myStyle2">Hello!</div>
<p>Mbrump</p>
</div>
<pre>myStyle={{myStyle}}</pre>
</body>
</html>
span {
color: black;
}
var colorSpan = element(by.css('span'));
it('should check ng-style', function() {
expect(colorSpan.getCssValue('color')).toBe('rgba(0, 0, 0, 1)');
element(by.css('input[value=\'set color\']')).click();
expect(colorSpan.getCssValue('color')).toBe('rgba(255, 0, 0, 1)');
element(by.css('input[value=clear]')).click();
expect(colorSpan.getCssValue('color')).toBe('rgba(0, 0, 0, 1)');
});