<!DOCTYPE html>
<meta charset="utf-8" />
<title>CSS Reftest Reference</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
<style>
.test {
display: block;
overflow: hidden;
width: 300px;
}
.inline {
display: inline;
}
.float, .clear {
display: block;
overflow: hidden;
height: 3px;
width: 100px;
background: #f0f;
}
.clear {
background: #0ff;
}
</style>
<body>
<script>
function physicalValue(value, containerDirection) {
return ((value === "inline-start") === (containerDirection === "ltr")) ? "left" : "right";
}
const sides = ["inline-start", "inline-end"];
const directions = ["ltr", "rtl"];
for (const floatSide of sides) {
for (const clearSide of sides) {
for (const containerDirection of directions) {
for (const inlineParentDirection of [null, ...directions]) {
for (const floatDirection of directions) {
for (const clearDirection of directions) {
const containerEl = document.createElement("div");
containerEl.className = "test";
containerEl.style.direction = containerDirection;
const floatEl = document.createElement("div");
floatEl.className = "float";
floatEl.style.direction = floatDirection;
floatEl.style.float = physicalValue(floatSide, containerDirection);
const clearEl = document.createElement("div");
clearEl.className = "clear";
clearEl.style.direction = floatDirection;
clearEl.style.clear = physicalValue(clearSide, containerDirection);
if (inlineParentDirection) {
const inlineParent = document.createElement("div");
inlineParent.className = "inline";
inlineParent.style.direction = inlineParentDirection;
inlineParent.appendChild(floatEl);
inlineParent.appendChild(clearEl);
containerEl.appendChild(inlineParent);
} else {
containerEl.appendChild(floatEl);
containerEl.appendChild(clearEl);
}
document.body.appendChild(containerEl);
}
}
}
}
}
}
</script>
</body>