[fiddle] Fix display of text only fiddles.
Also add Gold test to avoid regressing.
Change-Id: I8bf07bc6325c86d21bc59eba26f9e300c7f51570
Reviewed-on: https://skia-review.googlesource.com/c/buildbot/+/324079
Reviewed-by: Joe Gregorio <jcgregorio@google.com>
Commit-Queue: Joe Gregorio <jcgregorio@google.com>
diff --git a/fiddlek/modules/fiddle-sk/fiddle-sk-demo.html b/fiddlek/modules/fiddle-sk/fiddle-sk-demo.html
index e7e23f1..6214c93 100644
--- a/fiddlek/modules/fiddle-sk/fiddle-sk-demo.html
+++ b/fiddlek/modules/fiddle-sk/fiddle-sk-demo.html
@@ -23,6 +23,7 @@
<button id=mode_after_run_success>Run Success</button>
<button id=mode_animation>Animation</button>
<button id=mode_basic>Basic + Embed</button>
+ <button id=mode_text>Text Only</button>
</div>
<div id=mode_complete>
<!-- Puppeteer lacks a wait to wait on events, so we stuff a <pre> tag in
diff --git a/fiddlek/modules/fiddle-sk/fiddle-sk-demo.ts b/fiddlek/modules/fiddle-sk/fiddle-sk-demo.ts
index cecc73b..aa6dabe 100644
--- a/fiddlek/modules/fiddle-sk/fiddle-sk-demo.ts
+++ b/fiddlek/modules/fiddle-sk/fiddle-sk-demo.ts
@@ -349,5 +349,64 @@
fiddle.querySelector('img.cpu')!.addEventListener('load', modeComplete);
});
+
+document.querySelector('#mode_text')!.addEventListener('click', () => {
+ beforeMode();
+ fiddle.config = {
+ display_options: false,
+ embedded: false,
+ cpu_embedded: true,
+ gpu_embedded: true,
+ options_open: true,
+ basic_mode: false,
+ domain: 'https://fiddle.skia.org',
+ bug_link: true,
+ sources: [1, 2, 3, 4, 5, 6],
+ loop: true,
+ play: true,
+ };
+
+ fiddle.options = {
+ textOnly: true,
+ srgb: false,
+ f16: false,
+ width: 128,
+ height: 128,
+ animated: false,
+ duration: 5,
+ offscreen: true,
+ offscreen_width: 256,
+ offscreen_height: 256,
+ offscreen_sample_count: 1,
+ offscreen_texturable: false,
+ offscreen_mipmap: false,
+ source: 1,
+ source_mipmap: true,
+ };
+
+ fiddle.runResults = {
+ compile_errors: [],
+ runtime_error: '',
+ fiddleHash: 'b4c2c1465df5c54c953b1889bd3c47e7',
+ text: `void assert(bool cond) {
+ SkDebugf("%d\n", cond);
+ }
+
+ void draw(SkCanvas* canvas) {
+ SkRRect r =
+ SkRRect::MakeRectXY(SkRect::MakeLTRB(421.5, 16, 526.5, 64), 24, 24);
+ assert(!r.isComplex());
+ SkMatrix matrix;
+ matrix.setScaleTranslate(1.0102191, 1.0102191, -2.4219234, 2.98397303);
+ SkRRect transformed;
+ r.transform(matrix, &transformed);
+ assert(!transformed.isComplex());
+
+ }`,
+ };
+ fiddle.querySelector('test-src-sk')!.addEventListener('change', modeComplete);
+});
+
+
document.querySelector<HTMLButtonElement>('#mode_start')!.click();
document.querySelector<ThemeChooserSk>('theme-chooser-sk')!.darkmode = true;
diff --git a/fiddlek/modules/fiddle-sk/fiddle-sk.ts b/fiddlek/modules/fiddle-sk/fiddle-sk.ts
index f3503c4..b8dbd57 100644
--- a/fiddlek/modules/fiddle-sk/fiddle-sk.ts
+++ b/fiddlek/modules/fiddle-sk/fiddle-sk.ts
@@ -361,7 +361,7 @@
<h2 ?hidden=${ele._config.embedded}>Output</h2>
<div class="textoutput">
- <test-src-sk src=${ele.textURL()}></test-src-sk>
+ <test-src-sk .src=${ele.textURL()}></test-src-sk>
</div>
`;
};
@@ -475,8 +475,6 @@
</select>
</div>
</div>
-
- ${FiddleSk.textOnlyResults(ele)} ${FiddleSk.runDetails(ele)}
`;
};
@@ -504,7 +502,15 @@
<textarea-numbers-sk .value=${ele._runResults.text}></textarea-numbers-sk>
- ${FiddleSk.actions(ele)} ${FiddleSk.errors(ele)} ${FiddleSk.results(ele)}
+ ${FiddleSk.actions(ele)}
+
+ ${FiddleSk.errors(ele)}
+
+ ${FiddleSk.results(ele)}
+
+ ${FiddleSk.textOnlyResults(ele)}
+
+ ${FiddleSk.runDetails(ele)}
`;
connectedCallback(): void {
diff --git a/fiddlek/modules/fiddle-sk/fiddle-sk_puppeteer_test.ts b/fiddlek/modules/fiddle-sk/fiddle-sk_puppeteer_test.ts
index 5ac033e..0c82f14 100644
--- a/fiddlek/modules/fiddle-sk/fiddle-sk_puppeteer_test.ts
+++ b/fiddlek/modules/fiddle-sk/fiddle-sk_puppeteer_test.ts
@@ -45,5 +45,10 @@
await testBed.page.waitForSelector('#mode_complete pre');
await takeScreenshot(testBed.page, 'fiddle', 'mode_basic');
});
+ it('correctly displays text only results', async () => {
+ await testBed.page.click('#mode_text');
+ await testBed.page.waitForSelector('#mode_complete pre');
+ await takeScreenshot(testBed.page, 'fiddle', 'mode_text');
+ });
});
});
diff --git a/fiddlek/modules/test-src-sk/test-src-sk.ts b/fiddlek/modules/test-src-sk/test-src-sk.ts
index 74d962c..7c77984 100644
--- a/fiddlek/modules/test-src-sk/test-src-sk.ts
+++ b/fiddlek/modules/test-src-sk/test-src-sk.ts
@@ -34,6 +34,9 @@
}
set src(val: string) {
+ if (val === '') {
+ return;
+ }
this._src = val;
fetch(val).then((resp) => {
if (!resp.ok) {
