STEP 1:
body.style.minHeight="100%";
body.style.minWidth="100%";
purplebox.style.width="auto";
purplebox.style.height="auto";

STEP 2:
SET MIN SIZE OF THE CONTENT
purplebox.style.minWidth="300px";
purplebox.style.minHeight="300px";

STEP 3:
body.style.minWidth="-moz-min-content";
body.style.minHeight="-moz-min-content";

here the border image follows the minimum width of the contained purple bordered box

in width is the desired result, in height not

TEST 1:
body.style.height="auto";
body.style.minHeight="100%";
does not works