blob: c776823fd170f0ed310098e8341ca0c278970e05 [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<style>
.multicol-wrapper>* {
font: 20px/1 Ahem, sans-serif;
}
div.multicol-wrapper {
border: thin solid black;
display: inline-block;
margin: 1em auto;
width: 360px;
}
.multicol-basic-ref {
background: yellow;
width: 360px;
}
.multicol-count-ref {
-webkit-column-count: 3;
-webkit-column-gap: 0;
-webkit-column-rule: none;
}
.multicol-columns-ref {
-webkit-columns: 3;
-webkit-column-gap: 0;
-webkit-column-rule: thin solid green;
}
.multicol-rule-ref {
-webkit-column-count: 3;
-webkit-column-gap: 0;
-webkit-column-rule-width: thin;
-webkit-column-rule-style: solid;
-webkit-column-rule-color: green;
}
.multicol-fill-balance-ref {
-webkit-columns: 3;
-webkit-column-gap: 0;
-webkit-column-rule: none;
-webkit-column-fill: balance;
height: 6em;
}
.multicol-fill-auto-ref {
-webkit-column-count: 3;
-webkit-column-gap: 0;
-webkit-column-fill: auto;
height: 6em;
}
.multicol-progression-reverse-ref {
-webkit-column-count: 3;
-webkit-column-gap: 0;
-webkit-column-rule: none;
-webkit-column-progression: reverse;
}
.multicol-basic-ref-item {
background: #000;
}
.item-1 {
background: purple;
color: purple;
}
.item-2 {
background: orange;
color: orange;
}
.item-3 {
background: blue;
color: blue;
}
</style>
<script>
function appendText() {
var arrayWrapper = [
"multicol-basic-ref multicol-count-ref",
"multicol-basic-ref multicol-columns-ref",
"multicol-basic-ref multicol-rule-ref",
"multicol-basic-ref multicol-fill-balance-ref",
"multicol-basic-ref multicol-fill-auto-ref",
"multicol-basic-ref multicol-progression-reverse-ref"
];
var arrayMulticol = [
"multicol-basic-ref-item item-1",
"multicol-basic-ref-item item-2",
"multicol-basic-ref-item item-3",
];
var text = "XXXX XXXX XXXX XXXX XXXX XXXX XXXX";
for (i = 0; i < arrayWrapper.length; ++i) {
var divWrapper = document.createElement("DIV");
divWrapper.className = "multicol-wrapper";
document.body.appendChild(divWrapper);
var divMulticol = document.createElement("DIV");
divMulticol.className = arrayWrapper[i];
divWrapper.appendChild(divMulticol);
for (j = 0; j < arrayMulticol.length; ++j) {
var spanNode = document.createElement("SPAN");
spanNode.className = arrayMulticol[j];
divMulticol.appendChild(spanNode);
var textNode = document.createTextNode(text);
spanNode.appendChild(textNode);
}
var brNode = document.createElement("BR");
document.body.appendChild(brNode);
}
}
</script>
</head>
<body onload="appendText()">
</body>
</html>