Herst/.block

## .block
license: gpl-3.0
scrolling: yes

## README.md

      
    Raw
  

              README.md
            
          
    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.

  
## index.html
<!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>

<body lang="en">

    <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>text:
                <input type="text" id="text" value="Evaluation Test Foobar">
            </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>

    <div id="testCases"></div>

    <script src="https://d3js.org/d3.v4.js"></script>
    <script src="https://cdn.rawgit.com/jerrybendy/url-search-params-polyfill/2580057e/index.js"></script>
    <script>

        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>
	<!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>

	<body lang="en">

	<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>text:
	<input type="text" id="text" value="Evaluation Test Foobar">
	</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>

	<div id="testCases"></div>

	<script src="https://d3js.org/d3.v4.js"></script>
	<script src="https://cdn.rawgit.com/jerrybendy/url-search-params-polyfill/2580057e/index.js"></script>
	<script>

	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>