Flex-box+Column test

For https://bugzilla.mozilla.org/show_bug.cgi?id=734525

HTML

<header>Click<br>to change<br>header {column-…}</header>
<article>Click<br>to<br>change<br>body {display: …}</article>
<footer></footer>

CSS

html, body {width: 100%; height:100%; margin:0; padding:0}
body.box {display: flex; flex-direction: row}

body > * {padding: .5em}

header  {background-color:blue}
article {background-color:red; flex:1}
footer  {background-color:green}

header.cnt {-moz-column-count:3}
header:not(.cnt) {-moz-column-width:100px}

JavaScript

function logClass() {
    var logTxt = "Header: ";
    
    if ($("header").hasClass("cnt")) logTxt += "column-count";
    else logTxt += "column-width";
    
    logTxt += "; Body: ";
    
    if ($("body").hasClass("box")) logTxt += "flex-box";
    else logTxt += "inline";
    
    $("footer").text(logTxt);
}

$("header").click(function(){
    $(this).toggleClass("cnt");
    logClass();
});


$("article").click(function(){
    $("body").toggleClass("box");
    logClass();
});


logClass();