A resolution was made for csswg-drafts/#10667.

[css-shapes-2] In `shape()` It should be possible to specify control points relative to their point on the curve

• RESOLVED: Add a from-start keyword that goes after the value and latches the coordinate to the beginning of the segment.

Discussion.

Basically, this bug is to add the <relative-control-point> I think: https://drafts.csswg.org/css-shapes-1/#typedef-shape-relative-control-point

Reverted this because it was causing mochitests-plain failures in test_pathAnimInterpolation.xhtml.

• Revert link
• Push with failures
• Failure Log
• Failure line: TEST-UNEXPECTED-FAIL | dom/svg/test/test_pathAnimInterpolation.xhtml | Path segment for interpolation from M100,100c10,20,30,40,50,60 to M100,100C70,80,90,100,110,120 - got "C40,50,60,70,130,140", expected "C90,100,110,120,130,140"

Backed out for causing for causing wpt failures

Backout link: https://hg.mozilla.org/integration/autoland/rev/1e68e375a3b09d0631a62870ceb9701f32b91b94

Push with failures

Failure log

https://hg.mozilla.org/mozilla-central/rev/4f999b7a355b

Hi there,

I'm looking into documenting this addition on MDN, and I had a couple of questions:

1. Is this feature behind a pref?

2. Can you give me a simple example of valid syntax usage that will work? I understand the syntax in the specification, but I'm having trouble creating a working example. AFAICS, something like this should work:

   offset-path: shape(
    from 30% 60px, curve to 180px 180px with 90px 190px by 150px 150px with 100px 100px from start
   );
   

(In reply to Chris Mills [:cmills] from comment #12)

1. Is this feature behind a pref?

Yes. It is layout.css.basic-shape-shape.enabled.

2. Can you give me a simple example of valid syntax usage that will work? I understand the syntax in the specification, but I'm having trouble creating a working example. AFAICS, something like this should work:

   offset-path: shape(
    from 30% 60px, curve to 180px 180px with 90px 190px by 150px 150px with 100px 100px from start
   );
   

clip-path should be easier to understand:

#target {
  width: 200px;
  height: 200px;
  background: green;
  clip-path: shape(from center left,
                   curve by 200px 0 with 50% -50% from start / 50% 0 from origin,
                   curve by -200px 0 with 50% 100% from origin / -50% 50% from start,
                   close);
}
<div id=target></div>

Also, you can find some other examples in https://searchfox.org/firefox-main/source/testing/web-platform/tests/css/css-masking/clip-path.
Just try to look at the test file name: clip-path-shape-xxx.html

(In reply to Chris Mills [:cmills] from comment #12)

offset-path: shape(
 from 30% 60px, curve to 180px 180px with 90px 190px by 150px 150px with 100px 100px from start
);

If you want to make this work, perhaps you have to replace it with

shape(from 30% 60px,
      curve to 180px 180px with 90px 190px,
      curve by 150px 150px with 100px 100px from start);

In other words, need to add curve before by.

Thanks for your help, Boris.

I've documented this feature and added Fx rel notes in https://github.com/mdn/content/pull/42132.

Can you please review my PR and let me know if the technical content makes sense?

(In reply to Chris Mills [:cmills] from comment #15)

Thanks for your help, Boris.

I've documented this feature and added Fx rel notes in https://github.com/mdn/content/pull/42132.

Can you please review my PR and let me know if the technical content makes sense?

Just took a look quickly. I didn't see any specific issues there. I saw your example of using start, end, and origin, and they are good. However, we could add some more examples which omit the keywords to reflect this spec words:

If such component is not provided, the <coordinate-pair> is relative to the segment’s start.

This sentence may need more examples I guess.

(In reply to Boris Chiou [:boris] from comment #16)

Just took a look quickly. I didn't see any specific issues there. I saw your example of using start, end, and origin, and they are good. However, we could add some more examples which omit the keywords to reflect this spec words:

If such component is not provided, the <coordinate-pair> is relative to the segment’s start. 

This sentence may need more examples I guess.

Thanks for the review, Boris. I'm not convinced this requires extra examples, but it does need covering on the page. I've added a note to cover it.