Is it sciter.js bug or I have to find other way?

[kitepad]

I'm trying to using variables in my CSS, and set value in JS. It's working for sample 1, but is not working for sample 2.
I don't know why. In sample 2, you can uncomment set style statement to get working.

SAMPLE 1:
`<style>
:root { var(mystop) : red;}
body {
background: var(mystop);
}

• {
  margin: 0;
  text-align: center;
  }
  body::after {
  display: block;
  background-clip: text;
  color: white;
  font: 16vmin/ 100vh Leckerli One, cursive;
  filter: invert(1) grayscale(1) contrast(10);
  cursor: pointer;
  content: "Click!";
  }

</style> <script> 'use strict';

var NF = 50;
var rID = null, f = 0, dir = -1;

function stopAni() {
cancelAnimationFrame(rID);
rID = null;
dir = -1;
f = 0;
};

function update() {
f += dir;

var k = f / NF;
const colors = ["red", "blue", "green", "purple", "yellow"];
document.body.style.variables({mystop: colors[Math.floor(Math.random() * colors.length)]});

if (!(f % NF)) {
stopAni();
return;
}

rID = requestAnimationFrame(update);

};

document.body.addEventListener('click', function(e) {
if (rID) stopAni();
dir *= -1;
update();
}, false);

</script> `

SAMPLE 2:
`<style>
/* essential styling /
:root { var(mystop) : 0%;}
body {
background: linear-gradient(to right, #ff9800 var(mystop), #3c3c3c 0);
}
/ just to prettify stuff */

• {
  margin: 0;
  text-align: center;
  }
  body::after {
  display: block;
  background-clip: text;
  color: white;
  font: 16vmin/ 100vh Leckerli One, cursive;
  filter: invert(1) grayscale(1) contrast(10);
  cursor: pointer;
  content: "Click!";
  }

</style> <script> 'use strict';

var NF = 50;

var rID = null,
f = 0,
dir = -1;

function stopAni() {
cancelAnimationFrame(rID);
rID = null;
dir = -1;
f = 0;
};

function update() {
f += dir;

var k = f / NF;

document.body.style.variables({mystop: k*100 + '%'});

//document.body.style.background = ' linear-gradient(to right, #ff9800 ' + k*100 + '%' + ',#3c3c3c 0%);';
if (!(f % NF)) {
stopAni();
return;
}

rID = requestAnimationFrame(update);

};

document.body.addEventListener('click', function(e) {
if (rID) stopAni();
dir *= -1;
update();
}, false);

</script> `

[kitepad]

I don't understand WHY ? It's work after I modified SAMPLE 2 as below:

<style> :root { var(mystop): 0%; } .card { padding: 4em; box-shadow: 0 4px 8px 0; background: linear-gradient(to right, #ff9800 var(mystop), #3c3c3c 0%); } </style>

<div#card .card/>

<script> let card = document.getElementById('card'); var NF = 50; var rID = null, f = 0,dir = -1; card.innerHTML = 'hello'; function stopAni() { cancelAnimationFrame(rID); rID = null; dir = -1; f = 0; card.style.variables({'mystop': '0%'}); }; function update() { f += dir; var k = f / NF; let ms = (k*100).toFixed(0) + '%'; card.style.variables({'mystop': ms}); card.innerHTML = ms; if (!(f % NF)) { stopAni(); return; } rID = requestAnimationFrame(update); }; document.body.addEventListener('click', function(e) { if (rID) stopAni(); dir *= -1; update(); }, false); </script>

[GirkovArpa]

Others might find your code easier to read if you use 3 backticks (instead of 1).