Stroke Waterfall

A waterfall to test various things out and report various browser oddities.

Can also be set using the URL through the parameters usePaintOrder, useGeomPrec, text, textLength, fontSizeFactor, and strokeWidthFactor.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Stroke fun waterfall</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
        }

svg {
            overflow: hidden;
            font-family: sans-serif;
            width: 100%;
            height: 50%;
        }

nav {
            position: fixed;
            bottom: 0px;
            background-color: white;
            outline: solid blue;
        }

table,
        th,
        testCase {
            border: 1px solid black;
        }

#testCases {
            display: flex;
            flex-wrap: wrap;
            padding: 0;
        }

#testCases>div {
            width: 20%;
            flex-grow: 1;
            overflow: hidden;
            padding: 0.8em 1.2em;
            background: darkred;
            border: solid white;
        }
    </style>
</head>

<nav>

<fieldset>
            <label>
                <input type="checkbox" id="usePaintOrder" checked>paint-order (instead of double paint)
            </label>
        </fieldset>

<fieldset>
            <label>
                <input type="checkbox" id="useGeomPrec" checked>geometricPrecision
            </label>
        </fieldset>

<fieldset>
            <label>textLength:
                <input type="text" id="textLength">
            </label>
        </fieldset>

<fieldset>
            <label>
                <input type="checkbox" id="useSpacingAndGlyphs" checked>spacingAndGlyphs
            </label>
        </fieldset>

<fieldset>
            <label>font-size factor:
                <input type="text" id="fontSizeFactor" value="2.5">
            </label>
        </fieldset>

<fieldset>
            <label>stroke-width factor:
                <input type="text" id="strokeWidthFactor" value="1.5">
            </label>
        </fieldset>

<fieldset>
            <label>opacity:
                <input type="text" id="opacity">
            </label>
        </fieldset>

</nav>

var TEXT = "Robert EVA";

var cbChangeOrder = d3.select("#usePaintOrder");
        var cbUseGeomPrec = d3.select("#useGeomPrec");
        var txtText = d3.select("#text");
        var txtTextLength = d3.select("#textLength");
        var txtFontSizeFactor = d3.select("#fontSizeFactor");
        var cbUseSpacingAndGlyphs = d3.select("#useSpacingAndGlyphs");
        var txtStrokeWidthFactor = d3.select("#strokeWidthFactor");
        var txtOpacity = d3.select("#opacity");

var searchParams = new URLSearchParams(document.location.search || parent.document.location.search);

if (searchParams.has("usePaintOrder")) {
            cbChangeOrder.node().checked = !!+searchParams.get("usePaintOrder");
        }

if (searchParams.has("useGeomPrec")) {
            cbUseGeomPrec.node().checked = !!+searchParams.get("useGeomPrec");
        }

if (searchParams.has("text")) {
            txtText.node().value = searchParams.get("text");
        }

if (searchParams.has("textLength")) {
            txtTextLength.node().value = searchParams.get("textLength");
        }

if (searchParams.has("useSpacingAndGlyphs")) {
            cbUseSpacingAndGlyphs.node().checked = !!+searchParams.get("useSpacingAndGlyphs");
        }

if (searchParams.has("fontSizeFactor")) {
            txtFontSizeFactor.node().value = +searchParams.get("fontSizeFactor");
        }

if (searchParams.has("strokeWidthFactor")) {
            txtStrokeWidthFactor.node().value = +searchParams.get("strokeWidthFactor");
        }

if (searchParams.has("opacity")) {
            txtOpacity.node().value = +searchParams.get("opacity");
        }

var testCases = d3.select("#testCases");
        var i, j;

function fillTable() {

var usePaintOrder = cbChangeOrder.node().checked;
            var useGeomPrec = cbUseGeomPrec.node().checked;
            var text = txtText.node().value;
            var textLengthSetting = txtTextLength.node().value;
            var useSpacingAndGlyphs = cbUseSpacingAndGlyphs.node().checked;
            var strokeWidthFactor = +txtStrokeWidthFactor.node().value;
            var fontSizeFactor = +txtFontSizeFactor.node().value;
            var opacity = +txtOpacity.node().value;

testCases.html(null);

for (i = 0; i < 10; ++i) {

// var tr = testCases.append("div").classed("row", true);

for (j = 0; j < 4; ++j) {

var testCase = testCases.append("div");
                    var g = testCase.append("svg").append("g").attr("opacity", opacity || null);
                    var fontSize = 10 + i * fontSizeFactor;
                    var strokeWidth = 0.5 + j * strokeWidthFactor;
                    var textEl

if (usePaintOrder) {

textEl = g.append("text")
                            .attr("x", "50%")
                            .attr("y", "50%")
                            .attr("font-size", fontSize)
                            .attr("stroke-width", strokeWidth)
                            .attr("stroke", "white")
                            .attr("paint-order", "stroke")
                            .attr("textLength", textLengthSetting || null)
                            .attr("lengthAdjust", useSpacingAndGlyphs ? "spacingAndGlyphs" : null)
                            .attr("text-anchor", "middle")
                            .attr("alignment-baseline", "middle")
                            .attr("text-rendering", useGeomPrec ? "geometricPrecision" : null)
                            .attr("stroke-linejoin", "round")
                            .text(text);

} else {

g.append("text")
                            .attr("x", "50%")
                            .attr("y", "50%")
                            .attr("font-size", fontSize)
                            .attr("stroke-width", strokeWidth)
                            .attr("stroke", "white")
                            .attr("fill", "none")
                            .attr("textLength", textLengthSetting || null)
                            .attr("lengthAdjust", useSpacingAndGlyphs ? "spacingAndGlyphs" : null)
                            .attr("text-anchor", "middle")
                            .attr("alignment-baseline", "middle")
                            .attr("text-rendering", useGeomPrec ? "geometricPrecision" : null)
                            .attr("stroke-linejoin", "round")
                            .text(text);

textEl = g.append("text")
                            .attr("x", "50%")
                            .attr("y", "50%")
                            .attr("font-size", fontSize)
                            .attr("textLength", textLengthSetting || null)
                            .attr("lengthAdjust", useSpacingAndGlyphs ? "spacingAndGlyphs" : null)
                            .attr("text-anchor", "middle")
                            .attr("alignment-baseline", "middle")
                            .attr("text-rendering", useGeomPrec ? "geometricPrecision" : null)
                            .attr("stroke-linejoin", "round")
                            .text(text);

}

var computedLen = textEl.node().getComputedTextLength();
                    g.append("title").text(computedLen);
                    testCase.append("p").text("fontSize: " + fontSize)
                    testCase.append("p").text("strokeWidth: " + strokeWidth)
                    testCase.append("p").text("computedLen: " + computedLen)

}
            }

}

d3.selectAll("input").on("change", function () {
            var scrollPos = document.documentElement.scrollTop || document.body.scrollTop;
            fillTable();
            document.documentElement.scrollTop = scrollPos;
            document.body.scrollTop = scrollPos;
        });

fillTable();

</script>

</body>

</html>

Updated missing url https://cdn.rawgit.com/jerrybendy/url-search-params-polyfill/2580057e/index.js to https://cdn.jsdelivr.net/gh/jerrybendy/url-search-params-polyfill/2580057e/index.js

https://d3js.org/d3.v4.js

https://cdn.rawgit.com/jerrybendy/url-search-params-polyfill/2580057e/index.js