Will changing the width of an element cause a reflow after setting visibility: hidden for it?

Question

Take this code snippets for example:

const div = document.querySelector('#div')
div.style.visibility = "hidden"
div.style.width = "200px"
div.style.visibility = "visible"

div {
    width: 100px;
    height: 100px;
    background-color: gray;
}

<div id="div"></div>

The first repaint happens when setting visibility:hidden and the second happens when setting visibility: visible. But between these 2 repaints will setting width: 200px cause a reflow?

In my opinion, the element setting visibility:hidden still occupies the page space and doesn't disappear from the layout tree(render tree) so here the reflow will happen. But I'm no sure how to prove that.

Answer 1

The first repaint happens when setting visibility:hidden and the second happens when setting visibility: visible.

No, the first and only repaint will happen long after. _{(well probably in less than 16ms, but it's a long time for us)}

Repaint only happens in the update the rendering phase of the event-loop, which itself only happens when the monitor sends a VSync signal (60 times a second on a 60Hz monitor).
Here you are changing the styles of your element synchronously, before the first paint, so the first div.style.visibility = "hidden" is just ignored, the painter will never see that state, when it will kick in, all it will see is the final visibility = "visible" state.

But between these 2 repaints will setting width: 200px cause a reflow?

No, setting the height property of the style doesn't trigger a reflow. Generally, getters do trigger reflow, because only getters need to have updated box positions.
So if you had a line like document.body.offsetWidth instead of this height setting, then you'd have forced a reflow.

You can find a list of most triggers here, and you can read a bit more on this subject here.