diff --git a/cypress/integration/api_spec.js b/cypress/integration/api_spec.js index d741175..2d889c5 100644 --- a/cypress/integration/api_spec.js +++ b/cypress/integration/api_spec.js @@ -10,7 +10,7 @@ function rgbCount(text) { describe('getColor()', function() { beforeEach(function() { - cy.visit('http://localhost:8080'); + cy.visit('http://localhost:8080/cypress/test-pages/index.html'); }) it('returns valid color from black image', function() { @@ -62,7 +62,7 @@ function testPaletteCount(num) { describe('getPalette()', function() { beforeEach(function() { - cy.visit('http://localhost:8080'); + cy.visit('http://localhost:8080/cypress/test-pages/index.html'); }) // FULL TEST LIST = [1, 2, 3, 5, 7, 10, 20]; diff --git a/examples/img/black.png b/cypress/test-pages/img/black.png similarity index 100% rename from examples/img/black.png rename to cypress/test-pages/img/black.png diff --git a/examples/img/rainbow-horizontal.png b/cypress/test-pages/img/rainbow-horizontal.png similarity index 100% rename from examples/img/rainbow-horizontal.png rename to cypress/test-pages/img/rainbow-horizontal.png diff --git a/examples/img/rainbow-vertical.png b/cypress/test-pages/img/rainbow-vertical.png similarity index 100% rename from examples/img/rainbow-vertical.png rename to cypress/test-pages/img/rainbow-vertical.png diff --git a/examples/img/red.png b/cypress/test-pages/img/red.png similarity index 100% rename from examples/img/red.png rename to cypress/test-pages/img/red.png diff --git a/examples/img/transparent.png b/cypress/test-pages/img/transparent.png similarity index 100% rename from examples/img/transparent.png rename to cypress/test-pages/img/transparent.png diff --git a/examples/img/white.png b/cypress/test-pages/img/white.png similarity index 100% rename from examples/img/white.png rename to cypress/test-pages/img/white.png diff --git a/index.html b/cypress/test-pages/index.html old mode 100755 new mode 100644 similarity index 84% rename from index.html rename to cypress/test-pages/index.html index fc6d1bd..dc9bad8 --- a/index.html +++ b/cypress/test-pages/index.html @@ -4,7 +4,7 @@ Color Thief - + @@ -14,7 +14,7 @@ {{#.}}

{{.}}

- +
{{/.}} @@ -49,9 +49,9 @@ - - - + + + diff --git a/cypress/test-pages/index.js b/cypress/test-pages/index.js new file mode 100644 index 0000000..11f8acb --- /dev/null +++ b/cypress/test-pages/index.js @@ -0,0 +1,58 @@ +var colorThief = new ColorThief(); + +var images = [ + 'black.png', + 'red.png', + 'rainbow-horizontal.png', + 'rainbow-vertical.png', + // 'transparent.png', + // 'white.png', +]; + +// Render example images +var examplesHTML = Mustache.to_html(document.getElementById('image-tpl').innerHTML, images); +document.getElementById('example-images').innerHTML = examplesHTML; + +// Once images are loaded, process them +document.querySelectorAll('.image').forEach((image) => { + const section = image.closest('.image-section'); + if (this.complete) { + showColorsForImage(image, section); + } else { + image.addEventListener('load', function() { + showColorsForImage(image, section); + }); + } +}) + +// Run Color Thief functions and display results below image. +// We also log execution time of functions for display. +const showColorsForImage = function(image, section) { + // getColor(img) + let start = Date.now(); + let result = colorThief.getColor(image); + let elapsedTime = Date.now() - start; + const colorHTML = Mustache.to_html(document.getElementById('color-tpl').innerHTML, { + color: result, + colorStr: result.toString(), + elapsedTime + }) + + // getPalette(img) + let paletteHTML = ''; + let colorCounts = [null, 1, 2, 3, 5, 7, 10, 20]; + colorCounts.forEach((count) => { + let start = Date.now(); + let result = colorThief.getPalette(image, count); + let elapsedTime = Date.now() - start; + paletteHTML += Mustache.to_html(document.getElementById('palette-tpl').innerHTML, { + count, + palette: result, + paletteStr: result.toString(), + elapsedTime + }) + }); + + const outputEl = section.querySelector('.output'); + outputEl.innerHTML += colorHTML + paletteHTML; +}; diff --git a/cypress/test-pages/screen.css b/cypress/test-pages/screen.css new file mode 100644 index 0000000..bc1d830 --- /dev/null +++ b/cypress/test-pages/screen.css @@ -0,0 +1,95 @@ +:root { + /* Colors */ + --color: #000; + --bg-color: #f9f9f9; + --primary-color: #fc4c02; + --secondary-color: #f68727; + --muted-color: #999; + --code-color: var(--primary-color); + --code-bg-color: #fff; + + /* Typography */ + --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + --code-font: Menlo, Consolas, Monaco, Lucida Console, monospace; + --bold: 700; + --x-bold: 900; + --line-height: 1.5em; + --line-height-heading: 1.3em; + + /* Breakpoints */ + --sm-screen: 640px; +} + +/* Base + * *----------------------------------------------- */ +* { + box-sizing: border-box; +} + +body { + margin: 0; + padding: 0; + background: var(--bg-color); +} + +/* Typography + * *----------------------------------------------- */ + +html { + font-size: 16px; + font-family: var(--font); + line-height: var(--line-height); + -webkit-font-smoothing: antialiased; +} + +h1, +h2, +h3 { + font-weight: var(--x-bold); + line-height: var(--line-height-heading); + letter-spacing: -0.005em; +} + +h2 { + margin: 0 0 0.25em 0; + font-size: 1.5rem; +} + +h3 { + margin: 1em 0 0.25em 0; + font-size: 1.06rem; +} + +code { + font-family: var(--code-font); + overflow-wrap: break-word; +} + + +/* -- Layout ------------------------------------------------------------------ */ + +.image-section { + border-bottom: 1px solid #ccc; + padding: 16px 16px 32px 16px; + margin-bottom: 32px; +} + +.swatch { + display: inline-block; + background: #dddddd; +} + +.color .swatch { + width: 6rem; + height: 3rem; +} + +.palette .swatch { + width: 3rem; + height: 2rem; +} + +.time { + color: var(--muted-color); + font-weight: normal; +} diff --git a/examples/css/screen.css b/examples/css/screen.css index bc1d830..4caf9d7 100644 --- a/examples/css/screen.css +++ b/examples/css/screen.css @@ -22,7 +22,7 @@ /* Base * *----------------------------------------------- */ -* { +/** { box-sizing: border-box; } @@ -31,10 +31,10 @@ body { padding: 0; background: var(--bg-color); } - +*/ /* Typography * *----------------------------------------------- */ - +/* html { font-size: 16px; font-family: var(--font); @@ -64,10 +64,10 @@ code { font-family: var(--code-font); overflow-wrap: break-word; } - +*/ /* -- Layout ------------------------------------------------------------------ */ - +/* .image-section { border-bottom: 1px solid #ccc; padding: 16px 16px 32px 16px; @@ -92,4 +92,4 @@ code { .time { color: var(--muted-color); font-weight: normal; -} +}*/ diff --git a/package-lock.json b/package-lock.json index f252e9b..08b2257 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1726,6 +1726,12 @@ "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", "dev": true }, + "mustache": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/mustache/-/mustache-3.0.1.tgz", + "integrity": "sha512-jFI/4UVRsRYdUbuDTKT7KzfOp7FiD5WzYmmwNwXyUVypC0xjoTL78Fqc0jHUPIvvGD+6DQSPHIt1NE7D1ArsqA==", + "dev": true + }, "mute-stream": { "version": "0.0.7", "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz",