From 1499a32a6923a4f79208bce31e9014a906011b61 Mon Sep 17 00:00:00 2001 From: dhrname Date: Tue, 3 May 2016 22:52:04 +0900 Subject: [PATCH] Modify the setAttribute of the object --- org/w3c/dom/smil.js | 12 ++++++--- tool/Spec/spec/SvgDomSpec.js | 61 ++++++++++++++++++++++++++++++++------------ 2 files changed, 53 insertions(+), 20 deletions(-) diff --git a/org/w3c/dom/smil.js b/org/w3c/dom/smil.js index 6ff2df6..1760ae9 100644 --- a/org/w3c/dom/smil.js +++ b/org/w3c/dom/smil.js @@ -838,9 +838,12 @@ base("$calcMode").up("$attribute").mix( { return; } var ele = this.element; - ele.setAttributeNS(this.attrNameSpace, attrName, value); - /*スタイルシートのプロパティも上書きしておく*/ - this.isCSS && ele.style.setProperty(attrName, value, ""); + if (this.isCSS) { + /*スタイルシートのプロパティを上書きしておく*/ + ele.style.setProperty(attrName, value, ""); + } else { + ele.setAttributeNS(this.attrNameSpace, attrName, value); + } value = attrName = ele = void 0; }, @@ -1559,6 +1562,9 @@ base("$calcMode").up("$attribute").mix( { /*type属性の値*/ type: "translate", + /*明確にisCSSプロパティを設定しておくことで、プロトタイプチェーンを使わせず最適化*/ + isCSS: false, + /*$animateElementオブジェクトのtocallメソッドをオーバライド*/ tocall: function (advance) { if (this.numberOfList < 0) { diff --git a/tool/Spec/spec/SvgDomSpec.js b/tool/Spec/spec/SvgDomSpec.js index 0b22fa3..05a4d73 100644 --- a/tool/Spec/spec/SvgDomSpec.js +++ b/tool/Spec/spec/SvgDomSpec.js @@ -1589,6 +1589,9 @@ describe("SMIL Animation Spec", function() { base("$frame").timelines.length = 0; s = document.createElementNS("http:///www.w3.org/2000/svg", "animate"); } ); + afterEach( function() { + attr.isCSS = false; + } ); /*境界条件を調べておく (limit value analysis)*/ it("should be this for the value (limit value analysis)", function() { expect(attr.element).toBeNull(); @@ -1663,7 +1666,7 @@ describe("SMIL Animation Spec", function() { expect(attr.isCSS).toBeTruthy(); } ); /*同値分割をして、有効同値クラスを調べておく (Equivalence partitioning, the following is the valid partion)*/ - it("should be this for the value (the valid partion on a spline mode )", function() { + it("should be this for the value (the valid partion )", function() { s.setAttribute("from", "1"); var p = document.createElement("g"); p.appendChild(s); @@ -1723,7 +1726,7 @@ describe("SMIL Animation Spec", function() { s.setAttributeNS(null, "attributeName", "display"); attr.push(s); expect(attr.setAttribute("block")).toBeUndefined(); - expect(p4.hasAttributeNS(null, "display")).toBeTruthy(); + expect(p4.hasAttributeNS(null, "display")).toBeFalsy(); expect(attr.isCSS).toBeTruthy(); expect(p4.style.getPropertyValue("display")).toBe("block"); @@ -1733,7 +1736,7 @@ describe("SMIL Animation Spec", function() { p4.setAttributeNS(null, "style", "display: none"); attr.push(s); expect(attr.setAttribute("block")).toBeUndefined(); - expect(p4.hasAttributeNS(null, "display")).toBeTruthy(); + expect(p4.hasAttributeNS(null, "display")).toBeFalsy(); expect(p4.style.getPropertyValue("display")).toBe("block"); expect(attr.removeAttribute()).toBeUndefined(); expect(p4.hasAttributeNS(null, "display")).toBeFalsy(); @@ -1936,7 +1939,7 @@ describe("SMIL Animation Spec", function() { } ); } ); } ); - describe("A $setElemenet object", function() { + describe("A $setElement object", function() { describe("A timeline property", function() { var $set, ele, frame; beforeEach( function() { @@ -2039,6 +2042,9 @@ describe("SMIL Animation Spec", function() { frame.startTime = Date.now(); frame.setFrame(0); } ); + afterEach( function() { + $set.isCSS = false; + } ); /*境界条件を調べておく (limit value analysis)*/ it("should be this for the value (limit value analysis)", function() { expect($set.isEnd).toBeFalsy(); @@ -2047,6 +2053,8 @@ describe("SMIL Animation Spec", function() { ele.setAttributeNS(null, "attributeName", "fill"); ele.setAttributeNS(null, "to", "red"); $set.init(ele); + /*テストしやすくするために、CSSではなくXML属性として扱う*/ + $set.isCSS = false; expect($set.timeline).not.toBe(frame.$begin); frame.setFrame(0); expect(ele.parentNode.getAttributeNS(null, "fill")).toBe("red"); @@ -2063,6 +2071,8 @@ describe("SMIL Animation Spec", function() { ele.setAttributeNS(null, "attributeName", "fill"); ele.setAttributeNS(null, "to", "red"); $set.init(ele); + /*テストしやすくするために、CSSではなくXML属性として扱う*/ + $set.isCSS = false; var f = function(num) { frame.setFrame(num); expect(ele.parentNode.getAttributeNS(null, "fill") || null).toBeNull(); @@ -2079,6 +2089,7 @@ describe("SMIL Animation Spec", function() { ele.setAttributeNS(null, "fill", "freeze"); $set.init(ele); + $set.isCSS = false; f(0); f(1); f(23); @@ -2095,6 +2106,7 @@ describe("SMIL Animation Spec", function() { ele.setAttributeNS(null, "to", "red"); /*eleにはdur属性やendなどが設定されていなくとも、アニメーションが有効*/ $set.init(ele); + $set.isCSS = false; var f = function(num) { frame.setFrame(num); expect(ele.parentNode.getAttributeNS(null, "fill") || null).toBe("red"); @@ -2134,7 +2146,7 @@ describe("SMIL Animation Spec", function() { ele.setAttributeNS(null, "from", "M20 0 L20 30"); ele.setAttributeNS(null, "to", "M20 20 L10 30"); $animate.init(ele); - + expect($animate.isCSS).toBeFalsy(); frame.setFrame(0); var p = ele.parentNode; /*getAttributeNSメソッドは、IE11では空文字列を返す（DOM 2に準拠)のに対して、 @@ -2159,28 +2171,38 @@ describe("SMIL Animation Spec", function() { frame.timelines.length = 0; ele.setAttributeNS(null, "calcMode", "discrete"); $animate.init(ele); + expect($animate.isCSS).toBeFalsy(); expect($animate.mode).toBe("discrete"); f(24, "M20.0 0.0 L20.0 30.0"); f(25, "M20.0 0.0 L20.0 30.0"); f(37, "M20.0 20.0 L10.0 30.0"); f(48, "M20.0 20.0 L10.0 30.0"); - ["display", "visibility", "xlink:href", - "stroke-linecap", "font-style"].forEach( function(attrName) { + [ ["display", "inline", "none"], + ["visibility", "hidden", "visible"], + ["stroke-linecap", "round", "square"], + ["font-style", "italic", "normal"] + ].forEach( function(attr) { + var attrName = attr[0], + from = attr[1], + to = attr[2]; function g(fr, result) { frame.setFrame(fr); - expect(p.getAttribute(attrName) || "").toBe(result); + expect(p.style.getPropertyValue(attrName) || p.getAttribute(attrName) || "").toBe(result); }; + + ele.setAttributeNS(null, "from", from); + ele.setAttributeNS(null, "to", to); frame.timelines.length = 0; ele.setAttributeNS(null, "calcMode", "linear"); ele.setAttributeNS(null, "attributeName", attrName); $animate.init(ele); expect($animate.mode).toBe("discrete"); - g(24, "M20.0 0.0 L20.0 30.0"); - g(25, "M20.0 0.0 L20.0 30.0"); - g(37, "M20.0 20.0 L10.0 30.0"); - g(48, "M20.0 20.0 L10.0 30.0"); + g(24, from); + g(25, from); + g(37, to); + g(48, to); } ); } ); /*同値分割をして、有効同値クラスを調べておく (Equivalence partitioning, the following is the valid partion)*/ @@ -2328,11 +2350,10 @@ describe("SMIL Animation Spec", function() { f(192, "300"); f(300, "300"); - ["display", "visibility", "xlink:href", - "stroke-linecap", "font-style"].forEach( function(attrName) { + ( function(attrName) { function g(fr, result) { frame.setFrame(fr); - expect(p.getAttribute(attrName)).toBe(result); + expect(p.style.getPropertyValue(attrName)).toBe(result); }; frame.timelines.length = 0; @@ -2370,7 +2391,7 @@ describe("SMIL Animation Spec", function() { g(cur+96, "inline"); g(cur+192, "block"); g(cur+300, "block"); - } ); + } )("display"); } ); /*無効同値クラスを調べておく (Equivalence partitioning, the following is the invalid partion)*/ it("should be this for the value (the invalid partion )", function() { @@ -2435,7 +2456,7 @@ describe("SMIL Animation Spec", function() { f = function (fr, result, attr) { frame.setFrame(fr); - expect(p.getAttributeNS(null, attr)).toBe(result); + expect(p.style.getPropertyValue(attr)).toBe(result); }; } ); /*境界条件を調べておく (limit value analysis)*/ @@ -2511,6 +2532,10 @@ describe("SMIL Animation Spec", function() { $animate.init(ele); /*rgb形式に変換しない*/ + function f (fr, result, attr) { + frame.setFrame(fr); + expect(ele.parentNode.getAttributeNS(null,attr)).toBe(result); + }; f(0, "#83.0C", "fi"); f(1, "#84.0C", "fi"); f(23, "#106.0C", "fi"); @@ -2750,6 +2775,7 @@ describe("SMIL Animation Spec", function() { expect($animate.numberOfList).toBe(-1); expect($animate.type).toBe("translate"); expect(p.__transformList).toBeUndefined(); + expect($animate.isCSS).toBeFalsy(); $animate.init(); expect($animate.numberOfList).toBe(-1); @@ -3000,6 +3026,7 @@ describe("SMIL Animation Spec", function() { ele.setAttributeNS(null, "from", "rgb(0,0,0)"); ele.setAttributeNS(null, "to", "rgb(10,10,1)"); $animate.init(ele); + $animate.isCSS = false; expect(p.getAttributeNS(null, "fill") || null).toBeNull(); expect($animate.state).toBe("idling"); evt = ele.ownerDocument.createEvent("MouseEvents"); -- 2.11.0