Clean up viewport cases

duckduckgo · Dec 4, 2023 · 1c092c7 · 1c092c7
1 parent dc25ee2
commit 1c092c7
Show file tree

Hide file tree

Showing 24 changed files with 63 additions and 1,582 deletions.
diff --git a/index.html b/index.html
@@ -103,19 +103,14 @@ <h2>Autofill</h2>
 	</li>
 </ul>
 
-<h2>Webcompat Test Pages</h2>
-
-<ul>
-	<li><a href='./webcompat/viewport/'>Viewport tests</a></li>
-</ul>
-
 <h2>Other</h2>
 
 <ul>
 	<li><a href='./crawler/'>Crawler Detectability test</a></li>
 	<li><a href='./crawler/attribution/'>API call attribution test</a></li>
-  <li><a href="./tracker-site-blocking/index.html">Site specific tracker blocking test</a>
+	<li><a href="./tracker-site-blocking/index.html">Site specific tracker blocking test</a>
 	<li><a href='./features/clear-data/'>🗑️ Clear domain data</a></li>
+	<li><a href='./viewport/'>Viewport test cases</a></li>
 </ul>
 
 </body>

diff --git a/server.js b/server.js
@@ -274,3 +274,6 @@ app.use('/features/client-hints', chRoutes);
 
 const clearDataRoutes = require('./features/clear-data/server/routes.js');
 app.use('/features/clear-data', clearDataRoutes);
+
+const viewportRoutes = require('./viewport/server/routes.js');
+app.use('/viewport', viewportRoutes);
diff --git a/viewport/index.html b/viewport/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Viewport tests</title>
+    <link rel="stylesheet" type="text/css" href="styles.css" />
+  </head>
+  <body>
+    <p><a href="../../">[Home]</a> ↣ <strong>[Viewport Test Cases]</strong></p>
+    <p>This section contains various use-cases of <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag">viewport meta tag</a>. This affects page rendering depending on the hardware (e.g. mobile / desktop) and browser configuration (e.g. desktop mode, accesibility preferences).</p>
+
+    <ul>
+      <li><a href="case/?content=width=600,initial-scale=1">width=600,initial-scale=1</a></li>
+      <li><a href="case/?content=width=600">width=600</a></li>
+      <li><a href="case/?content=width=device-width,initial-scale=1">width=device-width,initial-scale=1</a></li>
+      <li><a href="case/?content=width=device-width,initial-scale=2">width=device-width,initial-scale=2</a></li>
+      <li><a href="case/?content=width=device-width">width=device-width</a></li>
+      <li><a href="case/?content=initial-scale=1">initial-scale=1</a></li>
+      <li><a href="case/?content=initial-scale=2">initial-scale=2</a></li>
+      <li><a href="case/?content=width=600;initial-scale=2,user-scalable=no">width=600;initial-scale=2,user-scalable=no</a></li>
+      <li><a href="case/?content=user-scalable=no">user-scalable=no</a></li>
+      <li><a href="case/">no viewport tag</a></li>
+      <li><a href="viewport-multiple-tags.html">multiple viewport tags</a></li>
+      <li><a href="viewport-conflicting-tags.html">conflicting viewport tags</a></li>
+    </ul>
+  </body>
+</html>
diff --git a/viewport/server/routes.js b/viewport/server/routes.js
@@ -0,0 +1,20 @@
+const fs = require('fs');
+const express = require('express');
+const router = express.Router();
+
+router.get('/case/', (req, res) => {
+    let tag = '';
+    if (typeof req.query.content !== 'undefined') {
+        const sanitizedContent = String.prototype.replaceAll.call(req.query.content, /[^a-zA-Z0-9,; =-]/g, '');
+        tag = `<meta name="viewport" content="${sanitizedContent}">`;
+    }
+    fs.readFile('./viewport/server/viewport-template.html', { encoding: 'utf-8' }, (err, contents) => {
+        if (err) {
+            res.statusCode = 500;
+            return res.end('error');
+        }
+        res.end(contents.replace('{{ VIEWPORT_TAG }}', tag));
+    });
+});
+
+module.exports = router;
diff --git a/...ompat/viewport/viewport-custom-width.html → viewport/server/viewport-template.html b/...ompat/viewport/viewport-custom-width.html → viewport/server/viewport-template.html
@@ -1,17 +1,16 @@
-
 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <meta name="viewport" content="width=600">
-    <link rel="stylesheet" type="text/css" href="styles.css" />
+    {{ VIEWPORT_TAG }}
+    <link rel="stylesheet" type="text/css" href="../styles.css" />
   </head>
   <body>
     <h1>Viewport test</h1>
     <pre id="result">
       xxx
     </pre>
-    <script src="viewport.js"></script>
+    <script src="../viewport.js"></script>
     <div>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Viverra maecenas accumsan lacus vel facilisis volutpat. Enim ut tellus elementum sagittis. Tristique senectus et netus et malesuada fames ac turpis. Ut enim blandit volutpat maecenas volutpat. Eget lorem dolor sed viverra ipsum nunc. A erat nam at lectus. Duis ut diam quam nulla porttitor massa id neque. Suspendisse ultrices gravida dictum fusce ut placerat orci. Ut consequat semper viverra nam libero justo laoreet sit. Dolor sit amet consectetur adipiscing elit ut aliquam purus. Sodales ut eu sem integer vitae justo eget. Cursus sit amet dictum sit. Ut consequat semper viverra nam libero justo. Id venenatis a condimentum vitae. Porttitor lacus luctus accumsan tortor posuere ac ut consequat. Aliquet enim tortor at auctor urna nunc id cursus metus. Cras sed felis eget velit aliquet. Quam id leo in vitae turpis massa sed elementum. Sodales ut eu sem integer vitae justo.
 

diff --git a/webcompat/viewport/styles.css → viewport/styles.css b/webcompat/viewport/styles.css → viewport/styles.css
diff --git a/...t/viewport/viewport-conflicting-tags.html → viewport/viewport-conflicting-tags.html b/...t/viewport/viewport-conflicting-tags.html → viewport/viewport-conflicting-tags.html
diff --git a/...mpat/viewport/viewport-multiple-tags.html → viewport/viewport-multiple-tags.html b/...mpat/viewport/viewport-multiple-tags.html → viewport/viewport-multiple-tags.html
diff --git a/webcompat/viewport/viewport.js → viewport/viewport.js b/webcompat/viewport/viewport.js → viewport/viewport.js
@@ -11,7 +11,13 @@ function viewportHandler (event) {
         'visualViewport.height': visualViewport.height,
         'visualViewport.scale': visualViewport.scale
     };
-    document.querySelector('#result').textContent = JSON.stringify(r, null, 4);
+    const viewportContent = document.querySelector('meta[name="viewport"]')?.getAttribute('content');
+    document.querySelector('#result').textContent = `
+current viewport content:
+    ${viewportContent}
+
+current viewport state:
+    ${JSON.stringify(r, null, 4)}`;
 }
 
 window.addEventListener('load', () => {

diff --git a/webcompat/index.html b/webcompat/index.html
diff --git a/webcompat/viewport/index.html b/webcompat/viewport/index.html