Support for basic shape circle %#73
Support for basic shape circle %#73DivyanshiVashist wants to merge 3 commits intoMotion-Path-Polyfill:mainfrom
Conversation
DivyanshiVashist
force-pushed
the
basicShapePath
branch
from
22762b7 to
56ea25f
Compare
|
|
||
| <div id="container"> | ||
| <div id="target"> | ||
| <img src="Nyancat.png" height="10%" width="10%"> |
| width: 100px; | ||
| } | ||
| #target { | ||
| position: absolute; |
There was a problem hiding this comment.
Don't think we need this.
|
|
||
| var aPositionValue = Number(aPositionValueString); | ||
| if (aPositionUnit === '%') { | ||
| if (Number(index) === 0) { |
There was a problem hiding this comment.
To get rid of magic numbers you could possibly set a boolean flag outside of the for loop. E.g var isWidth = true
| // TODO: Need to support other positions as currently this only supports positions in which both x and y are specified and are in px | ||
| if (analysedPosition.length < 2) { | ||
| for (var i = analysedPosition.length; i < 2; i++) { | ||
| if (Number(i) === 0) { |
There was a problem hiding this comment.
Could maybe use the bool flag idea here again
| return undefined; | ||
| } | ||
| var toParse = [basicShapePolygonParse, basicShapeCircleParse, basicShapeInsetParse, basicShapeEllipseParse]; | ||
| // var toParse = [basicShapeCircleParse]; |
|
|
||
| circlePathString = offsetPathParse('circle(10px at 50% 50%)', target).path; | ||
| assert.equal(circlePathString, 'M 100 50 m 0,-10 a 10,10 0 0,1 10,10 a 10,10 0 1,1 -10,-10 z'); | ||
|
|
There was a problem hiding this comment.
Should add a test for garbage input to circle
| if (radiusUnit[1] === '%') { | ||
| var height = parentProperties.height; | ||
| var width = parentProperties.width; | ||
| if (!height || !width) { |
There was a problem hiding this comment.
I think this should just be checking !parentProperties.
|
|
||
| <script> | ||
| var keyframes = [ {offsetPath: 'circle(100px at 500px 500px)', offsetDistance: '0%'}, | ||
| {offsetPath: 'circle(100px at 500px 500px)', offsetDistance: '100%'}]; |
There was a problem hiding this comment.
The demo should test percentages. I suspect it will fail given the dependency you have on the element during initial keyframe parsing.
There was a problem hiding this comment.
Although that issue is currently hidden by the soon to be removed startKeyframe == endKeyframe optimisation.
3 participants
No description provided.