Chromium Code Reviews Chromium Code Reviews
Issue 237313003:
CSS shapes support in Web Inspector (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master| Index: LayoutTests/inspector/elements/highlight-css-shapes-outside.html |
| diff --git a/LayoutTests/inspector/elements/highlight-css-shapes-outside.html b/LayoutTests/inspector/elements/highlight-css-shapes-outside.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..12a68e8b4df13dbb7046a83283fa3370a6f071d2 |
| --- /dev/null |
| +++ b/LayoutTests/inspector/elements/highlight-css-shapes-outside.html |
| @@ -0,0 +1,113 @@ |
| +<!DOCTYPE html> |
| +<html> |
| +<head> |
| + |
| +<style> |
| + |
| +.float { |
|
Bear Travis
2014/04/17 20:26:45
I don't see test cases for polygons, rasters, or s
Habib Virji
2014/04/23 16:28:33
Done. Added polygon and rasters.
Shape-margin is
|
| + width: 8em; |
| + height: 8em; |
| + float: left; |
| + border-radius: 2em 4em 2em 2em; |
| + border-width: 3em 1em 2em 1em; |
| + padding: 1em 1em 1em 2em; |
| + margin: 2em 1em 1em 1em; |
| +} |
| + |
| +.circle { |
| + background-color:blue; |
| + shape-margin: 5px; |
| + shape-outside: circle(closest-side at center); |
| + -webkit-clip-path: circle(closest-side at center); |
| +} |
| + |
| +.content-box { |
| + background-color:blue; |
| + shape-margin: 5px; |
| + shape-outside: content-box; |
| + -webkit-clip-path: content-box; |
| +} |
| + |
| +.insetSimpleRound { |
| + width: 8em; |
| + height: 8em; |
| + background-color:green; |
| + shape-margin: 5px; |
| + shape-outside: inset(30% round 20%); |
| + -webkit-clip-path: inset(30% round 20%); |
| +} |
| + |
| +.insetComplexRound { |
| + background-color:blue; |
| + shape-margin: 5px; |
| + shape-outside: inset(10% round 10% 40% 10% 40%); |
| + -webkit-clip-path: inset(10% round 10% 40% 10% 40%); |
| +} |
| + |
| +.ellipse { |
| + background-color:green; |
| + shape-margin: 5px; |
| + height: 5em; |
| + shape-outside: ellipse(closest-side closest-side); |
| + -webkit-clip-path: ellipse(closest-side closest-side); |
| +} |
| + |
| +</style> |
| + |
| +<script src="../../http/tests/inspector/inspector-test.js"></script> |
| +<script src="../../http/tests/inspector/elements-test.js"></script> |
| +<script> |
| + |
| +function test() |
| +{ |
| + function nodeSelectedContentBox() |
|
Bear Travis
2014/04/17 20:26:45
Can you generalize this so you don't need so many
Habib Virji
2014/04/23 16:28:33
Done.
|
| + { |
| + RuntimeAgent.evaluate("dumpInspectorHighlightCSSShape()", InspectorTest.completeTest); |
| + } |
| + function selectContentBoxNode() |
| + { |
| + InspectorTest.selectNodeWithId("content-box", nodeSelectedContentBox); |
| + } |
| + function nodeSelectedEllipse() |
| + { |
| + RuntimeAgent.evaluate("dumpInspectorHighlightCSSShape()", selectContentBoxNode); |
| + } |
| + function selectEllipseNode() |
| + { |
| + InspectorTest.selectNodeWithId("ellipse", nodeSelectedEllipse); |
| + } |
| + function nodeSelectedInsetComplex() |
| + { |
| + RuntimeAgent.evaluate("dumpInspectorHighlightCSSShape()", selectEllipseNode); |
| + } |
| + function selectInsetComplexNode() |
| + { |
| + InspectorTest.selectNodeWithId("insetComplexRound", nodeSelectedInsetComplex); |
| + } |
| + function nodeSelectedInset() |
| + { |
| + RuntimeAgent.evaluate("dumpInspectorHighlightCSSShape()", selectInsetComplexNode); |
| + } |
| + function selectInsetNode() |
| + { |
| + InspectorTest.selectNodeWithId("insetSimpleRound", nodeSelectedInset); |
| + } |
| + function nodeSelectedCircle() |
| + { |
| + RuntimeAgent.evaluate("dumpInspectorHighlightCSSShape()", selectInsetNode); |
| + } |
| + |
| + InspectorTest.selectNodeWithId("circle", nodeSelectedCircle); |
| +} |
| + |
| +</script> |
| +</head> |
| + |
| +<body onload="runTest()"> |
| +<div class="float circle" id="circle"> </div> |
| +<div class="float insetSimpleRound" id="insetSimpleRound"> </div> |
| +<div class="float insetComplexRound" id="insetComplexRound"> </div> |
| +<div class="float ellipse" id="ellipse"> </div> |
| +<div class="float content-box" id="contentBox"> </div> |
| +</body> |
| +</html> |
