[Affected versions]: - Firefox 52.8.1 ESR, 60.0.2ESR, 60.0.1, 62.0a1 (2018-06-06) [Affected platforms]: - Windows 10x64, Ubuntu 16.04LTS, MacOS 10.11 [Steps to reproduce]: 1. Launch Firefox; 2. Navigate to https://www.bbc.com/news/video_and_audio/headlines 3. Click on any video; 4. Press tab a couple of times; 5. Grab the left/right navigator arrows from the Top Video section and drag down [Expected result]: - The highlight/dashed line is marking the selected item. [Actual result]: - The dashed line extends all the way to the left edge of the container [Additional notes]: - attached screenshot with the issue; - on Ubuntu, there is no need for step 4; - on MacOS step 4 needs to be repeated a couple of times;

So this is because the line contains a <span>Previous</span> with "text-indent: -1000em;" and we render the outline around that element. I don't know what other browsers do. Maybe they don't take out-of-view content into consider when drawing outline? That may make sense, I guess.

This is a simplified testcase. The second block should be exactly the same case as BBC, while the first block is a further simplification which may be a related but different issue.

OK, so it seems Blink doesn't count text into outline at all in this case, which is probably wrong spec-wise I guess...