From f55268d2ccf04653e5025c35d8f7e90b61c8c7c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Emilio=20Cobos=20=C3=81lvarez?= <emilio@crisal.io>
Date: Wed, 10 Mar 2021 15:20:30 +0000
Subject: [PATCH] Fix bad assumptions in
 baseline-alignment-and-overflow.tentative.html.

The file button inherits the font-size of the file input, so that needs fixing.

Related HTML spec PR: https://github.com/whatwg/html/pull/6447

The checkbox baseline was also the other thing that was wrong, and that allows
us to remove the sketchy allowedDelta.

Differential Revision: https://phabricator.services.mozilla.com/D107230

bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1696437
gecko-commit: c45afb640afd776a36a4ec19fe31c49269f31642
gecko-reviewers: mstange
---
 ...line-alignment-and-overflow.tentative.html | 28 +++++++++++++------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/html/rendering/widgets/baseline-alignment-and-overflow.tentative.html b/html/rendering/widgets/baseline-alignment-and-overflow.tentative.html
index 5f677b5f0f6df7..45ac762bd181a7 100644
--- a/html/rendering/widgets/baseline-alignment-and-overflow.tentative.html
+++ b/html/rendering/widgets/baseline-alignment-and-overflow.tentative.html
@@ -39,8 +39,10 @@
 
 <input type=checkbox> with 'appearance: auto'
 <input type=radio> with 'appearance: auto'
-   At the border-box edge. (Since baseline at border-box edge isn't a behavior CSS has normally, we
-   fake it in the references with the 'no-margin-bottom' class.)
+   At the bottom of the content-box edge (and whether there's a border depends
+   on the platform).
+
+   This is not usually how CSS works so we fake it with a negative margin-bottom.
 
 <input type=color>
    At the content-box edge.
@@ -85,11 +87,13 @@
   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;
@@ -99,9 +103,11 @@
 .ref .inline-block {
   display: inline-block;
 }
-.ref td > img.no-margin-bottom {
-  margin-bottom: 0;
+
+.ref-file-input-like button {
+  font-size: unset;
 }
+
 [style*="appearance: none;"] {
   -webkit-appearance: none; /* TODO(zcorpan) remove this when unprefixed appearance is supported */
 }
@@ -114,7 +120,7 @@ <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-checkbox-input-appearance-auto-like"><td><span>ref-checkbox-input-appearance-auto-like</span> <img class=auto-checkbox 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>
@@ -160,6 +166,13 @@ <h2>tests</h2>
     const templateTable = document.querySelector('#template-table');
     const testTBody = document.querySelector('#test-table tbody');
 
+    {
+      const checkboxBorder = getComputedStyle(document.querySelector("input[type=checkbox]")).borderTopWidth;
+      const checkboxLike = document.querySelector(".auto-checkbox");
+      checkboxLike.style.border = checkboxBorder + " solid";
+      checkboxLike.style.marginBottom = "-" + checkboxBorder;
+    }
+
     const templateRows = templateTable.querySelectorAll('tr');
     for (const templateRow of templateRows) {
       for (const appearanceValue of ["auto", "none"]) {
@@ -213,14 +226,11 @@ <h2>tests</h2>
 
     for (const row of testTBody.children) {
       const input = row.firstChild.lastElementChild;
-      // FIXME: This test makes assumptions about default form control styling
-      // that don't hold in all platforms.
-      const allowedDelta = 3;
       // This is not using test() because promise_setup() only allows promise_test().
       promise_test(async () => {
         assert_equals(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');
+        assert_equals(offsetTopActual, expectedOffsetTop(input), '<span>.offsetTop');
       }, testName(input.outerHTML));
     }
   });