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: Code review comments fixes 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

« no previous file with comments | « LayoutTests/http/tests/inspector/elements-test.js ('k') | LayoutTests/inspector/elements/highlight-css-shapes-outside-expected.txt » ('j') | Source/core/inspector/InspectorOverlayPage.html » ('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 {

	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()

	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