wpt / css / cssom-view / scrollWidthHeight-negative-margin-002.html

Status: FAIL | Duration: 269ms | Subtests: 48/200 | Open test on wpt.live | wpt.fyi

TestTest SourceSubtests (48/200)

Data from commit:
a50cb89 wpt: run reference-named files which are themselves tests (#836) (2026-09-03)

SubtestStatusMessage
scrollWidth with negative margins: display: flow-root; overflow: visible; direction: ltr; flex-direction: row;PASS
scrollHeight with negative margins: display: flow-root; overflow: visible; direction: ltr; flex-direction: row;PASS
scrollWidth with negative margins: display: flow-root; overflow: hidden; direction: ltr; flex-direction: row;FAILassert_equals: scrollWidth expected 216 but got 220
scrollHeight with negative margins: display: flow-root; overflow: hidden; direction: ltr; flex-direction: row;FAILassert_equals: scrollHeight expected 201 but got 209
scrollWidth with negative margins: display: flow-root; overflow: auto; direction: ltr; flex-direction: row;FAILassert_equals: scrollWidth expected 216 but got 220
scrollHeight with negative margins: display: flow-root; overflow: auto; direction: ltr; flex-direction: row;FAILassert_equals: scrollHeight expected 201 but got 209
scrollWidth with negative margins: display: flow-root; overflow: clip; direction: ltr; flex-direction: row;PASS
scrollHeight with negative margins: display: flow-root; overflow: clip; direction: ltr; flex-direction: row;PASS
scrollWidth with negative margins: display: flow-root; overflow: scroll; direction: ltr; flex-direction: row;FAILassert_equals: scrollWidth expected 216 but got 220
scrollHeight with negative margins: display: flow-root; overflow: scroll; direction: ltr; flex-direction: row;FAILassert_equals: scrollHeight expected 201 but got 209
scrollWidth with negative margins: display: flow-root; overflow: visible; direction: rtl; flex-direction: row;PASS
scrollHeight with negative margins: display: flow-root; overflow: visible; direction: rtl; flex-direction: row;PASS
scrollWidth with negative margins: display: flow-root; overflow: hidden; direction: rtl; flex-direction: row;FAILassert_equals: scrollWidth expected 204 but got 220
scrollHeight with negative margins: display: flow-root; overflow: hidden; direction: rtl; flex-direction: row;FAILassert_equals: scrollHeight expected 201 but got 209
scrollWidth with negative margins: display: flow-root; overflow: auto; direction: rtl; flex-direction: row;FAILassert_equals: scrollWidth expected 204 but got 220
scrollHeight with negative margins: display: flow-root; overflow: auto; direction: rtl; flex-direction: row;FAILassert_equals: scrollHeight expected 201 but got 209
scrollWidth with negative margins: display: flow-root; overflow: clip; direction: rtl; flex-direction: row;PASS
scrollHeight with negative margins: display: flow-root; overflow: clip; direction: rtl; flex-direction: row;PASS
scrollWidth with negative margins: display: flow-root; overflow: scroll; direction: rtl; flex-direction: row;FAILassert_equals: scrollWidth expected 204 but got 220
scrollHeight with negative margins: display: flow-root; overflow: scroll; direction: rtl; flex-direction: row;FAILassert_equals: scrollHeight expected 201 but got 209
scrollWidth with negative margins: display: flex; overflow: visible; direction: ltr; flex-direction: row; scrollbar-width: none;PASS
scrollHeight with negative margins: display: flex; overflow: visible; direction: ltr; flex-direction: row; scrollbar-width: none;PASS
scrollWidth with negative margins: display: flex; overflow: hidden; direction: ltr; flex-direction: row; scrollbar-width: none;FAILassert_equals: scrollWidth expected 196 but got 200
scrollHeight with negative margins: display: flex; overflow: hidden; direction: ltr; flex-direction: row; scrollbar-width: none;FAILassert_equals: scrollHeight expected 201 but got 209
scrollWidth with negative margins: display: flex; overflow: auto; direction: ltr; flex-direction: row; scrollbar-width: none;FAILassert_equals: scrollWidth expected 196 but got 200
scrollHeight with negative margins: display: flex; overflow: auto; direction: ltr; flex-direction: row; scrollbar-width: none;FAILassert_equals: scrollHeight expected 201 but got 209
scrollWidth with negative margins: display: flex; overflow: clip; direction: ltr; flex-direction: row; scrollbar-width: none;PASS
scrollHeight with negative margins: display: flex; overflow: clip; direction: ltr; flex-direction: row; scrollbar-width: none;PASS
scrollWidth with negative margins: display: flex; overflow: scroll; direction: ltr; flex-direction: row; scrollbar-width: none;FAILassert_equals: scrollWidth expected 196 but got 200
scrollHeight with negative margins: display: flex; overflow: scroll; direction: ltr; flex-direction: row; scrollbar-width: none;FAILassert_equals: scrollHeight expected 201 but got 209
scrollWidth with negative margins: display: flex; overflow: visible; direction: rtl; flex-direction: row; scrollbar-width: none;PASS
scrollHeight with negative margins: display: flex; overflow: visible; direction: rtl; flex-direction: row; scrollbar-width: none;PASS
scrollWidth with negative margins: display: flex; overflow: hidden; direction: rtl; flex-direction: row; scrollbar-width: none;FAILassert_equals: scrollWidth expected 184 but got 200
scrollHeight with negative margins: display: flex; overflow: hidden; direction: rtl; flex-direction: row; scrollbar-width: none;FAILassert_equals: scrollHeight expected 201 but got 209
scrollWidth with negative margins: display: flex; overflow: auto; direction: rtl; flex-direction: row; scrollbar-width: none;FAILassert_equals: scrollWidth expected 184 but got 200
scrollHeight with negative margins: display: flex; overflow: auto; direction: rtl; flex-direction: row; scrollbar-width: none;FAILassert_equals: scrollHeight expected 201 but got 209
scrollWidth with negative margins: display: flex; overflow: clip; direction: rtl; flex-direction: row; scrollbar-width: none;PASS
scrollHeight with negative margins: display: flex; overflow: clip; direction: rtl; flex-direction: row; scrollbar-width: none;PASS
scrollWidth with negative margins: display: flex; overflow: scroll; direction: rtl; flex-direction: row; scrollbar-width: none;FAILassert_equals: scrollWidth expected 184 but got 200
scrollHeight with negative margins: display: flex; overflow: scroll; direction: rtl; flex-direction: row; scrollbar-width: none;FAILassert_equals: scrollHeight expected 201 but got 209
scrollWidth with negative margins: display: flex; overflow: visible; direction: ltr; flex-flow: wrap-reverse; scrollbar-width: none;PASS
scrollHeight with negative margins: display: flex; overflow: visible; direction: ltr; flex-flow: wrap-reverse; scrollbar-width: none;FAILassert_equals: scrollHeight expected 208 but got 201
scrollWidth with negative margins: flex-flow: wrap-reverse; display: flex; overflow: hidden; direction: ltr; scrollbar-width: none;FAILassert_equals: scrollWidth expected 196 but got 200
scrollHeight with negative margins: flex-flow: wrap-reverse; display: flex; overflow: hidden; direction: ltr; scrollbar-width: none;FAILassert_equals: scrollHeight expected 208 but got 209
scrollWidth with negative margins: flex-flow: wrap-reverse; display: flex; overflow: auto; direction: ltr; scrollbar-width: none;FAILassert_equals: scrollWidth expected 196 but got 200
scrollHeight with negative margins: flex-flow: wrap-reverse; display: flex; overflow: auto; direction: ltr; scrollbar-width: none;FAILassert_equals: scrollHeight expected 208 but got 209
scrollWidth with negative margins: flex-flow: wrap-reverse; display: flex; overflow: clip; direction: ltr; scrollbar-width: none;PASS
scrollHeight with negative margins: flex-flow: wrap-reverse; display: flex; overflow: clip; direction: ltr; scrollbar-width: none;FAILassert_equals: scrollHeight expected 208 but got 201
scrollWidth with negative margins: flex-flow: wrap-reverse; display: flex; overflow: scroll; direction: ltr; scrollbar-width: none;FAILassert_equals: scrollWidth expected 196 but got 200
scrollHeight with negative margins: flex-flow: wrap-reverse; display: flex; overflow: scroll; direction: ltr; scrollbar-width: none;FAILassert_equals: scrollHeight expected 208 but got 209
scrollWidth with negative margins: flex-flow: wrap-reverse; display: flex; overflow: visible; direction: rtl; scrollbar-width: none;PASS
scrollHeight with negative margins: flex-flow: wrap-reverse; display: flex; overflow: visible; direction: rtl; scrollbar-width: none;FAILassert_equals: scrollHeight expected 208 but got 201
scrollWidth with negative margins: flex-flow: wrap-reverse; display: flex; overflow: hidden; direction: rtl; scrollbar-width: none;FAILassert_equals: scrollWidth expected 184 but got 200
scrollHeight with negative margins: flex-flow: wrap-reverse; display: flex; overflow: hidden; direction: rtl; scrollbar-width: none;FAILassert_equals: scrollHeight expected 208 but got 209
scrollWidth with negative margins: flex-flow: wrap-reverse; display: flex; overflow: auto; direction: rtl; scrollbar-width: none;FAILassert_equals: scrollWidth expected 184 but got 200
scrollHeight with negative margins: flex-flow: wrap-reverse; display: flex; overflow: auto; direction: rtl; scrollbar-width: none;FAILassert_equals: scrollHeight expected 208 but got 209
scrollWidth with negative margins: flex-flow: wrap-reverse; display: flex; overflow: clip; direction: rtl; scrollbar-width: none;PASS
scrollHeight with negative margins: flex-flow: wrap-reverse; display: flex; overflow: clip; direction: rtl; scrollbar-width: none;FAILassert_equals: scrollHeight expected 208 but got 201
scrollWidth with negative margins: flex-flow: wrap-reverse; display: flex; overflow: scroll; direction: rtl; scrollbar-width: none;FAILassert_equals: scrollWidth expected 184 but got 200
scrollHeight with negative margins: flex-flow: wrap-reverse; display: flex; overflow: scroll; direction: rtl; scrollbar-width: none;FAILassert_equals: scrollHeight expected 208 but got 209
scrollWidth with negative margins: flex-direction: row-reverse; display: flex; overflow: visible; direction: ltr; scrollbar-width: none;FAILassert_equals: scrollWidth expected 184 but got 196
scrollHeight with negative margins: flex-direction: row-reverse; display: flex; overflow: visible; direction: ltr; scrollbar-width: none;PASS
scrollWidth with negative margins: display: flex; overflow: hidden; direction: ltr; flex-direction: row-reverse; scrollbar-width: none;FAILassert_equals: scrollWidth expected 184 but got 200
scrollHeight with negative margins: display: flex; overflow: hidden; direction: ltr; flex-direction: row-reverse; scrollbar-width: none;FAILassert_equals: scrollHeight expected 201 but got 209
scrollWidth with negative margins: display: flex; overflow: auto; direction: ltr; flex-direction: row-reverse; scrollbar-width: none;FAILassert_equals: scrollWidth expected 184 but got 200
scrollHeight with negative margins: display: flex; overflow: auto; direction: ltr; flex-direction: row-reverse; scrollbar-width: none;FAILassert_equals: scrollHeight expected 201 but got 209
scrollWidth with negative margins: display: flex; overflow: clip; direction: ltr; flex-direction: row-reverse; scrollbar-width: none;FAILassert_equals: scrollWidth expected 184 but got 196
scrollHeight with negative margins: display: flex; overflow: clip; direction: ltr; flex-direction: row-reverse; scrollbar-width: none;PASS
scrollWidth with negative margins: display: flex; overflow: scroll; direction: ltr; flex-direction: row-reverse; scrollbar-width: none;FAILassert_equals: scrollWidth expected 184 but got 200
scrollHeight with negative margins: display: flex; overflow: scroll; direction: ltr; flex-direction: row-reverse; scrollbar-width: none;FAILassert_equals: scrollHeight expected 201 but got 209
scrollWidth with negative margins: display: flex; overflow: visible; direction: rtl; flex-direction: row-reverse; scrollbar-width: none;FAILassert_equals: scrollWidth expected 196 but got 184
scrollHeight with negative margins: display: flex; overflow: visible; direction: rtl; flex-direction: row-reverse; scrollbar-width: none;PASS
scrollWidth with negative margins: display: flex; overflow: hidden; direction: rtl; flex-direction: row-reverse; scrollbar-width: none;FAILassert_equals: scrollWidth expected 196 but got 200
scrollHeight with negative margins: display: flex; overflow: hidden; direction: rtl; flex-direction: row-reverse; scrollbar-width: none;FAILassert_equals: scrollHeight expected 201 but got 209
scrollWidth with negative margins: display: flex; overflow: auto; direction: rtl; flex-direction: row-reverse; scrollbar-width: none;FAILassert_equals: scrollWidth expected 196 but got 200
scrollHeight with negative margins: display: flex; overflow: auto; direction: rtl; flex-direction: row-reverse; scrollbar-width: none;FAILassert_equals: scrollHeight expected 201 but got 209
scrollWidth with negative margins: display: flex; overflow: clip; direction: rtl; flex-direction: row-reverse; scrollbar-width: none;FAILassert_equals: scrollWidth expected 196 but got 184
scrollHeight with negative margins: display: flex; overflow: clip; direction: rtl; flex-direction: row-reverse; scrollbar-width: none;PASS
scrollWidth with negative margins: display: flex; overflow: scroll; direction: rtl; flex-direction: row-reverse; scrollbar-width: none;FAILassert_equals: scrollWidth expected 196 but got 200
scrollHeight with negative margins: display: flex; overflow: scroll; direction: rtl; flex-direction: row-reverse; scrollbar-width: none;FAILassert_equals: scrollHeight expected 201 but got 209
scrollWidth with negative margins: display: flex; overflow: visible; direction: ltr; flex-flow: row-reverse wrap-reverse; scrollbar-width: none;FAILassert_equals: scrollWidth expected 184 but got 196
scrollHeight with negative margins: display: flex; overflow: visible; direction: ltr; flex-flow: row-reverse wrap-reverse; scrollbar-width: none;FAILassert_equals: scrollHeight expected 208 but got 201
scrollWidth with negative margins: flex-flow: row-reverse wrap-reverse; display: flex; overflow: hidden; direction: ltr; scrollbar-width: none;FAILassert_equals: scrollWidth expected 184 but got 200
scrollHeight with negative margins: flex-flow: row-reverse wrap-reverse; display: flex; overflow: hidden; direction: ltr; scrollbar-width: none;FAILassert_equals: scrollHeight expected 208 but got 209
scrollWidth with negative margins: flex-flow: row-reverse wrap-reverse; display: flex; overflow: auto; direction: ltr; scrollbar-width: none;FAILassert_equals: scrollWidth expected 184 but got 200
scrollHeight with negative margins: flex-flow: row-reverse wrap-reverse; display: flex; overflow: auto; direction: ltr; scrollbar-width: none;FAILassert_equals: scrollHeight expected 208 but got 209
scrollWidth with negative margins: flex-flow: row-reverse wrap-reverse; display: flex; overflow: clip; direction: ltr; scrollbar-width: none;FAILassert_equals: scrollWidth expected 184 but got 196
scrollHeight with negative margins: flex-flow: row-reverse wrap-reverse; display: flex; overflow: clip; direction: ltr; scrollbar-width: none;FAILassert_equals: scrollHeight expected 208 but got 201
scrollWidth with negative margins: flex-flow: row-reverse wrap-reverse; display: flex; overflow: scroll; direction: ltr; scrollbar-width: none;FAILassert_equals: scrollWidth expected 184 but got 200
scrollHeight with negative margins: flex-flow: row-reverse wrap-reverse; display: flex; overflow: scroll; direction: ltr; scrollbar-width: none;FAILassert_equals: scrollHeight expected 208 but got 209
scrollWidth with negative margins: flex-flow: row-reverse wrap-reverse; display: flex; overflow: visible; direction: rtl; scrollbar-width: none;FAILassert_equals: scrollWidth expected 196 but got 184
scrollHeight with negative margins: flex-flow: row-reverse wrap-reverse; display: flex; overflow: visible; direction: rtl; scrollbar-width: none;FAILassert_equals: scrollHeight expected 208 but got 201
scrollWidth with negative margins: flex-flow: row-reverse wrap-reverse; display: flex; overflow: hidden; direction: rtl; scrollbar-width: none;FAILassert_equals: scrollWidth expected 196 but got 200
scrollHeight with negative margins: flex-flow: row-reverse wrap-reverse; display: flex; overflow: hidden; direction: rtl; scrollbar-width: none;FAILassert_equals: scrollHeight expected 208 but got 209
scrollWidth with negative margins: flex-flow: row-reverse wrap-reverse; display: flex; overflow: auto; direction: rtl; scrollbar-width: none;FAILassert_equals: scrollWidth expected 196 but got 200
scrollHeight with negative margins: flex-flow: row-reverse wrap-reverse; display: flex; overflow: auto; direction: rtl; scrollbar-width: none;FAILassert_equals: scrollHeight expected 208 but got 209
scrollWidth with negative margins: flex-flow: row-reverse wrap-reverse; display: flex; overflow: clip; direction: rtl; scrollbar-width: none;FAILassert_equals: scrollWidth expected 196 but got 184
scrollHeight with negative margins: flex-flow: row-reverse wrap-reverse; display: flex; overflow: clip; direction: rtl; scrollbar-width: none;FAILassert_equals: scrollHeight expected 208 but got 201
scrollWidth with negative margins: flex-flow: row-reverse wrap-reverse; display: flex; overflow: scroll; direction: rtl; scrollbar-width: none;FAILassert_equals: scrollWidth expected 196 but got 200
scrollHeight with negative margins: flex-flow: row-reverse wrap-reverse; display: flex; overflow: scroll; direction: rtl; scrollbar-width: none;FAILassert_equals: scrollHeight expected 208 but got 209
scrollWidth with negative margins: flex-direction: column; display: flex; overflow: visible; direction: ltr; scrollbar-width: none;PASS
scrollHeight with negative margins: flex-direction: column; display: flex; overflow: visible; direction: ltr; scrollbar-width: none;PASS
scrollWidth with negative margins: display: flex; overflow: hidden; direction: ltr; flex-direction: column; scrollbar-width: none;FAILassert_equals: scrollWidth expected 216 but got 220
scrollHeight with negative margins: display: flex; overflow: hidden; direction: ltr; flex-direction: column; scrollbar-width: none;FAILassert_equals: scrollHeight expected 181 but got 189
scrollWidth with negative margins: display: flex; overflow: auto; direction: ltr; flex-direction: column; scrollbar-width: none;FAILassert_equals: scrollWidth expected 216 but got 220
scrollHeight with negative margins: display: flex; overflow: auto; direction: ltr; flex-direction: column; scrollbar-width: none;FAILassert_equals: scrollHeight expected 181 but got 189
scrollWidth with negative margins: display: flex; overflow: clip; direction: ltr; flex-direction: column; scrollbar-width: none;PASS
scrollHeight with negative margins: display: flex; overflow: clip; direction: ltr; flex-direction: column; scrollbar-width: none;PASS
scrollWidth with negative margins: display: flex; overflow: scroll; direction: ltr; flex-direction: column; scrollbar-width: none;FAILassert_equals: scrollWidth expected 216 but got 220
scrollHeight with negative margins: display: flex; overflow: scroll; direction: ltr; flex-direction: column; scrollbar-width: none;FAILassert_equals: scrollHeight expected 181 but got 189
scrollWidth with negative margins: display: flex; overflow: visible; direction: rtl; flex-direction: column; scrollbar-width: none;PASS
scrollHeight with negative margins: display: flex; overflow: visible; direction: rtl; flex-direction: column; scrollbar-width: none;PASS
scrollWidth with negative margins: display: flex; overflow: hidden; direction: rtl; flex-direction: column; scrollbar-width: none;FAILassert_equals: scrollWidth expected 204 but got 220
scrollHeight with negative margins: display: flex; overflow: hidden; direction: rtl; flex-direction: column; scrollbar-width: none;FAILassert_equals: scrollHeight expected 181 but got 189
scrollWidth with negative margins: display: flex; overflow: auto; direction: rtl; flex-direction: column; scrollbar-width: none;FAILassert_equals: scrollWidth expected 204 but got 220
scrollHeight with negative margins: display: flex; overflow: auto; direction: rtl; flex-direction: column; scrollbar-width: none;FAILassert_equals: scrollHeight expected 181 but got 189
scrollWidth with negative margins: display: flex; overflow: clip; direction: rtl; flex-direction: column; scrollbar-width: none;PASS
scrollHeight with negative margins: display: flex; overflow: clip; direction: rtl; flex-direction: column; scrollbar-width: none;PASS
scrollWidth with negative margins: display: flex; overflow: scroll; direction: rtl; flex-direction: column; scrollbar-width: none;FAILassert_equals: scrollWidth expected 204 but got 220
scrollHeight with negative margins: display: flex; overflow: scroll; direction: rtl; flex-direction: column; scrollbar-width: none;FAILassert_equals: scrollHeight expected 181 but got 189
scrollWidth with negative margins: display: flex; overflow: visible; direction: ltr; flex-flow: column wrap-reverse; scrollbar-width: none;FAILassert_equals: scrollWidth expected 204 but got 216
scrollHeight with negative margins: display: flex; overflow: visible; direction: ltr; flex-flow: column wrap-reverse; scrollbar-width: none;PASS
scrollWidth with negative margins: flex-flow: column wrap-reverse; display: flex; overflow: hidden; direction: ltr; scrollbar-width: none;FAILassert_equals: scrollWidth expected 204 but got 220
scrollHeight with negative margins: flex-flow: column wrap-reverse; display: flex; overflow: hidden; direction: ltr; scrollbar-width: none;FAILassert_equals: scrollHeight expected 181 but got 189
scrollWidth with negative margins: flex-flow: column wrap-reverse; display: flex; overflow: auto; direction: ltr; scrollbar-width: none;FAILassert_equals: scrollWidth expected 204 but got 220
scrollHeight with negative margins: flex-flow: column wrap-reverse; display: flex; overflow: auto; direction: ltr; scrollbar-width: none;FAILassert_equals: scrollHeight expected 181 but got 189
scrollWidth with negative margins: flex-flow: column wrap-reverse; display: flex; overflow: clip; direction: ltr; scrollbar-width: none;FAILassert_equals: scrollWidth expected 204 but got 216
scrollHeight with negative margins: flex-flow: column wrap-reverse; display: flex; overflow: clip; direction: ltr; scrollbar-width: none;PASS
scrollWidth with negative margins: flex-flow: column wrap-reverse; display: flex; overflow: scroll; direction: ltr; scrollbar-width: none;FAILassert_equals: scrollWidth expected 204 but got 220
scrollHeight with negative margins: flex-flow: column wrap-reverse; display: flex; overflow: scroll; direction: ltr; scrollbar-width: none;FAILassert_equals: scrollHeight expected 181 but got 189
scrollWidth with negative margins: flex-flow: column wrap-reverse; display: flex; overflow: visible; direction: rtl; scrollbar-width: none;FAILassert_equals: scrollWidth expected 216 but got 204
scrollHeight with negative margins: flex-flow: column wrap-reverse; display: flex; overflow: visible; direction: rtl; scrollbar-width: none;PASS
scrollWidth with negative margins: flex-flow: column wrap-reverse; display: flex; overflow: hidden; direction: rtl; scrollbar-width: none;FAILassert_equals: scrollWidth expected 216 but got 220
scrollHeight with negative margins: flex-flow: column wrap-reverse; display: flex; overflow: hidden; direction: rtl; scrollbar-width: none;FAILassert_equals: scrollHeight expected 181 but got 189
scrollWidth with negative margins: flex-flow: column wrap-reverse; display: flex; overflow: auto; direction: rtl; scrollbar-width: none;FAILassert_equals: scrollWidth expected 216 but got 220
scrollHeight with negative margins: flex-flow: column wrap-reverse; display: flex; overflow: auto; direction: rtl; scrollbar-width: none;FAILassert_equals: scrollHeight expected 181 but got 189
scrollWidth with negative margins: flex-flow: column wrap-reverse; display: flex; overflow: clip; direction: rtl; scrollbar-width: none;FAILassert_equals: scrollWidth expected 216 but got 204
scrollHeight with negative margins: flex-flow: column wrap-reverse; display: flex; overflow: clip; direction: rtl; scrollbar-width: none;PASS
scrollWidth with negative margins: flex-flow: column wrap-reverse; display: flex; overflow: scroll; direction: rtl; scrollbar-width: none;FAILassert_equals: scrollWidth expected 216 but got 220
scrollHeight with negative margins: flex-flow: column wrap-reverse; display: flex; overflow: scroll; direction: rtl; scrollbar-width: none;FAILassert_equals: scrollHeight expected 181 but got 189
scrollWidth with negative margins: flex-direction: column-reverse; display: flex; overflow: visible; direction: ltr; scrollbar-width: none;PASS
scrollHeight with negative margins: flex-direction: column-reverse; display: flex; overflow: visible; direction: ltr; scrollbar-width: none;FAILassert_equals: scrollHeight expected 188 but got 181
scrollWidth with negative margins: display: flex; overflow: hidden; direction: ltr; flex-direction: column-reverse; scrollbar-width: none;FAILassert_equals: scrollWidth expected 216 but got 220
scrollHeight with negative margins: display: flex; overflow: hidden; direction: ltr; flex-direction: column-reverse; scrollbar-width: none;FAILassert_equals: scrollHeight expected 188 but got 189
scrollWidth with negative margins: display: flex; overflow: auto; direction: ltr; flex-direction: column-reverse; scrollbar-width: none;FAILassert_equals: scrollWidth expected 216 but got 220
scrollHeight with negative margins: display: flex; overflow: auto; direction: ltr; flex-direction: column-reverse; scrollbar-width: none;FAILassert_equals: scrollHeight expected 188 but got 189
scrollWidth with negative margins: display: flex; overflow: clip; direction: ltr; flex-direction: column-reverse; scrollbar-width: none;PASS
scrollHeight with negative margins: display: flex; overflow: clip; direction: ltr; flex-direction: column-reverse; scrollbar-width: none;FAILassert_equals: scrollHeight expected 188 but got 181
scrollWidth with negative margins: display: flex; overflow: scroll; direction: ltr; flex-direction: column-reverse; scrollbar-width: none;FAILassert_equals: scrollWidth expected 216 but got 220
scrollHeight with negative margins: display: flex; overflow: scroll; direction: ltr; flex-direction: column-reverse; scrollbar-width: none;FAILassert_equals: scrollHeight expected 188 but got 189
scrollWidth with negative margins: display: flex; overflow: visible; direction: rtl; flex-direction: column-reverse; scrollbar-width: none;PASS
scrollHeight with negative margins: display: flex; overflow: visible; direction: rtl; flex-direction: column-reverse; scrollbar-width: none;FAILassert_equals: scrollHeight expected 188 but got 181
scrollWidth with negative margins: display: flex; overflow: hidden; direction: rtl; flex-direction: column-reverse; scrollbar-width: none;FAILassert_equals: scrollWidth expected 204 but got 220
scrollHeight with negative margins: display: flex; overflow: hidden; direction: rtl; flex-direction: column-reverse; scrollbar-width: none;FAILassert_equals: scrollHeight expected 188 but got 189
scrollWidth with negative margins: display: flex; overflow: auto; direction: rtl; flex-direction: column-reverse; scrollbar-width: none;FAILassert_equals: scrollWidth expected 204 but got 220
scrollHeight with negative margins: display: flex; overflow: auto; direction: rtl; flex-direction: column-reverse; scrollbar-width: none;FAILassert_equals: scrollHeight expected 188 but got 189
scrollWidth with negative margins: display: flex; overflow: clip; direction: rtl; flex-direction: column-reverse; scrollbar-width: none;PASS
scrollHeight with negative margins: display: flex; overflow: clip; direction: rtl; flex-direction: column-reverse; scrollbar-width: none;FAILassert_equals: scrollHeight expected 188 but got 181
scrollWidth with negative margins: display: flex; overflow: scroll; direction: rtl; flex-direction: column-reverse; scrollbar-width: none;FAILassert_equals: scrollWidth expected 204 but got 220
scrollHeight with negative margins: display: flex; overflow: scroll; direction: rtl; flex-direction: column-reverse; scrollbar-width: none;FAILassert_equals: scrollHeight expected 188 but got 189
scrollWidth with negative margins: display: flex; overflow: visible; direction: ltr; flex-flow: column-reverse wrap-reverse; scrollbar-width: none;FAILassert_equals: scrollWidth expected 204 but got 216
scrollHeight with negative margins: display: flex; overflow: visible; direction: ltr; flex-flow: column-reverse wrap-reverse; scrollbar-width: none;FAILassert_equals: scrollHeight expected 188 but got 181
scrollWidth with negative margins: flex-flow: column-reverse wrap-reverse; display: flex; overflow: hidden; direction: ltr; scrollbar-width: none;FAILassert_equals: scrollWidth expected 204 but got 220
scrollHeight with negative margins: flex-flow: column-reverse wrap-reverse; display: flex; overflow: hidden; direction: ltr; scrollbar-width: none;FAILassert_equals: scrollHeight expected 188 but got 189
scrollWidth with negative margins: flex-flow: column-reverse wrap-reverse; display: flex; overflow: auto; direction: ltr; scrollbar-width: none;FAILassert_equals: scrollWidth expected 204 but got 220
scrollHeight with negative margins: flex-flow: column-reverse wrap-reverse; display: flex; overflow: auto; direction: ltr; scrollbar-width: none;FAILassert_equals: scrollHeight expected 188 but got 189
scrollWidth with negative margins: flex-flow: column-reverse wrap-reverse; display: flex; overflow: clip; direction: ltr; scrollbar-width: none;FAILassert_equals: scrollWidth expected 204 but got 216
scrollHeight with negative margins: flex-flow: column-reverse wrap-reverse; display: flex; overflow: clip; direction: ltr; scrollbar-width: none;FAILassert_equals: scrollHeight expected 188 but got 181
scrollWidth with negative margins: flex-flow: column-reverse wrap-reverse; display: flex; overflow: scroll; direction: ltr; scrollbar-width: none;FAILassert_equals: scrollWidth expected 204 but got 220
scrollHeight with negative margins: flex-flow: column-reverse wrap-reverse; display: flex; overflow: scroll; direction: ltr; scrollbar-width: none;FAILassert_equals: scrollHeight expected 188 but got 189
scrollWidth with negative margins: flex-flow: column-reverse wrap-reverse; display: flex; overflow: visible; direction: rtl; scrollbar-width: none;FAILassert_equals: scrollWidth expected 216 but got 204
scrollHeight with negative margins: flex-flow: column-reverse wrap-reverse; display: flex; overflow: visible; direction: rtl; scrollbar-width: none;FAILassert_equals: scrollHeight expected 188 but got 181
scrollWidth with negative margins: flex-flow: column-reverse wrap-reverse; display: flex; overflow: hidden; direction: rtl; scrollbar-width: none;FAILassert_equals: scrollWidth expected 216 but got 220
scrollHeight with negative margins: flex-flow: column-reverse wrap-reverse; display: flex; overflow: hidden; direction: rtl; scrollbar-width: none;FAILassert_equals: scrollHeight expected 188 but got 189
scrollWidth with negative margins: flex-flow: column-reverse wrap-reverse; display: flex; overflow: auto; direction: rtl; scrollbar-width: none;FAILassert_equals: scrollWidth expected 216 but got 220
scrollHeight with negative margins: flex-flow: column-reverse wrap-reverse; display: flex; overflow: auto; direction: rtl; scrollbar-width: none;FAILassert_equals: scrollHeight expected 188 but got 189
scrollWidth with negative margins: flex-flow: column-reverse wrap-reverse; display: flex; overflow: clip; direction: rtl; scrollbar-width: none;FAILassert_equals: scrollWidth expected 216 but got 204
scrollHeight with negative margins: flex-flow: column-reverse wrap-reverse; display: flex; overflow: clip; direction: rtl; scrollbar-width: none;FAILassert_equals: scrollHeight expected 188 but got 181
scrollWidth with negative margins: flex-flow: column-reverse wrap-reverse; display: flex; overflow: scroll; direction: rtl; scrollbar-width: none;FAILassert_equals: scrollWidth expected 216 but got 220
scrollHeight with negative margins: flex-flow: column-reverse wrap-reverse; display: flex; overflow: scroll; direction: rtl; scrollbar-width: none;FAILassert_equals: scrollHeight expected 188 but got 189
scrollWidth with negative margins: flex-direction: row; display: grid; overflow: visible; direction: ltr;PASS
scrollHeight with negative margins: flex-direction: row; display: grid; overflow: visible; direction: ltr;PASS
scrollWidth with negative margins: display: grid; overflow: hidden; direction: ltr; flex-direction: row;FAILassert_equals: scrollWidth expected 216 but got 220
scrollHeight with negative margins: display: grid; overflow: hidden; direction: ltr; flex-direction: row;FAILassert_equals: scrollHeight expected 201 but got 209
scrollWidth with negative margins: display: grid; overflow: auto; direction: ltr; flex-direction: row;FAILassert_equals: scrollWidth expected 216 but got 220
scrollHeight with negative margins: display: grid; overflow: auto; direction: ltr; flex-direction: row;FAILassert_equals: scrollHeight expected 201 but got 209
scrollWidth with negative margins: display: grid; overflow: clip; direction: ltr; flex-direction: row;PASS
scrollHeight with negative margins: display: grid; overflow: clip; direction: ltr; flex-direction: row;PASS
scrollWidth with negative margins: display: grid; overflow: scroll; direction: ltr; flex-direction: row;FAILassert_equals: scrollWidth expected 216 but got 220
scrollHeight with negative margins: display: grid; overflow: scroll; direction: ltr; flex-direction: row;FAILassert_equals: scrollHeight expected 201 but got 209
scrollWidth with negative margins: display: grid; overflow: visible; direction: rtl; flex-direction: row;PASS
scrollHeight with negative margins: display: grid; overflow: visible; direction: rtl; flex-direction: row;PASS
scrollWidth with negative margins: display: grid; overflow: hidden; direction: rtl; flex-direction: row;FAILassert_equals: scrollWidth expected 204 but got 220
scrollHeight with negative margins: display: grid; overflow: hidden; direction: rtl; flex-direction: row;FAILassert_equals: scrollHeight expected 201 but got 209
scrollWidth with negative margins: display: grid; overflow: auto; direction: rtl; flex-direction: row;FAILassert_equals: scrollWidth expected 204 but got 220
scrollHeight with negative margins: display: grid; overflow: auto; direction: rtl; flex-direction: row;FAILassert_equals: scrollHeight expected 201 but got 209
scrollWidth with negative margins: display: grid; overflow: clip; direction: rtl; flex-direction: row;PASS
scrollHeight with negative margins: display: grid; overflow: clip; direction: rtl; flex-direction: row;PASS
scrollWidth with negative margins: display: grid; overflow: scroll; direction: rtl; flex-direction: row;FAILassert_equals: scrollWidth expected 204 but got 220
scrollHeight with negative margins: display: grid; overflow: scroll; direction: rtl; flex-direction: row;FAILassert_equals: scrollHeight expected 201 but got 209

/css/cssom-view/scrollWidthHeight-negative-margin-002.html

<!doctype html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>scroll{Width,Height} with visible overflow and negative margins.</title>
<link rel="help" href="https://drafts.csswg.org/cssom-view/#extension-to-the-element-interface">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1906475">
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
<link rel="author" title="Mozilla" href="https://mozilla.org">
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<style>
body { margin: 0 }
.wrapper {
  width: 80px;
  height: 80px;
  border: 1px solid #d1d1d2;
  padding: 1px 4px 8px 16px;
  border-width: 1px 2px 3px 4px;
  border-right-width: 50px;
  border-bottom-width: 40px;
}
.inner {
  margin: -100px;
  height: 300px;
  width: 300px;
  background-color: blue;
}
</style>
<div class="wrapper">
  <div class="inner"></div>
</div>
<script>
const wrapper = document.querySelector(".wrapper");
const contentBox = {
  width: 80,
  height: 80,
};
const paddingBox = {
  width: contentBox.width + 4 + 16,
  height: contentBox.height + 1 + 8,
};
function* writingModes() {
  yield "horizontal-tb";
  yield* ["vertical-lr", "vertical-rl"].filter(writingMode => CSS.supports("writing-mode", writingMode));
}
for (let display of ["flow-root", "flex", "grid"]) {
  for (let flexDirection of ["row", "row-reverse", "column", "column-reverse"]) {
    if (flexDirection != "row" && display != "flex") {
      // Don't bother retesting with all flexDirection values unless we're actually a flex container
      continue;
    }
    for (let flexWrap of ["", "wrap-reverse"]) {
      if (flexWrap != "" && display != "flex") {
        // Don't bother retesting with all flexWrap values unless we're actually a flex container
        continue;
      }
      for (let direction of ["ltr", "rtl"]) {
        for (let writingMode of writingModes()) {
          for (let overflow of ["visible", "hidden", "auto", "clip", "scroll"]) {
            wrapper.style.display = display;
            wrapper.style.overflow = overflow;
            wrapper.style.direction = direction;
            wrapper.style.writingMode = writingMode;
            wrapper.style.flexDirection = flexDirection;
            wrapper.style.flexWrap = flexWrap;
            // Suppress scrollbars because they get added to the padding are
            // and would need to account for them in flexbox.
            wrapper.style.scrollbarWidth = display == "flex" ? "none" : "";
            let vertical = writingMode.startsWith("vertical");
            let scrollToTop = vertical && direction == "rtl";
            let scrollToLeft = (!vertical && direction == "rtl") || writingMode == "vertical-rl";
            let flexMainAxisIsVertical = flexDirection.startsWith("row") == vertical;
            if (display == "flex") {
              if (flexDirection.endsWith("-reverse")) {
                if (flexMainAxisIsVertical) {
                  scrollToTop = !scrollToTop;
                } else {
                  scrollToLeft = !scrollToLeft;
                }
              }
              if (flexWrap == "wrap-reverse") {
                if (flexMainAxisIsVertical) {
                  scrollToLeft = !scrollToLeft;
                } else {
                  scrollToTop = !scrollToTop;
                }
              }
            }
            test(function() {
              assert_greater_than_equal(wrapper.scrollWidth, paddingBox.width, "scrollWidth should be at least padding box width");
              let padding = display == "flex" && !flexMainAxisIsVertical ? paddingBox.width - contentBox.width : 0;
              assert_equals(wrapper.scrollWidth, (scrollToLeft ? 204 : 216) - padding, "scrollWidth");
            }, "scrollWidth with negative margins: " + wrapper.style.cssText);
            test(function() {
              assert_greater_than_equal(wrapper.scrollHeight, paddingBox.height, "scrollHeight should be at least padding box height");
              let padding = display == "flex" && flexMainAxisIsVertical ? paddingBox.width - contentBox.width : 0;
              assert_equals(wrapper.scrollHeight, (scrollToTop ? 208 : 201) - padding, "scrollHeight");
            }, "scrollHeight with negative margins: " + wrapper.style.cssText);
          }
        }
      }
    }
  }
}
</script>