diff options
Diffstat (limited to 'www/test/1.8.6/test/manual')
63 files changed, 1575 insertions, 0 deletions
diff --git a/www/test/1.8.6/test/manual/aborting-request.html b/www/test/1.8.6/test/manual/aborting-request.html new file mode 100644 index 00000000..08e264d6 --- /dev/null +++ b/www/test/1.8.6/test/manual/aborting-request.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>Aborting Request Event Test</title> +</head> +<body style="padding: 20px; font-family: sans-serif;"> + <h1>Aborting Request Event Tests</h1> + <p>Aborting a request during an HTMX event should not prevent future events from firing.</p> + <label for="block">Block Request?</label> + <input id="block" type="checkbox" checked> + <br><br> + <button hx-get="https://httpbin.org/html" + hx-target="#target"> + Send Request + </button> + <br><br> + <h3>Event Messages:</h3> + <div id="target"></div> + <script src="../../src/htmx.js"></script> + <script> + var btn = document.querySelector('button'); + var checkbox = document.querySelector('input'); + var target = document.querySelector('#target'); + + btn.addEventListener('htmx:beforeRequest', function(e) { + var messages = target.innerHTML; + target.innerHTML = messages + "<p>Another Message!</p>"; + + if (checkbox.checked) { + e.detail.xhr.abort(); + } + }); + </script> +</body> +</html>
\ No newline at end of file diff --git a/www/test/1.8.6/test/manual/anchors/has-anchors.html b/www/test/1.8.6/test/manual/anchors/has-anchors.html new file mode 100644 index 00000000..54da5828 --- /dev/null +++ b/www/test/1.8.6/test/manual/anchors/has-anchors.html @@ -0,0 +1,19 @@ +<div style="height: 800px;background-color: blue"> + +</div> +<h1 id="anchor1">Anchor 1</h1> +<div style="height: 800px;background-color: blue"> + +</div> +<h1 id="anchor2">Anchor 2</h1> +<div style="height: 800px;background-color: blue"> + +</div> +<h1 id="anchor3">Anchor 3</h1> +<div style="height: 800px;background-color: blue"> + +</div> +<h1 id="anchor4">Anchor 4</h1> +<div style="height: 1800px;background-color: blue"> + +</div> diff --git a/www/test/1.8.6/test/manual/anchors/index.html b/www/test/1.8.6/test/manual/anchors/index.html new file mode 100644 index 00000000..3c4426e6 --- /dev/null +++ b/www/test/1.8.6/test/manual/anchors/index.html @@ -0,0 +1,13 @@ +<html lang="en"> +<head> + <meta charset="utf-8" /> + <title>Test if indicators are invisible by default</title> + <script src="../../../src/htmx.js"></script> +</head> +<body style="padding:20px;font-family: sans-serif"> + +<a hx-boost="true" href="has-anchors.html#anchor1">Anchor 1</a> + +<button hx-push-url="true" hx-get="has-anchors.html#anchor2" hx-target="body">Anchor 2</button> + +</body>
\ No newline at end of file diff --git a/www/test/1.8.6/test/manual/cache-buster/index.html b/www/test/1.8.6/test/manual/cache-buster/index.html new file mode 100644 index 00000000..3e552471 --- /dev/null +++ b/www/test/1.8.6/test/manual/cache-buster/index.html @@ -0,0 +1,23 @@ +<html lang="en"> +<head> + <meta charset="utf-8" /> + <script type="application/javascript" src="../../../src/htmx.js"></script> + <meta name="htmx-config" content='{"getCacheBusterParam":true}'> + <title>Cache Buster - 1</title> +</head> +<body style="padding:20px;font-family: sans-serif" hx-boost="true"> +<h1>Cache-Buster Test</h1> +<ul> + <li> + <a href="index.html">Index</a> + </li> + <li> + <a href="second.html">Second</a> + </li> + <li> + <a href="second.html?foo=bar">Second W/ Param</a> + </li> +</ul> +<h3>Index Page</h3> +</body> +</html> diff --git a/www/test/1.8.6/test/manual/cache-buster/second.html b/www/test/1.8.6/test/manual/cache-buster/second.html new file mode 100644 index 00000000..d7bb0b74 --- /dev/null +++ b/www/test/1.8.6/test/manual/cache-buster/second.html @@ -0,0 +1,23 @@ +<html lang="en"> +<head> + <meta charset="utf-8" /> + <script type="application/javascript" src="../../../src/htmx.js"></script> + <meta name="htmx-config" content='{"getCacheBusterParam":true}'> + <title>History - 2</title> +</head> +<body style="padding:20px;font-family: sans-serif" hx-boost="true"> +<h1>Cache-Buster Test</h1> +<ul> + <li> + <a href="index.html">Index</a> + </li> + <li> + <a href="second.html">Second</a> + </li> + <li> + <a href="second.html?foo=bar">Second W/ Param</a> + </li> +</ul> +<h3>Second Page</h3> +</body> +</html> diff --git a/www/test/1.8.6/test/manual/confirm-and-prompt.html b/www/test/1.8.6/test/manual/confirm-and-prompt.html new file mode 100644 index 00000000..6233b837 --- /dev/null +++ b/www/test/1.8.6/test/manual/confirm-and-prompt.html @@ -0,0 +1,28 @@ +<html lang="en"> +<head> + <meta charset="utf-8" /> + <title>Test if indicators are invisible by default</title> + <script src="../../src/htmx.js"></script> +</head> +<body style="padding:20px;font-family: sans-serif"> +<script src="../../node_modules/sinon/pkg/sinon.js"></script> +<script src="../../src/htmx.js"></script> +<script src="../util/util.js"></script> +<script> + server = makeServer(); + server.autoRespond = true; + server.respondWith("GET", "/prompt", function(xhr){ + xhr.respond(200, {}, "You entered: " + xhr.requestHeaders["HX-Prompt"]); + }) + server.respondWith("GET", "/confirm", function(xhr){ + xhr.respond(200, {}, "Confirmed") + }) +</script> +<h1>Prompt & Confirm Tests</h1> +<button hx-get="/prompt" hx-prompt="Enter some text and it should be echoed in this button">Click For Prompt</button> +<br/> +<br/> +<br/> +<button hx-get="/confirm" hx-confirm="Confirm The Action">Click For Confirm</button> +</body> +</html> diff --git a/www/test/1.8.6/test/manual/csp-test.html b/www/test/1.8.6/test/manual/csp-test.html new file mode 100644 index 00000000..a02d1df9 --- /dev/null +++ b/www/test/1.8.6/test/manual/csp-test.html @@ -0,0 +1,13 @@ +<html lang="en"> +<head> + <meta charset="utf-8" /> + <title>Test if indicators are invisible by default</title> + <script src="../../src/htmx.js"></script> + <meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'unsafe-inline'"> +</head> +<body style="padding:20px;font-family: sans-serif"> +<script src="../../src/htmx.js"></script> +<h1>CSP Test</h1> +<button onclick="htmx._('foo');">Click To Eval</button> +</body> +</html> diff --git a/www/test/1.8.6/test/manual/file_upload.rb b/www/test/1.8.6/test/manual/file_upload.rb new file mode 100644 index 00000000..ee8e9900 --- /dev/null +++ b/www/test/1.8.6/test/manual/file_upload.rb @@ -0,0 +1,48 @@ +require 'sinatra' +require "sinatra/reloader" + +get '/htmx' do + content_type 'text/javascript' + file = File.open("../../src/htmx.js") + return file.read +end + +get '/' do + "<html> + <head> + <script src='htmx'></script> + <script src='https://unpkg.com/hyperscript.org@0.0.2/dist/_hyperscript.js'></script> + </head> + <body> + <h1>File Upload Example2</h1> + <h2>Plain Javascript</h2> + <form id='form1' hx-encoding='multipart/form-data' hx-post='/'> + <input id='file' type='file' name='file'> + <button > + Upload + </button> + <progress id='progress1' value='0' max='100'></progress> + </form> + <script> + htmx.on('#form1', 'htmx:xhr:progress', function(evt) { + htmx.find('#progress1').setAttribute('value', evt.detail.loaded/evt.detail.total * 100) + }); + </script> + <h2>Hyperscript</h2> + <form hx-encoding='multipart/form-data' hx-post='/' + _='on htmx:xhr:progress(loaded, total) set #progress2.value to (loaded/total)*100'> + <input id='file2' type='file' name='file'> + <button > + Upload + </button> + <progress id='progress2' value='0' max='100'></progress> + </form> + + </body> + </html>" +end + +post '/' do + tempfile = params['file'][:tempfile] + return "File Uploaded to #{tempfile.path}..." +end
\ No newline at end of file diff --git a/www/test/1.8.6/test/manual/form-test.html b/www/test/1.8.6/test/manual/form-test.html new file mode 100644 index 00000000..11842cfc --- /dev/null +++ b/www/test/1.8.6/test/manual/form-test.html @@ -0,0 +1,36 @@ +<html> +<body> +<form id="f1"> + input 1: <input id="i1" type = "text" name = "i1" /><br/> + <button id="b1">Button 1</button><br/> + input 2: <input id="i2" type = "text" name = "i1" /><br/> +</form> + +<button id="b2" onclick="i1.focus();">Focus i1</button><br/> +</body> +<script> + f1.addEventListener("submit", function(evt){ + evt.preventDefault(); + console.log("submitted") + console.log("active element: ", document.activeElement) + return false; + }) + f1.addEventListener("focusin", function(evt){ + console.log("focusin", evt.target) + console.log("active element: ", document.activeElement) + return false; + }) + f1.addEventListener("focusout", function(evt){ + console.log("focusout", evt.target) + console.log("active element: ", document.activeElement) + return false; + }) + f1.addEventListener("click", function(evt){ + console.log("click", evt.target) + console.log("active element: ", document.activeElement) + evt.target.focus(); + console.log("active element: ", document.activeElement) + return false; + }) +</script> +</html>
\ No newline at end of file diff --git a/www/test/1.8.6/test/manual/head-support/basic-css-1.html b/www/test/1.8.6/test/manual/head-support/basic-css-1.html new file mode 100644 index 00000000..9132ac36 --- /dev/null +++ b/www/test/1.8.6/test/manual/head-support/basic-css-1.html @@ -0,0 +1,8 @@ +<head> + <style> + #basic-css-1 { + border: 3px solid red; + } + </style> +</head> +Basic CSS Merge (Should Add Red Border)
\ No newline at end of file diff --git a/www/test/1.8.6/test/manual/head-support/basic-css-2.html b/www/test/1.8.6/test/manual/head-support/basic-css-2.html new file mode 100644 index 00000000..e1623ce5 --- /dev/null +++ b/www/test/1.8.6/test/manual/head-support/basic-css-2.html @@ -0,0 +1,8 @@ +<head> + <style> + #basic-css-2 { + border: 3px solid blue; + } + </style> +</head> +Basic CSS Merge (Should Add Blue Border)
\ No newline at end of file diff --git a/www/test/1.8.6/test/manual/head-support/basic-css-3.html b/www/test/1.8.6/test/manual/head-support/basic-css-3.html new file mode 100644 index 00000000..95392b5b --- /dev/null +++ b/www/test/1.8.6/test/manual/head-support/basic-css-3.html @@ -0,0 +1,4 @@ +<head> + <link rel="stylesheet" href="./basic-head-merge-3.css"> +</head> +Basic CSS Merge (Should Add Green Border)...
\ No newline at end of file diff --git a/www/test/1.8.6/test/manual/head-support/basic-head-merge-3.css b/www/test/1.8.6/test/manual/head-support/basic-head-merge-3.css new file mode 100644 index 00000000..5a4ca047 --- /dev/null +++ b/www/test/1.8.6/test/manual/head-support/basic-head-merge-3.css @@ -0,0 +1,3 @@ +#basic-css-3 { + border: green solid 3px; +}
\ No newline at end of file diff --git a/www/test/1.8.6/test/manual/head-support/basic-history-1.html b/www/test/1.8.6/test/manual/head-support/basic-history-1.html new file mode 100644 index 00000000..69dc1f4c --- /dev/null +++ b/www/test/1.8.6/test/manual/head-support/basic-history-1.html @@ -0,0 +1,8 @@ +<head> + <style> + #basic-history-1 { + border: 3px solid red; + } + </style> +</head> +Basic CSS Merge (Should Add Red Border)
\ No newline at end of file diff --git a/www/test/1.8.6/test/manual/head-support/basic-script-2.html b/www/test/1.8.6/test/manual/head-support/basic-script-2.html new file mode 100644 index 00000000..c986c2ab --- /dev/null +++ b/www/test/1.8.6/test/manual/head-support/basic-script-2.html @@ -0,0 +1,4 @@ +<head> + <script src="./basic-script.js"></script> +</head> +Basic Sourced Script (Should Alert)
\ No newline at end of file diff --git a/www/test/1.8.6/test/manual/head-support/basic-script.html b/www/test/1.8.6/test/manual/head-support/basic-script.html new file mode 100644 index 00000000..270f7ce6 --- /dev/null +++ b/www/test/1.8.6/test/manual/head-support/basic-script.html @@ -0,0 +1,6 @@ +<head> + <script> + alert("basic script") + </script> +</head> +Basic Inline Script (Should Alert)
\ No newline at end of file diff --git a/www/test/1.8.6/test/manual/head-support/basic-script.js b/www/test/1.8.6/test/manual/head-support/basic-script.js new file mode 100644 index 00000000..59904e2b --- /dev/null +++ b/www/test/1.8.6/test/manual/head-support/basic-script.js @@ -0,0 +1 @@ +alert("basic script 2");
\ No newline at end of file diff --git a/www/test/1.8.6/test/manual/head-support/basic-title.html b/www/test/1.8.6/test/manual/head-support/basic-title.html new file mode 100644 index 00000000..31842088 --- /dev/null +++ b/www/test/1.8.6/test/manual/head-support/basic-title.html @@ -0,0 +1,4 @@ +<head> + <title>A New Title</title> +</head> +Basic Title Merge (Should Set Title to "A New Title")
\ No newline at end of file diff --git a/www/test/1.8.6/test/manual/head-support/index.html b/www/test/1.8.6/test/manual/head-support/index.html new file mode 100644 index 00000000..4af5c0b9 --- /dev/null +++ b/www/test/1.8.6/test/manual/head-support/index.html @@ -0,0 +1,119 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>Head Merge Test</title> +</head> +<body style="padding: 20px; font-family: sans-serif;" hx-ext="head-support"> + +<script src="../../../src/htmx.js"></script> +<script src="../../../src/ext/head-support.js"></script> + +<h1>head-support Extension Testing</h1> + +<h2>CSS + Boosting</h2> + +<h3>Basic Merge 1 (inline CSS)</h3> +<a href="./basic-css-1.html" + hx-boost="true" + hx-target="this" + hx-push-url="false"> + Basic CSS Merge (Should Add Red Border) +</a> +<p id="basic-css-1"> + Basic Merge 1 +</p> + +<h3>Basic Merge 2 (inline CSS)</h3> +<a href="./basic-css-2.html" + hx-boost="true" + hx-target="this" + hx-push-url="false"> + Basic CSS Merge (Should Add Blue Border) +</a> +<p id="basic-css-2"> + Basic Merge 2 +</p> + +<h3>Basic Merge 3 (CSS File)</h3> +<button hx-get="./basic-css-3.html">Basic CSS Merge 3 (Should Add Green Border)</button> +<p id="basic-css-3"> + Basic Merge 3 +</p> + +<h2>History</h2> +<button hx-get="./basic-history-1.html" hx-push-url="true">Basic CSS Merge (Should Add Red Border)</button> +<p id="basic-history-1"> + Basic History 1 +</p> + +<h2>Title</h2> + +<h2>Title + Boosting</h2> +<a href="./basic-title.html" + hx-boost="true" + hx-target="this" + hx-push-url="false"> + Basic Title Merge (Should Set Title to "A New Title") +</a> + +<h2>Javascript + Boosting</h2> +<h3>Inline Script</h3> +<a href="./basic-script.html" + hx-boost="true" + hx-target="this" + hx-push-url="false"> + Basic Inline Script (Should Alert) +</a> + +<h3>Script File</h3> +<a href="reeval-basic-script-2.html" + hx-boost="true" + hx-target="this" + hx-push-url="false">Basic Sourced Script (Should Alert)</a> + +<h2>Re-Evaluate + Boosting</h2> + +<h3>Inline Script</h3> +<a href="./reeval-script.html" + hx-boost="true" + hx-target="this" + hx-push-url="false"> + Basic Inline Script (Should Alert) +</a> + +<h3>Script File</h3> +<a href="reeval-script-2.html" + hx-boost="true" + hx-target="this" + hx-push-url="false">Basic Sourced Script (Should Alert)</a> + + +<h2>Appending</h2> + +<h3><code>hx-preserve</code> keeps element in head</h3> +<button hx-get="./preserve-1.html">Adds Preserved Style via hx-preserve</button> +<p id="basic-perserve-1"> + Basic Preserve 1 +</p> + +<h3>Normal GET appends</h3> +<button hx-get="./preserve-2.html">Preserves Current Style via hx-get</button> +<p id="basic-perserve-2"> + Basic Preserve 2 +</p> + +<h3>Script can keep element in head</h3> +<script> + htmx.on("htmx:removingHeadElement", function(evt){ + if (evt.detail.headElement && evt.detail.headElement.getAttribute("sample-preserve")) { + evt.preventDefault(); + } + }) +</script> +<button hx-get="./preserve-3.html">Adds Preserved Style via event</button> +<p id="basic-perserve-3"> + Basic Preserve 3 +</p> + +</body>
\ No newline at end of file diff --git a/www/test/1.8.6/test/manual/head-support/preserve-1.html b/www/test/1.8.6/test/manual/head-support/preserve-1.html new file mode 100644 index 00000000..e912c491 --- /dev/null +++ b/www/test/1.8.6/test/manual/head-support/preserve-1.html @@ -0,0 +1,8 @@ +<head> + <style hx-preserve="true"> + #basic-perserve-1 { + border: 3px solid red; + } + </style> +</head> +Adds Preserved Style via hx-preserve
\ No newline at end of file diff --git a/www/test/1.8.6/test/manual/head-support/preserve-2.html b/www/test/1.8.6/test/manual/head-support/preserve-2.html new file mode 100644 index 00000000..8ab2e772 --- /dev/null +++ b/www/test/1.8.6/test/manual/head-support/preserve-2.html @@ -0,0 +1,8 @@ +<head hx-swap-oob="beforeend"> + <style> + #basic-perserve-2 { + border: 3px solid red; + } + </style> +</head> +Adds Preserved Drop Shadow
\ No newline at end of file diff --git a/www/test/1.8.6/test/manual/head-support/preserve-3.html b/www/test/1.8.6/test/manual/head-support/preserve-3.html new file mode 100644 index 00000000..b62c0d0c --- /dev/null +++ b/www/test/1.8.6/test/manual/head-support/preserve-3.html @@ -0,0 +1,8 @@ +<head> + <style sample-preserve="true"> + #basic-perserve-3 { + border: 3px solid red; + } + </style> +</head> +Adds Preserved Style via event
\ No newline at end of file diff --git a/www/test/1.8.6/test/manual/head-support/reeval-script-2.html b/www/test/1.8.6/test/manual/head-support/reeval-script-2.html new file mode 100644 index 00000000..2fe46149 --- /dev/null +++ b/www/test/1.8.6/test/manual/head-support/reeval-script-2.html @@ -0,0 +1,4 @@ +<head> + <script hx-head="re-eval" src="./basic-script.js"></script> +</head> +Basic Sourced Script (Should Alert)
\ No newline at end of file diff --git a/www/test/1.8.6/test/manual/head-support/reeval-script.html b/www/test/1.8.6/test/manual/head-support/reeval-script.html new file mode 100644 index 00000000..96bf3a64 --- /dev/null +++ b/www/test/1.8.6/test/manual/head-support/reeval-script.html @@ -0,0 +1,6 @@ +<head> + <script hx-head="re-eval"> + alert("basic script") + </script> +</head> +Basic Inline Script (Should Alert)
\ No newline at end of file diff --git a/www/test/1.8.6/test/manual/history/1.html b/www/test/1.8.6/test/manual/history/1.html new file mode 100644 index 00000000..94499e98 --- /dev/null +++ b/www/test/1.8.6/test/manual/history/1.html @@ -0,0 +1,15 @@ +<html lang="en"> +<head> + <meta charset="utf-8" /> + <script type="application/javascript" src="../../../src/htmx.js"></script> + <title>History - 1</title> +</head> +<body style="padding:20px;font-family: sans-serif" hx-boost="true"> +<h1>History Test</h1> +<a href="1.html">1</a> +<a href="2.html">2</a> +<a href="3.html">3</a> +<a href="4.html">4</a> +<h3>Page 1</h3> +</body> +</html> diff --git a/www/test/1.8.6/test/manual/history/2.html b/www/test/1.8.6/test/manual/history/2.html new file mode 100644 index 00000000..d01522aa --- /dev/null +++ b/www/test/1.8.6/test/manual/history/2.html @@ -0,0 +1,15 @@ +<html lang="en"> +<head> + <meta charset="utf-8" /> + <script type="application/javascript" src="../../../src/htmx.js"></script> + <title>History - 2</title> +</head> +<body style="padding:20px;font-family: sans-serif" hx-boost="true"> +<h1>History Test</h1> +<a href="1.html">1</a> +<a href="2.html">2</a> +<a href="3.html">3</a> +<a href="4.html">4</a> +<h3>Page 2</h3> +</body> +</html> diff --git a/www/test/1.8.6/test/manual/history/3.html b/www/test/1.8.6/test/manual/history/3.html new file mode 100644 index 00000000..aff087cf --- /dev/null +++ b/www/test/1.8.6/test/manual/history/3.html @@ -0,0 +1,15 @@ +<html lang="en"> +<head> + <meta charset="utf-8" /> + <script type="application/javascript" src="../../../src/htmx.js"></script> + <title>History - 3</title> +</head> +<body style="padding:20px;font-family: sans-serif" hx-boost="true"> +<h1>History Test</h1> +<a href="1.html">1</a> +<a href="2.html">2</a> +<a href="3.html">3</a> +<a href="4.html">4</a> +<h3>Page 3</h3> +</body> +</html> diff --git a/www/test/1.8.6/test/manual/history/4.html b/www/test/1.8.6/test/manual/history/4.html new file mode 100644 index 00000000..5e68f8fe --- /dev/null +++ b/www/test/1.8.6/test/manual/history/4.html @@ -0,0 +1,15 @@ +<html lang="en"> +<head> + <meta charset="utf-8" /> + <script type="application/javascript" src="../../../src/htmx.js"></script> + <title>History - 4</title> +</head> +<body style="padding:20px;font-family: sans-serif" hx-boost="true"> +<h1>History Test</h1> +<a href="1.html">1</a> +<a href="2.html">2</a> +<a href="3.html">3</a> +<a href="4.html">4</a> +<h3>Page 4</h3> +</body> +</html> diff --git a/www/test/1.8.6/test/manual/history/index.html b/www/test/1.8.6/test/manual/history/index.html new file mode 100644 index 00000000..d1462194 --- /dev/null +++ b/www/test/1.8.6/test/manual/history/index.html @@ -0,0 +1,25 @@ +<html lang="en"> +<head> + <meta charset="utf-8" /> + <script type="application/javascript" src="../../../src/htmx.js"></script> + <title>History - Index</title> + <meta name="htmx-config" content='{"historyCacheSize":2}'> + <script> + htmx.on("htmx:beforeHistorySave", function(evt){ + console.log("Saving history : ", evt.detail); + console.log("History Cache Before:", JSON.parse(localStorage.getItem("htmx-history-cache"))) + setTimeout(function () { + console.log("History Cache After:", JSON.parse(localStorage.getItem("htmx-history-cache"))) + }, 10); + }) + </script> +</head> +<body style="padding:20px;font-family: sans-serif" hx-boost="true"> +<h1>History Test</h1> +<a href="1.html">1</a> +<a href="2.html">2</a> +<a href="3.html">3</a> +<a href="4.html">4</a> +<h3>Index</h3> +</body> +</html> diff --git a/www/test/1.8.6/test/manual/history_refresh/1.html b/www/test/1.8.6/test/manual/history_refresh/1.html new file mode 100644 index 00000000..93932266 --- /dev/null +++ b/www/test/1.8.6/test/manual/history_refresh/1.html @@ -0,0 +1,16 @@ +<html lang="en"> +<head> + <meta charset="utf-8" /> + <script type="application/javascript" src="../../../src/htmx.js"></script> + <meta name="htmx-config" content='{"historyCacheSize":0, "refreshOnHistoryMiss" : true}'> + <title>History - 1</title> +</head> +<body style="padding:20px;font-family: sans-serif" hx-boost="true"> +<h1>History Test</h1> +<a href="1.html">1</a> +<a href="2.html">2</a> +<a href="3.html">3</a> +<a href="4.html">4</a> +<h3>Page 1</h3> +</body> +</html> diff --git a/www/test/1.8.6/test/manual/history_refresh/2.html b/www/test/1.8.6/test/manual/history_refresh/2.html new file mode 100644 index 00000000..8586fdff --- /dev/null +++ b/www/test/1.8.6/test/manual/history_refresh/2.html @@ -0,0 +1,16 @@ +<html lang="en"> +<head> + <meta charset="utf-8" /> + <script type="application/javascript" src="../../../src/htmx.js"></script> + <meta name="htmx-config" content='{"historyCacheSize":0, "refreshOnHistoryMiss" : true}'> + <title>History - 2</title> +</head> +<body style="padding:20px;font-family: sans-serif" hx-boost="true"> +<h1>History Test</h1> +<a href="1.html">1</a> +<a href="2.html">2</a> +<a href="3.html">3</a> +<a href="4.html">4</a> +<h3>Page 2</h3> +</body> +</html> diff --git a/www/test/1.8.6/test/manual/history_refresh/3.html b/www/test/1.8.6/test/manual/history_refresh/3.html new file mode 100644 index 00000000..b291f500 --- /dev/null +++ b/www/test/1.8.6/test/manual/history_refresh/3.html @@ -0,0 +1,16 @@ +<html lang="en"> +<head> + <meta charset="utf-8" /> + <script type="application/javascript" src="../../../src/htmx.js"></script> + <meta name="htmx-config" content='{"historyCacheSize":0, "refreshOnHistoryMiss" : true}'> + <title>History - 3</title> +</head> +<body style="padding:20px;font-family: sans-serif" hx-boost="true"> +<h1>History Test</h1> +<a href="1.html">1</a> +<a href="2.html">2</a> +<a href="3.html">3</a> +<a href="4.html">4</a> +<h3>Page 3</h3> +</body> +</html> diff --git a/www/test/1.8.6/test/manual/history_refresh/4.html b/www/test/1.8.6/test/manual/history_refresh/4.html new file mode 100644 index 00000000..507058fa --- /dev/null +++ b/www/test/1.8.6/test/manual/history_refresh/4.html @@ -0,0 +1,16 @@ +<html lang="en"> +<head> + <meta charset="utf-8" /> + <script type="application/javascript" src="../../../src/htmx.js"></script> + <meta name="htmx-config" content='{"historyCacheSize":0, "refreshOnHistoryMiss" : true}'> + <title>History - 4</title> +</head> +<body style="padding:20px;font-family: sans-serif" hx-boost="true"> +<h1>History Test</h1> +<a href="1.html">1</a> +<a href="2.html">2</a> +<a href="3.html">3</a> +<a href="4.html">4</a> +<h3>Page 4</h3> +</body> +</html> diff --git a/www/test/1.8.6/test/manual/history_refresh/index.html b/www/test/1.8.6/test/manual/history_refresh/index.html new file mode 100644 index 00000000..0de9fb14 --- /dev/null +++ b/www/test/1.8.6/test/manual/history_refresh/index.html @@ -0,0 +1,19 @@ +<html lang="en"> +<head> + <meta charset="utf-8" /> + <script type="application/javascript" src="../../../src/htmx.js"></script> + <title>History - Index</title> + <meta name="htmx-config" content='{"historyCacheSize":0, "refreshOnHistoryMiss" : true}'> + <script> + htmx.logAll(); + </script> +</head> +<body style="padding:20px;font-family: sans-serif" hx-boost="true"> +<h1>History Test</h1> +<a href="1.html">1</a> +<a href="2.html">2</a> +<a href="3.html">3</a> +<a href="4.html">4</a> +<h3>Index</h3> +</body> +</html> diff --git a/www/test/1.8.6/test/manual/history_regression/index.html b/www/test/1.8.6/test/manual/history_regression/index.html new file mode 100644 index 00000000..b9de0e7e --- /dev/null +++ b/www/test/1.8.6/test/manual/history_regression/index.html @@ -0,0 +1,19 @@ +<html lang="en"> +<head> + <meta charset="utf-8" /> + <script type="application/javascript" src="../../../src/htmx.js"></script> + <title>History - Index</title> + <script> + htmx.on("htmx:beforeHistorySave", function(evt){ + console.log("Saving history : ", evt.detail); + console.log("History Cache Before:", JSON.parse(localStorage.getItem("htmx-history-cache"))) + setTimeout(function () { + console.log("History Cache After:", JSON.parse(localStorage.getItem("htmx-history-cache"))) + }, 10); + }) + </script> +</head> +<body style="padding:20px;font-family: sans-serif" hx-boost="true"> +<a href="test">Test</a> +</body> +</html> diff --git a/www/test/1.8.6/test/manual/history_regression/test/index.html b/www/test/1.8.6/test/manual/history_regression/test/index.html new file mode 100644 index 00000000..20650e42 --- /dev/null +++ b/www/test/1.8.6/test/manual/history_regression/test/index.html @@ -0,0 +1,19 @@ +<html lang="en"> +<head> + <meta charset="utf-8" /> + <script type="application/javascript" src="../../../../src/htmx.js"></script> + <title>History - Index</title> + <script> + htmx.on("htmx:beforeHistorySave", function(evt){ + console.log("Saving history : ", evt.detail); + console.log("History Cache Before:", JSON.parse(localStorage.getItem("htmx-history-cache"))) + setTimeout(function () { + console.log("History Cache After:", JSON.parse(localStorage.getItem("htmx-history-cache"))) + }, 10); + }) + </script> +</head> +<body style="padding:20px;font-family: sans-serif" hx-boost="true"> +Hit refresh and navigate back... +</body> +</html> diff --git a/www/test/1.8.6/test/manual/history_regression2/index.html b/www/test/1.8.6/test/manual/history_regression2/index.html new file mode 100644 index 00000000..8d9480d6 --- /dev/null +++ b/www/test/1.8.6/test/manual/history_regression2/index.html @@ -0,0 +1,19 @@ +<html lang="en"> +<head> + <meta charset="utf-8" /> + <script type="application/javascript" src="../../../src/htmx.js"></script> + <title>History - Regression 2 Page 1</title> + <script> + htmx.on("htmx:beforeHistorySave", function(evt){ + console.log("Saving history : ", evt.detail); + console.log("History Cache Before:", JSON.parse(localStorage.getItem("htmx-history-cache"))) + setTimeout(function () { + console.log("History Cache After:", JSON.parse(localStorage.getItem("htmx-history-cache"))) + }, 10); + }) + </script> +</head> +<body style="padding:20px;font-family: sans-serif" hx-boost="true"> +<a href="page2.html">To Page 2</a> +</body> +</html> diff --git a/www/test/1.8.6/test/manual/history_regression2/page2.html b/www/test/1.8.6/test/manual/history_regression2/page2.html new file mode 100644 index 00000000..b72c59b2 --- /dev/null +++ b/www/test/1.8.6/test/manual/history_regression2/page2.html @@ -0,0 +1,20 @@ +<html lang="en"> +<head> + <meta charset="utf-8" /> + <script type="application/javascript" src="../../../src/htmx.js"></script> + <title>History - Regression 2 Page 2</title> + <script> + htmx.on("htmx:beforeHistorySave", function(evt){ + console.log("Saving history : ", evt.detail); + console.log("History Cache Before:", JSON.parse(localStorage.getItem("htmx-history-cache"))) + setTimeout(function () { + console.log("History Cache After:", JSON.parse(localStorage.getItem("htmx-history-cache"))) + }, 10); + }) + </script> +</head> +<body style="padding:20px;font-family: sans-serif" hx-boost="true"> +<a href="index.html">Back To Page 1</a> +<p>History Element should read 'History - Regression 2 Page 1'</p> +</body> +</html> diff --git a/www/test/1.8.6/test/manual/history_regression3/1.html b/www/test/1.8.6/test/manual/history_regression3/1.html new file mode 100644 index 00000000..4738794a --- /dev/null +++ b/www/test/1.8.6/test/manual/history_regression3/1.html @@ -0,0 +1,16 @@ +<html lang="en"> +<head> + <meta charset="utf-8" /> + <script type="application/javascript" src="../../../src/htmx.js"></script> + <meta name="htmx-config" content='{"historyCacheSize":0, "refreshOnHistoryMiss" : true}'> + <title>History - 1</title> +</head> +<body style="padding:20px;font-family: sans-serif" hx-boost="true"> +<h1>History Test</h1> +<a hx-get="1.html" hx-push-url="true" hx-target="body">1</a> +<a hx-get="2.html" hx-push-url="true" hx-target="body">2</a> +<a hx-get="3.html" hx-push-url="true" hx-target="body">3</a> +<a hx-get="4.html" hx-push-url="true" hx-target="body">4</a> +<h3>Page 1</h3> +</body> +</html> diff --git a/www/test/1.8.6/test/manual/history_regression3/2.html b/www/test/1.8.6/test/manual/history_regression3/2.html new file mode 100644 index 00000000..b1c5b2fa --- /dev/null +++ b/www/test/1.8.6/test/manual/history_regression3/2.html @@ -0,0 +1,16 @@ +<html lang="en"> +<head> + <meta charset="utf-8" /> + <script type="application/javascript" src="../../../src/htmx.js"></script> + <meta name="htmx-config" content='{"historyCacheSize":0, "refreshOnHistoryMiss" : true}'> + <title>History - 2</title> +</head> +<body style="padding:20px;font-family: sans-serif" hx-boost="true"> +<h1>History Test</h1> +<a hx-get="1.html" hx-push-url="true" hx-target="body">1</a> +<a hx-get="2.html" hx-push-url="true" hx-target="body">2</a> +<a hx-get="3.html" hx-push-url="true" hx-target="body">3</a> +<a hx-get="4.html" hx-push-url="true" hx-target="body">4</a> +<h3>Page 2</h3> +</body> +</html> diff --git a/www/test/1.8.6/test/manual/history_regression3/3.html b/www/test/1.8.6/test/manual/history_regression3/3.html new file mode 100644 index 00000000..e5ae872e --- /dev/null +++ b/www/test/1.8.6/test/manual/history_regression3/3.html @@ -0,0 +1,16 @@ +<html lang="en"> +<head> + <meta charset="utf-8" /> + <script type="application/javascript" src="../../../src/htmx.js"></script> + <meta name="htmx-config" content='{"historyCacheSize":0, "refreshOnHistoryMiss" : true}'> + <title>History - 3</title> +</head> +<body style="padding:20px;font-family: sans-serif" hx-boost="true"> +<h1>History Test</h1> +<a hx-get="1.html" hx-push-url="true" hx-target="body">1</a> +<a hx-get="2.html" hx-push-url="true" hx-target="body">2</a> +<a hx-get="3.html" hx-push-url="true" hx-target="body">3</a> +<a hx-get="4.html" hx-push-url="true" hx-target="body">4</a> +<h3>Page 3</h3> +</body> +</html> diff --git a/www/test/1.8.6/test/manual/history_regression3/4.html b/www/test/1.8.6/test/manual/history_regression3/4.html new file mode 100644 index 00000000..50f594c9 --- /dev/null +++ b/www/test/1.8.6/test/manual/history_regression3/4.html @@ -0,0 +1,16 @@ +<html lang="en"> +<head> + <meta charset="utf-8" /> + <script type="application/javascript" src="../../../src/htmx.js"></script> + <meta name="htmx-config" content='{"historyCacheSize":0, "refreshOnHistoryMiss" : true}'> + <title>History - 4</title> +</head> +<body style="padding:20px;font-family: sans-serif" hx-boost="true"> +<h1>History Test</h1> +<a hx-get="1.html" hx-push-url="true" hx-target="body">1</a> +<a hx-get="2.html" hx-push-url="true" hx-target="body">2</a> +<a hx-get="3.html" hx-push-url="true" hx-target="body">3</a> +<a hx-get="4.html" hx-push-url="true" hx-target="body">4</a> +<h3>Page 4</h3> +</body> +</html> diff --git a/www/test/1.8.6/test/manual/history_regression3/index.html b/www/test/1.8.6/test/manual/history_regression3/index.html new file mode 100644 index 00000000..ada84eaf --- /dev/null +++ b/www/test/1.8.6/test/manual/history_regression3/index.html @@ -0,0 +1,19 @@ +<html lang="en"> +<head> + <meta charset="utf-8" /> + <script type="application/javascript" src="../../../src/htmx.js"></script> + <title>History - Index</title> + <meta name="htmx-config" content='{"historyCacheSize":0, "refreshOnHistoryMiss" : true}'> + <script> + htmx.logAll(); + </script> +</head> +<body style="padding:20px;font-family: sans-serif"> +<h1>History Test</h1> +<a hx-get="1.html" hx-push-url="true" hx-target="body">1</a> +<a hx-get="2.html" hx-push-url="true" hx-target="body">2</a> +<a hx-get="3.html" hx-push-url="true" hx-target="body">3</a> +<a hx-get="4.html" hx-push-url="true" hx-target="body">4</a> +<h3>Index</h3> +</body> +</html> diff --git a/www/test/1.8.6/test/manual/history_safari_ios_bug/index.html b/www/test/1.8.6/test/manual/history_safari_ios_bug/index.html new file mode 100644 index 00000000..add271df --- /dev/null +++ b/www/test/1.8.6/test/manual/history_safari_ios_bug/index.html @@ -0,0 +1,24 @@ +<html lang="en"> +<head> + <meta charset="utf-8" /> + <script type="application/javascript" src="../../../src/htmx.js"></script> + <title>History - Regression 2 Page 1</title> + <script> + htmx.on("htmx:beforeHistorySave", function(evt){ + console.log("Saving history : ", evt.detail); + console.log("History Cache Before:", JSON.parse(localStorage.getItem("htmx-history-cache"))) + setTimeout(function () { + console.log("History Cache After:", JSON.parse(localStorage.getItem("htmx-history-cache"))) + }, 10); + }) + </script> +</head> +<body style="padding:20px;font-family: sans-serif"> + +<h1>Page 1, Issues A Full Request For Page 2</h1> + +<a href="page2.html">Go To Page 2</a> + +</body> + +</html> diff --git a/www/test/1.8.6/test/manual/history_safari_ios_bug/page2.html b/www/test/1.8.6/test/manual/history_safari_ios_bug/page2.html new file mode 100644 index 00000000..4da1274e --- /dev/null +++ b/www/test/1.8.6/test/manual/history_safari_ios_bug/page2.html @@ -0,0 +1,23 @@ +<html lang="en"> +<head> + <meta charset="utf-8" /> + <script type="application/javascript" src="../../../src/htmx.js"></script> + <title>History - Regression 2 Page 1</title> + <script> + htmx.on("htmx:beforeHistorySave", function(evt){ + console.log("Saving history : ", evt.detail); + console.log("History Cache Before:", JSON.parse(localStorage.getItem("htmx-history-cache"))) + setTimeout(function () { + console.log("History Cache After:", JSON.parse(localStorage.getItem("htmx-history-cache"))) + }, 10); + }) + </script> +</head> +<body style="padding:20px;font-family: sans-serif"> + +<h1>Page 2, Issues An HTMX Request For Page 3</h1> + +<button hx-target="body" hx-get="page3.html" hx-push-url="true" hx-trigger="click delay:2s">Load Page 3</button> +</body> + +</html> diff --git a/www/test/1.8.6/test/manual/history_safari_ios_bug/page3.html b/www/test/1.8.6/test/manual/history_safari_ios_bug/page3.html new file mode 100644 index 00000000..225472c3 --- /dev/null +++ b/www/test/1.8.6/test/manual/history_safari_ios_bug/page3.html @@ -0,0 +1,20 @@ +<html lang="en"> +<head> + <meta charset="utf-8" /> + <script type="application/javascript" src="../../../src/htmx.js"></script> + <title>History - Regression 2 Page 2</title> + <script> + htmx.on("htmx:beforeHistorySave", function(evt){ + console.log("Saving history : ", evt.detail); + console.log("History Cache Before:", JSON.parse(localStorage.getItem("htmx-history-cache"))) + setTimeout(function () { + console.log("History Cache After:", JSON.parse(localStorage.getItem("htmx-history-cache"))) + }, 10); + }) + </script> +</head> +<body style="padding:20px;font-family: sans-serif" hx-boost="true"> +<a href="index.html">Back To Page 1</a> +<h1>Page 3, Back Button Goes Back to Page 1, rather than 2</h1> +</body> +</html> diff --git a/www/test/1.8.6/test/manual/index.html b/www/test/1.8.6/test/manual/index.html new file mode 100644 index 00000000..790ee6da --- /dev/null +++ b/www/test/1.8.6/test/manual/index.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>Aborting Request Event Test</title> +</head> +<body style="padding: 20px; font-family: sans-serif;"> +<h2>Functionality</h2> +<ul> + <li><a href="aborting-request.html">Aborting Requests</a></li> + <li><a href="confirm-and-prompt.html">Confirm & Prompt</a></li> + <li><a href="csp-test.html">CSP Test</a></li> + <li><a href="form-test.html">Form Test</a></li> + <li><a href="intersect-test-eventHandler.html">Intersect Test</a></li> + <li><a href="no-indicator-css.html">Indicator CSS Test</a></li> + <li><a href="yes-indicator-css.html">Indicator CSS Test 2</a></li> + <li><a href="poll-condition-test.html">Poll Conditionals</a></li> + <li><a href="preload.html">Preload Test</a></li> + <li><a href="preload-fragment.html">Preload Fragment Test</a></li> + <li><a href="head-support">Head Merge Extension Tests</a></li> + <li><a href="cache-buster">Cache Busting Test</a></li> + <li>Scroll Tests + <ul> + <li><a href="scroll-test-eventHandler.html">Scroll Event Handler</a></li> + <li><a href="scroll-test-startEnd.html">Start/End</a></li> + <li><a href="scroll-test-targets.html">Targets</a></li> + </ul> + </li> + <li>History + <ul> + <li><a href="history">Core History Test</a></li> + <li><a href="history_refresh">History Refresh Test</a></li> + <li><a href="restored">Restored Test</a></li> + <li><a href="history_regression">Navigate, Refresh, Back Regression</a></li> + <li><a href="anchors">Anchors</a></li> + </ul> + </li> +</ul> +<h2>Perf</h2> +<li><a href="manual-perf.html">Manual Perf Test</a></li> +</body> +</html> diff --git a/www/test/1.8.6/test/manual/intersect-test-eventHandler.html b/www/test/1.8.6/test/manual/intersect-test-eventHandler.html new file mode 100644 index 00000000..7156b0cc --- /dev/null +++ b/www/test/1.8.6/test/manual/intersect-test-eventHandler.html @@ -0,0 +1,172 @@ +<html lang="en"> +<head> + <meta charset="utf-8" /> + <title>Test Scroll Event Handler</title> + <script src="../../node_modules/sinon/pkg/sinon.js"></script> + <script src="../util/util.js"></script> + <script src="../../src/htmx.js"></script> + + <script> + server = makeServer(); + server.autoRespond = true; + server.respondWith("GET", "/more_content", "Here is more content for this page, loaded 'remotely'."); + </script> + + <style> + .panel { + height:200px; + background-color:#eee; + margin-bottom:20px; + padding:20px; + } + .container { + height:200px; + padding:20px; + border:1px solid black; + overflow:auto; + } + </style> + +</head> +<body style="padding:20px;font-family: sans-serif"> +<h1>Scrolling Event Handler Tests</h1> +<p>You should be able to scroll this page at any speed and see HTML fragments loaded into the DIVs "remotely" without any hiccups.</p> + +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> + +<h1>Root</h1> + +<div class="container" id="wrapper"> +<div class="panel" hx-get="/more_content" hx-trigger="intersect root:#wrapper"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect root:#wrapper"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect root:#wrapper"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect root:#wrapper"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect root:#wrapper"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect root:#wrapper"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect root:#wrapper"></div> +</div> + +<h1>Threshold .5</h1> + +<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div> + +<h1>Threshold 1</h1> + +<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:1"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:1"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:1"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:1"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:1"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:1"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:1"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:1"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:1"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:1"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:1"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:1"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:1"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:1"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:1"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:1"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:1"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:1"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:1"></div> + +<h1>Regular</h1> + +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> +<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div> + +</body> +</html> diff --git a/www/test/1.8.6/test/manual/manual-perf.html b/www/test/1.8.6/test/manual/manual-perf.html new file mode 100644 index 00000000..8eb45d89 --- /dev/null +++ b/www/test/1.8.6/test/manual/manual-perf.html @@ -0,0 +1,81 @@ +<html lang="en"> +<head> + <meta charset="utf-8" /> + <title>Mocha Tests</title> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <link rel="stylesheet" href="../../node_modules/mocha/mocha.css" /> +</head> +<body style="padding:20px;font-family: sans-serif"> +<div id="mocha"></div> +<script src="../../node_modules/chai/chai.js"></script> +<script src="../../node_modules/mocha/mocha.js"></script> +<script src="../../node_modules/sinon/pkg/sinon.js"></script> +<script src="../../src/htmx.js"></script> +<script class="mocha-init"> + mocha.setup('bdd'); + mocha.checkLeaks(); + should = chai.should(); +</script> + +<script src="../util/util.js"></script> +<script> + describe("Manual Perf Tests", function() { + + beforeEach(function () { + this.server = makeServer(); + clearWorkArea(); + }); + afterEach(function () { + this.server.restore(); + clearWorkArea(); + }); + + function stringRepeat(str, num) { + num = Number(num); + + var result = ''; + while (true) { + if (num & 1) { // (1) + result += str; + } + num >>>= 1; // (2) + if (num <= 0) break; + str += str; + } + + return result; + } + + it("DOM processing should be fast", function(){ + this.server.respondWith("GET", "/test", "Clicked!"); + + // create an entry with a large content string (256k) and see how fast we can write and read it + // to local storage as a single entry + var str = stringRepeat("<div>", 30) + stringRepeat("<div><div><span><button hx-get='/test'> Test Get Button </button></span></div></div>\n", 500) + stringRepeat("</div>", 30); + var start = performance.now(); + var stuff = make(str); + var end = performance.now(); + var timeInMs = end - start; + + // make sure the DOM actually processed + var firstBtn = stuff.querySelector("button"); + firstBtn.click(); + this.server.respond(); + firstBtn.innerHTML.should.equal("Clicked!"); + + chai.assert(timeInMs < 100, "Should take less than 100ms on most platforms, took: " + timeInMs + "ms"); + }) + + }); +</script> + + +<script class="mocha-exec"> + mocha.run(); +</script> +<em>Work Area</em> +<hr/> +<div id="work-area" hx-history-elt> +</div> +</body> +</html> diff --git a/www/test/1.8.6/test/manual/no-indicator-css.html b/www/test/1.8.6/test/manual/no-indicator-css.html new file mode 100644 index 00000000..0ce4e9fc --- /dev/null +++ b/www/test/1.8.6/test/manual/no-indicator-css.html @@ -0,0 +1,16 @@ +<html lang="en"> +<head> + <meta charset="utf-8" /> + <meta name="htmx-config" content='{"includeIndicatorStyles":false}'> + <title>Test if the includeIndicatorStyles meta option works</title> + <script src="../../src/htmx.js"></script> +</head> +<body style="padding:20px;font-family: sans-serif"> + <h1>You should see bars here:</h1> + <p> + We are overriding the normal CSS inclusion with the meta directive <code>{"includeIndicatorStyles":false}</code> + so you should see the indicator because it is not being hidden by the default classes. + </p> + <img class="htmx-indicator" src="../img/bars.svg" width="200"> +</body> +</html> diff --git a/www/test/1.8.6/test/manual/poll-condition-test.html b/www/test/1.8.6/test/manual/poll-condition-test.html new file mode 100644 index 00000000..38d7fd02 --- /dev/null +++ b/www/test/1.8.6/test/manual/poll-condition-test.html @@ -0,0 +1,28 @@ +<html lang="en"> +<head> + <meta charset="utf-8" /> + <title>Test Scroll Behavior</title> + <script src="../../src/htmx.js"></script> +</head> +<body style="padding:20px;font-family: sans-serif"> +<script src="../../node_modules/sinon/pkg/sinon.js"></script> +<script src="../../src/htmx.js"></script> +<script src="../util/util.js"></script> +<script> + server = makeServer(); + server.autoRespond = true; + server.respondWith("GET", "/more_divs", "<div>More Content</div>"); +</script> +<h1>Should Not Add Any Content Due To False Condition</h1> +<div hx-trigger="every 3s [false]" hx-get="/more_divs" hx-swap="beforeend" style="height: 100px; overflow: scroll"> + No Polling.... +</div> +<hr/> +<h1>Should Add Content Due To True Condition</h1> +<div hx-trigger="every 3s [true]" hx-get="/more_divs" hx-swap="beforeend" style="height: 100px; overflow: scroll"> + No Polling.... +</div> +<hr/> + +</body> +</html> diff --git a/www/test/1.8.6/test/manual/preload-fragment.html b/www/test/1.8.6/test/manual/preload-fragment.html new file mode 100644 index 00000000..51153988 --- /dev/null +++ b/www/test/1.8.6/test/manual/preload-fragment.html @@ -0,0 +1,10 @@ +111 +<script src="script.js"></script> +<img src="/images/image.gif"> +<img src="/images/image.png"> +<img src="/images/image.jpg"> +<style href="stylsheet-from-style.css"></style> +<link rel="stylesheet" href="stylesheet-from-link.css"> +<script> +alert("javascript executed") +</script>
\ No newline at end of file diff --git a/www/test/1.8.6/test/manual/preload.html b/www/test/1.8.6/test/manual/preload.html new file mode 100644 index 00000000..3c07f19d --- /dev/null +++ b/www/test/1.8.6/test/manual/preload.html @@ -0,0 +1,83 @@ +<html> +<head> + <script src="../../src/htmx.js"></script> + <script src="../../src/ext/preload.js"></script> + + <style> + div.container { + border:solid 1px black; + margin-bottom:25px; + padding:25px; + } + </style> +</head> + +<body hx-ext="preload"> + + <div class="container" preload="preload:init" preload-images="true"> + <h4>Triggered by: preload:init</h4> + <a href="preload-fragment.html?init=xhr1">Trigger on load (xhr)</a><br> + <a href="preload-fragment.html?init=xhr2">Trigger on load (xhr)</a><br> + <button hx-get="preload-fragment.html?init=hx-get">Trigger on load (hx-get)</a><br> + </div> + + <div class="container"> + <h4>Defaults</h4> + <a href="preload-fragment.html?default=link" preload>Trigger mousedown immediately</a><br> + <button hx-get="preload-fragment.html?default=button" preload>Trigger mousedown immediately</button><br> + </div> + + <div class="container" preload="mouseover">2.html + <h4>Inherited</h4> + <a href="preload-fragment.html?inherited=link">Trigger mouseover (after 100ms)</a><br> + <button hx-get="preload-fragment.html?inherited=button">Trigger mousedown (after 100ms)</button><br> + </div> + + <div class="container"> + <h4>Mouse Over</h4> + <button hx-get="preload-fragment.html?on=mouseover1" preload="mouseover">Trigger on mouseover</button><br> + <button hx-get="preload-fragment.html?on=mouseover2" preload="mouseover">Trigger on mouseover</button><br> + <button hx-get="preload-fragment.html?on=mouseover3" preload="mouseover">Trigger mouseover</button><br> + <a href="preload-fragment.html?on=mouseover4" preload="mouseover">Trigger on mouseover</a><br> + <a href="preload-fragment.html?on=mouseover5" preload="mouseover">Trigger on mouseover</a><br> + <a href="preload-fragment.html?on=mouseover6" preload="mouseover">Trigger mouseover</a><br> + + <h4>Mouse Down</h4> + <button hx-get="preload-fragment.html?on=mousedown1" preload="mousedown">Trigger on mousedown</button><br> + <button hx-get="preload-fragment.html?on=mousedown2" preload="mousedown">Trigger on mousedown</button><br> + <button hx-get="preload-fragment.html?on=mousedown3" preload="mousedown">Trigger mousedown</button><br> + <a href="preload-fragment.html?on=mousedown4" preload="mousedown">Trigger on mousedown</a><br> + <a href="preload-fragment.html?on=mousedown5" preload="mousedown">Trigger on mousedown</a><br> + <a href="preload-fragment.html?on=mousedown6" preload="mousedown">Trigger mousedown</a><br> + + </div> + + <div class="container" hx-get="preload-fragment.html?complex=mousedown" preload="mousedown"> + <h4>Mouse Down</h4> + <div>This is a complex object</div> + <div>With many sub-objects</div> + <div>Preload should only be canceled</div> + <div>If we leave the whole parent</div> + <div>Triggers on:mouseover after 1s</div> + </div> + + <div class="container" hx-get="preload-fragment.html?complex=mouseover" preload="mouseover"> + <h4>Mouse Over</h4> + <div>This is a complex object</div> + <div>With many sub-objects</div> + <div>Preload should only be canceled</div> + <div>If we leave the whole parent</div> + <div>Triggers on:mouseover after 1s</div> + </div> + + <div class="container" hx-get="preload-fragment.html?complex=default" preload> + <h4>Default (Mouse Down)</h4> + <div>This is a complex object</div> + <div>With many sub-objects</div> + <div>Preload should only be canceled</div> + <div>If we leave the whole parent</div> + <div>Triggers on:mouseover after 1s</div> + </div> + +</body> +</html>
\ No newline at end of file diff --git a/www/test/1.8.6/test/manual/restored/1.html b/www/test/1.8.6/test/manual/restored/1.html new file mode 100644 index 00000000..a0bae5da --- /dev/null +++ b/www/test/1.8.6/test/manual/restored/1.html @@ -0,0 +1,26 @@ +<html lang="en"> +<head> + <meta charset="utf-8" /> + <script type="application/javascript" src="../../../src/htmx.js"></script> + <script type="application/javascript" src="../../../src/ext/restored.js"></script> + <title>Restored - Index</title> + <script> + //htmx.logAll(); + </script> + +</head> +<body style="padding:20px;font-family: sans-serif" hx-boost="true"> +<h1>Restored Test</h1> +<p>Every popstate event on this page should display a success message below.</p> +<p id="message" + hx-ext="restored" + hx-trigger="restored" + hx-get="success.html" +></p> +<a href="1.html">1</a> +<a href="2.html">2</a> +<a href="3.html">3</a> +<a href="4.html">4</a> +<h3>1</h3> +</body> +</html> diff --git a/www/test/1.8.6/test/manual/restored/2.html b/www/test/1.8.6/test/manual/restored/2.html new file mode 100644 index 00000000..3e284139 --- /dev/null +++ b/www/test/1.8.6/test/manual/restored/2.html @@ -0,0 +1,26 @@ +<html lang="en"> +<head> + <meta charset="utf-8" /> + <script type="application/javascript" src="../../../src/htmx.js"></script> + <script type="application/javascript" src="../../../src/ext/restored.js"></script> + <title>Restored - Index</title> + <script> + //htmx.logAll(); + </script> + +</head> +<body style="padding:20px;font-family: sans-serif" hx-boost="true"> +<h1>Restored Test</h1> +<p>Every popstate event on this page should display a success message below.</p> +<p id="message" + hx-ext="restored" + hx-trigger="restored" + hx-get="success.html" +></p> +<a href="1.html">1</a> +<a href="2.html">2</a> +<a href="3.html">3</a> +<a href="4.html">4</a> +<h3>2</h3> +</body> +</html> diff --git a/www/test/1.8.6/test/manual/restored/3.html b/www/test/1.8.6/test/manual/restored/3.html new file mode 100644 index 00000000..a22fe432 --- /dev/null +++ b/www/test/1.8.6/test/manual/restored/3.html @@ -0,0 +1,26 @@ +<html lang="en"> +<head> + <meta charset="utf-8" /> + <script type="application/javascript" src="../../../src/htmx.js"></script> + <script type="application/javascript" src="../../../src/ext/restored.js"></script> + <title>Restored - Index</title> + <script> + //htmx.logAll(); + </script> + +</head> +<body style="padding:20px;font-family: sans-serif" hx-boost="true"> +<h1>Restored Test</h1> +<p>Every popstate event on this page should display a success message below.</p> +<p id="message" + hx-ext="restored" + hx-trigger="restored" + hx-get="success.html" +></p> +<a href="1.html">1</a> +<a href="2.html">2</a> +<a href="3.html">3</a> +<a href="4.html">4</a> +<h3>3</h3> +</body> +</html> diff --git a/www/test/1.8.6/test/manual/restored/4.html b/www/test/1.8.6/test/manual/restored/4.html new file mode 100644 index 00000000..6b96b9e1 --- /dev/null +++ b/www/test/1.8.6/test/manual/restored/4.html @@ -0,0 +1,26 @@ +<html lang="en"> +<head> + <meta charset="utf-8" /> + <script type="application/javascript" src="../../../src/htmx.js"></script> + <script type="application/javascript" src="../../../src/ext/restored.js"></script> + <title>Restored - Index</title> + <script> + //htmx.logAll(); + </script> + +</head> +<body style="padding:20px;font-family: sans-serif" hx-boost="true"> +<h1>Restored Test</h1> +<p>Every popstate event on this page should display a success message below.</p> +<p id="message" + hx-ext="restored" + hx-trigger="restored" + hx-get="success.html" +></p> +<a href="1.html">1</a> +<a href="2.html">2</a> +<a href="3.html">3</a> +<a href="4.html">4</a> +<h3>4</h3> +</body> +</html> diff --git a/www/test/1.8.6/test/manual/restored/index.html b/www/test/1.8.6/test/manual/restored/index.html new file mode 100644 index 00000000..3e769a90 --- /dev/null +++ b/www/test/1.8.6/test/manual/restored/index.html @@ -0,0 +1,26 @@ +<html lang="en"> +<head> + <meta charset="utf-8" /> + <script type="application/javascript" src="../../../src/htmx.js"></script> + <script type="application/javascript" src="../../../src/ext/restored.js"></script> + <title>Restored - Index</title> + <script> + //htmx.logAll(); + </script> + +</head> +<body style="padding:20px;font-family: sans-serif" hx-boost="true"> +<h1>Restored Test</h1> +<p>Every popstate event on this page should display a success message below.</p> +<p id="message" + hx-ext="restored" + hx-trigger="restored" + hx-get="success.html" +></p> +<a href="1.html">1</a> +<a href="2.html">2</a> +<a href="3.html">3</a> +<a href="4.html">4</a> +<h3>Index</h3> +</body> +</html> diff --git a/www/test/1.8.6/test/manual/restored/success.html b/www/test/1.8.6/test/manual/restored/success.html new file mode 100644 index 00000000..bff90fed --- /dev/null +++ b/www/test/1.8.6/test/manual/restored/success.html @@ -0,0 +1,2 @@ +<!-- It doesn't seem like hx-boost works well with util.server so this file is used as a work-around --> +Success!
\ No newline at end of file diff --git a/www/test/1.8.6/test/manual/scroll-test-eventHandler.html b/www/test/1.8.6/test/manual/scroll-test-eventHandler.html new file mode 100644 index 00000000..9930d97c --- /dev/null +++ b/www/test/1.8.6/test/manual/scroll-test-eventHandler.html @@ -0,0 +1,107 @@ +<html lang="en"> +<head> + <meta charset="utf-8" /> + <title>Test Scroll Event Handler</title> + <script src="../../node_modules/sinon/pkg/sinon.js"></script> + <script src="../util/util.js"></script> + <script src="../../src/htmx.js"></script> + + <script> + server = makeServer(); + server.autoRespond = true; + server.respondWith("GET", "/more_content", "Here is more content for this page, loaded 'remotely'."); + </script> + + <style> + .panel { + height:200px; + background-color:#eee; + margin-bottom:20px; + padding:20px; + } + </style> + +</head> +<body style="padding:20px;font-family: sans-serif"> +<h1>Scrolling Event Handler Tests</h1> +<p>You should be able to scroll this page at any speed and see HTML fragments loaded into the DIVs "remotely" without any hiccups.</p> + +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> +<div class="panel" hx-get="/more_content" hx-trigger="revealed"></div> + +</body> +</html> diff --git a/www/test/1.8.6/test/manual/scroll-test-startEnd.html b/www/test/1.8.6/test/manual/scroll-test-startEnd.html new file mode 100644 index 00000000..43b69c33 --- /dev/null +++ b/www/test/1.8.6/test/manual/scroll-test-startEnd.html @@ -0,0 +1,29 @@ +<html lang="en"> +<head> + <meta charset="utf-8" /> + <title>Test Scroll Behavior</title> + <script src="../../src/htmx.js"></script> +</head> +<body style="padding:20px;font-family: sans-serif"> +<script src="../../node_modules/sinon/pkg/sinon.js"></script> +<script src="../../src/htmx.js"></script> +<script src="../util/util.js"></script> +<script> + server = makeServer(); + server.autoRespond = true; + server.respondWith("GET", "/more_divs", "<div>More Content</div>"); +</script> +<h1>Scrolling Start/End Tests</h1> + +<h3>End</h3> +<div hx-get="/more_divs" hx-swap="beforeend scroll:bottom" style="height: 100px; overflow: scroll"> + Click To Add Content... +</div> +<hr/> +<h3>Start</h3> +<div hx-get="/more_divs" hx-swap="beforeend scroll:top" style="height: 100px; overflow: scroll"> + Click To Add Content... +</div> + +</body> +</html> diff --git a/www/test/1.8.6/test/manual/scroll-test-targets.html b/www/test/1.8.6/test/manual/scroll-test-targets.html new file mode 100644 index 00000000..7350af4c --- /dev/null +++ b/www/test/1.8.6/test/manual/scroll-test-targets.html @@ -0,0 +1,31 @@ +<html lang="en"> +<head> + <meta charset="utf-8" /> + <title>Test Scroll Behavior</title> + <script src="../../src/htmx.js"></script> +</head> +<body style="padding:20px;font-family: sans-serif"> +<script src="../../node_modules/sinon/pkg/sinon.js"></script> +<script src="../../src/htmx.js"></script> +<script src="../util/util.js"></script> +<script> + server = makeServer(); + server.autoRespond = true; + server.respondWith("GET", "/demo", "Clicked..."); + htmx.config.scrollBehavior = 'auto'; +</script> +<h1>Scrolling Start/End Tests</h1> + +<h3>End</h3> +<button hx-get="/demo" hx-swap="innerHTML show:#scroll-target:bottom">Scroll Bottom Of Div</button> +<button hx-get="/demo" hx-swap="innerHTML show:window:bottom">Scroll Bottom Of Window</button> +<hr/> +<h3>Start</h3> +<div id="scroll-target" style="height: 1500px; background-color: red; border: 1px solid black; scroll-margin:10px"> + <h1>Scroll Target</h1> +</div> +<button hx-get="/demo" hx-swap="innerHTML show:#scroll-target:top">Scroll Top Of Div</button> +<button hx-get="/demo" hx-swap="innerHTML show:window:top">Scroll Top Of Window</button> + +</body> +</html> diff --git a/www/test/1.8.6/test/manual/yes-indicator-css.html b/www/test/1.8.6/test/manual/yes-indicator-css.html new file mode 100644 index 00000000..fc2e02a1 --- /dev/null +++ b/www/test/1.8.6/test/manual/yes-indicator-css.html @@ -0,0 +1,11 @@ +<html lang="en"> +<head> + <meta charset="utf-8" /> + <title>Test if indicators are invisible by default</title> + <script src="../../src/htmx.js"></script> +</head> +<body style="padding:20px;font-family: sans-serif"> + <h1>You should not see bars here:</h1> + <img class="htmx-indicator" src="../img/bars.svg" width="200"> +</body> +</html> |