Permalink
Browse files

Changing the browserscope database and fix some minor rendering changes

  • Loading branch information...
1 parent 619d420 commit 3b1b44435430062635251d374547f58aae88c633 @Mire Mire committed Sep 6, 2013
@@ -23,6 +23,7 @@ margins on them. Then float the parent divs, and set each width to 50%
.manual-test-actual {
float:left;
}
+
.manual-test-expected {
float:right;
}
Deleted file not rendered
@@ -19,13 +19,13 @@ var ManualTest = function(title, expectedResultImage, assertion) {
this.assertion = $("<span/>",
{
- text: this.assertionText,
+ text: this.assertionText,
style: "vertical-align:middle"
}).appendTo(this.footer);
this.btnYes = $("<div/>",
{ class: 'btn btn-success',
- text: 'YES',
+ text: 'YES',
style: "float:right"
}).appendTo(this.footer);
this.btnNo = $("<div/>",
@@ -34,10 +34,26 @@ var ManualTest = function(title, expectedResultImage, assertion) {
style: "float:right"}).appendTo(this.footer);
this.bottomLayer = this.defaultBackdropGradient;
- this.expected.load(this,function(event) {
+ // Hide the results element to avoid some unpleasant visual (flicker) effects
+ // when it is resized, especially from its position:absolute children. It is
+ // made visible after the expected image is loaded, and the element gets its
+ // final size.
+ // This resize 'flicker' happens mostly for element blending tests
+ this.result.css("visibility", "hidden");
+ this.expected.load(this, function(event) {
var self = event.data;
+
+ // Hack for IE to maintain the images aspect ratio, which is approximately
+ // 1:1 (give or take a few pixels). IE 9 makes the image height almost
+ // double the width of the image, for some reason I have yet to determine.
+ self.expected.height(self.expected.width() + "px");
+ // End Hack
+
+ // This element needs to have a fixed size set, especially for background
+ // blending tests, since backgrounds do not stretch the containing element.
self.result.width(self.expected.width() + "px");
self.result.height(self.expected.height() + "px");
+ self.result.css("visibility", "visible");
});
}
@@ -53,7 +69,7 @@ ManualTest.prototype = {
asBackgroundBlendingTest: function(blendMode, imageToBlend) {
this.title.text("Background Blending: " + this.title.text());
this.topLayer = "url('" + imageToBlend + "') no-repeat 0 0 /100% 100%";
-
+
var backgroundStyle = this.topLayer + ", " + this.bottomLayer;
this.result.css("background", backgroundStyle);
@@ -63,7 +79,7 @@ ManualTest.prototype = {
// This test will overlap two elements, and set blending on the top one
asElementBlendingTest : function(blendMode, imageToBlend) {
this.title.text("Element Blending: " + this.title.text());
- this.topElement = $("<img/>", {src: imageToBlend,
+ this.topElement = $("<img/>", {src: imageToBlend,
class: "element-blending-test eb-top-layer"})
.appendTo(this.result);
@@ -76,6 +92,15 @@ ManualTest.prototype = {
}
+// Utility function
+ManualTest.preloadImage = function(imageUrl) {
+ var img = $("<img/>",
+ { src: imageUrl,
+ style: "width:1px; height:1px; border:0;visibility: hidden"
+ });
+ img.appendTo($('body'));
+}
+
window.ManualTest = ManualTest;
@@ -351,7 +351,7 @@ $(function () {
{
var _result;
_result = eval(_to_eval);
- if (Math.abs(_result - _target) <= _tolerance)
+ if (Math.abs(_result - _target) <= _tolerance)
ok(true, message + ": actual " + _to_eval + ": expected " + _target);
else
ok(false, message + ": actual " + _to_eval + ": expected " + _target);
@@ -398,20 +398,19 @@ $(function () {
runTests();
}).appendTo($('body'));
})();
-
+
function runTests() {
function testCSSBlendingBasics(){
module("CSS Blending basics", { "setup": setup, "teardown": teardown });
function setup(){
- $blended.css("background-blend-mode", "multiply");
+ $blended = $('<div>&nbsp;</div>').appendTo($('body'))
}
function teardown(){
$blended.remove();
}
test("Parsing - CSS background-blend-mode", function(){
- blendModes = ["normal", "multiply", "screen", "overlay", "darken", "lighten","color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"]
for( j=0; j<blendModes.length; j++ )
{
$blended.css("background-blend-mode", blendModes[j]);
@@ -421,7 +420,6 @@ $(function () {
});
test("Parsing - CSS element blending", function(){
- blendModes = ["normal", "multiply", "screen", "overlay", "darken", "lighten","color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"]
for( j=0; j<blendModes.length; j++ )
{
$blended.css("mix-blend-mode", blendModes[j]);
@@ -430,18 +428,14 @@ $(function () {
}
});
- test("Rendering - CSS canvas blend-mode", function(){
+ test("Parsing - CSS canvas blend-mode", function(){
$canvas = $('<canvas></canvas>').appendTo($('body'));
$ctx = $canvas[0].getContext('2d');
- blendModes = ["normal", "multiply", "screen", "overlay", "darken", "lighten","color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"]
-
- for( j=0; j<blendModes.length; j++ )
+ //Skipping the normal canvas blending since the globalCompositeOperation has the default value source-over
+ for( j=1; j<blendModes.length; j++ )
{
$ctx.globalCompositeOperation = blendModes[j];
- if ( blendModes[j] == "normal" )
- equal($ctx.globalCompositeOperation, "source-over", "Correct parsing for canvas blend-mode: " + blendModes[j]);
- else
equal($ctx.globalCompositeOperation, blendModes[j], "Correct parsing for canvas blend-mode: " + blendModes[j]);
}
});
@@ -478,8 +472,8 @@ $(function () {
function teardown(){
$canvas.remove();
}
-
- for (var i = 0; i < blendModes.length; i++) (function(i){
+ //Skipping the normal canvas blending since the globalCompositeOperation has the default value source-over
+ for (var i = 1; i < blendModes.length; i++) (function(i){
var blendmode = blendModes[i];
test("Rendering - CSS canvas blend-mode - " + blendmode, function () {
$context.globalCompositeOperation = blendmode;
@@ -488,16 +482,16 @@ $(function () {
});
})(i);
}
-
+
function runManualTests() {
module(kModuleName_ManualTests, { "teardown": teardown});
- var blendModesExpected = ["Normal", "Multiply", "Screen", "Overlay", "Darken", "Lighten", "Color-dodge", "Color-burn",
+ var blendModesExpectedImages = ["Normal", "Multiply", "Screen", "Overlay", "Darken", "Lighten", "Color-dodge", "Color-burn",
"Hard-light", "Soft-light", "Difference", "Exclusion", "Hue", "Saturation", "Color", "Luminosity"];
function teardown() {
// Clear the manual test panel
$("#manual-tests").empty();
}
-
+
function getBlendingAsyncTest(blendModeIndex, testType) {
return function(){
var blendMode = blendModes[blendModeIndex];
@@ -508,9 +502,9 @@ $(function () {
return;
}
- var blendModeExpected = blendModesExpected[blendModeIndex] +".png"
+ var blendModeExpectedImage = blendModesExpectedImages[blendModeIndex] +".png"
var title = blendMode + " rendering (" + (+blendModeIndex + 1) + "/" + blendModes.length + ")";
- var manualTest = new ManualTest(title, "assets/img/expected/" + blendModeExpected);
+ var manualTest = new ManualTest(title, "assets/img/expected/" + blendModeExpectedImage);
switch(testType) {
case TestType.Background:
@@ -524,6 +518,7 @@ $(function () {
}
manualTest.element.appendTo("#manual-tests");
+
var clickHandler = function(event) {
QUnit.equal($(event.target).text(), manualTest.btnYes.text(), "Did the images match for "+blendModes[blendModeIndex]+" blending?");
start();
@@ -532,12 +527,16 @@ $(function () {
manualTest.btnNo.click(clickHandler);
var timeoutNotice = $('<div/>').appendTo("#manual-tests");
- timeoutNotice.text("This test will timeout (and fail) after " +
+ timeoutNotice.text("This test will timeout (and fail) after " +
QUnit.config.testTimeout/1000 + " seconds.");
timeoutNotice.css("text-align", "center");
}
}
+ // Preload expected images to avoid visible element resizing
+ for (var i in blendModesExpectedImages)
+ ManualTest.preloadImage("assets/img/expected/" + blendModesExpectedImages[i] + ".png");
+
// add an async test for each blend mode;
for (var i in blendModes) {
asyncTest("Rendering - CSS background blending - " + blendModes[i],
@@ -549,11 +548,11 @@ $(function () {
getBlendingAsyncTest(i, TestType.Element));
}
}
-
+
window.kModuleName_ManualTests = kModuleName_ManualTests;
testCSSBlendingBasics();
testCSSCanvasBlending();
runManualTests();
}
-})
+})
@@ -41,7 +41,7 @@
<script type="text/javascript">
// Test key for BrowserScope test suite
- var _bTestKey = 'agt1YS1wcm9maWxlcnIRCxIEVGVzdBiAgICAmJvzCww'
+ var _bTestKey = 'agt1YS1wcm9maWxlcnIRCxIEVGVzdBiAgICAmOeACgw'
var browserscopeURL = "http://www.browserscope.org/user/tests/table/" + _bTestKey + "?o=json&v=";
var currentBrowserChoice = "browsers-major";
var browserscopeV = browserScopeVersionTranslate(currentBrowserChoice);

0 comments on commit 3b1b444

Please sign in to comment.