Skip to content

Commit 0a8a946

Browse files
tidy orientation (#395)
split and tidy orientation - we already check screen = inner - but those rules may change, i.e screen might step based on inner and be a different orientation or aspect ratio - and even then we still already check other values are correctly based on inner - so we can split window from screen (renamed to device) - so health we only need to check device always reporting primary and correct other data - window orientation is redundant (we have the sizes), but collect anyway for fuckery attempts
1 parent af64a2e commit 0a8a946

File tree

3 files changed

+79
-78
lines changed

3 files changed

+79
-78
lines changed

js/globals.js

+2-4
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const btnList = ['alerts', 'errors', 'lies']
1919

2020
const jsFilesExpected = 14,
2121
gSectionsExpected = 16,
22-
expectedMetrics = 149
22+
expectedMetrics = 150
2323
let jsFiles = 0, gCount = 0, gCountTiming = 0
2424

2525
// global
@@ -120,9 +120,7 @@ const tick = '✓', // ✓ u2713, 🗸 u1F5F8
120120
tz_green = sgtick+' timezone]'+sc,
121121
tz_red = sbx+' timezone]'+sc,
122122
position_green = sgtick+'RFP positions]'+sc,
123-
position_red = sbx+'RFP positions]'+sc,
124-
orientation_green = sgtick+'RFP orientation]'+sc,
125-
orientation_red = sbx+'RFP orientation]'+sc
123+
position_red = sbx+'RFP positions]'+sc
126124

127125
// dynamic TB/MB notation
128126
let tb_green = sgtick+'TB]'+sc,

js/screen.js

+40-39
Original file line numberDiff line numberDiff line change
@@ -638,10 +638,10 @@ const get_scr_orientation = (METRIC) => new Promise(resolve => {
638638
// NOTE: a screen.orientation.addEventListener('change'.. event
639639
// does not detect css changes, but a resize event does, which
640640
// is the only one we use, so treat css as truthy
641-
let oData = {'screen': {}, 'window': {}}, oDisplay = {}, lieCount = 0
641+
let oData = {'device': {}, 'window': {}}, oDisplay = {}
642642
// matchmedia: sorted names
643643
let oTests = {
644-
'screen': {'-moz-device-orientation': '#cssOm', 'device-aspect-ratio': '#cssDAR'},
644+
'device': {'-moz-device-orientation': '#cssOm', 'device-aspect-ratio': '#cssDAR'},
645645
'window': {'aspect-ratio': '#cssAR', 'orientation': '#cssO'}
646646
}
647647
let l = 'landscape', p = 'portrait', q = '(orientation: ', s = 'square', a = 'aspect-ratio'
@@ -669,7 +669,7 @@ const get_scr_orientation = (METRIC) => new Promise(resolve => {
669669
if (runST) {value = undefined} else if (runSL) {value += '_fake'}
670670
if (value == undefined) {throw zErrType +'undefined'} // we expect values (in gecko)
671671
} catch(e) {
672-
log_error(1, METRIC +'_'+ item, e)
672+
log_error(1, METRIC +'_'+ type +'_'+ item, e)
673673
value = zErr
674674
isErr = true
675675
}
@@ -680,17 +680,17 @@ const get_scr_orientation = (METRIC) => new Promise(resolve => {
680680
let isLies = (!isErr && !isErrCss && value !== cssvalue)
681681
oDisplay[METRIC +'_'+ item] = {'value': value, 'lies': isLies}
682682
if (isSmart && isLies) {
683-
log_known(1, METRIC +'_'+ item, value)
683+
log_known(1, METRIC +'_'+ type +'_'+ item, value)
684684
value = zLIE
685-
lieCount++
686685
}
687686
oData[type][item] = value
688687
oData[type][cssitem] = cssvalue
689688
}
690689
}
691-
// try and get a valid css value
692-
let check = oData.screen['-moz-device-orientation_css']
693-
if (zErr == check) {check = oData.screen['device-aspect-ratio_css']}
690+
691+
// device: try and get a valid css value
692+
let check = oData.device['-moz-device-orientation_css']
693+
if (zErr == check) {check = oData.device['device-aspect-ratio_css']}
694694
if ('square' == check) {check = 'portrait'}
695695

696696
// screen
@@ -720,50 +720,51 @@ const get_scr_orientation = (METRIC) => new Promise(resolve => {
720720
// check mozOrientation + .type matches css
721721
// note: we can't check the angle, it could be anything - see Piero tablet tests
722722
if ('string' == expected && value.split('-')[0] !== check) {
723-
log_known(1, METRIC +'_'+ item, value)
723+
log_known(1, METRIC +'_device_'+ item, value)
724724
isLies = true
725-
lieCount++
726725
}
727726
}
728727
} catch(e) {
729-
log_error(1, METRIC +'_'+ item, e)
728+
log_error(1, METRIC +'_device_'+ item, e)
730729
value = zErr
731730
}
732731
oDisplay[METRIC +'_'+ item] = {'value': value, 'lies': isLies}
733-
oData['screen'][item] = isLies ? zLIE : value
732+
oData['device'][item] = isLies ? zLIE : value
734733
})
735734

736735
// https://searchfox.org/mozilla-central/source/testing/web-platform/tests/screen-orientation/orientation-reading.html
737736
// see expectedAnglesLandscape + expectedAnglesPortrait
738-
// harden
739-
// ToDo: 2 x css match | 2 x matchmedia match | 2 x mozOrientation + .type match
740-
// this is done with aGood below, but for non-RFP, we could check
741-
// and update oDisplay and oData and lieCount
742-
743-
for (const k of Object.keys(oDisplay)) {
744-
addDisplay(1, k, oDisplay[k]['value'],'','', oDisplay[k]['lies'])
737+
// display, data
738+
for (const k of Object.keys(oDisplay)) {addDisplay(1, k, oDisplay[k]['value'],'','', oDisplay[k]['lies'])}
739+
for (const k of Object.keys(oData)) {
740+
// objects are already sorted
741+
let data = oData[k]
742+
let hash = mini(data)
743+
addData(1, METRIC +'_'+ k, oData[k], hash)
744+
if ('device' == k) {
745+
// device health check
746+
// FF132+: 1607032 + 1918202 | FF133+: 1922204 | backported to BB
747+
// RFP is always primary | on android the angle of 0 vs 90 is reversed
748+
749+
// type | angle | orientation (css) + aspect ratio (css)
750+
let oGood = {
751+
'a1de035c': 'landscape-primary | 0 | landscape',
752+
'ccc8dc6d': 'portrait-primary | 90 | portrait',
753+
'fb6084ad': 'portrait-primary | 90 | portrait | square',
754+
}
755+
if ('android' == isOS) {
756+
oGood = {
757+
'813838a9': 'landscape-primary | 90 | landscape',
758+
'360dd99a': 'portrait-primary | 0 | portrait',
759+
'fdc0295a': 'portrait-primary | 0 | portrait | square',
760+
}
761+
}
762+
let display = undefined !== oGood[hash] ? oGood[hash] : hash
763+
addDisplay(1, METRIC +'_'+ k +'_summary', display)
764+
addDisplay(1, METRIC +'_'+ k,'','', (undefined !== oGood[hash] ? rfp_green : rfp_red))
765+
}
745766
}
746767

747-
// objects are already sorted
748-
let hash = mini(oData)
749-
// FF132+: 1607032 + 1918202 | FF133+: 1922204 | backported to TB
750-
// all seven metrics should always return one of 3 hashes
751-
// landscape, portrait, portrait but square
752-
// RFP is always primary | on android the angle of 0 vs 90 is reversed
753-
let aGood = [
754-
'7a1ec766', // 0 landscape
755-
'5c281761', // 90 portrait
756-
'a55cb95d', // 90 portrait/square
757-
]
758-
if ('android' == isOS) {
759-
aGood = [
760-
'bd9328e9', // 90 landscape
761-
'df6d41d8', // 0 portrait
762-
'e6c593d4', // 0 portrait/square
763-
]
764-
}
765-
addDisplay(1, METRIC,'','', (aGood.includes(hash) ? orientation_green : orientation_red))
766-
addData(1, METRIC, oData, hash)
767768
return resolve()
768769
})
769770

tzp.html

+37-35
Original file line numberDiff line numberDiff line change
@@ -203,59 +203,50 @@
203203
&nbsp; window</td><td class="mono border-bottom"><span class="c" id="window_positions"></span>
204204
<span class="c" id="positions"></span>
205205
</td></tr>
206-
<!--orientation-->
206+
<!--device orientation-->
207207
<tr><td><div class="ttip"><span class="icon">[ i ]</span>
208+
<span class="ttxt">type<br>angle<br>orientation + aspect-ratio</span></div>
209+
&nbsp; [device] orientation</td>
210+
<td class="mono">
211+
<span class="c" id="orientation_device_summary"></span>
212+
<span class="c" id="orientation_device"></span>
213+
<div class="btn-right s99"><span id="labelS" class="btn btnright" onClick="togglerows('S','btn')">[+]</span></div>
214+
</td>
215+
</tr>
216+
<tr class="togS"><td><div class="ttip"><span class="icon">[ i ]</span>
208217
<span class="ttxt">mozOrientation<br>orientation.angle<br>orientation.type</span></div>
209-
&nbsp; screen</td>
218+
&nbsp; device</td>
210219
<td class="mono">
211220
<span class="c" id="orientation_mozOrientation"></span>
212221
| <span class="c" id="orientation_orientation.angle"></span>
213222
| <span class="c" id="orientation_orientation.type"></span>
214-
<div class="btn-right s99">orientation</div>
223+
<div class="btn-right s99">orientation</div>
215224
</td></tr>
216-
<tr>
225+
<tr class="togS">
217226
<td><div class="ttip"><span class="icon">[ i ]</span><span class="ttxtb">-moz-device-orientation<br>
218-
device-aspect-ratio</span></div> &nbsp; [css] screen</td>
219-
<td class="mono">
220-
<span id="cssOm"></span> | <span id="cssDAR"></span>
221-
</td></tr>
222-
<tr>
227+
device-aspect-ratio</span></div> &nbsp; [css] device</td>
228+
<td class="mono"><span id="cssOm"></span> | <span id="cssDAR"></span></td>
229+
</tr>
230+
<tr class="togS">
223231
<td><div class="ttip"><span class="icon">[ i ]</span><span class="ttxtb">-moz-device-orientation<br>
224-
device-aspect-ratio</span></div> &nbsp; [matchMedia] screen</td>
225-
<td class="mono">
226-
<span class="c" id="orientation_-moz-device-orientation"></span>
227-
| <span class="c" id="orientation_device-aspect-ratio"></span>
228-
</td></tr>
229-
<tr>
230-
<td><div class="ttip"><span class="icon">[ i ]</span><span class="ttxt">aspect-ratio<br>orientation</span>
231-
</div> &nbsp; [css] window</td>
232-
<td class="mono"><span id="cssAR"></span> | <span id="cssO"></span></td></tr>
233-
<tr>
234-
<td><div class="ttip"><span class="icon">[ i ]</span><span class="ttxt">aspect-ratio<br>orientation</span>
235-
</div> &nbsp; [matchMedia] window</td>
232+
device-aspect-ratio</span></div> &nbsp; [matchMedia] device</td>
236233
<td class="mono border-bottom">
237-
<span class="c" id="orientation_aspect-ratio"></span>
238-
| <span class="c" id="orientation_orientation"></span>
239-
<span class="c" id="orientation"></span>
240-
</td></tr>
241-
234+
<span class="c" id="orientation_-moz-device-orientation"></span> | <span class="c" id="orientation_device-aspect-ratio"></span>
235+
</td>
236+
</tr>
242237
<!--screen-->
243238
<tr><td>screen</td><td class="mono">
244239
<span class="c" id="screen_summary"></span>
245240
<span class="c" id="sizes_screen"></span>
246-
<div class="btn-right s99"><span id="labelS" class="btn btnright" onClick="togglerows('S','btn')">[+]</span></div>
247241
</td></tr>
248242
<tr class="togS"><td>
249243
<div class="ttip"><span class="icon">[ i ]</span><span class="ttxt">range 400-2560</span></div>
250244
&nbsp; [min-device-] css <sup>1</sup></td>
251-
<td class="mono"><span id="S"><span>
252-
<div class="btn-right s99">screen</div>
253-
</td></tr>
245+
<td class="mono"><span id="S"><span><div class="btn-right s99">screen</div></td>
246+
</tr>
254247
<tr class="togS"><td>iframe</td><td class="c mono" id="screen_iframe"></td></tr>
255248
<tr class="togS"><td>matchMedia <sup>2</sup></td><td class="c mono" id="screen_media"></td></tr>
256-
<tr class="togS"><td>screen</td><td class="mono border-bottom">
257-
<span class="c" id="screen_screen"></span>
258-
</td></tr>
249+
<tr class="togS"><td>screen</td><td class="mono border-bottom"><span class="c" id="screen_screen"></span></td></tr>
259250
<!--available-->
260251
<tr><td>available</td><td class="mono">
261252
<span class="c" id="available_summary"></span>
@@ -266,12 +257,12 @@
266257
<div class="btn-right s99">available</div>
267258
<span class="c" id="screen_sizes"></span>
268259
</td></tr>
269-
</td></tr>
260+
270261
<tr class="togS"><td>screen</td><td class="mono border-bottom">
271262
<span class="c" id="available_screen"></span>
272263
</td></tr>
273264
<!--outer-->
274-
<tr class="togA"><td>initial outer</span></td><td class="mono" id="initial_outer"></td></tr>
265+
<tr class="togA"><td>initial outer</td><td class="mono" id="initial_outer"></td></tr>
275266
<tr><td>outer</td><td class="mono">
276267
<span class="c" id="outer_summary"></span>
277268
<span class="c" id="sizes_outer"></span>
@@ -284,6 +275,17 @@
284275
<span class="c" id="outer_window"></span>
285276
<span class="c" id="window_sizes"></span>
286277
</td></tr>
278+
<!--window orientation-->
279+
<tr class="togS">
280+
<td><div class="ttip"><span class="icon">[ i ]</span><span class="ttxt">aspect-ratio<br>orientation</span></div> &nbsp; [css] window</td>
281+
<td class="mono"><span id="cssAR"></span> | <span id="cssO"></span><div class="btn-right s99">orientation</div>
282+
</td></tr>
283+
<tr class="togS">
284+
<td><div class="ttip"><span class="icon">[ i ]</span><span class="ttxt">aspect-ratio<br>orientation</span>
285+
</div> &nbsp; [matchMedia] window</td>
286+
<td class="mono border-bottom">
287+
<span class="c" id="orientation_aspect-ratio"></span> | <span class="c" id="orientation_orientation"></span>
288+
</td></tr>
287289
<!--inner-->
288290
<tr class="togA"><td>initial inner</td><td class="c mono" id="initial_inner"></td></tr>
289291
<tr><td>inner</td><td class="mono">

0 commit comments

Comments
 (0)