thibaud_goiffon
/
popsu_html2print


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
							<!DOCTYPE html>
<html lang="en-us">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>Test 030</title>
        <script>
        var Hyphenopoly = {
            require: {
                "en-us": "FORCEHYPHENOPOLY"
            },
            setup: {
                classnames: {
                    "hyphenopoly": {}
                },
                selectors: {
                    ".hyphenate": {
                        hyphen: "|"
                    },
                    "#test2": {
                        hyphen: "•"
                    },
                    "p#test3": {
                        hyphen: "·"
                    },
                    "h2+p": {
                        hyphen: "⁄"
                    }
                }
            },
            handleEvent: {
                hyphenopolyEnd: function (e) {
                    assert();
                }
            }
        };

        function assert() {
            var tests = 4;
            var i = 1;
            var test = "";
            var ref = "";
            var result = true;
            while (i <= tests) {
                test = document.getElementById("test" + i).innerHTML;
                ref = document.getElementById("ref" + i).innerHTML;
                if (test === ref) {
                    document.getElementById("result").innerHTML += "<span style=\"background-color: #d6ffd6\">" + (function (i) {
                        return (i < 10) ? "0" + i : i; 
                    }(i)) + "</span> ";
                    result = result && true;
                } else {
                    document.getElementById("result").innerHTML += "<span style=\"background-color: #ffd6d6\">" + (function (i) {
                        return (i < 10) ? "0" + i : i; 
                    }(i)) + "</span> ";
                    result = false;
                }
                i += 1;
            }
            if (parent != window) {
                parent.postMessage(JSON.stringify({
                    desc: document.getElementById("desc").innerHTML,
                    index: 30,
                    result: (result ? "passed" : "failed")
                }), window.location.href);
            }
        }
        </script>
        <script src="../Hyphenopoly_Loader.js"></script>
        <style type="text/css">
            body {
                width:50%;
                margin-left:25%;
                margin-right:25%;
            }

            .test {
                background-color: #D8E2F9;
            }
            .ref {
                background-color: #FEEFC0;
            }

        </style>
    </head>
    <body>
        <div id="navigate"><a href="index.html">&Larr;&nbsp;Index</a>&nbsp;|&nbsp;<a href="test29.html">&larr;&nbsp;Prev</a>&nbsp;|&nbsp;<a href="test31.html">Next&nbsp;&rarr;</a></div>

        <h1>Test 030</h1>
        <p id="desc">Select elements with selectors instead of classes.</p>
        <div id="result">R: </div>
        <hr>
        <h2>1: use classname to select</h2>
        <p id="test1" class="test hyphenate">A hyphenation algorithm is a set of rules that decides at which points a word can be broken over two lines with a hyphen.</p>
        <p id="ref1" class="ref">A hy|phen|ation al|go|rithm is a set of rules that de|cides at which points a word can be bro|ken over two lines with a hy|phen.</p>
        <h2>2: use id to select</h2>
        <p id="test2" class="test">A hyphenation algorithm is a set of rules that decides at which points a word can be broken over two lines with a hyphen.</p>
        <p id="ref2" class="ref">A hy•phen•ation al•go•rithm is a set of rules that de•cides at which points a word can be bro•ken over two lines with a hy•phen.</p>
        <h2>3: use element and id to select</h2>
        <p id="test3" class="test">A hyphenation algorithm is a set of rules that decides at which points a word can be broken over two lines with a hyphen.</p>
        <p id="ref3" class="ref">A hy·phen·ation al·go·rithm is a set of rules that de·cides at which points a word can be bro·ken over two lines with a hy·phen.</p>
        <h2>4: use siblings to select</h2>
        <p id="test4" class="test">A hyphenation algorithm is a set of rules that decides at which points a word can be broken over two lines with a hyphen.</p>
        <p id="ref4" class="ref">A hy⁄phen⁄ation al⁄go⁄rithm is a set of rules that de⁄cides at which points a word can be bro⁄ken over two lines with a hy⁄phen.</p>
        <hr>
        <div><span class="test">Test</span> <span class="ref">Ref</span></div>
    </body>
</html>