LayoutTests/inspector/elements/highlight-css-shapes-outside.html - Issue 237313003: CSS shapes support in Web Inspector

Side by Side Diff: LayoutTests/inspector/elements/highlight-css-shapes-outside.html

Issue 237313003: CSS shapes support in Web Inspector (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master

Patch Set: Corrected wrong if statement condition Created 6 years, 8 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch

« LayoutTests/http/tests/inspector/elements-test.js ('K') | « LayoutTests/http/tests/inspector/elements-test.js ('k') | LayoutTests/inspector/elements/highlight-css-shapes-outside-expected.txt » ('j') | LayoutTests/inspector/elements/highlight-css-shapes-outside-expected.txt » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <!DOCTYPE html>

	2 <html>

	3 <head>

	4

	5 <style>

	6

	7 .float {
	Bear Travis 2014/04/17 20:26:45 I don't see test cases for polygons, rasters, or s I don't see test cases for polygons, rasters, or shape-margin. I would either test them or separate out the added functionality into a subsequent patch. Habib Virji 2014/04/23 16:28:33 Done. Added polygon and rasters. Shape-margin is Show quoted text On 2014/04/17 20:26:45, Bear Travis wrote: > I don't see test cases for polygons, rasters, or shape-margin. I would either > test them or separate out the added functionality into a subsequent patch. Done. Added polygon and rasters. Shape-margin is already there combined with all shapes, do you want to see them as two separate test.
	8 width: 8em;

	9 height: 8em;

	10 float: left;

	11 border-radius: 2em 4em 2em 2em;

	12 border-width: 3em 1em 2em 1em;

	13 padding: 1em 1em 1em 2em;

	14 margin: 2em 1em 1em 1em;

	15 }

	16

	17 .circle {

	18 background-color:blue;

	19 shape-margin: 5px;

	20 shape-outside: circle(closest-side at center);

	21 -webkit-clip-path: circle(closest-side at center);

	22 }

	23

	24 .content-box {

	25 background-color:blue;

	26 shape-margin: 5px;

	27 shape-outside: content-box;

	28 -webkit-clip-path: content-box;

	29 }

	30

	31 .insetSimpleRound {

	32 width: 8em;

	33 height: 8em;

	34 background-color:green;

	35 shape-margin: 5px;

	36 shape-outside: inset(30% round 20%);

	37 -webkit-clip-path: inset(30% round 20%);

	38 }

	39

	40 .insetComplexRound {

	41 background-color:blue;

	42 shape-margin: 5px;

	43 shape-outside: inset(10% round 10% 40% 10% 40%);

	44 -webkit-clip-path: inset(10% round 10% 40% 10% 40%);

	45 }

	46

	47 .ellipse {

	48 background-color:green;

	49 shape-margin: 5px;

	50 height: 5em;

	51 shape-outside: ellipse(closest-side closest-side);

	52 -webkit-clip-path: ellipse(closest-side closest-side);

	53 }

	54

	55 </style>

	56

	57 <script src="../../http/tests/inspector/inspector-test.js"></script>

	58 <script src="../../http/tests/inspector/elements-test.js"></script>

	59 <script>

	60

	61 function test()

	62 {

	63 function nodeSelectedContentBox()
	Bear Travis 2014/04/17 20:26:45 Can you generalize this so you don't need so many Can you generalize this so you don't need so many declared functions? All you're doing is "select id and call dumpInspectorHighlight", which you should be able to simplify down to an array of test cases and a function or two. Habib Virji 2014/04/23 16:28:33 Done. Show quoted text On 2014/04/17 20:26:45, Bear Travis wrote: > Can you generalize this so you don't need so many declared functions? All you're > doing is "select id and call dumpInspectorHighlight", which you should be able > to simplify down to an array of test cases and a function or two. Done.
	64 {

	65 RuntimeAgent.evaluate("dumpInspectorHighlightCSSShape()", InspectorTest. completeTest);

	66 }

	67 function selectContentBoxNode()

	68 {

	69 InspectorTest.selectNodeWithId("content-box", nodeSelectedContentBox);

	70 }

	71 function nodeSelectedEllipse()

	72 {

	73 RuntimeAgent.evaluate("dumpInspectorHighlightCSSShape()", selectContentB oxNode);

	74 }

	75 function selectEllipseNode()

	76 {

	77 InspectorTest.selectNodeWithId("ellipse", nodeSelectedEllipse);

	78 }

	79 function nodeSelectedInsetComplex()

	80 {

	81 RuntimeAgent.evaluate("dumpInspectorHighlightCSSShape()", selectEllipseN ode);

	82 }

	83 function selectInsetComplexNode()

	84 {

	85 InspectorTest.selectNodeWithId("insetComplexRound", nodeSelectedInsetCom plex);

	86 }

	87 function nodeSelectedInset()

	88 {

	89 RuntimeAgent.evaluate("dumpInspectorHighlightCSSShape()", selectInsetCom plexNode);

	90 }

	91 function selectInsetNode()

	92 {

	93 InspectorTest.selectNodeWithId("insetSimpleRound", nodeSelectedInset);

	94 }

	95 function nodeSelectedCircle()

	96 {

	97 RuntimeAgent.evaluate("dumpInspectorHighlightCSSShape()", selectInsetNod e);

	98 }

	99

	100 InspectorTest.selectNodeWithId("circle", nodeSelectedCircle);

	101 }

	102

	103 </script>

	104 </head>

	105

	106 <body onload="runTest()">

	107 <div class="float circle" id="circle"> </div>

	108 <div class="float insetSimpleRound" id="insetSimpleRound"> </div>

	109 <div class="float insetComplexRound" id="insetComplexRound"> </div>

	110 <div class="float ellipse" id="ellipse"> </div>

	111 <div class="float content-box" id="contentBox"> </div>

	112 </body>

	113 </html>

OLD	NEW