Javascript wait for all element styles to be applied

Question

I have a need to resolve (i.e. 'apply', not just load into memory) all styles for all elements of a HTML webpage with some javascript/jquery. The styles may be in-line within the element's style tag, in-line within the page's styles, or external from a stylesheet.

I have seen examples resolving a single element, or even a single style using window.getComputedStyle with a setTimeout, but I need to make sure all elements are resolved (not just one or even a group).

(Note that I have a lot of javascript running after the page is loaded which generates further html (with styles) so document.ready and window.load have already fired by the time the page's javascript completes)

(Note also that this is not simply a question about waiting for a stylesheet file to load - it is more about waiting for the styles from all sources to be applied)

Is this possible ?

UPDATE

Based on example from @Kaiido, I have come up with the following (it uses JQuery Deferred as opposed to Javascript Promise - this is because I am more familiar with Deferred and I need it to conform with inhouse JQuery standards)

<style>
    .myStyle {...}
    .myStyle2 {...}
</style>

var cssIsAppliedPromise = function(){
    var trigger = document.createElement('style');
    trigger.innerHTML = 'body{opacity:1;}';
    var waiter = document.createElement('style');
    waiter.innerHTML = 'body{transition : opacity 0.1s linear; opacity:.9}';
    var deferred = $.Deferred();
    // will trigger only when all styles are applied
    function isDone(evt) {
        // some cleanup
        waiter.parentNode && document.head.removeChild(waiter);
        trigger.parentNode && document.head.removeChild(trigger);
        // resolve the promise
        deferred.resolve();
    }
    document.body.addEventListener('transitionend', isDone, {
        once: true
    });
    document.head.appendChild(waiter);
    // append it only when all resources are fetched
    window.onload(function() {
        document.body.offsetWidth; // trigger a reflow
        document.head.appendChild(trigger);
    });
    return deferred.promise();
}
cssIsAppliedPromise.done(function(){
        //logic after styles applied
});

Although this seems to work I'm not sure whether it does - it is difficult to tell - the problem I have still exists. How can I be sure the above actually applies the styles before continuing to "logic after styles applied"?