feat: Text font scaling customisation ability

[david-hm-morgan]

With reference to #8025, this is a partial proposal to see if this style of extensible customisation could be favourable to the shaka-player community:

Proposal for some accessibility options whereby an App builder can customise subtitle/caption size, with the potential of an App offering accessibility options for text size.

This style could be used for other text styling attributes in a similar way, but this is just the first step.

[avelad]

@tykus160 I think that custom variables are not supported on Tizen 3 and WebOS 3, https://caniuse.com/css-variables , can you confirm?

[tykus160]

@avelad they don't, similar on older WebOSes.

[avelad]

@david-hm-morgan Then you need use something like https://stackoverflow.com/questions/38012009/how-to-feature-detect-for-css-custom-properties to keep the compatibility with old browsers (FYI @tykus160 )

[shaka-bot]

Incremental code coverage: 100.00%

[avelad]

@shaka-bot test ce

[shaka-bot]

@avelad: Lab tests started with arguments:

• pr=8215
• browser_filter=Tizen ChromecastUltra ChromecastGTV ChromecastStreamer ChromeAndroid

[avelad]

@david-hm-morgan

The next tests are failing on Tizen:

UITextDisplayer
    ✗ correctly displays styles for cues [Safari 3.0 (Tizen 3.0)]
	Error: Expected $['font-size'] = '10px' to equal 'calc(10px*var(--shaka-text-font-size-scaling))'.
	    at <Jasmine>
	    at UserContext.<anonymous> (test/text/ui_text_displayer_unit.js:124:20 <- test/text/ui_text_displayer_unit.js:139:20)
	    at <Jasmine>

    ✗ correctly displays styles for nested cues [Safari 3.0 (Tizen 3.0)]
	Error: Expected $['font-size'] = '10px' to equal 'calc(10px*var(--shaka-text-font-size-scaling))'.
	    at <Jasmine>
	    at UserContext.<anonymous> (test/text/ui_text_displayer_unit.js:175:20 <- test/text/ui_text_displayer_unit.js:186:20)
	    at <Jasmine>

    ✗ correctly displays styles for cellResolution units [Safari 3.0 (Tizen 3.0)]
	Error: Expected $['font-size'] = '18px' to equal 'calc(18px*var(--shaka-text-font-size-scaling))'.
	    at <Jasmine>
	    at UserContext.<anonymous> (test/text/ui_text_displayer_unit.js:211:20 <- test/text/ui_text_displayer_unit.js:218:20)
	    at <Jasmine>

    ✗ correctly displays styles for percentages units [Safari 3.0 (Tizen 3.0)]
	Error: Expected $['font-size'] = '27px' to equal 'calc(27px*var(--shaka-text-font-size-scaling))'.
	    at <Jasmine>
	    at UserContext.<anonymous> (test/text/ui_text_displayer_unit.js:243:20 <- test/text/ui_text_displayer_unit.js:245:20)
	    at <Jasmine>

[avelad]

@shaka-bot test

[shaka-bot]

@avelad: Lab tests started with arguments:

• pr=8215

[avelad]

@david-hm-morgan Can you add a brief documentation about it in docs/tutorials/text-displayer.md? Thanks. Otherwise LGTM

[avelad]

@david-hm-morgan I'll wait for the tests to pass and merge it.