<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[193300] branches/safari-601-branch</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/193300">193300</a></dd>
<dt>Author</dt> <dd>timothy@apple.com</dd>
<dt>Date</dt> <dd>2015-12-03 11:08:25 -0800 (Thu, 03 Dec 2015)</dd>
</dl>
<h3>Log Message</h3>
<pre>Merge <a href="http://trac.webkit.org/projects/webkit/changeset/192040">r192040</a>. rdar://problem/23221163</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#branchessafari601branchLayoutTestsChangeLog">branches/safari-601-branch/LayoutTests/ChangeLog</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIChangeLog">branches/safari-601-branch/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceModelsColorjs">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Models/Color.js</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceViewsCodeMirrorAdditionsjs">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/CodeMirrorAdditions.js</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceViewsCodeMirrorTextMarkersjs">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/CodeMirrorTextMarkers.js</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#branchessafari601branchLayoutTestsinspectormodelcolorexpectedtxt">branches/safari-601-branch/LayoutTests/inspector/model/color-expected.txt</a></li>
<li><a href="#branchessafari601branchLayoutTestsinspectormodelcolorhtml">branches/safari-601-branch/LayoutTests/inspector/model/color.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="branchessafari601branchLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/LayoutTests/ChangeLog (193299 => 193300)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/LayoutTests/ChangeLog 2015-12-03 19:08:17 UTC (rev 193299)
+++ branches/safari-601-branch/LayoutTests/ChangeLog 2015-12-03 19:08:25 UTC (rev 193300)
</span><span class="lines">@@ -1,5 +1,19 @@
</span><span class="cx"> 2015-12-02 Timothy Hatcher <timothy@apple.com>
</span><span class="cx">
</span><ins>+ Merge r192040. rdar://problem/23221163
+
+ 2015-11-04 Joseph Pecoraro <pecoraro@apple.com>
+
+ Web Inspector: Support #rgba and #rrggbbaa syntax
+ https://bugs.webkit.org/show_bug.cgi?id=150894
+
+ Reviewed by Timothy Hatcher.
+
+ * inspector/model/color-expected.txt: Added.
+ * inspector/model/color.html: Added.
+
+2015-12-02 Timothy Hatcher <timothy@apple.com>
+
</ins><span class="cx"> Merge r191355. rdar://problem/23221163
</span><span class="cx">
</span><span class="cx"> 2015-10-20 Joseph Pecoraro <pecoraro@apple.com>
</span></span></pre></div>
<a id="branchessafari601branchLayoutTestsinspectormodelcolorexpectedtxt"></a>
<div class="addfile"><h4>Added: branches/safari-601-branch/LayoutTests/inspector/model/color-expected.txt (0 => 193300)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/LayoutTests/inspector/model/color-expected.txt (rev 0)
+++ branches/safari-601-branch/LayoutTests/inspector/model/color-expected.txt 2015-12-03 19:08:25 UTC (rev 193300)
</span><span class="lines">@@ -0,0 +1,121 @@
</span><ins>+Tests for the WebInspector.Color model object.
+
+
+== Running test suite: WebInspector.Color
+-- Running test case: WebInspector.Color.fromString
+PASS: '#000' should be detected
+PASS: '#000' was the expected 'Short HEX' format
+PASS: '#a0A' should be detected
+PASS: '#a0A' was the expected 'Short HEX' format
+PASS: '#000000' should be detected
+PASS: '#000000' was the expected 'HEX' format
+PASS: '#a0Aa0A' should be detected
+PASS: '#a0Aa0A' was the expected 'HEX' format
+PASS: '#0000' should be detected
+PASS: '#0000' was the expected 'Short HEX with Alpha' format
+PASS: '#a0Af' should be detected
+PASS: '#a0Af' was the expected 'Short HEX with Alpha' format
+PASS: '#00000000' should be detected
+PASS: '#00000000' was the expected 'HEX with Alpha' format
+PASS: '#a0Aa0Aff' should be detected
+PASS: '#a0Aa0Aff' was the expected 'HEX with Alpha' format
+PASS: 'rgb(1,2,3)' should be detected
+PASS: 'rgb(1,2,3)' was the expected 'RGB' format
+PASS: 'RGB(1,2,3)' should be detected
+PASS: 'RGB(1,2,3)' was the expected 'RGB' format
+PASS: 'rgb(999, 999, 999)' should be detected
+PASS: 'rgb(999, 999, 999)' was the expected 'RGB' format
+PASS: 'rgb( 1 , 1 , 1 )' should be detected
+PASS: 'rgb( 1 , 1 , 1 )' was the expected 'RGB' format
+PASS: 'rgba(1,2,3,0)' should be detected
+PASS: 'rgba(1,2,3,0)' was the expected 'RGBA' format
+PASS: 'RGBA(1,2,3,0)' should be detected
+PASS: 'RGBA(1,2,3,0)' was the expected 'RGBA' format
+PASS: 'rgba(999, 999, 999, 999)' should be detected
+PASS: 'rgba(999, 999, 999, 999)' was the expected 'RGBA' format
+PASS: 'rgba( 1 , 1 , 1 , 0.5 )' should be detected
+PASS: 'rgba( 1 , 1 , 1 , 0.5 )' was the expected 'RGBA' format
+PASS: 'hsl(0, 0%, 50%)' should be detected
+PASS: 'hsl(0, 0%, 50%)' was the expected 'HSL' format
+PASS: 'HSL(0, 0%, 50%)' should be detected
+PASS: 'HSL(0, 0%, 50%)' was the expected 'HSL' format
+PASS: 'hsl(999, 999%, 999%)' should be detected
+PASS: 'hsl(999, 999%, 999%)' was the expected 'HSL' format
+PASS: 'hsl( 0 , 0% , 50% )' should be detected
+PASS: 'hsl( 0 , 0% , 50% )' was the expected 'HSL' format
+PASS: 'hsla(0, 0%, 50%, 0)' should be detected
+PASS: 'hsla(0, 0%, 50%, 0)' was the expected 'HSLA' format
+PASS: 'HSLA(0, 0%, 50%, 0)' should be detected
+PASS: 'HSLA(0, 0%, 50%, 0)' was the expected 'HSLA' format
+PASS: 'hsla(999, 999%, 999%, 999)' should be detected
+PASS: 'hsla(999, 999%, 999%, 999)' was the expected 'HSLA' format
+PASS: 'hsla( 0 , 0% , 50% , 0.5 )' should be detected
+PASS: 'hsla( 0 , 0% , 50% , 0.5 )' was the expected 'HSLA' format
+PASS: 'blue' should be detected
+PASS: 'blue' was the expected 'Nickname' format
+PASS: 'BLuE' should be detected
+PASS: 'BLuE' was the expected 'Nickname' format
+PASS: 'midnightblue' should be detected
+PASS: 'midnightblue' was the expected 'Nickname' format
+PASS: 'royalblue' should be detected
+PASS: 'royalblue' was the expected 'Nickname' format
+PASS: 'steelblue' should be detected
+PASS: 'steelblue' was the expected 'Nickname' format
+PASS: 'transparent' should be detected
+PASS: 'transparent' was the expected 'Nickname' format
+
+PASS: ' #000 ' should not be detected
+PASS: '#rgb' should not be detected
+PASS: '#1' should not be detected
+PASS: '#12' should not be detected
+PASS: '#12345' should not be detected
+PASS: '#1234567' should not be detected
+PASS: '#123456789' should not be detected
+PASS: 'rgb(255, 255, 255, 0.5)' should not be detected
+PASS: 'rgba(255, 255, 255, 0.5, 1)' should not be detected
+PASS: 'hsl(0, 0%, 50%, 1)' should not be detected
+PASS: 'hsla(0, 0%, 50%, 1, 2)' should not be detected
+PASS: 'superblue' should not be detected
+
+-- Running test case: WebInspector.Color properties
+PASS: 'red' should have alpha of 1.
+PASS: 'red' should be simple.
+PASS: 'red' has rgb of [255, 0, 0].
+PASS: 'red' has rgba of [255, 0, 0, 1].
+PASS: 'red' has hsl of [0, 100, 50].
+PASS: 'red' has hsla of [0, 100, 50, 1].
+PASS: 'transparent' should have alpha of 0.
+PASS: 'transparent' should be not be simple.
+PASS: 'transparent' has rgb of [0, 0, 0].
+PASS: 'transparent' has rgba of [0, 0, 0, 0].
+PASS: 'transparent' has hsl of [0, 0, 0].
+PASS: 'transparent' has hsla of [0, 0, 0, 0].
+
+-- Running test case: WebInspector.Color.prototype.nextFormat
+PASS: All format phases of 'transparent' should be as expected.
+PASS: All format phases of 'red' should be as expected.
+PASS: All format phases of 'rgb(100, 150, 200)' should be as expected.
+PASS: All format phases of 'rgba(100, 150, 200, 0.5)' should be as expected.
+
+-- Running test case: WebInspector.Color.prototype.toString
+PASS: Color as 'Original' should be 'RED'
+PASS: Color as 'Nickname' should be 'red'
+PASS: Color as 'Short HEX' should be '#f00'
+PASS: Color as 'HEX' should be '#ff0000'
+PASS: Color as 'Short HEX with Alpha' should be '#f00f'
+PASS: Color as 'HEX with Alpha' should be '#ff0000ff'
+PASS: Color as 'RGB' should be 'rgb(255, 0, 0)'
+PASS: Color as 'RGBA' should be 'rgba(255, 0, 0, 1)'
+PASS: Color as 'HSL' should be 'hsl(0, 100%, 50%)'
+PASS: Color as 'HSLA' should be 'hsla(0, 100%, 50%, 1)'
+PASS: Color as 'Original' should be 'rgba(100, 200, 255, 0.5)'
+PASS: Color as 'Nickname' should be 'rgba(100, 200, 255, 0.5)'
+PASS: Color as 'Short HEX' should be 'rgba(100, 200, 255, 0.5)'
+PASS: Color as 'HEX' should be 'rgba(100, 200, 255, 0.5)'
+PASS: Color as 'Short HEX with Alpha' should be '#64c8ff80'
+PASS: Color as 'HEX with Alpha' should be '#64c8ff80'
+PASS: Color as 'RGB' should be 'rgba(100, 200, 255, 0.5)'
+PASS: Color as 'RGBA' should be 'rgba(100, 200, 255, 0.5)'
+PASS: Color as 'HSL' should be 'hsla(201, 100%, 70%, 0.5)'
+PASS: Color as 'HSLA' should be 'hsla(201, 100%, 70%, 0.5)'
+
</ins></span></pre></div>
<a id="branchessafari601branchLayoutTestsinspectormodelcolorhtml"></a>
<div class="addfile"><h4>Added: branches/safari-601-branch/LayoutTests/inspector/model/color.html (0 => 193300)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/LayoutTests/inspector/model/color.html (rev 0)
+++ branches/safari-601-branch/LayoutTests/inspector/model/color.html 2015-12-03 19:08:25 UTC (rev 193300)
</span><span class="lines">@@ -0,0 +1,262 @@
</span><ins>+<!doctype html>
+<html>
+<head>
+<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
+<script>
+function test()
+{
+ function formatToString(format) {
+ switch (format) {
+ case WebInspector.Color.Format.Original:
+ return "Original";
+ case WebInspector.Color.Format.Nickname:
+ return "Nickname";
+ case WebInspector.Color.Format.HEX:
+ return "HEX";
+ case WebInspector.Color.Format.ShortHEX:
+ return "Short HEX";
+ case WebInspector.Color.Format.HEXAlpha:
+ return "HEX with Alpha";
+ case WebInspector.Color.Format.ShortHEXAlpha:
+ return "Short HEX with Alpha";
+ case WebInspector.Color.Format.RGB:
+ return "RGB";
+ case WebInspector.Color.Format.RGBA:
+ return "RGBA";
+ case WebInspector.Color.Format.HSL:
+ return "HSL";
+ case WebInspector.Color.Format.HSLA:
+ return "HSLA";
+ default:
+ return "Unexpected format";
+ }
+ }
+
+ let suite = InspectorTest.createAsyncSuite("WebInspector.Color");
+
+ suite.addTestCase({
+ name: "WebInspector.Color.fromString",
+ description: "Test we can detect colors from strings.",
+ test: (resolve, reject) => {
+ function testGood(string, expectedFormat) {
+ let color = WebInspector.Color.fromString(string);
+ InspectorTest.expectThat(color instanceof WebInspector.Color, `'${string}' should be detected`);
+ InspectorTest.expectThat(color && color.format === expectedFormat, `'${string}' was the expected '${formatToString(expectedFormat)}' format`);
+ }
+
+ function testBad(string) {
+ let color = WebInspector.Color.fromString(string);
+ InspectorTest.expectThat(color === null, `'${string}' should not be detected`);
+ if (color) InspectorTest.log(`'${string}' detected with format '${formatToString(color.format)}'`);
+ }
+
+ testGood("#000", WebInspector.Color.Format.ShortHEX);
+ testGood("#a0A", WebInspector.Color.Format.ShortHEX);
+ testGood("#000000", WebInspector.Color.Format.HEX);
+ testGood("#a0Aa0A", WebInspector.Color.Format.HEX);
+
+ testGood("#0000", WebInspector.Color.Format.ShortHEXAlpha);
+ testGood("#a0Af", WebInspector.Color.Format.ShortHEXAlpha);
+ testGood("#00000000", WebInspector.Color.Format.HEXAlpha);
+ testGood("#a0Aa0Aff", WebInspector.Color.Format.HEXAlpha);
+
+ testGood("rgb(1,2,3)", WebInspector.Color.Format.RGB);
+ testGood("RGB(1,2,3)", WebInspector.Color.Format.RGB);
+ testGood("rgb(999, 999, 999)", WebInspector.Color.Format.RGB);
+ testGood("rgb( 1 , 1 , 1 )", WebInspector.Color.Format.RGB);
+
+ testGood("rgba(1,2,3,0)", WebInspector.Color.Format.RGBA);
+ testGood("RGBA(1,2,3,0)", WebInspector.Color.Format.RGBA);
+ testGood("rgba(999, 999, 999, 999)", WebInspector.Color.Format.RGBA);
+ testGood("rgba( 1 , 1 , 1 , 0.5 )", WebInspector.Color.Format.RGBA);
+
+ testGood("hsl(0, 0%, 50%)", WebInspector.Color.Format.HSL);
+ testGood("HSL(0, 0%, 50%)", WebInspector.Color.Format.HSL);
+ testGood("hsl(999, 999%, 999%)", WebInspector.Color.Format.HSL);
+ testGood("hsl( 0 , 0% , 50% )", WebInspector.Color.Format.HSL);
+
+ testGood("hsla(0, 0%, 50%, 0)", WebInspector.Color.Format.HSLA);
+ testGood("HSLA(0, 0%, 50%, 0)", WebInspector.Color.Format.HSLA);
+ testGood("hsla(999, 999%, 999%, 999)", WebInspector.Color.Format.HSLA);
+ testGood("hsla( 0 , 0% , 50% , 0.5 )", WebInspector.Color.Format.HSLA);
+
+ testGood("blue", WebInspector.Color.Format.Nickname);
+ testGood("BLuE", WebInspector.Color.Format.Nickname);
+ testGood("midnightblue", WebInspector.Color.Format.Nickname);
+ testGood("royalblue", WebInspector.Color.Format.Nickname);
+ testGood("steelblue", WebInspector.Color.Format.Nickname);
+ testGood("transparent", WebInspector.Color.Format.Nickname);
+
+ InspectorTest.log("");
+
+ testBad(" #000 "); // whitespace
+ testBad("#rgb"); // bad hex
+ testBad("#1"); // 1
+ testBad("#12"); // 2
+ testBad("#12345"); // 5
+ testBad("#1234567"); // 7
+ testBad("#123456789"); // 9
+ testBad("rgb(255, 255, 255, 0.5)"); // extra values
+ testBad("rgba(255, 255, 255, 0.5, 1)"); // extra values
+ testBad("hsl(0, 0%, 50%, 1)"); // extra value
+ testBad("hsla(0, 0%, 50%, 1, 2)"); // extra values
+ testBad("superblue"); // not a nickname
+
+ // FIXME: currentColor?
+ // FIXME: Should we consider missing %s as bad? Currently we just strip them.
+ // testBad("hsl(0, 0, 50)"); // missing %s
+ // testBad("hsla(0, 0, 50, 1)"); // missing %s
+
+ resolve();
+ }
+ });
+
+ suite.addTestCase({
+ name: "WebInspector.Color properties",
+ 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;
+
+ color = WebInspector.Color.fromString("red");
+ InspectorTest.expectThat(color.alpha === 1, "'red' should have alpha of 1.");
+ InspectorTest.expectThat(color.simple === true, "'red' should be simple.");
+ 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].");
+
+ color = WebInspector.Color.fromString("transparent");
+ InspectorTest.expectThat(color.alpha === 0, "'transparent' should have alpha of 0.");
+ InspectorTest.expectThat(color.simple === false, "'transparent' should be not be simple.");
+ 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].");
+
+ resolve();
+ }
+ });
+
+ suite.addTestCase({
+ name: "WebInspector.Color.prototype.nextFormat",
+ description: "Test we can cycle through color formats for different colors.",
+ test: (resolve, reject) => {
+ function test(string, phases) {
+ let color = WebInspector.Color.fromString(string);
+ color.format = WebInspector.Color.Format.Original;
+
+ let pass = true;
+ for (let expectedNextFormat of phases) {
+ let nextFormat = color.nextFormat();
+ InspectorTest.assert(nextFormat === expectedNextFormat, `Next format '${formatToString(nextFormat)}' was not the expected '${formatToString(expectedNextFormat)}'`);
+ pass = pass && nextFormat === expectedNextFormat;
+ color.format = nextFormat;
+ }
+
+ InspectorTest.expectThat(pass, `All format phases of '${string}' should be as expected.`);
+ }
+
+ // All with alpha.
+ test("transparent", [
+ WebInspector.Color.Format.RGBA,
+ WebInspector.Color.Format.HSLA,
+ WebInspector.Color.Format.Nickname,
+ WebInspector.Color.Format.ShortHEXAlpha,
+ WebInspector.Color.Format.HEXAlpha,
+ WebInspector.Color.Format.Original,
+ ]);
+
+ // All without alpha.
+ test("red", [
+ WebInspector.Color.Format.RGB,
+ WebInspector.Color.Format.HSL,
+ WebInspector.Color.Format.Nickname,
+ WebInspector.Color.Format.ShortHEX,
+ WebInspector.Color.Format.HEX,
+ WebInspector.Color.Format.Original,
+ ]);
+
+ // No short hex or nickname.
+ test("rgb(100, 150, 200)", [
+ WebInspector.Color.Format.RGB,
+ WebInspector.Color.Format.HSL,
+ WebInspector.Color.Format.HEX,
+ WebInspector.Color.Format.Original,
+ ]);
+
+ // No short hex alpha or nickname.
+ test("rgba(100, 150, 200, 0.5)", [
+ WebInspector.Color.Format.RGBA,
+ WebInspector.Color.Format.HSLA,
+ WebInspector.Color.Format.HEXAlpha,
+ WebInspector.Color.Format.Original,
+ ]);
+
+ resolve();
+ }
+ });
+
+ suite.addTestCase({
+ name: "WebInspector.Color.prototype.toString",
+ description: "Test the different toString outputs.",
+ test: (resolve, reject) => {
+ let color;
+ function test(expected, format) {
+ let pass = color.toString(format) === expected;
+ InspectorTest.expectThat(pass, `Color as '${formatToString(format)}' should be '${expected}'`);
+ if (!pass) InspectorTest.log("WAS: " + color.toString(format));
+ }
+
+ // A color with all formats.
+ color = WebInspector.Color.fromString("RED");
+ test("RED", WebInspector.Color.Format.Original);
+ test("red", WebInspector.Color.Format.Nickname);
+ test("#f00", WebInspector.Color.Format.ShortHEX);
+ test("#ff0000", WebInspector.Color.Format.HEX);
+ test("#f00f", WebInspector.Color.Format.ShortHEXAlpha);
+ test("#ff0000ff", WebInspector.Color.Format.HEXAlpha);
+ test("rgb(255, 0, 0)", WebInspector.Color.Format.RGB);
+ test("rgba(255, 0, 0, 1)", WebInspector.Color.Format.RGBA);
+ test("hsl(0, 100%, 50%)", WebInspector.Color.Format.HSL);
+ test("hsla(0, 100%, 50%, 1)", WebInspector.Color.Format.HSLA);
+
+ // A color which cannot be some formats, those fallback to something else.
+ color = WebInspector.Color.fromString("rGbA( 100, 200, 255, 0.5 )");
+ test("rgba(100, 200, 255, 0.5)", WebInspector.Color.Format.Original); // Original text ignored for some formats.
+ test("rgba(100, 200, 255, 0.5)", WebInspector.Color.Format.Nickname); // fallback (rgba)
+ test("rgba(100, 200, 255, 0.5)", WebInspector.Color.Format.ShortHEX); // fallback (rgba)
+ test("rgba(100, 200, 255, 0.5)", WebInspector.Color.Format.HEX); // fallback (rgba)
+ test("#64c8ff80", WebInspector.Color.Format.ShortHEXAlpha); // fallback (hex alpha)
+ test("#64c8ff80", WebInspector.Color.Format.HEXAlpha);
+ test("rgba(100, 200, 255, 0.5)", WebInspector.Color.Format.RGB); // fallback (rgba)
+ test("rgba(100, 200, 255, 0.5)", WebInspector.Color.Format.RGBA);
+ test("hsla(201, 100%, 70%, 0.5)", WebInspector.Color.Format.HSL); // fallback (hsla)
+ test("hsla(201, 100%, 70%, 0.5)", WebInspector.Color.Format.HSLA);
+
+ // FIXME: Should we clamp rgb(300, 300, 300) => rgb(255, 255, 255) in toStrings?
+ // FIXME: Should we always stash the original string, no matter how poor?
+
+ resolve();
+ }
+ });
+
+ suite.runTestCasesAndFinish();
+}
+</script>
+</head>
+<body onload="runTest()">
+<p>Tests for the WebInspector.Color model object.</p>
+</body>
+</html>
</ins></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/Source/WebInspectorUI/ChangeLog (193299 => 193300)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/ChangeLog 2015-12-03 19:08:17 UTC (rev 193299)
+++ branches/safari-601-branch/Source/WebInspectorUI/ChangeLog 2015-12-03 19:08:25 UTC (rev 193300)
</span><span class="lines">@@ -1,5 +1,36 @@
</span><span class="cx"> 2015-12-02 Timothy Hatcher <timothy@apple.com>
</span><span class="cx">
</span><ins>+ Merge r192040. rdar://problem/23221163
+
+ 2015-11-04 Joseph Pecoraro <pecoraro@apple.com>
+
+ Web Inspector: WebInspector.Color should support #rgba and #rrggbbaa syntax
+ https://bugs.webkit.org/show_bug.cgi?id=150894
+
+ Reviewed by Timothy Hatcher.
+
+ Support for hex with alpha color syntax.
+
+ * UserInterface/Models/Color.js:
+ (WebInspector.Color.fromString):
+ (WebInspector.Color.prototype.nextFormat):
+ (WebInspector.Color.prototype.copy):
+ (WebInspector.Color.prototype.toString):
+ (WebInspector.Color.prototype._toShortHEXAlphaString):
+ (WebInspector.Color.prototype._toHEXAlphaString):
+ Add support for new hex syntax. Address some minor issues
+ like case insensitivity and extra comma separate values.
+
+ * UserInterface/Views/CodeMirrorTextMarkers.js:
+ This prevent trailing hex characters from showing up
+ when cycling through color variants.
+
+ * UserInterface/Views/CodeMirrorAdditions.js:
+ When CodeMirror stops treating the new values as error
+ this will give them our hex-color styles.
+
+2015-12-02 Timothy Hatcher <timothy@apple.com>
+
</ins><span class="cx"> Merge r192005. rdar://problem/23221163
</span><span class="cx">
</span><span class="cx"> 2015-11-03 Matt Baker <mattbaker@apple.com>
</span></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceModelsColorjs"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Models/Color.js (193299 => 193300)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Models/Color.js 2015-12-03 19:08:17 UTC (rev 193299)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Models/Color.js 2015-12-03 19:08:25 UTC (rev 193300)
</span><span class="lines">@@ -55,28 +55,46 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Simple - #hex, rgb(), nickname, hsl()
</span><del>- var simple = /^(?:#([0-9a-f]{3,6})|rgb\(([^)]+)\)|(\w+)|hsl\(([^)]+)\))$/i;
</del><ins>+ var simple = /^(?:#([0-9a-f]{3,8})|rgb\(([^)]+)\)|(\w+)|hsl\(([^)]+)\))$/i;
</ins><span class="cx"> var match = colorString.match(simple);
</span><span class="cx"> if (match) {
</span><span class="cx"> if (match[1]) { // hex
</span><span class="cx"> var hex = match[1].toUpperCase();
</span><del>- if (hex.length === 3) {
</del><ins>+ var len = hex.length;
+ if (len === 3) {
</ins><span class="cx"> return new WebInspector.Color(WebInspector.Color.Format.ShortHEX, [
</span><span class="cx"> parseInt(hex.charAt(0) + hex.charAt(0), 16),
</span><span class="cx"> parseInt(hex.charAt(1) + hex.charAt(1), 16),
</span><span class="cx"> parseInt(hex.charAt(2) + hex.charAt(2), 16),
</span><span class="cx"> 1
</span><span class="cx"> ]);
</span><del>- } else {
</del><ins>+ } else if (len === 6) {
</ins><span class="cx"> return new WebInspector.Color(WebInspector.Color.Format.HEX, [
</span><span class="cx"> parseInt(hex.substring(0, 2), 16),
</span><span class="cx"> parseInt(hex.substring(2, 4), 16),
</span><span class="cx"> parseInt(hex.substring(4, 6), 16),
</span><span class="cx"> 1
</span><span class="cx"> ]);
</span><del>- }
</del><ins>+ } else if (len === 4) {
+ return new WebInspector.Color(WebInspector.Color.Format.ShortHEXAlpha, [
+ parseInt(hex.charAt(0) + hex.charAt(0), 16),
+ parseInt(hex.charAt(1) + hex.charAt(1), 16),
+ parseInt(hex.charAt(2) + hex.charAt(2), 16),
+ parseInt(hex.charAt(3) + hex.charAt(3), 16) / 255
+ ]);
+ } else if (len === 8) {
+ return new WebInspector.Color(WebInspector.Color.Format.HEXAlpha, [
+ parseInt(hex.substring(0, 2), 16),
+ parseInt(hex.substring(2, 4), 16),
+ parseInt(hex.substring(4, 6), 16),
+ parseInt(hex.substring(6, 8), 16) / 255
+ ]);
+ } else
+ return null;
</ins><span class="cx"> } else if (match[2]) { // rgb
</span><span class="cx"> var rgb = match[2].split(/\s*,\s*/);
</span><ins>+ if (rgb.length !== 3)
+ return null;
</ins><span class="cx"> return new WebInspector.Color(WebInspector.Color.Format.RGB, [
</span><span class="cx"> parseInt(rgb[0]),
</span><span class="cx"> parseInt(rgb[1]),
</span><span class="lines">@@ -94,6 +112,8 @@
</span><span class="cx"> return null;
</span><span class="cx"> } else if (match[4]) { // hsl
</span><span class="cx"> var hsl = match[4].replace(/%/g, "").split(/\s*,\s*/);
</span><ins>+ if (hsl.length !== 3)
+ return null;
</ins><span class="cx"> return new WebInspector.Color(WebInspector.Color.Format.HSL, [
</span><span class="cx"> parseInt(hsl[0]),
</span><span class="cx"> parseInt(hsl[1]),
</span><span class="lines">@@ -104,11 +124,13 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Advanced - rgba(), hsla()
</span><del>- var advanced = /^(?:rgba\(([^)]+)\)|hsla\(([^)]+)\))$/;
</del><ins>+ var advanced = /^(?:rgba\(([^)]+)\)|hsla\(([^)]+)\))$/i;
</ins><span class="cx"> match = colorString.match(advanced);
</span><span class="cx"> if (match) {
</span><span class="cx"> if (match[1]) { // rgba
</span><span class="cx"> var rgba = match[1].split(/\s*,\s*/);
</span><ins>+ if (rgba.length !== 4)
+ return null;
</ins><span class="cx"> return new WebInspector.Color(WebInspector.Color.Format.RGBA, [
</span><span class="cx"> parseInt(rgba[0]),
</span><span class="cx"> parseInt(rgba[1]),
</span><span class="lines">@@ -117,6 +139,8 @@
</span><span class="cx"> ]);
</span><span class="cx"> } else if (match[2]) { // hsla
</span><span class="cx"> var hsla = match[2].replace(/%/g, "").split(/\s*,\s*/);
</span><ins>+ if (hsla.length !== 4)
+ return null;
</ins><span class="cx"> return new WebInspector.Color(WebInspector.Color.Format.HSLA, [
</span><span class="cx"> parseInt(hsla[0]),
</span><span class="cx"> parseInt(hsla[1]),
</span><span class="lines">@@ -222,20 +246,22 @@
</span><span class="cx"> return WebInspector.Color.Format.Nickname;
</span><span class="cx"> if (this.simple)
</span><span class="cx"> return this._canBeSerializedAsShortHEX() ? WebInspector.Color.Format.ShortHEX : WebInspector.Color.Format.HEX;
</span><del>- else
- return WebInspector.Color.Format.Original;
</del><ins>+ return this._canBeSerializedAsShortHEX() ? WebInspector.Color.Format.ShortHEXAlpha : WebInspector.Color.Format.HEXAlpha;
</ins><span class="cx">
</span><span class="cx"> case WebInspector.Color.Format.ShortHEX:
</span><span class="cx"> return WebInspector.Color.Format.HEX;
</span><span class="cx">
</span><ins>+ case WebInspector.Color.Format.ShortHEXAlpha:
+ return WebInspector.Color.Format.HEXAlpha;
+
</ins><span class="cx"> case WebInspector.Color.Format.HEX:
</span><ins>+ case WebInspector.Color.Format.HEXAlpha:
</ins><span class="cx"> return WebInspector.Color.Format.Original;
</span><span class="cx">
</span><span class="cx"> case WebInspector.Color.Format.Nickname:
</span><span class="cx"> if (this.simple)
</span><span class="cx"> return this._canBeSerializedAsShortHEX() ? WebInspector.Color.Format.ShortHEX : WebInspector.Color.Format.HEX;
</span><del>- else
- return WebInspector.Color.Format.Original;
</del><ins>+ return this._canBeSerializedAsShortHEX() ? WebInspector.Color.Format.ShortHEXAlpha : WebInspector.Color.Format.HEXAlpha;
</ins><span class="cx">
</span><span class="cx"> default:
</span><span class="cx"> console.error("Unknown color format.");
</span><span class="lines">@@ -287,6 +313,8 @@
</span><span class="cx"> case WebInspector.Color.Format.RGB:
</span><span class="cx"> case WebInspector.Color.Format.HEX:
</span><span class="cx"> case WebInspector.Color.Format.ShortHEX:
</span><ins>+ case WebInspector.Color.Format.HEXAlpha:
+ case WebInspector.Color.Format.ShortHEXAlpha:
</ins><span class="cx"> case WebInspector.Color.Format.Nickname:
</span><span class="cx"> case WebInspector.Color.Format.RGBA:
</span><span class="cx"> return new WebInspector.Color(this.format, this.rgba);
</span><span class="lines">@@ -316,6 +344,10 @@
</span><span class="cx"> return this._toHEXString();
</span><span class="cx"> case WebInspector.Color.Format.ShortHEX:
</span><span class="cx"> return this._toShortHEXString();
</span><ins>+ case WebInspector.Color.Format.HEXAlpha:
+ return this._toHEXAlphaString();
+ case WebInspector.Color.Format.ShortHEXAlpha:
+ return this._toShortHEXAlphaString();
</ins><span class="cx"> case WebInspector.Color.Format.Nickname:
</span><span class="cx"> return this._toNicknameString();
</span><span class="cx"> }
</span><span class="lines">@@ -384,6 +416,31 @@
</span><span class="cx"> return "#" + r + g + b;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ _toShortHEXAlphaString()
+ {
+ var rgba = this.rgba;
+ var r = this._componentToHexValue(rgba[0]);
+ var g = this._componentToHexValue(rgba[1]);
+ var b = this._componentToHexValue(rgba[2]);
+ var a = this._componentToHexValue(Math.round(rgba[3] * 255));
+
+ if (r[0] === r[1] && g[0] === g[1] && b[0] === b[1] && a[0] === a[1])
+ return "#" + r[0] + g[0] + b[0] + a[0];
+ else
+ return "#" + r + g + b + a;
+ }
+
+ _toHEXAlphaString()
+ {
+ var rgba = this.rgba;
+ var r = this._componentToHexValue(rgba[0]);
+ var g = this._componentToHexValue(rgba[1]);
+ var b = this._componentToHexValue(rgba[2]);
+ var a = this._componentToHexValue(Math.round(rgba[3] * 255));
+
+ return "#" + r + g + b + a;
+ }
+
</ins><span class="cx"> _toRGBString()
</span><span class="cx"> {
</span><span class="cx"> if (!this.simple)
</span><span class="lines">@@ -524,6 +581,8 @@
</span><span class="cx"> Nickname: "color-format-nickname",
</span><span class="cx"> HEX: "color-format-hex",
</span><span class="cx"> ShortHEX: "color-format-short-hex",
</span><ins>+ HEXAlpha: "color-format-hex-alpha",
+ ShortHEXAlpha: "color-format-short-hex-alpha",
</ins><span class="cx"> RGB: "color-format-rgb",
</span><span class="cx"> RGBA: "color-format-rgba",
</span><span class="cx"> HSL: "color-format-hsl",
</span></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceViewsCodeMirrorAdditionsjs"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/CodeMirrorAdditions.js (193299 => 193300)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/CodeMirrorAdditions.js 2015-12-03 19:08:17 UTC (rev 193299)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/CodeMirrorAdditions.js 2015-12-03 19:08:25 UTC (rev 193300)
</span><span class="lines">@@ -253,7 +253,7 @@
</span><span class="cx">
</span><span class="cx"> function extendedCSSToken(stream, state)
</span><span class="cx"> {
</span><del>- var hexColorRegex = /#(?:[0-9a-fA-F]{6}|[0-9a-fA-F]{3})\b/g;
</del><ins>+ var hexColorRegex = /#(?:[0-9a-fA-F]{8}|[0-9a-fA-F]{6}|[0-9a-fA-F]{3,4})\b/g;
</ins><span class="cx">
</span><span class="cx"> if (state._urlTokenize) {
</span><span class="cx"> // Call the link tokenizer instead.
</span></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceViewsCodeMirrorTextMarkersjs"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/CodeMirrorTextMarkers.js (193299 => 193300)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/CodeMirrorTextMarkers.js 2015-12-03 19:08:17 UTC (rev 193299)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/CodeMirrorTextMarkers.js 2015-12-03 19:08:25 UTC (rev 193300)
</span><span class="lines">@@ -85,7 +85,7 @@
</span><span class="cx"> function createCodeMirrorColorTextMarkers(codeMirror, range, callback)
</span><span class="cx"> {
</span><span class="cx"> // Matches rgba(0, 0, 0, 0.5), rgb(0, 0, 0), hsl(), hsla(), #fff, #ffffff, white
</span><del>- var colorRegex = /((?:rgb|hsl)a?\([^)]+\)|#[0-9a-fA-F]{6}|#[0-9a-fA-F]{3}|\b\w+\b(?![-.]))/g;
</del><ins>+ var colorRegex = /((?:rgb|hsl)a?\([^)]+\)|#[0-9a-fA-F]{8}|#[0-9a-fA-F]{6}|#[0-9a-fA-F]{3,4}|\b\w+\b(?![-.]))/g;
</ins><span class="cx"> function matchFunction(lineContent, match) {
</span><span class="cx"> // Act as a negative look-behind and disallow the color from being prefixing with certain characters.
</span><span class="cx"> return !(match.index > 0 && /[-.\"\']/.test(lineContent[match.index - 1]));
</span></span></pre>
</div>
</div>
</body>
</html>