LCP and CLS diagnostics scoring color should match metric scoring

#### Provide the steps to reproduce
1. Run LH on https://onepropertee.com/

LH Run Parameters:
--chrome-flags='--headless --no-sandbox'
--emulated-form-factor=mobile

#### What is the current behavior?
The Reported Last Contentful Paint is slow, even if the identified LCP is loaded immediately. The diagnostics even reports our LCP in Gray, which means it isn't an issue with our application. The filmstrip also indicate that the area identified as our LCP is already fully loaded initially.

#### What is the expected behavior?
The Reported Last Contentful Paint should be fast.

#### Environment Information
* Affected Channels: CLI
* Lighthouse 6.0.0
* Chrome version: 83
* Node.js version: v12.16.1
* Operating System: MacOS, Linux, EC2 etc.

Start by reproducing the report with Lighthouse CLI on https://onepropertee.com/ using the listed mobile emulation and Chrome flags. Compare the LCP and CLS diagnostic colors with the corresponding metric scoring; done means the diagnostic colors consistently match the metric scoring behavior.

Written by the indexing model from the issue text.