fix(web): key tip constraint logic requires .bottom CSS #6784

jahorton · 2022-06-16T03:39:08Z

Fixes #6783.

Key tips should properly remain within the OSK's bounds again after this fix.

As this is a top-row key preview, note that its base key is completely obscured by the preview.

This fixes a regression introduced in #6383. (Gotta test the top row without predictive-text!)

User Testing

These tests are derived from those of #6383, but they're a bit more precise and targeted than before.

SUITE_1: no predictive text

Test environments

In-app groups:

GROUP_IPHONE_13_APP - use the Keyman app with a (simulated or real) iPhone 13.
GROUP_IPHONE_SE_2_APP - use the Keyman app with a (simulated or real) iPhone SE 2nd gen.
GROUP_ANDROID_APP - use the Keyman app with a (simulated or real) Android device - your pick.

In-browser groups:

GROUP_IPHONE_13_BROWSER - use Safari on a (simulated or real) iPhone 13.
GROUP_IPHONE_SE_2_BROWSER - use Safari on a (simulated or real) iPhone SE 2nd gen.
GROUP_ANDROID_BROWSER - use Chrome on a (simulated or real) Android device - your pick.
- Use the "Test unminified Keymanweb" Web test page.

Tests

TEST_TAMIL_TOP_PREVIEW: Using the Tamil99 keyboard (ekwtamil99uni), verify that top row keypresses do not result in a cropped key preview.
- The result may not be super-pretty, but the key thing is that it's uncropped.
- There may be a little "stub" at the bottom of the preview; that's okay.
TEST_TAMIL_NORMAL_PREVIEW: Using the Tamil99 keyboard (ekwtamil99uni), verify that keypresses in the second to last row display nicely.
- If there is a noticeable gap between the key preview's bottom and the bottom of its corresponding key, FAIL this test.
- If the bottom border appears a bit large, but there is no gap, do not fail this test. (Yay for subpixel-precision effects...)
TEST_CHEROKEE_TOP_PREVIEW: Using the Cherokee Nation (SIL) keyboard (sil_cherokee_nation), verify that top row keypresses do not result in a cropped key preview.
TEST_CHEROKEE_NORMAL_PREVIEW: Using the Cherokee Nation (SIL) keyboard (sil_cherokee_nation), verify that keypresses in the second to last row display nicely.

SUITE_2: predictive text active

This is only written as a separate suite because the predictive-text test can't be done with the (same) in-browser Web test page.

Test environments

GROUP_IPHONE_13_APP - use the Keyman app with a (simulated or real) iPhone 13.
GROUP_IPHONE_SE_2_APP - use the Keyman app with a (simulated or real) iPhone SE 2nd gen.
GROUP_ANDROID_APP - use the Keyman app with a (simulated or real) Android device - your pick.

Test

TEST_EUROLATIN_TOP_PREVIEW: Using the default SIL EuroLatin keyboard, with predictive text active, verify that top row keypresses result in a normal key preview.
- If there is a noticeable gap between the key preview's bottom and the bottom of its corresponding key, FAIL this test.
- If the bottom border appears a bit large, but there is no gap, do not fail this test. (Yay for subpixel-precision effects...)

keymanapp-test-bot · 2022-06-16T03:39:29Z

User Test Results

Test specification and instructions

✅ SUITE_1: no predictive text

24 tests in 6 groups PASSED

✅ GROUP_IPHONE_13_APP: - use the Keyman app with a (simulated or real) iPhone 13.
4 tests PASSED
- ✅ TEST_TAMIL_TOP_PREVIEW (PASSED): Tested Keyman 16.0.13 alpha-6784 build in iOS 15.0 / iPhone 13 along with Tamil99 Keyboard (ekwtami199uni), and it seems that the key preview is uncropped. (notes)
- ✅ TEST_TAMIL_NORMAL_PREVIEW (PASSED): Retested with the updated Keyman 16.0.13-alpha build in iOS 15.0 / iPhone 13 Simulator along with Tamil99 Keyboard and it seems to be working fine. (notes)
- ✅ TEST_CHEROKEE_TOP_PREVIEW (PASSED): Tested Keyman 16.0.13 alpha-6784 build in iOS 15.0 / iPhone 13 along with Cherokee Nation (SIL) Keyboard (sil_cherokee_nation) and it seems that the key preview is uncropped. (notes)
- ✅ TEST_CHEROKEE_NORMAL_PREVIEW (PASSED): Retested with the updated Keyman 16.0.13-alpha build in iOS 15.0 / iPhone 13 Simulator along with Cherokee Keyboard and it seems to be working fine. (notes)
✅ GROUP_IPHONE_SE_2_APP: - use the Keyman app with a (simulated or real) iPhone SE 2nd gen.
4 tests PASSED
- ✅ TEST_TAMIL_TOP_PREVIEW (PASSED): Tested Keyman 16.0.13 alpha-6784 in iOS 15.0 / iPhone 2nd Gen Simulator along with Tamil99 keyboard and it seems to be working as expected. (notes)
- ✅ TEST_TAMIL_NORMAL_PREVIEW (PASSED): Retested this in iOS 14.4 / iPhone SE 2nd gen Simulator and it is working as expected. (notes)
- ✅ TEST_CHEROKEE_TOP_PREVIEW (PASSED): Tested Keyman 16.0.13 alpha-6784 in iOS 15.0 / iPhone 2nd Gen Simulator along with Cherokee_SIL keyboard and it seems to be working as expected. (notes)
- ✅ TEST_CHEROKEE_NORMAL_PREVIEW (PASSED): Retested this in iOS 14.4 / iPhone SE 2nd gen Simulator and it is working as expected. (notes)
✅ GROUP_ANDROID_APP: - use the Keyman app with a (simulated or real) Android device - your pick.
4 tests PASSED
- ✅ TEST_TAMIL_TOP_PREVIEW (PASSED): Tested Keyman 16.0.13 alpha-6784 build in API 29 / Android 10 Simulator along with Tamil99 Keyboard (ekwtami199uni), and it seems that the key preview is uncropped. (notes)
- ✅ TEST_TAMIL_NORMAL_PREVIEW (PASSED): There is no gap between the Key preview's bottm and the bottom of its corresponding key. (notes)
- ✅ TEST_CHEROKEE_TOP_PREVIEW (PASSED): Tested Keyman 16.0.13 alpha-6784 build in API 29 / Android 10 Simulator along with Cherokee Nation (SIL) Keyboard (sil_cherokee_nation) and it seems that the key preview is uncropped. (notes)
- ✅ TEST_CHEROKEE_NORMAL_PREVIEW (PASSED): There is not gap between the Key preview's bottom and the bottom of its corresponding key. (notes)
✅ GROUP_IPHONE_13_BROWSER: - use Safari on a (simulated or real) iPhone 13.
4 tests PASSED
- ✅ TEST_TAMIL_TOP_PREVIEW (PASSED): Tested this in iOS 15.0 / iPhone 13 Simulator in Test unminified Keymanweb" Web test page using Safari Browser and it is working as expected.
- ✅ TEST_TAMIL_NORMAL_PREVIEW (PASSED): Tested this in iOS 15.0 / iPhone 13 Simulator in Test unminified Keymanweb" Web test page using Safari Browser and it is working as expected. (notes)
- ✅ TEST_CHEROKEE_TOP_PREVIEW (PASSED): Tested this in iOS 15.0 / iPhone 13 Simulator in Test unminified Keymanweb" Web test page using Safari Browser and it is working as expected.
- ✅ TEST_CHEROKEE_NORMAL_PREVIEW (PASSED): Tested this in iOS 15.0 / iPhone 13 Simulator in Test unminified Keymanweb" Web test page using Safari Browser and it is working as expected. (notes)
✅ GROUP_IPHONE_SE_2_BROWSER: - use Safari on a (simulated or real) iPhone SE 2nd gen.
4 tests PASSED
- ✅ TEST_TAMIL_TOP_PREVIEW (PASSED): Tested this in iOS 15.0 / iPhone SE 2nd gen Simulator in Test unminified Keymanweb" Web test page using Safari Browser and it is working as expected.
- ✅ TEST_TAMIL_NORMAL_PREVIEW (PASSED): Tested this in iOS 15.0 / iPhone SE 2nd gen Simulator in Test unminified Keymanweb" Web test page using Safari Browser and it is working as expected. (notes)
- ✅ TEST_CHEROKEE_TOP_PREVIEW (PASSED): Tested this in iOS 15.0 / iPhone SE 2nd gen Simulator in Test unminified Keymanweb" Web test page using Safari Browser and it is working as expected.
- ✅ TEST_CHEROKEE_NORMAL_PREVIEW (PASSED): Tested this in iOS 15.0 / iPhone SE 2nd gen Simulator in Test unminified Keymanweb" Web test page using Safari Browser and it is working as expected. (notes)
✅ GROUP_ANDROID_BROWSER: - use Chrome on a (simulated or real) Android device - your pick.
4 tests PASSED
- ✅ TEST_TAMIL_TOP_PREVIEW (PASSED): Retested this in API 29 / Android 10 Simulator in Test unminified Keymanweb" Web test page using Chrome Browser and it is working as expected.
- ✅ TEST_TAMIL_NORMAL_PREVIEW (PASSED): Retested this in API 29 / Android 10 Simulator in Test unminified Keymanweb" Web test page using Chrome Browser and it is working as expected. (notes)
- ✅ TEST_CHEROKEE_TOP_PREVIEW (PASSED): Retested this in API 29 / Android 10 Simulator in Test unminified Keymanweb" Web test page using Chrome Browser and it is working as expected.
- ✅ TEST_CHEROKEE_NORMAL_PREVIEW (PASSED): Retested this in API 29 / Android 10 Simulator in Test unminified Keymanweb" Web test page using Chrome Browser and it is working as expected. (notes)

✅ SUITE_2: predictive text active

3 tests in 3 groups PASSED

✅ GROUP_IPHONE_13_APP: - use the Keyman app with a (simulated or real) iPhone 13.
1 tests PASSED
- ✅ TEST_EUROLATIN_TOP_PREVIEW (PASSED): Tested in Keyman 16.0.13 alpha build in iOS 15.0 / iPhone 13 Simulator and it is working as expected.
✅ GROUP_IPHONE_SE_2_APP: - use the Keyman app with a (simulated or real) iPhone SE 2nd gen.
1 tests PASSED
- ✅ TEST_EUROLATIN_TOP_PREVIEW (PASSED): Tested in Keyman 16.0.13 alpha build in iOS 15.0 / SE 2nd gen Simulator and it is working as expected.
✅ GROUP_ANDROID_APP: - use the Keyman app with a (simulated or real) Android device - your pick.
1 tests PASSED
- ✅ TEST_EUROLATIN_TOP_PREVIEW (PASSED): Tested in Keyman 16.0.13 alpha test-6784 in API 29 / Android 10 Simulator and it seems to be working as expected. (notes)

Test Artifacts

Android
iOS
- Keyman for iOS (simulator image)
- FirstVoices Keyboards for iOS (simulator image)
- TestFlight internal PR build version - 16.0.13 (0.6784.6432)
Web
- KeymanWeb Test Home
Windows
- Keyman for Windows
- FirstVoices Keyboards for Windows

jahorton · 2022-06-16T03:47:14Z

web/source/osk/browser/keytip.ts

@@ -78,7 +78,7 @@ namespace com.keyman.osk.browser {
        let canvasWidth = xWidth + Math.ceil(xWidth * 0.3) * 2;
        let canvasHeight = Math.ceil(2.3 * xHeight) + (ySubPixelPadding); //

-        kts.top = Math.floor(y - canvasHeight) + 'px';
+        kts.bottom = Math.floor(keyman.osk.computedHeight - y) + 'px';


Why does this fix the issue?

keyman/web/source/osk/browser/keytip.ts

Lines 116 to 119 in 14b1485

let cs = getComputedStyle(this.element);

let oskHeight = keyman.osk.computedHeight;

let bottomY = parseFloat(cs.bottom);

let tipHeight = parseFloat(cs.height);

Line 118 was broken - as it turns out, cs.bottom == 'auto' in our currently-released version. That doesn't convert nicely to a number... causing bottomY == NaN. That introduces a lovely set of issues, as you can imagine.

keyman/web/source/osk/browser/keytip.ts

Lines 128 to 129 in 14b1485

if(this.constrain && tipHeight + bottomY > oskHeight) {

const delta = tipHeight + bottomY - oskHeight;

The problem is, we need bottomY for our calculations that constrain the keytip within bounds. So, the best answer: flip from a .top-based approach to a .bottom-based one.

After a bit of analysis, I determined y to be "the distance of the key tip's bottom from the top of its parent element." Thing is, for CSS .bottom use, we need that to be "... from the bottom of its parent element." Fortunately, a simple calc.

Before, for use of .top, it needed "the distance of the key tip's top...".

mcdurdin

LGTM

bharanidharanj · 2022-06-16T07:38:49Z

SUITE_1: no predictive text

GROUP_IPHONE_13_APP: - use the Keyman app with a (simulated or real) iPhone 13.

TEST_TAMIL_TOP_PREVIEW (PASSED): Tested Keyman 16.0.13 alpha-6784 build in iOS 15.0 / iPhone 13 along with Tamil99 Keyboard (ekwtami199uni), and it seems that the key preview is uncropped.

TEST_TAMIL_NORMAL_PREVIEW (FAILED): There is a noticeable gap (in the bottom layer) between the key preview's bottom and the bottom of its corresponding key. Please, see the attached Screenshot.

TEST_CHEROKEE_TOP_PREVIEW (PASSED): Tested Keyman 16.0.13 alpha-6784 build in iOS 15.0 / iPhone 13 along with Cherokee Nation (SIL) Keyboard (sil_cherokee_nation) and it seems that the key preview is uncropped.

TEST_CHEROKEE_NORMAL_PREVIEW (FAILED): Keypresses in the Second and last last row would display the Key preview nicely, but there is a gap between the Key Preview botton and the bottom of its corresponding key. Seems to be an issue.

jahorton · 2022-06-16T08:03:04Z

... wherein we gain yet another case of cleanup-mode "oh, I can just remove this one extra line I threw in during development" turning out to be a "bad idea."

You can see that the line originally existed there before #6383 in its changelog; turns out there actually was a reason for it.

SUITE_1
GROUP_IPHONE_13_APP
TEST_TAMIL_NORMAL_PREVIEW OPEN
TEST_CHEROKEE_NORMAL_PREVIEW OPEN

bharanidharanj · 2022-06-16T08:21:55Z

SUITE_1: no predictive text

GROUP_ANDROID_APP: - use the Keyman app with a (simulated or real) Android device - your pick.

TEST_TAMIL_TOP_PREVIEW (PASSED): Tested Keyman 16.0.13 alpha-6784 build in API 29 / Android 10 Simulator along with Tamil99 Keyboard (ekwtami199uni), and it seems that the key preview is uncropped.

TEST_TAMIL_NORMAL_PREVIEW (PASSED): There is no gap between the Key preview's bottm and the bottom of its corresponding key.

TEST_CHEROKEE_TOP_PREVIEW (PASSED): Tested Keyman 16.0.13 alpha-6784 build in API 29 / Android 10 Simulator along with Cherokee Nation (SIL) Keyboard (sil_cherokee_nation) and it seems that the key preview is uncropped.

TEST_CHEROKEE_NORMAL_PREVIEW (PASSED): There is not gap between the Key preview's bottom and the bottom of its corresponding key.

bharanidharanj · 2022-06-16T11:42:28Z

SUITE_1: no predictive text

GROUP_IPHONE_SE_2_APP: - use the Keyman app with a (simulated or real) iPhone SE 2nd gen.

TEST_TAMIL_TOP_PREVIEW (PASSED): Tested Keyman 16.0.13 alpha-6784 in iOS 15.0 / iPhone 2nd Gen Simulator along with Tamil99 keyboard and it seems to be working as expected.

TEST_TAMIL_NORMAL_PREVIEW (PASSED): Seems to be working as expected.

TEST_CHEROKEE_TOP_PREVIEW (PASSED): Tested Keyman 16.0.13 alpha-6784 in iOS 15.0 / iPhone 2nd Gen Simulator along with Cherokee_SIL keyboard and it seems to be working as expected.

TEST_CHEROKEE_NORMAL_PREVIEW (PASSED): Seems to be working as expected. However, I noticed that the bottom of the Preview Key is not in touch with the bottom of the corresponding key (?)

bharanidharanj · 2022-06-16T12:06:53Z

SUITE_2: predictive text active

GROUP_ANDROID_APP: - use the Keyman app with a (simulated or real) Android device - your pick.

TEST_EUROLATIN_TOP_PREVIEW (PASSED): Tested in Keyman 16.0.13 alpha test-6784 in API 29 / Android 10 Simulator and it seems to be working as expected.

bharanidharanj · 2022-06-16T13:03:10Z

SUITE_1: no predictive text

GROUP_IPHONE_13_APP: - use the Keyman app with a (simulated or real) iPhone 13.

TEST_TAMIL_NORMAL_PREVIEW (PASSED): Retested with the updated Keyman 16.0.13-alpha build in iOS 15.0 / iPhone 13 Simulator along with Tamil99 Keyboard and it seems to be working fine.

TEST_CHEROKEE_NORMAL_PREVIEW (PASSED): Retested with the updated Keyman 16.0.13-alpha build in iOS 15.0 / iPhone 13 Simulator along with Cherokee Keyboard and it seems to be working fine.

bharanidharanj · 2022-06-16T13:39:22Z

SUITE_1: no predictive text

GROUP_IPHONE_13_BROWSER: - use Safari on a (simulated or real) iPhone 13.

TEST_TAMIL_TOP_PREVIEW (PASSED): Tested this in iOS 15.0 / iPhone 13 Simulator in Test unminified Keymanweb" Web test page using Safari Browser and it is working as expected.
TEST_TAMIL_NORMAL_PREVIEW (PASSED): Tested this in iOS 15.0 / iPhone 13 Simulator in Test unminified Keymanweb" Web test page using Safari Browser and it is working as expected.

TEST_CHEROKEE_TOP_PREVIEW (PASSED): Tested this in iOS 15.0 / iPhone 13 Simulator in Test unminified Keymanweb" Web test page using Safari Browser and it is working as expected.
TEST_CHEROKEE_NORMAL_PREVIEW (PASSED): Tested this in iOS 15.0 / iPhone 13 Simulator in Test unminified Keymanweb" Web test page using Safari Browser and it is working as expected.

bharanidharanj · 2022-06-16T13:52:17Z

SUITE_1: no predictive text

GROUP_IPHONE_SE_2_BROWSER: - use Safari on a (simulated or real) iPhone SE 2nd gen.

TEST_TAMIL_TOP_PREVIEW (PASSED): Tested this in iOS 15.0 / iPhone SE 2nd gen Simulator in Test unminified Keymanweb" Web test page using Safari Browser and it is working as expected.
TEST_TAMIL_NORMAL_PREVIEW (PASSED): Tested this in iOS 15.0 / iPhone SE 2nd gen Simulator in Test unminified Keymanweb" Web test page using Safari Browser and it is working as expected.

TEST_CHEROKEE_TOP_PREVIEW (PASSED): Tested this in iOS 15.0 / iPhone SE 2nd gen Simulator in Test unminified Keymanweb" Web test page using Safari Browser and it is working as expected.
TEST_CHEROKEE_NORMAL_PREVIEW (PASSED): Tested this in iOS 15.0 / iPhone SE 2nd gen Simulator in Test unminified Keymanweb" Web test page using Safari Browser and it is working as expected.

bharanidharanj · 2022-06-16T14:46:48Z

SUITE_2: predictive text active

GROUP_IPHONE_13_APP: - use the Keyman app with a (simulated or real) iPhone 13.

TEST_EUROLATIN_TOP_PREVIEW (PASSED): Tested in Keyman 16.0.13 alpha build in iOS 15.0 / iPhone 13 Simulator and it is working as expected.

GROUP_IPHONE_SE_2_APP: - use the Keyman app with a (simulated or real) iPhone SE 2nd gen.

TEST_EUROLATIN_TOP_PREVIEW (PASSED): Tested in Keyman 16.0.13 alpha build in iOS 15.0 / SE 2nd gen Simulator and it is working as expected.

bharanidharanj · 2022-06-16T15:05:54Z

SUITE_1: no predictive text

GROUP_ANDROID_BROWSER: - use Chrome on a (simulated or real) Android device - your pick.

TEST_TAMIL_TOP_PREVIEW (FAILED): Tested this in API 29 / Android 10 Simulator in Test unminified Keymanweb" Web test page using Chrome Browser and I noticed that the bottom of the Key Preview with the bottom of the corresponding key has been detached.

TEST_TAMIL_NORMAL_PREVIEW (FAILED): Tested this in API 29 / Android 10 Simulator in Test unminified Keymanweb" Web test page using Chrome Browser and I noticed that the bottom of the Key Preview with the bottom of the corresponding key has been detached.

TEST_CHEROKEE_TOP_PREVIEW (FAILED): Tested this in API 29 / Android 10 Simulator in Test unminified Keymanweb" Web test page using Chrome Browser and I noticed that the bottom of the Key Preview with the bottom of the corresponding key has been detached.

TEST_CHEROKEE_NORMAL_PREVIEW (FAILED): Tested this in API 29 / Android 10 Simulator in Test unminified Keymanweb" Web test page using Chrome Browser and I noticed that the bottom of the Key Preview with the bottom of the corresponding key has been detached.

jahorton · 2022-06-17T05:20:11Z

🤦 Silly me forgot to change up the group names for in-app vs browser tests.

Guess I'll patch that up manually...

jahorton · 2022-06-17T05:30:26Z

So... when the keytip got redone, apparently the 'cap' - the popup-part below - didn't actually get any styling in kmwosk.css, unlike the iOS version. Without it, we get an invisible one. Simple enough to fix; patch coming.

Stuff like this is why I didn't pre-build a 🍒 version; it's rougher to update a pre-built one than to just make it right on the first go.

jahorton · 2022-06-17T05:37:20Z

@keymanapp-test-bot retest SUITE_1 GROUP_ANDROID_BROWSER all

jahorton · 2022-06-17T05:41:37Z

OK... might have pulled the trigger a little too quickly on the Android key-tip bit. It definitely needs some extra styling work, so I'll need to figure out how to fix that up. Root cause was right; it's just that there's extra work beyond it that needs doing.

So, uh...

Test Results

SUITE_1: no predictive text

GROUP_ANDROID_BROWSER: - use Chrome on a (simulated or real) Android device - your pick.

TEST_TAMIL_TOP_PREVIEW (FAILED): key tip renders badly
TEST_TAMIL_NORMAL_PREVIEW (FAILED): ditto
TEST_CHEROKEE_TOP_PREVIEW (FAILED): ditto
TEST_CHEROKEE_NORMAL_PREVIEW (FAILED): ditto

jahorton · 2022-06-17T05:57:06Z

Okay, all better now.

@keymanapp-test-bot retest SUITE_1 GROUP_ANDROID_BROWSER all

bharanidharanj · 2022-06-17T07:32:28Z

SUITE_1: no predictive text

GROUP_ANDROID_BROWSER: - use Chrome on a (simulated or real) Android device - your pick.

TEST_TAMIL_TOP_PREVIEW (PASSED): Retested this in API 29 / Android 10 Simulator in Test unminified Keymanweb" Web test page using Chrome Browser and it is working as expected.
TEST_TAMIL_NORMAL_PREVIEW (PASSED): Retested this in API 29 / Android 10 Simulator in Test unminified Keymanweb" Web test page using Chrome Browser and it is working as expected.

TEST_CHEROKEE_TOP_PREVIEW (PASSED): Retested this in API 29 / Android 10 Simulator in Test unminified Keymanweb" Web test page using Chrome Browser and it is working as expected.
TEST_CHEROKEE_NORMAL_PREVIEW (PASSED): Retested this in API 29 / Android 10 Simulator in Test unminified Keymanweb" Web test page using Chrome Browser and it is working as expected.

jahorton · 2022-06-17T08:20:48Z

The 🍒 is up at #6795.

mcdurdin · 2022-06-17T21:21:58Z

I'm not 100% sure of the test results. #6784 (comment) shows "PASSED" with screenshots that look clearly wrong to me, e.g. TEST_TAMIL_NORMAL_PREVIEW which has the following associated screenshot, annotated here:

I'll wait to review the #6795 until these tests are confirmed okay.

jahorton · 2022-06-20T00:43:07Z

Given @mcdurdin's note above...

SUITE_1

GROUP_IPHONE_SE_2_APP

TEST_TAMIL_NORMAL_PREVIEW: OPEN
TEST_CHEROKEE_NORMAL_PREVIEW: OPEN

They still pass on my local machine via local build, but the attached screenshots, as noted, should not have been marked as PASSing. So, we should double-check that they work properly for our testers, too. (It shouldn't be related, but note that my local tests are targeting iOS 14.4, rather than iOS 15.x.)

bharanidharanj · 2022-06-20T08:11:19Z

SUITE_1: no predictive text

GROUP_IPHONE_SE_2_APP: - use the Keyman app with a (simulated or real) iPhone SE 2nd gen.

TEST_TAMIL_NORMAL_PREVIEW (PASSED): Retested this in iOS 14.4 / iPhone SE 2nd gen Simulator and it is working as expected.

TEST_CHEROKEE_NORMAL_PREVIEW (PASSED): Retested this in iOS 14.4 / iPhone SE 2nd gen Simulator and it is working as expected.

keyman-server · 2022-06-21T18:01:48Z

Changes in this pull request will be available for download in Keyman version 16.0.16-alpha

fix(web): key tip constraint logic requires .bottom CSS

14b1485

jahorton added this to the A16S4 milestone Jun 16, 2022

jahorton requested review from ermshiperete and mcdurdin as code owners June 16, 2022 03:39

keymanapp-test-bot bot added the has-user-test label Jun 16, 2022

github-actions bot added web/ web/engine/ fix labels Jun 16, 2022

keymanapp-test-bot bot added the user-test-required User tests have not been completed label Jun 16, 2022

jahorton commented Jun 16, 2022

View reviewed changes

mcdurdin approved these changes Jun 16, 2022

View reviewed changes

fix(web): 'auto' actually mattered

774c6c2

keymanapp-test-bot bot removed the user-test-required User tests have not been completed label Jun 17, 2022

fix(web): android keytip-cap lacked styling; was invisible

79abff4

keymanapp-test-bot bot added the user-test-required User tests have not been completed label Jun 17, 2022

keymanapp-test-bot bot removed the user-test-required User tests have not been completed label Jun 17, 2022

fix(android): missed a few CSS properties

1299112

keymanapp-test-bot bot added the user-test-required User tests have not been completed label Jun 17, 2022

keymanapp-test-bot bot removed the user-test-required User tests have not been completed label Jun 17, 2022

jahorton changed the title ~~fix(web): key tip constraint logic requires .bottom CSS~~ fix(web): key tip constraint logic requires .bottom CSS 🍒 Jun 17, 2022

jahorton changed the title ~~fix(web): key tip constraint logic requires .bottom CSS 🍒~~ fix(web): key tip constraint logic requires .bottom CSS Jun 17, 2022

jahorton mentioned this pull request Jun 17, 2022

fix(web): key preview styling, positioning issues 🍒 #6795

Merged

keymanapp-test-bot bot added the user-test-required User tests have not been completed label Jun 20, 2022

keymanapp-test-bot bot removed the user-test-required User tests have not been completed label Jun 20, 2022

jahorton merged commit e99fc17 into master Jun 21, 2022

jahorton deleted the fix/web/6783-constrained-keytips branch June 21, 2022 00:37

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(web): key tip constraint logic requires .bottom CSS #6784

fix(web): key tip constraint logic requires .bottom CSS #6784

jahorton commented Jun 16, 2022 •

edited

keymanapp-test-bot bot commented Jun 16, 2022 •

edited

jahorton Jun 16, 2022 •

edited

mcdurdin left a comment

bharanidharanj commented Jun 16, 2022

jahorton commented Jun 16, 2022 •

edited

bharanidharanj commented Jun 16, 2022 •

edited

bharanidharanj commented Jun 16, 2022

bharanidharanj commented Jun 16, 2022

bharanidharanj commented Jun 16, 2022 •

edited

bharanidharanj commented Jun 16, 2022 •

edited by jahorton

bharanidharanj commented Jun 16, 2022 •

edited by jahorton

bharanidharanj commented Jun 16, 2022

bharanidharanj commented Jun 16, 2022 •

edited by jahorton

jahorton commented Jun 17, 2022

jahorton commented Jun 17, 2022 •

edited

jahorton commented Jun 17, 2022

jahorton commented Jun 17, 2022 •

edited

jahorton commented Jun 17, 2022 •

edited

bharanidharanj commented Jun 17, 2022 •

edited

jahorton commented Jun 17, 2022

mcdurdin commented Jun 17, 2022 •

edited

jahorton commented Jun 20, 2022

bharanidharanj commented Jun 20, 2022

keyman-server commented Jun 21, 2022

	let cs = getComputedStyle(this.element);
	let oskHeight = keyman.osk.computedHeight;
	let bottomY = parseFloat(cs.bottom);
	let tipHeight = parseFloat(cs.height);

	if(this.constrain && tipHeight + bottomY > oskHeight) {
	const delta = tipHeight + bottomY - oskHeight;

fix(web): key tip constraint logic requires .bottom CSS #6784

fix(web): key tip constraint logic requires .bottom CSS #6784

Conversation

jahorton commented Jun 16, 2022 • edited

User Testing

SUITE_1: no predictive text

Test environments

Tests

SUITE_2: predictive text active

Test environments

Test

keymanapp-test-bot bot commented Jun 16, 2022 • edited

User Test Results

✅ SUITE_1: no predictive text

✅ SUITE_2: predictive text active

Test Artifacts

jahorton Jun 16, 2022 • edited

Choose a reason for hiding this comment

mcdurdin left a comment

Choose a reason for hiding this comment

bharanidharanj commented Jun 16, 2022

SUITE_1: no predictive text

GROUP_IPHONE_13_APP: - use the Keyman app with a (simulated or real) iPhone 13.

jahorton commented Jun 16, 2022 • edited

bharanidharanj commented Jun 16, 2022 • edited

SUITE_1: no predictive text

GROUP_ANDROID_APP: - use the Keyman app with a (simulated or real) Android device - your pick.

bharanidharanj commented Jun 16, 2022

SUITE_1: no predictive text

GROUP_IPHONE_SE_2_APP: - use the Keyman app with a (simulated or real) iPhone SE 2nd gen.

bharanidharanj commented Jun 16, 2022

SUITE_2: predictive text active

GROUP_ANDROID_APP: - use the Keyman app with a (simulated or real) Android device - your pick.

bharanidharanj commented Jun 16, 2022 • edited

SUITE_1: no predictive text

GROUP_IPHONE_13_APP: - use the Keyman app with a (simulated or real) iPhone 13.

bharanidharanj commented Jun 16, 2022 • edited by jahorton

SUITE_1: no predictive text

GROUP_IPHONE_13_BROWSER: - use Safari on a (simulated or real) iPhone 13.

bharanidharanj commented Jun 16, 2022 • edited by jahorton

SUITE_1: no predictive text

GROUP_IPHONE_SE_2_BROWSER: - use Safari on a (simulated or real) iPhone SE 2nd gen.

bharanidharanj commented Jun 16, 2022

SUITE_2: predictive text active

GROUP_IPHONE_13_APP: - use the Keyman app with a (simulated or real) iPhone 13.

GROUP_IPHONE_SE_2_APP: - use the Keyman app with a (simulated or real) iPhone SE 2nd gen.

bharanidharanj commented Jun 16, 2022 • edited by jahorton

SUITE_1: no predictive text

GROUP_ANDROID_BROWSER: - use Chrome on a (simulated or real) Android device - your pick.

jahorton commented Jun 17, 2022

jahorton commented Jun 17, 2022 • edited

jahorton commented Jun 17, 2022

jahorton commented Jun 17, 2022 • edited

Test Results

SUITE_1: no predictive text

GROUP_ANDROID_BROWSER: - use Chrome on a (simulated or real) Android device - your pick.

jahorton commented Jun 17, 2022 • edited

bharanidharanj commented Jun 17, 2022 • edited

SUITE_1: no predictive text

GROUP_ANDROID_BROWSER: - use Chrome on a (simulated or real) Android device - your pick.

jahorton commented Jun 17, 2022

mcdurdin commented Jun 17, 2022 • edited

jahorton commented Jun 20, 2022

bharanidharanj commented Jun 20, 2022

SUITE_1: no predictive text

GROUP_IPHONE_SE_2_APP: - use the Keyman app with a (simulated or real) iPhone SE 2nd gen.

keyman-server commented Jun 21, 2022

jahorton commented Jun 16, 2022 •

edited

keymanapp-test-bot bot commented Jun 16, 2022 •

edited

jahorton Jun 16, 2022 •

edited

jahorton commented Jun 16, 2022 •

edited

bharanidharanj commented Jun 16, 2022 •

edited

bharanidharanj commented Jun 16, 2022 •

edited

bharanidharanj commented Jun 16, 2022 •

edited by jahorton

bharanidharanj commented Jun 16, 2022 •

edited by jahorton

bharanidharanj commented Jun 16, 2022 •

edited by jahorton

jahorton commented Jun 17, 2022 •

edited

jahorton commented Jun 17, 2022 •

edited

jahorton commented Jun 17, 2022 •

edited

bharanidharanj commented Jun 17, 2022 •

edited

mcdurdin commented Jun 17, 2022 •

edited