How text-replace property work in css?

Question

I was taking a test in upwork. There I got the following question:

Consider the following code:

body{text-replace: "a" "b" "b" "c"}

What will be the output of the following string if the text replace style is implemented?

andy lives behind cafe

---

1. ndy lives behind cbfe
2. cndy lives cehind ccfe
3. andy lives behind cafe
4. andy lives cehind bafe

I couldn't find any reference for the text-replace property in css.

Answer 1

Wow! You've stumbled upon a property that was last in the 2007 GCPM specification and removed in the 2010 revision. And in an online test at that! Either the test you're taking is several years out of date, or whoever set it was just pulling from random old revisions of W3C specifications and treating them all as relevant (as users have been known to do here on Stack Overflow).

Because of how esoteric this is I'm going to just answer the question. Needless to say, this answer is provided for educational purposes only. There is no text-replace property in any current CSS specification, and there hasn't been for almost a decade (neither in css-content nor css-gcpm). Don't put it in your CSS and expect it to work. It won't. If you need to do text replacements in an HTML document, use JavaScript.

---

The answer is #2: "cndy lives cehind ccfe"

The exact CSS sample appears in the spec, linked above, and the example is described as follows (emphasis mine):

The two rules below yield the same result. In the first rule all ‘a’ characters are converted to ‘b’. Subsequently, all ‘b’ characters are converted to ‘c’. In the second rule, all ‘a’ and ‘b’ characters are converted directly to ‘c’.

body { text-replace: "a" "b" "b" "c" }
body { text-replace: "a" "c" "b" "c" }

So the processing order goes:

1. andy lives behind cafe
2. bndy lives behind cbfe
3. cndy lives cehind ccfe