Changeset 222055 in webkit

Timestamp:

Sep 14, 2017 3:01:25 PM (7 years ago)

Author:

Matt Baker

Message:

Web Inspector: Color created from an RGB/HSL triplet returns bad component arrays
​https://bugs.webkit.org/show_bug.cgi?id=176811
<rdar://problem/34397529>

Reviewed by Joseph Pecoraro.

Source/WebInspectorUI:

A Color constructed from a format and RGB/HSL triplet should set its
alpha component to 1 instead of leaving it undefined. Color properties
and member functions expect the components array to have a length of four.

• UserInterface/Models/Color.js:

(WI.Color):

LayoutTests:

Add tests for Colors constructed from a format and component array.

• inspector/model/color-expected.txt:
• inspector/model/color.html:

Drive-by cleanup: use InspectorTest.expectShallowEqual.

Location:

trunk

Files:

• LayoutTests/ChangeLog (modified) (1 diff)
• LayoutTests/inspector/model/color-expected.txt (modified) (1 diff)
• LayoutTests/inspector/model/color.html (modified) (5 diffs)
• Source/WebInspectorUI/ChangeLog (modified) (1 diff)
• Source/WebInspectorUI/UserInterface/Models/Color.js (modified) (1 diff)

trunk/LayoutTests/ChangeLog

@@ +1 @@
+2017-09-14  Matt Baker  <mattbaker@apple.com>
+
+        Web Inspector: Color created from an RGB/HSL triplet returns bad component arrays
+        https://bugs.webkit.org/show_bug.cgi?id=176811
+        <rdar://problem/34397529>
+
+        Reviewed by Joseph Pecoraro.
+
+        Add tests for Colors constructed from a format and component array.
+
+        * inspector/model/color-expected.txt:
+        * inspector/model/color.html:
+        Drive-by cleanup: use InspectorTest.expectShallowEqual.
+
 2017-09-14  Ryan Haddad  <ryanhaddad@apple.com>
 

trunk/LayoutTests/inspector/model/color-expected.txt

@@ -104 +104 @@
 PASS: '#11223345' should not be serializable as a short Hex
 
+-- Running test case: WI.Color from components
+Check components for color 'rgb(255, 0, 0)'.
+PASS: Should have rgb of [255,0,0].
+PASS: Should have rgba of [255,0,0,1].
+PASS: Should have hsl of [0,100,50].
+PASS: Should have hsla of [0,100,50,1].
+Check components for color 'rgba(128, 128, 128, 0.5)'.
+PASS: Should have rgb of [128,128,128].
+PASS: Should have rgba of [128,128,128,0.5].
+PASS: Should have hsl of [0,0,50].
+PASS: Should have hsla of [0,0,50,0.5].
+Check components for color 'hsl(0, 0%, 50%)'.
+PASS: Should have rgb of [128,128,128].
+PASS: Should have rgba of [128,128,128,1].
+PASS: Should have hsl of [0,0,50].
+PASS: Should have hsla of [0,0,50,1].
+Check components for color 'hsla(0, 0%, 50%, 0.5)'.
+PASS: Should have rgb of [128,128,128].
+PASS: Should have rgba of [128,128,128,0.5].
+PASS: Should have hsl of [0,0,50].
+PASS: Should have hsla of [0,0,50,0.5].
+
 -- Running test case: WI.Color.prototype.nextFormat
 PASS: All format phases of 'transparent' should be as expected.

trunk/LayoutTests/inspector/model/color.html

@@ -116 +116 @@
         description: "Test different color properties.",
         test(resolve, reject) {
-            function shallowEqual(arr1, arr2) {
-                if (arr1.length !== arr2.length)
-                    return false;
-
-                for (let i = 0; i < arr1.length; ++i) {
-                    if (arr1[i] !== arr2[i])
-                        return false;
-                }
-
-                return true;
-            }
-
             let color;
 
@@ -134 +122 @@
             InspectorTest.expectThat(color.simple === true, "'red' should be simple.");
             InspectorTest.expectThat(color.isKeyword() === true, "'red' should be a keyword.");
-            InspectorTest.expectThat(shallowEqual(color.rgb, [255, 0, 0]), "'red' has rgb of [255, 0, 0].");
-            InspectorTest.expectThat(shallowEqual(color.rgba, [255, 0, 0, 1]), "'red' has rgba of [255, 0, 0, 1].");
-            InspectorTest.expectThat(shallowEqual(color.hsl, [0, 100, 50]), "'red' has hsl of [0, 100, 50].");
-            InspectorTest.expectThat(shallowEqual(color.hsla, [0, 100, 50, 1]), "'red' has hsla of [0, 100, 50, 1].");
+            InspectorTest.expectShallowEqual(color.rgb, [255, 0, 0], "'red' has rgb of [255, 0, 0].");
+            InspectorTest.expectShallowEqual(color.rgba, [255, 0, 0, 1], "'red' has rgba of [255, 0, 0, 1].");
+            InspectorTest.expectShallowEqual(color.hsl, [0, 100, 50], "'red' has hsl of [0, 100, 50].");
+            InspectorTest.expectShallowEqual(color.hsla, [0, 100, 50, 1], "'red' has hsla of [0, 100, 50, 1].");
             InspectorTest.expectThat(color.canBeSerializedAsShortHEX() === true, "'red' should be serializable as a short Hex");
 
@@ -144 +132 @@
             InspectorTest.expectThat(color.simple === false, "'transparent' should not be simple.");
             InspectorTest.expectThat(color.isKeyword() === true, "'transparent' should be a keyword.");
-            InspectorTest.expectThat(shallowEqual(color.rgb, [0, 0, 0]), "'transparent' has rgb of [0, 0, 0].");
-            InspectorTest.expectThat(shallowEqual(color.rgba, [0, 0, 0, 0]), "'transparent' has rgba of [0, 0, 0, 0].");
-            InspectorTest.expectThat(shallowEqual(color.hsl, [0, 0, 0]), "'transparent' has hsl of [0, 0, 0].");
-            InspectorTest.expectThat(shallowEqual(color.hsla, [0, 0, 0, 0]), "'transparent' has hsla of [0, 0, 0, 0].");
+            InspectorTest.expectShallowEqual(color.rgb, [0, 0, 0], "'transparent' has rgb of [0, 0, 0].");
+            InspectorTest.expectShallowEqual(color.rgba, [0, 0, 0, 0], "'transparent' has rgba of [0, 0, 0, 0].");
+            InspectorTest.expectShallowEqual(color.hsl, [0, 0, 0], "'transparent' has hsl of [0, 0, 0].");
+            InspectorTest.expectShallowEqual(color.hsla, [0, 0, 0, 0], "'transparent' has hsla of [0, 0, 0, 0].");
             InspectorTest.expectThat(color.canBeSerializedAsShortHEX() === true, "'transparent' should be serializable as a short Hex");
 
@@ -154 +142 @@
             InspectorTest.expectThat(color.simple === false, "'#11122233' should be not be simple.");
             InspectorTest.expectThat(color.isKeyword() === false, "'#11122233' should not be a keyword.");
-            InspectorTest.expectThat(shallowEqual(color.rgba, [17, 18, 34, 0.2]), "'#11122233' has rgba of [17, 18, 34, 0.2].");
-            InspectorTest.expectThat(shallowEqual(color.hsla, [236, 33, 10, 0.2]), "'#11122233' has hsla of [236, 33, 10, 0.2].");
+            InspectorTest.expectShallowEqual(color.rgba, [17, 18, 34, 0.2], "'#11122233' has rgba of [17, 18, 34, 0.2].");
+            InspectorTest.expectShallowEqual(color.hsla, [236, 33, 10, 0.2], "'#11122233' has hsla of [236, 33, 10, 0.2].");
             InspectorTest.expectThat(color.canBeSerializedAsShortHEX() === false, "'#11122233' should not be serializable as a short Hex");
 
@@ -163 +151 @@
             color = WI.Color.fromString("#11223345");
             InspectorTest.expectThat(color.canBeSerializedAsShortHEX() === false, "'#11223345' should not be serializable as a short Hex");
+
+            resolve();
+        }
+    });
+
+    suite.addTestCase({
+        name: "WI.Color from components",
+        description: "Test different three- and four-component colors.",
+        test(resolve, reject) {
+            function test(color, components) {
+                InspectorTest.log(`Check components for color '${color.toString()}'.`);
+                for (let key in components) {
+                    let value = components[key];
+                    InspectorTest.expectShallowEqual(color[key], value, `Should have ${key} of ${JSON.stringify(value)}.`);
+                }
+            }
+
+            test(new WI.Color(WI.Color.Format.RGB, [255, 0, 0]), {
+                rgb: [255, 0, 0],
+                rgba: [255, 0, 0, 1],
+                hsl: [0, 100, 50],
+                hsla: [0, 100, 50, 1],
+            });
+
+            test(new WI.Color(WI.Color.Format.RGBA, [128, 128, 128, 0.5]), {
+                rgb: [128, 128, 128],
+                rgba: [128, 128, 128, 0.5],
+                hsl: [0, 0, 50],
+                hsla: [0, 0, 50, 0.5],
+            });
+
+            test(new WI.Color(WI.Color.Format.HSL, [0, 0, 50]), {
+                rgb: [128, 128, 128],
+                rgba: [128, 128, 128, 1],
+                hsl: [0, 0, 50],
+                hsla: [0, 0, 50, 1],
+            });
+
+            test(new WI.Color(WI.Color.Format.HSLA, [0, 0, 50, 0.5]), {
+                rgb: [128, 128, 128],
+                rgba: [128, 128, 128, 0.5],
+                hsl: [0, 0, 50],
+                hsla: [0, 0, 50, 0.5],
+            });
 
             resolve();

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2017-09-14  Matt Baker  <mattbaker@apple.com>
+
+        Web Inspector: Color created from an RGB/HSL triplet returns bad component arrays
+        https://bugs.webkit.org/show_bug.cgi?id=176811
+        <rdar://problem/34397529>
+
+        Reviewed by Joseph Pecoraro.
+
+        A Color constructed from a format and RGB/HSL triplet should set its
+        alpha component to 1 instead of leaving it undefined. Color properties
+        and member functions expect the components array to have a length of four.
+
+        * UserInterface/Models/Color.js:
+        (WI.Color):
+
 2017-09-14  Joseph Pecoraro  <pecoraro@apple.com>
 

trunk/Source/WebInspectorUI/UserInterface/Models/Color.js

@@ -33 +33 @@
     {
         this.format = format;
+
+        if (components.length === 3)
+            components.push(1);
 
         if (format === WI.Color.Format.HSL || format === WI.Color.Format.HSLA)