mdn / dom-examples

Code examples that accompany various MDN DOM and Web API documentation pages

Home Page:https://developer.mozilla.org/en-US/docs/Web/API

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

contentBoxSize is an array

ideagay opened this issue · comments

entry.contentBoxSize.inlineSize should be entry.contentBoxSize[0].inlineSize

[
{
“domain”: “.netflix.com”,
“hostOnly”: false,
“httpOnly”: false,
“name”: “clSharedContext”,
“path”: “/”,
“sameSite”: “no_restriction”,
“secure”: false,
“session”: true,
“storeId”: “0”,
“value”: “ec1a6d71-b2f2-4a26-8bd9-a26f26901ffe”,
“id”: 1
},
{
“domain”: “.netflix.com”,
“expirationDate”: 1574177898.548456,
“hostOnly”: false,
“httpOnly”: false,
“name”: “flwssn”,
“path”: “/”,
“sameSite”: “no_restriction”,
“secure”: false,
“session”: false,
“storeId”: “0”,
“value”: “35b7e019-fbab-48c3-b634-ba6aa1276265”,
“id”: 2
},
{
“domain”: “.netflix.com”,
“expirationDate”: 1574174300.161166,
“hostOnly”: false,
“httpOnly”: false,
“name”: “lhpuuidh-browse-TBIYXIE2TND7TG7IVJIHFQFDJI”,
“path”: “/”,
“sameSite”: “no_restriction”,
“secure”: false,
“session”: false,
“storeId”: “0”,
“value”: “IN%3AEN-US%3A6c505c0e-1adb-431d-bb62-f01493c38996_ROOT”,
“id”: 3
},
{
“domain”: “.netflix.com”,
“expirationDate”: 1574174300.162285,
“hostOnly”: false,
“httpOnly”: false,
“name”: “lhpuuidh-browse-TBIYXIE2TND7TG7IVJIHFQFDJI-T”,
“path”: “/”,
“sameSite”: “no_restriction”,
“secure”: false,
“session”: false,
“storeId”: “0”,
“value”: “1574167100786”,
“id”: 4
},
{
“domain”: “.netflix.com”,
“expirationDate”: 1605703106.428237,
“hostOnly”: false,
“httpOnly”: false,
“name”: “memclid”,
“path”: “/”,
“sameSite”: “no_restriction”,
“secure”: false,
“session”: false,
“storeId”: “0”,
“value”: “TkZDRENILUFQLUZYN1JKUEFHMkhIOTVLM1lYWVFOQUs1S0NFR1A5WQ”,
“id”: 5
},
{
“domain”: “.netflix.com”,
“expirationDate”: 1605703098.547841,
“hostOnly”: false,
“httpOnly”: false,
“name”: “NetflixId”,
“path”: “/”,
“sameSite”: “no_restriction”,
“secure”: false,
“session”: false,
“storeId”: “0”,
“value”: “v%3D2%26ct%3DBQAOAAEBECIQqLmOkQExeEQ_1rgSz2GB0Mg0ebJD7MLA-uzxGTaaNkeKgVT3uQTg83nExEsfjWd2EhMhfQLFJU_nZAC7qu3HKE97UnkTR6fSuYTSg483yDngxVWDV54–f-HMANOhCS_1huYSwhPdeFpfPlrhWLf1lysrhAjIPoNKxPhLZCHaGvH8bszKFZK4xY4I-7DqMKUadSWs5qyDyvEDsKvR4MNmzIvBNJUfWuLtUC6tF1EWpCNOapRJZawQqHa2gAseToCccTQLdufRE6K2G_FMdqQSMaxGCyQyaVlhj4a1PdzM7hsKhBTwddgJD4tWUDxAxzt7-y0-x-kJfzr4fmkWzwjFyFCqRoQeoRE8g4VTZwoBNBkJPl_NhWEG1fA9UL3MRxap7vIwb0rOW3U8yJqxb9NCvYcpDAuWJABYqa0E18FzRRAJuCSmKNcLQ6JbgTamNO8jNF9bqSSahAZ6Du1MPpAFX2TDuoZAkdo0Iy5cm9qbtM2WHpHozvLU7X_1KF2i1UQWm7c74VTTEURCwiiii5Nxzx_iK58c7SHfBv4NJMClu10uGknmOc2TTIDWc-R9K03JFaZ6UfTP_NAlKqLva-PpKobmFHKtY6mWanLBsmppAZF4HxyzUkDcrNlz75nyFu8%26bt%3Ddbl%26ch%3DAQEAEAABABQDqO3SRKhl6cCIeRx_f1Xf-bKphDtJZfA.%26mac%3DAQEAEAABABQGjzD7OXIE_H8lfNZ58Bk8K87hEHW9_XY.”,
“id”: 6
},
{
“domain”: “.netflix.com”,
“expirationDate”: 1605703098.548307,
“hostOnly”: false,
“httpOnly”: false,
“name”: “nfvdid”,
“path”: “/”,
“sameSite”: “no_restriction”,
“secure”: false,
“session”: false,
“storeId”: “0”,
“value”: “BQFmAAEBEHoTIfua4x1hQuohe91EPBdgQkEZmC2LzxXTfxaWnEBAYVE5XAOGc4o5eUndiro03Ei7RdR-y_1uv2Dfr6fGEoNYXpvOPXSXLfXn6g1EXGrDINGCXjNfM2btecJpoEWcZo_ap3_enk-kUG5ExBbD6gye”,
“id”: 7
},
{
“domain”: “.netflix.com”,
“expirationDate”: 1605703098.548126,
“hostOnly”: false,
“httpOnly”: false,
“name”: “SecureNetflixId”,
“path”: “/”,
“sameSite”: “no_restriction”,
“secure”: true,
“session”: false,
“storeId”: “0”,
“value”: “v%3D2%26mac%3DAQEAEQABABSuo7DvxoTPEUq_QAhA2qOHVBSAu623DJ4.%26dt%3D1574167099285”,
“id”: 8
},
{
“domain”: “.www.netflix.com”,
“hostOnly”: false,
“httpOnly”: false,
“name”: “cL”,
“path”: “/”,
“sameSite”: “no_restriction”,
“secure”: false,
“session”: true,
“storeId”: “0”,
“value”: “1574167100200%7C157416709570005998%7C157416709588120794%7C%7C4%7Cnull”,
“id”: 9
}
]

entry.contentBoxSize.inlineSize should be entry.contentBoxSize[0].inlineSize

@Rumyra, @ddbeck The two last messages are spam. (I cannot hide them, I don't have the rights here)

entry.contentBoxSize.inlineSize should be entry.contentBoxSize[0].inlineSize

Firefox fully supports entry.contentBoxSize only since version 92 (September 2021), so we need to decide whether that's long enough to remove the fallbacks for older Firefox versions:

// The standard makes contentBoxSize an array...
if (entry.contentBoxSize[0]) {
h1Elem.style.fontSize = Math.max(1.5, entry.contentBoxSize[0].inlineSize/200) + 'rem';
pElem.style.fontSize = Math.max(1, entry.contentBoxSize[0].inlineSize/600) + 'rem';
} else {
// ...but old versions of Firefox treat it as a single item
h1Elem.style.fontSize = Math.max(1.5, entry.contentBoxSize.inlineSize/200) + 'rem';
pElem.style.fontSize = Math.max(1, entry.contentBoxSize.inlineSize/600) + 'rem';
}

if (entry.contentBoxSize[0]) {
entry.target.style.borderRadius = Math.min(100, (entry.contentBoxSize[0].inlineSize/10) +
(entry.contentBoxSize[0].blockSize/10)) + 'px';
} else {
// ...but old versions of Firefox treat it as a single item
entry.target.style.borderRadius = Math.min(100, (entry.contentBoxSize.inlineSize/10) +
(entry.contentBoxSize.blockSize/10)) + 'px';
}

Hello @ideagay, both versions exist to ensure backward compatibility. We'd need discuss separately when to remove the older version. However, Since there is no bug in the documented code, I am closing this issue.

Please feel free to reach out to us and our community with any questions on our Discord server. Thanks for using MDN!