| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>style_test.html</title> |
| <link rel="stylesheet" href="/filez/_main/third_party/js/qunit/qunit.css"> |
| <script src="/filez/_main/third_party/js/qunit/qunit.js"></script> |
| <script src="/filez/_main/third_party/js/qunit/qunit_test_runner.js"></script> |
| <script src="test_bootstrap.js"></script> |
| <script type="text/javascript"> |
| goog.require('bot.color'); |
| goog.require('bot.dom'); |
| goog.require('bot.locators'); |
| goog.require('bot.userAgent'); |
| goog.require('goog.array'); |
| </script> |
| |
| <script type="text/javascript"> |
| function assertColorFuzzyEquals(assert, str, expected, actual, delta) { |
| assert.ok( |
| (Math.abs(expected[0] - actual[0]) <= delta) && |
| (Math.abs(expected[1] - actual[1]) <= delta) && |
| (Math.abs(expected[2] - actual[2]) <= delta), |
| str + ' Expected: ' + expected + ' and got: ' + actual + |
| ' w/ delta: ' + delta); |
| } |
| |
| QUnit.test('style attribute returns css text', function(assert) { |
| var e = bot.locators.findElement({id: 'child'}); |
| assert.strictEqual(bot.dom.getAttribute(e, 'style'), 'visibility: inherit;'); |
| }); |
| |
| QUnit.test('style attribute returns with trailing semicolon', function(assert) { |
| var e = bot.locators.findElement({id: 'parent'}); |
| assert.strictEqual(bot.dom.getAttribute(e, 'style'), 'visibility: visible;'); |
| }); |
| |
| QUnit.test('inline style returns empty string for nonexistent property', function(assert) { |
| var e = bot.locators.findElement({id: 'child'}); |
| assert.strictEqual(bot.dom.getInlineStyle(e, 'gibberish'), ''); |
| }); |
| |
| QUnit.test('inline style returns empty string for unspecified property', function(assert) { |
| var e = bot.locators.findElement({id: 'child'}); |
| assert.strictEqual(bot.dom.getInlineStyle(e, 'display'), ''); |
| }); |
| |
| QUnit.test('inline style returns empty string for css specified property', function(assert) { |
| var e = bot.locators.findElement({id: 'child'}); |
| assert.strictEqual(bot.dom.getInlineStyle(e, 'height'), ''); |
| }); |
| |
| QUnit.test('inline style returns inline property', function(assert) { |
| var e = bot.locators.findElement({id: 'child'}); |
| assert.strictEqual(bot.dom.getInlineStyle(e, 'visibility'), 'inherit'); |
| }); |
| |
| QUnit.test('effective style returns inline property', function(assert) { |
| var e = bot.locators.findElement({id: 'parent'}); |
| assert.strictEqual(bot.dom.getEffectiveStyle(e, 'visibility'), 'visible'); |
| }); |
| |
| QUnit.test('effective style returns css specified property', function(assert) { |
| var e = bot.locators.findElement({id: 'child'}); |
| assert.strictEqual(bot.dom.getEffectiveStyle(e, 'height'), '20px'); |
| }); |
| |
| QUnit.test('effective style returns inherited property', function(assert) { |
| var e = bot.locators.findElement({id: 'child'}); |
| assert.strictEqual(bot.dom.getEffectiveStyle(e, 'visibility'), 'visible'); |
| }); |
| |
| QUnit.test('get effective style returns named color standardized to rgba format', function(assert) { |
| var e = bot.locators.findElement({id: 'namedColor'}); |
| var rgbaStyle = bot.dom.getEffectiveStyle(e, 'background-color'); |
| var rgba = bot.color.maybeParseRgbaColor_(rgbaStyle); |
| assertColorFuzzyEquals(assert, 'Color was off', [0,128,0], rgba, 1); |
| assert.strictEqual(rgba[3], 1); |
| }); |
| |
| QUnit.test('get effective style returns rgb style color standardized to rgba format', function(assert) { |
| var e = bot.locators.findElement({id: 'rgb'}); |
| var rgbaStyle = bot.dom.getEffectiveStyle(e, 'background-color'); |
| var rgba = bot.color.maybeParseRgbaColor_(rgbaStyle); |
| assertColorFuzzyEquals(assert, 'Color was off', [0,128,0], rgba, 1); |
| assert.strictEqual(rgba[3], 1); |
| }); |
| |
| QUnit.test('get effective style returns rgb percent style color standardized to rgba format', function(assert) { |
| var e = bot.locators.findElement({id: 'rgbpct'}); |
| var rgbaStyle = bot.dom.getEffectiveStyle(e, 'background-color'); |
| var rgba = bot.color.maybeParseRgbaColor_(rgbaStyle); |
| assertColorFuzzyEquals(assert, 'Color was off', [0,128,0], rgba, 1); |
| assert.strictEqual(rgba[3], 1); |
| }); |
| |
| QUnit.test('get effective style returns hex style color standardized to rgba format', function(assert) { |
| var e = bot.locators.findElement({id: 'hex'}); |
| var rgbaStyle = bot.dom.getEffectiveStyle(e, 'background-color'); |
| var rgba = bot.color.maybeParseRgbaColor_(rgbaStyle); |
| assertColorFuzzyEquals(assert, 'Color was off', [0,128,0], rgba, 1); |
| assert.strictEqual(rgba[3], 1); |
| }); |
| |
| QUnit.test('get effective style returns hsl style color standardized to rgba format', function(assert) { |
| var e = bot.locators.findElement({id: 'hsl'}); |
| var rgbaStyle = bot.dom.getEffectiveStyle(e, 'background-color'); |
| if (!goog.userAgent.IE || bot.userAgent.isProductVersion(9)) { |
| var rgba = bot.color.maybeParseRgbaColor_(rgbaStyle); |
| assertColorFuzzyEquals(assert, 'Color was off', [0,128,0], rgba, 1); |
| assert.strictEqual(rgba[3], 1); |
| } else { |
| assert.strictEqual(rgbaStyle.toLowerCase(), 'transparent'); |
| } |
| }); |
| |
| QUnit.test('get effective style returns rgba style color standardized to rgba format', function(assert) { |
| var e = bot.locators.findElement({id: 'rgba'}); |
| var rgbaStyle = bot.dom.getEffectiveStyle(e, 'background-color'); |
| if (!goog.userAgent.IE || bot.userAgent.isProductVersion(9)) { |
| var rgba = bot.color.maybeParseRgbaColor_(rgbaStyle); |
| assertColorFuzzyEquals(assert, 'Color was off', [0,128,0], rgba, 1); |
| assert.strictEqual(Math.round(rgba[3] * 10) / 10, 0.5); |
| } else { |
| assert.strictEqual(rgbaStyle.toLowerCase(), 'transparent'); |
| } |
| }); |
| |
| QUnit.test('get effective style returns rgba percent style color standardized to rgba format', function(assert) { |
| var e = bot.locators.findElement({id: 'rgbapct'}); |
| var rgbaStyle = bot.dom.getEffectiveStyle(e, 'background-color'); |
| if (!goog.userAgent.IE || bot.userAgent.isProductVersion(9)) { |
| var rgba = bot.color.maybeParseRgbaColor_(rgbaStyle); |
| assertColorFuzzyEquals(assert, 'Color was off', [0,128,0], rgba, 1); |
| assert.strictEqual(Math.round(rgba[3] * 10) / 10, 0.5); |
| } else { |
| assert.strictEqual(rgbaStyle.toLowerCase(), 'transparent'); |
| } |
| }); |
| |
| QUnit.test('get effective style returns hsla style color standardized to rgba format', function(assert) { |
| var e = bot.locators.findElement({id: 'hsla'}); |
| var rgbaStyle = bot.dom.getEffectiveStyle(e, 'background-color'); |
| if (!goog.userAgent.IE || bot.userAgent.isProductVersion(9)) { |
| var rgba = bot.color.maybeParseRgbaColor_(rgbaStyle); |
| assertColorFuzzyEquals(assert, 'Color was off', [0,128,0], rgba, 1); |
| assert.strictEqual(Math.round(rgba[3] * 10) / 10, 0.5); |
| } else { |
| assert.strictEqual(rgbaStyle.toLowerCase(), 'transparent'); |
| } |
| }); |
| |
| QUnit.test('effective style does not return unquoted short ms filter as filter', function(assert) { |
| var e = bot.locators.findElement({id: 'msFilterUnquotedFilterShort'}); |
| assert.strictEqual(bot.dom.getInlineStyle(e, 'filter'), ''); |
| }); |
| |
| QUnit.test('effective style does not return unquoted long ms filter as filter', function(assert) { |
| var e = bot.locators.findElement({id: 'msFilterUnquotedFilterLong'}); |
| assert.strictEqual(bot.dom.getInlineStyle(e, 'filter'), ''); |
| }); |
| |
| QUnit.test('effective style returns quoted short ms filter as filter', function(assert) { |
| var e = bot.locators.findElement({id: 'msFilterQuotedFilterShort'}); |
| if (goog.userAgent.IE && bot.userAgent.isEngineVersion(8) && |
| !bot.userAgent.isEngineVersion(10)) { |
| assert.strictEqual(bot.dom.getInlineStyle(e, 'filter'), 'alpha(opacity=0)'); |
| } else { |
| assert.strictEqual(bot.dom.getInlineStyle(e, 'filter'), ''); |
| } |
| }); |
| |
| QUnit.test('effective style returns quoted long ms filter as filter', function(assert) { |
| var e = bot.locators.findElement({id: 'msFilterQuotedFilterLong'}); |
| if (goog.userAgent.IE && bot.userAgent.isEngineVersion(8) && |
| !bot.userAgent.isEngineVersion(10)) { |
| assert.strictEqual(bot.dom.getInlineStyle(e, 'filter'), |
| 'progid:DXImageTransform.Microsoft.Alpha(Opacity=20)'); |
| } else { |
| assert.strictEqual(bot.dom.getInlineStyle(e, 'filter'), ''); |
| } |
| }); |
| |
| QUnit.test('can retrieve value from style tag', function(assert) { |
| var green = goog.dom.$('green'); |
| var color = bot.dom.getEffectiveStyle(green, 'background-color'); |
| |
| assert.strictEqual(color, 'rgba(0, 128, 0, 1)'); |
| }); |
| |
| QUnit.test('get attribute should return style attribute with case of value maintained', function(assert) { |
| var e = bot.locators.findElement({id: 'mixedCaseValues'}); |
| var style = bot.dom.getAttribute(e, 'style'); |
| assert.ok(style.indexOf('left: 0px;') !== -1); |
| assert.ok(style.indexOf('text-align: center;') !== -1); |
| assert.ok(style.indexOf('background-image: url(') !== -1); |
| assert.ok(style.indexOf('testdata/kitten3.jpg') !== -1); |
| }); |
| |
| QUnit.test('get attribute should return style attribute with case of property normalized to lowercase', function(assert) { |
| var e = bot.locators.findElement({id: 'mixedCaseProperties'}); |
| var style = bot.dom.getAttribute(e, 'style'); |
| assert.ok(style.indexOf('left: 0px;') !== -1); |
| assert.ok(style.indexOf('text-align: center;') !== -1); |
| }); |
| |
| QUnit.test('gets float', function(assert) { |
| var rightFloated = bot.locators.findElement({id: 'right-floated'}); |
| var notFloated = bot.locators.findElement({id: 'green'}); |
| assert.strictEqual(bot.dom.getEffectiveStyle(rightFloated, 'float'), 'right'); |
| assert.strictEqual(bot.dom.getEffectiveStyle(notFloated, 'float'), 'none'); |
| }); |
| </script> |
| |
| <style type="text/css"> |
| #child { |
| height: 20px |
| } |
| </style> |
| </head> |
| <body> |
| <div id="qunit"></div> |
| <div id="qunit-fixture"></div> |
| <div id="msFilterUnquotedFilterShort" style="-ms-filter:alpha(opacity=0)">A div</div> |
| <div id="msFilterUnquotedFilterLong" style="-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=20)">A div</div> |
| <div id="msFilterQuotedFilterShort" style="-ms-filter:'alpha(opacity=0)'">A div</div> |
| <div id="msFilterQuotedFilterLong" style="-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=20)'">A div</div> |
| |
| <div id="parent" style="visibility: visible">A parent div |
| <div id="child" style="visibility: inherit;display:;">A child div</div> |
| </div> |
| |
| <div id="green" style="background-color:green; width:100px; height:50px"> |
| </div> |
| <div id="mixedCaseProperties" style="Left: 0px; Text-align: center;"> |
| </div> |
| <div id="mixedCaseValues" style="left: 0px; text-align: center; background-image: url(testdata/kitten3.jpg;?a=b&c=d);"> |
| </div> |
| <div id="namedColor" style="background-color: green;">namedColor</div> |
| <div id="rgb" style="background-color: rgb(0,128,0);">rgb</div> |
| <div id="rgbpct" style="background-color: rgb(0%,50%,0%);">rgbpct</div> |
| <div id="hex" style="background-color: #008000;">hex</div> |
| <div id="hsl" style="background-color: hsl(120,100%,25%);">hsl</div> |
| <div id="rgba" style="background-color: rgba(0,128,0, 0.5);">rgba</div> |
| <div id="rgbapct" style="background-color: rgba(0%,50%,0%, 0.5);">rgba</div> |
| <div id="hsla" style="background-color: hsla(120,100%,25%,0.5);">hsla</div> |
| <div id="right-floated" style="float: right">Right floated</div> |
| </body> |
| </html> |
