Skip to content

GitLab

T
tangled
Commit 02a61dc5 authored by flandy's avatar flandy Committed by Commit bot
Browse files
Options

DevTools: Add bezier swatches to CSS Sources 

Bezier swatches will complement color swatches.

BUG=642782

Review-Url: https://codereview.chromium.org/2297873004
Cr-Commit-Position: refs/heads/master@{#417177}
parent 626cb8e7
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 234 additions and 96 deletions
third_party/WebKit/LayoutTests/http/tests/inspector/sources-test.js
View file @ 02a61dc5
...@@ -32,4 +32,15 @@ InspectorTest.testPrettyPrint = function(mimeType, text, mappingQueries, next) ...@@ -32,4 +32,15 @@ InspectorTest.testPrettyPrint = function(mimeType, text, mappingQueries, next)
} }
} }
InspectorTest.dumpSwatchPositions = function(sourceFrame, bookmarkType)
{
var textEditor = sourceFrame.textEditor;
var markers = textEditor.bookmarks(textEditor.fullRange(), bookmarkType);
for (var i = 0; i < markers.length; i++) {
var position = markers[i].position();
var text = markers[i]._marker.widgetNode.firstChild.textContent;
InspectorTest.addResult("Line " + position.startLine + ", Column " + position.startColumn + ": " + text);
}
}
}; };
third_party/WebKit/LayoutTests/inspector/sources/bezier-swatch-position-expected.txt 0 → 100644
View file @ 02a61dc5
Tests that bezier swatches are updated properly in CSS Sources.
Initial swatch positions:
Line 1, Column 25: ease-in-out
Line 4, Column 32: cubic-bezier(0.25, 0.46, 0.45, 0.94)
Running: testEditBezier
Line 1, Column 25: linear
Line 4, Column 32: cubic-bezier(0.25, 0.46, 0.45, 0.94)
Running: testAddBezier
Line 1, Column 25: linear
Line 1, Column 55: cubic-bezier(0, 0.5, 1, 1)
Line 4, Column 32: cubic-bezier(0.25, 0.46, 0.45, 0.94)
Running: testInvalidateBezier
Line 1, Column 25: linear
Line 4, Column 32: cubic-bezier(0.25, 0.46, 0.45, 0.94)
third_party/WebKit/LayoutTests/inspector/sources/bezier-swatch-position.html 0 → 100644
View file @ 02a61dc5
<html>
<head>
<link rel="stylesheet" href="resources/bezier.css">
<script src="../../http/tests/inspector/inspector-test.js"></script>
<script src="../../http/tests/inspector/debugger-test.js"></script>
<script src="../../http/tests/inspector/sources-test.js"></script>
<script>
function test()
{
InspectorTest.showScriptSource("bezier.css", onSourceFrame);
function onSourceFrame(sourceFrame)
{
InspectorTest.addResult("Initial swatch positions:");
InspectorTest.dumpSwatchPositions(sourceFrame, WebInspector.CSSSourceFrame.SwatchBookmark);
InspectorTest.runTestSuite([
function testEditBezier(next)
{
var swatch = sourceFrame.textEditor._codeMirrorElement.querySelector("span[is=bezier-swatch]");
swatch.shadowRoot.querySelector(".bezier-swatch-icon").click();
sourceFrame._bezierEditor.setBezier(WebInspector.Geometry.CubicBezier.parse("linear"));
sourceFrame._bezierEditor._onchange();
sourceFrame._swatchPopoverHelper.hide(true)
InspectorTest.dumpSwatchPositions(sourceFrame, WebInspector.CSSSourceFrame.SwatchBookmark);
next();
},
function testAddBezier(next)
{
var bodyLineEnd = new WebInspector.TextRange(1, 37, 1, 37);
sourceFrame.textEditor.editRange(bodyLineEnd, " transition: height 1s cubic-bezier(0, 0.5, 1, 1);");
InspectorTest.dumpSwatchPositions(sourceFrame, WebInspector.CSSSourceFrame.SwatchBookmark);
next();
},
function testInvalidateBezier(next)
{
var startParenthesis = new WebInspector.TextRange(1, 67, 1, 68);
sourceFrame.textEditor.editRange(startParenthesis, "[");
InspectorTest.dumpSwatchPositions(sourceFrame, WebInspector.CSSSourceFrame.SwatchBookmark);
next();
}
]);
}
}
</script>
</head>
<body onload="runTest()">
<p>
Tests that bezier swatches are updated properly in CSS Sources.
</p>
</body>
</html>
third_party/WebKit/LayoutTests/inspector/sources/color-swatch-position.html
View file @ 02a61dc5
...@@ -5,17 +5,16 @@ ...@@ -5,17 +5,16 @@
<script src="../../http/tests/inspector/inspector-test.js"></script> <script src="../../http/tests/inspector/inspector-test.js"></script>
<script src="../../http/tests/inspector/debugger-test.js"></script> <script src="../../http/tests/inspector/debugger-test.js"></script>
<script src="../../http/tests/inspector/sources-test.js"></script>
<script> <script>
function test() function test()
{ {
Runtime.experiments.enableForTest("sourceColorPicker");
InspectorTest.showScriptSource("color.css", onSourceFrame); InspectorTest.showScriptSource("color.css", onSourceFrame);
function onSourceFrame(sourceFrame) function onSourceFrame(sourceFrame)
{ {
var range = new WebInspector.TextRange(0, 0, 6, 0);
InspectorTest.addResult("Initial swatch positions:"); InspectorTest.addResult("Initial swatch positions:");
dumpSwatchPositions(); InspectorTest.dumpSwatchPositions(sourceFrame, WebInspector.CSSSourceFrame.SwatchBookmark);
InspectorTest.runTestSuite([ InspectorTest.runTestSuite([
function testEditSpectrum(next) function testEditSpectrum(next)
...@@ -24,7 +23,7 @@ function test() ...@@ -24,7 +23,7 @@ function test()
swatch.shadowRoot.querySelector(".color-swatch-inner").click(); swatch.shadowRoot.querySelector(".color-swatch-inner").click();
sourceFrame._spectrum._innerSetColor(WebInspector.Color.parse("#008000").hsva(), "", WebInspector.Color.Format.HEX, WebInspector.Spectrum._ChangeSource.Other); sourceFrame._spectrum._innerSetColor(WebInspector.Color.parse("#008000").hsva(), "", WebInspector.Color.Format.HEX, WebInspector.Spectrum._ChangeSource.Other);
sourceFrame._swatchPopoverHelper.hide(true) sourceFrame._swatchPopoverHelper.hide(true)
dumpSwatchPositions(); InspectorTest.dumpSwatchPositions(sourceFrame, WebInspector.CSSSourceFrame.SwatchBookmark);
next(); next();
}, },
...@@ -32,7 +31,7 @@ function test() ...@@ -32,7 +31,7 @@ function test()
{ {
var start = WebInspector.TextRange.createFromLocation(0, 0); var start = WebInspector.TextRange.createFromLocation(0, 0);
sourceFrame.textEditor.editRange(start, "/* New line */\n"); sourceFrame.textEditor.editRange(start, "/* New line */\n");
dumpSwatchPositions(); InspectorTest.dumpSwatchPositions(sourceFrame, WebInspector.CSSSourceFrame.SwatchBookmark);
next(); next();
}, },
...@@ -40,7 +39,7 @@ function test() ...@@ -40,7 +39,7 @@ function test()
{ {
var bodyLine = new WebInspector.TextRange(2, 0, 3, 0); var bodyLine = new WebInspector.TextRange(2, 0, 3, 0);
sourceFrame.textEditor.editRange(bodyLine, ""); sourceFrame.textEditor.editRange(bodyLine, "");
dumpSwatchPositions(); InspectorTest.dumpSwatchPositions(sourceFrame, WebInspector.CSSSourceFrame.SwatchBookmark);
next(); next();
}, },
...@@ -48,7 +47,7 @@ function test() ...@@ -48,7 +47,7 @@ function test()
{ {
var emptyBodyLine = new WebInspector.TextRange(2, 0, 2, 0); var emptyBodyLine = new WebInspector.TextRange(2, 0, 2, 0);
sourceFrame.textEditor.editRange(emptyBodyLine, "color: hsl(300, 100%, 35%);"); sourceFrame.textEditor.editRange(emptyBodyLine, "color: hsl(300, 100%, 35%);");
dumpSwatchPositions(); InspectorTest.dumpSwatchPositions(sourceFrame, WebInspector.CSSSourceFrame.SwatchBookmark);
next(); next();
}, },
...@@ -56,7 +55,7 @@ function test() ...@@ -56,7 +55,7 @@ function test()
{ {
var endParenthesis = new WebInspector.TextRange(2, 25, 2, 26); var endParenthesis = new WebInspector.TextRange(2, 25, 2, 26);
sourceFrame.textEditor.editRange(endParenthesis, "]"); sourceFrame.textEditor.editRange(endParenthesis, "]");
dumpSwatchPositions(); InspectorTest.dumpSwatchPositions(sourceFrame, WebInspector.CSSSourceFrame.SwatchBookmark);
next(); next();
}, },
...@@ -64,20 +63,10 @@ function test() ...@@ -64,20 +63,10 @@ function test()
{ {
var lineStart = new WebInspector.TextRange(5, 0, 5, 0); var lineStart = new WebInspector.TextRange(5, 0, 5, 0);
sourceFrame.textEditor.editRange(lineStart, "background color:\n#ff0;\n"); sourceFrame.textEditor.editRange(lineStart, "background color:\n#ff0;\n");
dumpSwatchPositions(); InspectorTest.dumpSwatchPositions(sourceFrame, WebInspector.CSSSourceFrame.SwatchBookmark);
next(); next();
} }
]); ]);
function dumpSwatchPositions()
{
var markers = sourceFrame.textEditor.bookmarks(range, WebInspector.CSSSourceFrame.SwatchBookmark);
for (var i = 0; i < markers.length; i++) {
var position = markers[i].position();
var color = markers[i]._marker.widgetNode.firstChild.color();
InspectorTest.addResult("Line " + position.startLine + ", Column " + position.startColumn + ": " + color.asString(color.format()));
}
}
} }
} }
</script> </script>
......
third_party/WebKit/LayoutTests/inspector/sources/resources/bezier.css 0 → 100644
View file @ 02a61dc5
body {
transition: width 1s ease-in-out;
}
div {
transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment