Bug 1597544 [wpt PR 20306] - HTML: Add a tentative test for input ele…

…ment's baseline alignment, a=testonly Automatic update from web-platform-tests HTML: Add a tentative test for input element's baseline alignment See whatwg/html#5065 whatwg/html#4840 -- wpt-commits: d472ae32e215c33d1a85eade6bfd8130c4caf491 wpt-pr: 20306 UltraBlame original commit: ee1c56806ccb2576b1110ab46799ae9a8ff2baf3
marco-c · Feb 12, 2020 · 0939fc4 · 0939fc4
1 parent 722ff5b
commit 0939fc4
Showing 1 changed file with 225 additions and 0 deletions.
diff --git a/.../web-platform/tests/html/rendering/widgets/baseline-alignment-and-overflow.tentative.html b/.../web-platform/tests/html/rendering/widgets/baseline-alignment-and-overflow.tentative.html
@@ -0,0 +1,225 @@
+<!DOCTYPE html>
+<title>HTML: widgets' baseline alignment and interaction with 'overflow'</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<style>
+.test {
+  border-collapse: collapse;
+  font-size: 10px;
+}
+.test td {
+  border: none;
+  padding: 0;
+  margin:0;
+  outline: 1px solid silver;
+}
+
+.test td > input,
+.ref td > .fake-input-text,
+.ref td > .inline-block,
+.ref td > img,
+.ref td > button {
+  font: inherit;
+  height: 60px;
+  width: 60px;
+  padding: 10px;
+  box-sizing: border-box;
+  margin: 10px 0;
+  /* Note: a border is not specified because that would imply 'appearance: none' for some widgets */
+}
+.ref button img {
+  height: 100%;
+  width: 100%;
+  display: block;
+}
+/* Use inline-grid instead of inline-block here to more easily center the text inside */
+.ref .fake-input-text {
+  display: inline-grid;
+  border: 2px solid; /* 2px matches UA default style */
+  align-items: center;
+}
+.ref .inline-block {
+  display: inline-block;
+}
+.ref td > img.no-margin-bottom {
+  margin-bottom: 0;
+}
+[style*="appearance: none;"] {
+  -webkit-appearance: none; /* TODO(zcorpan) remove this when unprefixed appearance is supported */
+}
+</style>
+<div id="log"></div>
+<h2>refs</h2>
+
+
+
+
+<table class="test ref">
+  <tr class="ref-text-input-like"><td><span>ref-text-input-like</span> <span class=fake-input-text>x</span>
+  <tr class="ref-checkbox-input-appearance-auto-like"><td><span>ref-checkbox-input-appearance-auto-like</span> <img class=no-margin-bottom src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAMCAIAAAD3UuoiAAAAGklEQVQoz2Nk%2BP%2BfgRqAiYFKYNSgUYOGp0EA%2BQMCFrJdTgsAAAAASUVORK5CYII%3D">
+  <tr class="ref-color-input-like"><td><span>ref-color-input-like</span> <button><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAMCAIAAAD3UuoiAAAAGklEQVQoz2Nk%2BP%2BfgRqAiYFKYNSgUYOGp0EA%2BQMCFrJdTgsAAAAASUVORK5CYII%3D"></button>
+  <tr class="ref-file-input-like"><td><span>ref-file-input-like</span> <span class=inline-block><button>x</button></span>
+  <tr class="ref-image-input-showing-alt-overflow-visible-like"><td><span>ref-image-input-showing-alt-overflow-visible-like</span> <span class=inline-block>x</span>
+  <tr class="ref-image-input-showing-image-like"><td><span>ref-image-input-showing-image-like</span> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAMCAIAAAD3UuoiAAAAGklEQVQoz2Nk%2BP%2BfgRqAiYFKYNSgUYOGp0EA%2BQMCFrJdTgsAAAAASUVORK5CYII%3D">
+</table>
+<h2>template table</h2>
+
+
+
+<table id="template-table">
+  <tr><td><span>text</span> <input type=text value=x></td></tr>
+  <tr><td><span>search</span> <input type=search value=x></td></tr>
+  <tr><td><span>tel</span> <input type=tel value=x></td></tr>
+  <tr><td><span>url</span> <input type=url value="data:,x"></td></tr>
+  <tr><td><span>email</span> <input type=email value=x></td></tr>
+  <tr><td><span>password</span> <input type=password value=x></td></tr>
+  <tr><td><span>date</span> <input type=date value="2020-01-01"></td></tr>
+  <tr><td><span>month</span> <input type=month value="2020-01"></td></tr>
+  <tr><td><span>week</span> <input type=week value="2020-W01"></td></tr>
+  <tr><td><span>time</span> <input type=time value="00:00"></td></tr>
+  <tr><td><span>datetime-local</span> <input type=datetime-local value="2020-01-01T00:00"></td></tr>
+  <tr><td><span>number</span> <input type=number value=0></td></tr>
+  <tr><td><span>range</span> <input type=range></td></tr>
+  <tr><td><span>color</span> <input type=color value=#000000></td></tr>
+  <tr><td><span>checkbox</span> <input type=checkbox></td></tr>
+  <tr><td><span>radio</span> <input type=radio></td></tr>
+  <tr><td><span>file</span> <input type=file></td></tr>
+  <tr><td><span>submit</span> <input type=submit value=x></td></tr>
+  <tr><td><span>image</span> <input type=image src="data:,broken" alt="x"></td></tr>
+  <tr><td><span>image-with-src</span> <input type=image src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAMCAIAAAD3UuoiAAAAGklEQVQoz2Nk%2BP%2BfgRqAiYFKYNSgUYOGp0EA%2BQMCFrJdTgsAAAAASUVORK5CYII%3D" alt="x"></td></tr>
+  <tr><td><span>reset</span> <input type=reset value=x></td></tr>
+  <tr><td><span>button</span> <input type=button value=x></td></tr>
+</table>
+<h2>tests</h2>
+
+
+
+<table class="test" id="test-table"><tbody></tbody></table>
+<script>
+  "use strict";
+
+  promise_setup(async () => {
+    const templateTable = document.querySelector('#template-table');
+    const testTBody = document.querySelector('#test-table tbody');
+
+    const templateRows = templateTable.querySelectorAll('tr');
+    for (const templateRow of templateRows) {
+      for (const appearanceValue of ["auto", "none"]) {
+        for (const overflowValue of ['visible', 'hidden', 'scroll']) {
+          const clonedRow = templateRow.cloneNode(true);
+          clonedRow.querySelector('input').setAttribute('style', `overflow: ${overflowValue}; appearance: ${appearanceValue};`);
+          testTBody.append(clonedRow);
+        }
+      }
+    }
+
+    // wait for images to load
+    await new Promise(resolve => window.onload = e => resolve());
+    for (const img of document.images) {
+      assert_precondition(img.complete); // either error state or loaded
+    }
+
+    // get layout info from refs
+    const refTextInputLikeOffsetTop = document.querySelector('.ref-text-input-like span').offsetTop;
+    const refCheckboxInputAppearanceAutoLikeOffsetTop = document.querySelector('.ref-checkbox-input-appearance-auto-like span').offsetTop;
+    const refColorInputLikeOffsetTop = document.querySelector('.ref-color-input-like span').offsetTop;
+    const refFileInputLikeOffsetTop = document.querySelector('.ref-file-input-like span').offsetTop;
+    const refImageInputShowingAltOverflowVisibleLikeOffsetTop = document.querySelector('.ref-image-input-showing-alt-overflow-visible-like span').offsetTop;
+    const refImageInputShowingImageLikeOffsetTop = document.querySelector('.ref-image-input-showing-image-like span').offsetTop;
+
+    function expectedOffsetTop(input) {
+      // TODO(zcorpan) https://github.com/whatwg/html/issues/5065
+      // for now this is intended to match Firefox
+      const style = input.getAttribute('style');
+      const src = input.getAttribute('src');
+      switch (input.type) {
+        case 'file':
+          return refFileInputLikeOffsetTop;
+        case 'range':
+          return refImageInputShowingImageLikeOffsetTop;
+        case 'color':
+          return refColorInputLikeOffsetTop;
+        case 'checkbox':
+        case 'radio':
+          return (style.includes('appearance: none;')) ? refImageInputShowingImageLikeOffsetTop : refCheckboxInputAppearanceAutoLikeOffsetTop;
+        case 'image':
+          return (src === 'data:,broken' && style.includes('overflow: visible;')) ? refImageInputShowingAltOverflowVisibleLikeOffsetTop : refImageInputShowingImageLikeOffsetTop;
+        default:
+          return refTextInputLikeOffsetTop;
+      }
+    }
+
+    function testName(markup) {
+      return markup.replace(/data:image\/png[^"]+/, 'data:(png)');
+    }
+
+    for (const row of testTBody.children) {
+      const input = row.firstChild.lastElementChild;
+      const allowedDelta = 3;
+      // This is not using test() because promise_setup() only allows promise_test().
+      promise_test(async () => {
+        assert_precondition(input.type === input.getAttribute('type'), 'input type should be supported')
+        const offsetTopActual = row.firstChild.firstChild.offsetTop;
+        assert_approx_equals(offsetTopActual, expectedOffsetTop(input), allowedDelta, '<span>.offsetTop');
+      }, testName(input.outerHTML));
+    }
+  });
+</script>