mirror of
https://github.com/servo/servo.git
synced 2025-08-05 21:50:18 +01:00
Update web-platform-tests to revision 9a3ff40283ad3fca7299385b82c9b11c05ff7862
This commit is contained in:
WPT Sync Bot
parent
a6055e350c
commit
397eb31eef
80 changed files with 395 additions and 2848 deletions
|
|
@ -1,4 +0,0 @@
|
||||||
[hit-test-floats-002.html]
|
|
||||||
[Hit test float]
|
|
||||||
expected: FAIL
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
[hit-test-floats-004.html]
|
||||||
|
[Miss float below something else]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
[hit-test-floats-005.html]
|
||||||
|
[Miss clipped float]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
|
@ -1,4 +0,0 @@
|
||||||
[CaretPosition-001.html]
|
|
||||||
[Element at (400, 100)]
|
|
||||||
expected: FAIL
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
[matchMedia-display-none-iframe.html]
|
||||||
|
expected: ERROR
|
||||||
|
|
@ -315,15 +315,24 @@
|
||||||
[<iframe>: separate response Content-Type: text/html;" \\" text/plain]
|
[<iframe>: separate response Content-Type: text/html;" \\" text/plain]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
[<iframe>: combined response Content-Type: text/html */*;charset=gbk]
|
|
||||||
expected: FAIL
|
|
||||||
|
|
||||||
[<iframe>: combined response Content-Type: text/html */*]
|
[<iframe>: combined response Content-Type: text/html */*]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
[<iframe>: separate response Content-Type: text/html;" text/plain]
|
|
||||||
expected: FAIL
|
|
||||||
|
|
||||||
[<iframe>: separate response Content-Type: text/html */*]
|
[<iframe>: separate response Content-Type: text/html */*]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
|
[<iframe>: combined response Content-Type: text/html;" text/plain]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[<iframe>: combined response Content-Type: text/html;charset=gbk text/plain text/html]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[<iframe>: separate response Content-Type: text/html */*;charset=gbk]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[<iframe>: separate response Content-Type: text/plain */*]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[<iframe>: combined response Content-Type: text/html;x=" text/plain]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -53,9 +53,6 @@
|
||||||
[combined text/javascript ]
|
[combined text/javascript ]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
[separate text/javascript;charset=windows-1252 error text/javascript]
|
|
||||||
expected: FAIL
|
|
||||||
|
|
||||||
[separate text/javascript x/x]
|
[separate text/javascript x/x]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
[traverse_the_history_1.html]
|
||||||
|
[Multiple history traversals from the same task]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
[traverse_the_history_3.html]
|
[traverse_the_history_5.html]
|
||||||
[Multiple history traversals, last would be aborted]
|
[Multiple history traversals, last would be aborted]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
[embedded-opener-remove-frame.html]
|
[embedded-opener-remove-frame.html]
|
||||||
|
expected: CRASH
|
||||||
[opener of discarded nested browsing context]
|
[opener of discarded nested browsing context]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,17 +1,16 @@
|
||||||
[supported-elements.html]
|
[supported-elements.html]
|
||||||
expected: TIMEOUT
|
|
||||||
[Contenteditable element should support autofocus]
|
[Contenteditable element should support autofocus]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
[Host element with delegatesFocus including no focusable descendants should be skipped]
|
[Host element with delegatesFocus including no focusable descendants should be skipped]
|
||||||
expected: NOTRUN
|
expected: FAIL
|
||||||
|
|
||||||
[Element with tabindex should support autofocus]
|
[Element with tabindex should support autofocus]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
[Area element should support autofocus]
|
[Area element should support autofocus]
|
||||||
expected: NOTRUN
|
expected: FAIL
|
||||||
|
|
||||||
[Host element with delegatesFocus should support autofocus]
|
[Host element with delegatesFocus should support autofocus]
|
||||||
expected: TIMEOUT
|
expected: FAIL
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -171,3 +171,6 @@
|
||||||
[XHTML img usemap="#hash-id"]
|
[XHTML img usemap="#hash-id"]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
|
[HTML (standards) IMG usemap="no-hash-name"]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
[iframe_sandbox_popups_escaping-2.html]
|
[iframe_sandbox_popups_escaping-2.html]
|
||||||
expected: CRASH
|
expected: TIMEOUT
|
||||||
[Check that popups from a sandboxed iframe escape the sandbox if\n allow-popups-to-escape-sandbox is used]
|
[Check that popups from a sandboxed iframe escape the sandbox if\n allow-popups-to-escape-sandbox is used]
|
||||||
expected: TIMEOUT
|
expected: TIMEOUT
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
[iframe_sandbox_popups_nonescaping-2.html]
|
[iframe_sandbox_popups_nonescaping-2.html]
|
||||||
expected: CRASH
|
expected: TIMEOUT
|
||||||
[Check that popups from a sandboxed iframe do not escape the sandbox]
|
[Check that popups from a sandboxed iframe do not escape the sandbox]
|
||||||
expected: NOTRUN
|
expected: NOTRUN
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,4 @@
|
||||||
[iframe_sandbox_popups_nonescaping-3.html]
|
[iframe_sandbox_popups_nonescaping-3.html]
|
||||||
expected: TIMEOUT
|
|
||||||
[Check that popups from a sandboxed iframe do not escape the sandbox]
|
[Check that popups from a sandboxed iframe do not escape the sandbox]
|
||||||
expected: NOTRUN
|
expected: FAIL
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
[module-delayed.html]
|
||||||
|
[async document.write in a module]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
|
@ -1,4 +0,0 @@
|
||||||
[module-static-import-delayed.html]
|
|
||||||
[document.write in an imported module]
|
|
||||||
expected: FAIL
|
|
||||||
|
|
||||||
|
|
@ -1,5 +1,4 @@
|
||||||
[realtimeanalyser-fft-scaling.html]
|
[realtimeanalyser-fft-scaling.html]
|
||||||
expected: TIMEOUT
|
|
||||||
[X 2048-point FFT peak position is not equal to 64. Got 0.]
|
[X 2048-point FFT peak position is not equal to 64. Got 0.]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -191,3 +191,9 @@
|
||||||
[X Stitched sine-wave buffers at sample rate 43800 does not equal [0,0.06264832615852356,0.12505052983760834,0.18696144223213196,0.24813786149024963,0.308339387178421,0.36732959747314453,0.4248766601085663,0.480754554271698,0.5347436666488647,0.5866320133209229,0.6362156271934509,0.6832997798919678,0.7276994585990906,0.7692402601242065,0.8077589869499207...\] with an element-wise tolerance of {"absoluteThreshold":0.0038986,"relativeThreshold":0}.\n\tIndex\tActual\t\t\tExpected\t\tAbsError\t\tRelError\t\tTest threshold\n\t[28696\]\t-1.8581761986985164e-15\t9.3139332532882690e-1\t9.3139332532882879e-1\t1.0000000000000020e+0\t3.8985999999999999e-3\n\t[28697\]\t7.0477002859115601e-1\t9.0675884485244751e-1\t2.0198881626129150e-1\t2.2275913536212616e-1\t3.8985999999999999e-3\n\tMax AbsError of 9.3139332532882879e-1 at index of 28696.\n\tMax RelError of 1.0000000000000020e+0 at index of 28696.\n]
|
[X Stitched sine-wave buffers at sample rate 43800 does not equal [0,0.06264832615852356,0.12505052983760834,0.18696144223213196,0.24813786149024963,0.308339387178421,0.36732959747314453,0.4248766601085663,0.480754554271698,0.5347436666488647,0.5866320133209229,0.6362156271934509,0.6832997798919678,0.7276994585990906,0.7692402601242065,0.8077589869499207...\] with an element-wise tolerance of {"absoluteThreshold":0.0038986,"relativeThreshold":0}.\n\tIndex\tActual\t\t\tExpected\t\tAbsError\t\tRelError\t\tTest threshold\n\t[28696\]\t-1.8581761986985164e-15\t9.3139332532882690e-1\t9.3139332532882879e-1\t1.0000000000000020e+0\t3.8985999999999999e-3\n\t[28697\]\t7.0477002859115601e-1\t9.0675884485244751e-1\t2.0198881626129150e-1\t2.2275913536212616e-1\t3.8985999999999999e-3\n\tMax AbsError of 9.3139332532882879e-1 at index of 28696.\n\tMax RelError of 1.0000000000000020e+0 at index of 28696.\n]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
|
[X Stitched sine-wave buffers at sample rate 43800 does not equal [0,0.06264832615852356,0.12505052983760834,0.18696144223213196,0.24813786149024963,0.308339387178421,0.36732959747314453,0.4248766601085663,0.480754554271698,0.5347436666488647,0.5866320133209229,0.6362156271934509,0.6832997798919678,0.7276994585990906,0.7692402601242065,0.8077589869499207...\] with an element-wise tolerance of {"absoluteThreshold":0.0038986,"relativeThreshold":0}.\n\tIndex\tActual\t\t\tExpected\t\tAbsError\t\tRelError\t\tTest threshold\n\t[28696\]\t4.3599933296234016e+28\t9.3139332532882690e-1\t4.3599933296234016e+28\t4.6811515726549934e+28\t3.8985999999999999e-3\n\t[28697\]\t7.0477002859115601e-1\t9.0675884485244751e-1\t2.0198881626129150e-1\t2.2275913536212616e-1\t3.8985999999999999e-3\n\tMax AbsError of 4.3599933296234016e+28 at index of 28696.\n\tMax RelError of 4.6811515726549934e+28 at index of 28696.\n]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[X SNR (-529.35563055275 dB) is not greater than or equal to 65.737. Got -529.35563055275.]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
[018.html]
|
|
||||||
expected: TIMEOUT
|
|
||||||
[origin of the script that invoked the method, javascript:]
|
|
||||||
expected: TIMEOUT
|
|
||||||
|
|
||||||
|
|
@ -120595,6 +120595,34 @@
|
||||||
]
|
]
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
"composite-bgcolor-animation": {
|
||||||
|
"bg-color-with-gradient.html": [
|
||||||
|
"7ef5d611bcf2c131dbeef8e72877328ef1be7710",
|
||||||
|
[
|
||||||
|
null,
|
||||||
|
[
|
||||||
|
[
|
||||||
|
"/css/composite-bgcolor-animation/bg-color-with-gradient-ref.html",
|
||||||
|
"=="
|
||||||
|
]
|
||||||
|
],
|
||||||
|
{}
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"simple-bg-color.html": [
|
||||||
|
"07bea44d21964b832cd9e4b4f32098ec41a2c206",
|
||||||
|
[
|
||||||
|
null,
|
||||||
|
[
|
||||||
|
[
|
||||||
|
"/css/composite-bgcolor-animation/simple-bg-color-ref.html",
|
||||||
|
"=="
|
||||||
|
]
|
||||||
|
],
|
||||||
|
{}
|
||||||
|
]
|
||||||
|
]
|
||||||
|
},
|
||||||
"compositing": {
|
"compositing": {
|
||||||
"background-blending": {
|
"background-blending": {
|
||||||
"background-blend-mode-gradient-image.html": [
|
"background-blend-mode-gradient-image.html": [
|
||||||
|
|
@ -137187,19 +137215,6 @@
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"css-flexbox": {
|
"css-flexbox": {
|
||||||
"Flexible-order.html": [
|
|
||||||
"9b61e1e8a8fd4cc41e461b10b86051ed0e536ef5",
|
|
||||||
[
|
|
||||||
null,
|
|
||||||
[
|
|
||||||
[
|
|
||||||
"/css/css-flexbox/reference/Flexible-order-ref.html",
|
|
||||||
"=="
|
|
||||||
]
|
|
||||||
],
|
|
||||||
{}
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"abspos-autopos-htb-ltr.html": [
|
"abspos-autopos-htb-ltr.html": [
|
||||||
"095936edf8b982bc228316d1a4f449621e94a1c3",
|
"095936edf8b982bc228316d1a4f449621e94a1c3",
|
||||||
[
|
[
|
||||||
|
|
@ -142792,6 +142807,19 @@
|
||||||
{}
|
{}
|
||||||
]
|
]
|
||||||
],
|
],
|
||||||
|
"flexible-order.html": [
|
||||||
|
"6f8d5f691a4be328999f375aa4ef940d01021e74",
|
||||||
|
[
|
||||||
|
null,
|
||||||
|
[
|
||||||
|
[
|
||||||
|
"/css/css-flexbox/reference/flexible-order-ref.html",
|
||||||
|
"=="
|
||||||
|
]
|
||||||
|
],
|
||||||
|
{}
|
||||||
|
]
|
||||||
|
],
|
||||||
"flexitem-stretch-range.html": [
|
"flexitem-stretch-range.html": [
|
||||||
"43ecc81d52ddfbcf3d42ad2ed10577e851822636",
|
"43ecc81d52ddfbcf3d42ad2ed10577e851822636",
|
||||||
[
|
[
|
||||||
|
|
@ -228279,188 +228307,6 @@
|
||||||
{}
|
{}
|
||||||
]
|
]
|
||||||
],
|
],
|
||||||
"flexbox-intrinsic-ratio-001.html": [
|
|
||||||
"43d512dcdf3fa0d80adb4c59b6de303b095deea7",
|
|
||||||
[
|
|
||||||
null,
|
|
||||||
[
|
|
||||||
[
|
|
||||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-intrinsic-ratio-001-ref.html",
|
|
||||||
"=="
|
|
||||||
]
|
|
||||||
],
|
|
||||||
{}
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"flexbox-intrinsic-ratio-001v.html": [
|
|
||||||
"4cc910b9e289315b9b634d1eeec1ac77ba51957f",
|
|
||||||
[
|
|
||||||
null,
|
|
||||||
[
|
|
||||||
[
|
|
||||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-intrinsic-ratio-001-ref.html",
|
|
||||||
"=="
|
|
||||||
]
|
|
||||||
],
|
|
||||||
{}
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"flexbox-intrinsic-ratio-002.html": [
|
|
||||||
"229540ff445b5d3d9f398f59a3f0237348d54ae8",
|
|
||||||
[
|
|
||||||
null,
|
|
||||||
[
|
|
||||||
[
|
|
||||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-intrinsic-ratio-001-ref.html",
|
|
||||||
"=="
|
|
||||||
]
|
|
||||||
],
|
|
||||||
{}
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"flexbox-intrinsic-ratio-002v.html": [
|
|
||||||
"0df92f9954c14149d5e07a7ba362fd34249d6b6c",
|
|
||||||
[
|
|
||||||
null,
|
|
||||||
[
|
|
||||||
[
|
|
||||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-intrinsic-ratio-001-ref.html",
|
|
||||||
"=="
|
|
||||||
]
|
|
||||||
],
|
|
||||||
{}
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"flexbox-intrinsic-ratio-003.html": [
|
|
||||||
"cf1c7a74c7abe5ae7c5c1c20540a65435fae17cc",
|
|
||||||
[
|
|
||||||
null,
|
|
||||||
[
|
|
||||||
[
|
|
||||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-intrinsic-ratio-003-ref.html",
|
|
||||||
"=="
|
|
||||||
]
|
|
||||||
],
|
|
||||||
{}
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"flexbox-intrinsic-ratio-003v.html": [
|
|
||||||
"cb9275fd8cfdb2e17a46e31454b2799a3f1e44d0",
|
|
||||||
[
|
|
||||||
null,
|
|
||||||
[
|
|
||||||
[
|
|
||||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-intrinsic-ratio-003-ref.html",
|
|
||||||
"=="
|
|
||||||
]
|
|
||||||
],
|
|
||||||
{}
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"flexbox-intrinsic-ratio-004.html": [
|
|
||||||
"bf2912f04bc2ef2ff5e588710f6c81976664aa8d",
|
|
||||||
[
|
|
||||||
null,
|
|
||||||
[
|
|
||||||
[
|
|
||||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-intrinsic-ratio-004-ref.html",
|
|
||||||
"=="
|
|
||||||
]
|
|
||||||
],
|
|
||||||
{}
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"flexbox-intrinsic-ratio-004v.html": [
|
|
||||||
"01c5271c4556b2e3d43abbbb014482a4bab9740e",
|
|
||||||
[
|
|
||||||
null,
|
|
||||||
[
|
|
||||||
[
|
|
||||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-intrinsic-ratio-004-ref.html",
|
|
||||||
"=="
|
|
||||||
]
|
|
||||||
],
|
|
||||||
{}
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"flexbox-intrinsic-ratio-005.html": [
|
|
||||||
"fe7d806bcfee80331d9e9d071caa1bc672f50fe2",
|
|
||||||
[
|
|
||||||
null,
|
|
||||||
[
|
|
||||||
[
|
|
||||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-intrinsic-ratio-005-ref.html",
|
|
||||||
"=="
|
|
||||||
]
|
|
||||||
],
|
|
||||||
{}
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"flexbox-intrinsic-ratio-005v.html": [
|
|
||||||
"ed1dcace0f3385118af82726734778d6a74336eb",
|
|
||||||
[
|
|
||||||
null,
|
|
||||||
[
|
|
||||||
[
|
|
||||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-intrinsic-ratio-005-ref.html",
|
|
||||||
"=="
|
|
||||||
]
|
|
||||||
],
|
|
||||||
{}
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"flexbox-intrinsic-ratio-006.html": [
|
|
||||||
"764075c106b712686afc00188e5c40cad042646c",
|
|
||||||
[
|
|
||||||
null,
|
|
||||||
[
|
|
||||||
[
|
|
||||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-intrinsic-ratio-006-ref.html",
|
|
||||||
"=="
|
|
||||||
]
|
|
||||||
],
|
|
||||||
{}
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"flexbox-intrinsic-ratio-006v.html": [
|
|
||||||
"8c12fad8c791623a86ddca8936248189d698a0a4",
|
|
||||||
[
|
|
||||||
null,
|
|
||||||
[
|
|
||||||
[
|
|
||||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-intrinsic-ratio-006-ref.html",
|
|
||||||
"=="
|
|
||||||
]
|
|
||||||
],
|
|
||||||
{}
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"flexbox-intrinsic-ratio-007.html": [
|
|
||||||
"ea9179c32ca7916792132f4a73c159fca89a19b6",
|
|
||||||
[
|
|
||||||
null,
|
|
||||||
[
|
|
||||||
[
|
|
||||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-intrinsic-ratio-007-ref.html",
|
|
||||||
"=="
|
|
||||||
]
|
|
||||||
],
|
|
||||||
{}
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"flexbox-intrinsic-ratio-007v.html": [
|
|
||||||
"2efb8b1c18fa65c2ea4b08c2c797476bdc79273e",
|
|
||||||
[
|
|
||||||
null,
|
|
||||||
[
|
|
||||||
[
|
|
||||||
"/css/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-intrinsic-ratio-007-ref.html",
|
|
||||||
"=="
|
|
||||||
]
|
|
||||||
],
|
|
||||||
{}
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"flexbox-items-as-stacking-contexts-001.xhtml": [
|
"flexbox-items-as-stacking-contexts-001.xhtml": [
|
||||||
"fac905339110967578289f18ae156e4a651d81ab",
|
"fac905339110967578289f18ae156e4a651d81ab",
|
||||||
[
|
[
|
||||||
|
|
@ -298290,6 +298136,16 @@
|
||||||
"5cb26179b8dbe4423885bcc7c8d687bab224df91",
|
"5cb26179b8dbe4423885bcc7c8d687bab224df91",
|
||||||
[]
|
[]
|
||||||
],
|
],
|
||||||
|
"composite-bgcolor-animation": {
|
||||||
|
"bg-color-with-gradient-ref.html": [
|
||||||
|
"5c76f3408aebe6e2964215af3f98745e833e190e",
|
||||||
|
[]
|
||||||
|
],
|
||||||
|
"simple-bg-color-ref.html": [
|
||||||
|
"d8003b58e3ac1c5e917500a59b60c0d2e56287a3",
|
||||||
|
[]
|
||||||
|
]
|
||||||
|
},
|
||||||
"compositing": {
|
"compositing": {
|
||||||
"Blending_in_a_group_with_filter-ref.html": [
|
"Blending_in_a_group_with_filter-ref.html": [
|
||||||
"ad512028adae91920814b79714ea99ec51de4dc2",
|
"ad512028adae91920814b79714ea99ec51de4dc2",
|
||||||
|
|
@ -302276,10 +302132,6 @@
|
||||||
[]
|
[]
|
||||||
],
|
],
|
||||||
"reference": {
|
"reference": {
|
||||||
"Flexible-order-ref.html": [
|
|
||||||
"12e94ba598e74cd253f0f91daf7e88f44884b7fc",
|
|
||||||
[]
|
|
||||||
],
|
|
||||||
"align-baseline-ref.html": [
|
"align-baseline-ref.html": [
|
||||||
"d5b88e8c7dae73b57c7f993260d7cce363eeebaa",
|
"d5b88e8c7dae73b57c7f993260d7cce363eeebaa",
|
||||||
[]
|
[]
|
||||||
|
|
@ -302468,6 +302320,10 @@
|
||||||
"0a8869a1452962b4895e60d8cebe987b55499666",
|
"0a8869a1452962b4895e60d8cebe987b55499666",
|
||||||
[]
|
[]
|
||||||
],
|
],
|
||||||
|
"flexible-order-ref.html": [
|
||||||
|
"12e94ba598e74cd253f0f91daf7e88f44884b7fc",
|
||||||
|
[]
|
||||||
|
],
|
||||||
"flexitem-stretch-range-ref.html": [
|
"flexitem-stretch-range-ref.html": [
|
||||||
"01c617698e26960960be4210fd726ce102e188bc",
|
"01c617698e26960960be4210fd726ce102e188bc",
|
||||||
[]
|
[]
|
||||||
|
|
@ -328400,30 +328256,6 @@
|
||||||
"f9a4553ccbee361f31491dc91989d341ad9ac1d3",
|
"f9a4553ccbee361f31491dc91989d341ad9ac1d3",
|
||||||
[]
|
[]
|
||||||
],
|
],
|
||||||
"flexbox-intrinsic-ratio-001-ref.html": [
|
|
||||||
"7441b282f4daf007e2876e72f257b093317d5854",
|
|
||||||
[]
|
|
||||||
],
|
|
||||||
"flexbox-intrinsic-ratio-003-ref.html": [
|
|
||||||
"38071c22fb2724d245dfe64e6fa17f0706d8a3c6",
|
|
||||||
[]
|
|
||||||
],
|
|
||||||
"flexbox-intrinsic-ratio-004-ref.html": [
|
|
||||||
"38e43a835eb07a322e0970b497fabc2a6f656628",
|
|
||||||
[]
|
|
||||||
],
|
|
||||||
"flexbox-intrinsic-ratio-005-ref.html": [
|
|
||||||
"2bfd4550c1d81c012a69a73cd871923f06d504c6",
|
|
||||||
[]
|
|
||||||
],
|
|
||||||
"flexbox-intrinsic-ratio-006-ref.html": [
|
|
||||||
"513fc0dcafacef04418c6bcd0d5121bdadea31f9",
|
|
||||||
[]
|
|
||||||
],
|
|
||||||
"flexbox-intrinsic-ratio-007-ref.html": [
|
|
||||||
"ccde6012b5f74ede005dad74814be62cdffa9ac6",
|
|
||||||
[]
|
|
||||||
],
|
|
||||||
"flexbox-items-as-stacking-contexts-001-ref.xhtml": [
|
"flexbox-items-as-stacking-contexts-001-ref.xhtml": [
|
||||||
"7e02b799f0f75b5d238ecc3c7bbaf87a53572e88",
|
"7e02b799f0f75b5d238ecc3c7bbaf87a53572e88",
|
||||||
[]
|
[]
|
||||||
|
|
@ -334529,6 +334361,10 @@
|
||||||
"0d6db5399118372da9ca783eeb2551e435ea85d7",
|
"0d6db5399118372da9ca783eeb2551e435ea85d7",
|
||||||
[]
|
[]
|
||||||
],
|
],
|
||||||
|
"window-tests-chooser.js": [
|
||||||
|
"bb9e0bf128c7885ae2b3c32ceb98f28947460209",
|
||||||
|
[]
|
||||||
|
],
|
||||||
"window-tests-enumeration.js": [
|
"window-tests-enumeration.js": [
|
||||||
"6e60910251fc59012d28f3c9a42adac7b7cb6d7a",
|
"6e60910251fc59012d28f3c9a42adac7b7cb6d7a",
|
||||||
[]
|
[]
|
||||||
|
|
@ -446581,6 +446417,32 @@
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
],
|
],
|
||||||
|
"font_access-chooser.tentative.https.window.js": [
|
||||||
|
"047521a7f7ab86ddddeb8f95ee711757f81bccf4",
|
||||||
|
[
|
||||||
|
"font-access/font_access-chooser.tentative.https.window.html",
|
||||||
|
{
|
||||||
|
"script_metadata": [
|
||||||
|
[
|
||||||
|
"script",
|
||||||
|
"/resources/testdriver.js"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"script",
|
||||||
|
"/resources/testdriver-vendor.js"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"script",
|
||||||
|
"resources/test-expectations.js"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"script",
|
||||||
|
"resources/window-tests-chooser.js"
|
||||||
|
]
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
],
|
||||||
"font_access-enumeration.tentative.https.window.js": [
|
"font_access-enumeration.tentative.https.window.js": [
|
||||||
"677fe82c70233de2e1cbeab4beb41437319688b3",
|
"677fe82c70233de2e1cbeab4beb41437319688b3",
|
||||||
[
|
[
|
||||||
|
|
@ -487046,7 +486908,7 @@
|
||||||
]
|
]
|
||||||
],
|
],
|
||||||
"input-events-get-target-ranges-backspace.tentative.html": [
|
"input-events-get-target-ranges-backspace.tentative.html": [
|
||||||
"a67bc76364d9675f2048161544b26eee02bf1185",
|
"d057654a77c494934e1116045ec7541a7e8878da",
|
||||||
[
|
[
|
||||||
null,
|
null,
|
||||||
{
|
{
|
||||||
|
|
@ -487065,7 +486927,7 @@
|
||||||
]
|
]
|
||||||
],
|
],
|
||||||
"input-events-get-target-ranges-forwarddelete.tentative.html": [
|
"input-events-get-target-ranges-forwarddelete.tentative.html": [
|
||||||
"62a33c094000680bd5981f0e2e1cddb1a3c6c1f5",
|
"136a4a6be4b31fa79508104d8da42cce36d8a887",
|
||||||
[
|
[
|
||||||
null,
|
null,
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -1,4 +0,0 @@
|
||||||
[hit-test-floats-002.html]
|
|
||||||
[Hit test float]
|
|
||||||
expected: FAIL
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
[hit-test-floats-004.html]
|
||||||
|
[Miss float below something else]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
[hit-test-floats-005.html]
|
||||||
|
[Miss clipped float]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
|
@ -1,4 +0,0 @@
|
||||||
[CaretPosition-001.html]
|
|
||||||
[Element at (400, 100)]
|
|
||||||
expected: FAIL
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
[matchMedia-display-none-iframe.html]
|
||||||
|
expected: ERROR
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
[flexbox-intrinsic-ratio-001.html]
|
|
||||||
type: reftest
|
|
||||||
expected: FAIL
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
[flexbox-intrinsic-ratio-002.html]
|
|
||||||
type: reftest
|
|
||||||
expected: FAIL
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
[flexbox-intrinsic-ratio-003.html]
|
|
||||||
type: reftest
|
|
||||||
expected: FAIL
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
[flexbox-intrinsic-ratio-004.html]
|
|
||||||
type: reftest
|
|
||||||
expected: FAIL
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
[flexbox-intrinsic-ratio-005.html]
|
|
||||||
type: reftest
|
|
||||||
expected: FAIL
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
[flexbox-intrinsic-ratio-006.html]
|
|
||||||
type: reftest
|
|
||||||
expected: FAIL
|
|
||||||
|
|
@ -315,15 +315,24 @@
|
||||||
[<iframe>: separate response Content-Type: text/html;" \\" text/plain]
|
[<iframe>: separate response Content-Type: text/html;" \\" text/plain]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
[<iframe>: combined response Content-Type: text/html */*;charset=gbk]
|
|
||||||
expected: FAIL
|
|
||||||
|
|
||||||
[<iframe>: combined response Content-Type: text/html */*]
|
[<iframe>: combined response Content-Type: text/html */*]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
[<iframe>: separate response Content-Type: text/html;" text/plain]
|
|
||||||
expected: FAIL
|
|
||||||
|
|
||||||
[<iframe>: separate response Content-Type: text/html */*]
|
[<iframe>: separate response Content-Type: text/html */*]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
|
[<iframe>: combined response Content-Type: text/html;" text/plain]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[<iframe>: combined response Content-Type: text/html;charset=gbk text/plain text/html]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[<iframe>: separate response Content-Type: text/html */*;charset=gbk]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[<iframe>: separate response Content-Type: text/plain */*]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[<iframe>: combined response Content-Type: text/html;x=" text/plain]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -53,9 +53,6 @@
|
||||||
[combined text/javascript ]
|
[combined text/javascript ]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
[separate text/javascript;charset=windows-1252 error text/javascript]
|
|
||||||
expected: FAIL
|
|
||||||
|
|
||||||
[separate text/javascript x/x]
|
[separate text/javascript x/x]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
[traverse_the_history_1.html]
|
||||||
|
[Multiple history traversals from the same task]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
[traverse_the_history_3.html]
|
[traverse_the_history_5.html]
|
||||||
[Multiple history traversals, last would be aborted]
|
[Multiple history traversals, last would be aborted]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
[embedded-opener-remove-frame.html]
|
[embedded-opener-remove-frame.html]
|
||||||
|
expected: CRASH
|
||||||
[opener and "removed" embedded documents]
|
[opener and "removed" embedded documents]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,4 @@
|
||||||
[supported-elements.html]
|
[supported-elements.html]
|
||||||
expected: TIMEOUT
|
|
||||||
[Contenteditable element should support autofocus]
|
[Contenteditable element should support autofocus]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
|
|
@ -7,11 +6,11 @@
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
[Host element with delegatesFocus including no focusable descendants should be skipped]
|
[Host element with delegatesFocus including no focusable descendants should be skipped]
|
||||||
expected: NOTRUN
|
expected: FAIL
|
||||||
|
|
||||||
[Area element should support autofocus]
|
[Area element should support autofocus]
|
||||||
expected: NOTRUN
|
expected: FAIL
|
||||||
|
|
||||||
[Host element with delegatesFocus should support autofocus]
|
[Host element with delegatesFocus should support autofocus]
|
||||||
expected: TIMEOUT
|
expected: FAIL
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -172,3 +172,6 @@
|
||||||
[XHTML img usemap="http://example.org/#garbage-before-hash-id"]
|
[XHTML img usemap="http://example.org/#garbage-before-hash-id"]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
|
[HTML (standards) IMG usemap="no-hash-name"]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
[iframe_sandbox_popups_escaping-2.html]
|
[iframe_sandbox_popups_escaping-2.html]
|
||||||
expected: CRASH
|
expected: TIMEOUT
|
||||||
[Check that popups from a sandboxed iframe escape the sandbox if\n allow-popups-to-escape-sandbox is used]
|
[Check that popups from a sandboxed iframe escape the sandbox if\n allow-popups-to-escape-sandbox is used]
|
||||||
expected: TIMEOUT
|
expected: TIMEOUT
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
[iframe_sandbox_popups_nonescaping-2.html]
|
[iframe_sandbox_popups_nonescaping-2.html]
|
||||||
type: testharness
|
type: testharness
|
||||||
expected: CRASH
|
expected: TIMEOUT
|
||||||
[Check that popups from a sandboxed iframe do not escape the sandbox]
|
[Check that popups from a sandboxed iframe do not escape the sandbox]
|
||||||
expected: NOTRUN
|
expected: NOTRUN
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,5 @@
|
||||||
[iframe_sandbox_popups_nonescaping-3.html]
|
[iframe_sandbox_popups_nonescaping-3.html]
|
||||||
type: testharness
|
type: testharness
|
||||||
expected: TIMEOUT
|
|
||||||
[Check that popups from a sandboxed iframe do not escape the sandbox]
|
[Check that popups from a sandboxed iframe do not escape the sandbox]
|
||||||
expected: NOTRUN
|
expected: FAIL
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
[module-delayed.html]
|
||||||
|
[async document.write in a module]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
|
@ -1,4 +0,0 @@
|
||||||
[module-static-import-delayed.html]
|
|
||||||
[document.write in an imported module]
|
|
||||||
expected: FAIL
|
|
||||||
|
|
||||||
|
|
@ -1,5 +1,4 @@
|
||||||
[realtimeanalyser-fft-scaling.html]
|
[realtimeanalyser-fft-scaling.html]
|
||||||
expected: TIMEOUT
|
|
||||||
[X 2048-point FFT peak position is not equal to 64. Got 0.]
|
[X 2048-point FFT peak position is not equal to 64. Got 0.]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -419,3 +419,9 @@
|
||||||
[X Stitched sine-wave buffers at sample rate 43800 does not equal [0,0.06264832615852356,0.12505052983760834,0.18696144223213196,0.24813786149024963,0.308339387178421,0.36732959747314453,0.4248766601085663,0.480754554271698,0.5347436666488647,0.5866320133209229,0.6362156271934509,0.6832997798919678,0.7276994585990906,0.7692402601242065,0.8077589869499207...\] with an element-wise tolerance of {"absoluteThreshold":0.0038986,"relativeThreshold":0}.\n\tIndex\tActual\t\t\tExpected\t\tAbsError\t\tRelError\t\tTest threshold\n\t[28696\]\t-1.8581761986985164e-15\t9.3139332532882690e-1\t9.3139332532882879e-1\t1.0000000000000020e+0\t3.8985999999999999e-3\n\t[28697\]\t7.0477002859115601e-1\t9.0675884485244751e-1\t2.0198881626129150e-1\t2.2275913536212616e-1\t3.8985999999999999e-3\n\tMax AbsError of 9.3139332532882879e-1 at index of 28696.\n\tMax RelError of 1.0000000000000020e+0 at index of 28696.\n]
|
[X Stitched sine-wave buffers at sample rate 43800 does not equal [0,0.06264832615852356,0.12505052983760834,0.18696144223213196,0.24813786149024963,0.308339387178421,0.36732959747314453,0.4248766601085663,0.480754554271698,0.5347436666488647,0.5866320133209229,0.6362156271934509,0.6832997798919678,0.7276994585990906,0.7692402601242065,0.8077589869499207...\] with an element-wise tolerance of {"absoluteThreshold":0.0038986,"relativeThreshold":0}.\n\tIndex\tActual\t\t\tExpected\t\tAbsError\t\tRelError\t\tTest threshold\n\t[28696\]\t-1.8581761986985164e-15\t9.3139332532882690e-1\t9.3139332532882879e-1\t1.0000000000000020e+0\t3.8985999999999999e-3\n\t[28697\]\t7.0477002859115601e-1\t9.0675884485244751e-1\t2.0198881626129150e-1\t2.2275913536212616e-1\t3.8985999999999999e-3\n\tMax AbsError of 9.3139332532882879e-1 at index of 28696.\n\tMax RelError of 1.0000000000000020e+0 at index of 28696.\n]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
|
[X Stitched sine-wave buffers at sample rate 43800 does not equal [0,0.06264832615852356,0.12505052983760834,0.18696144223213196,0.24813786149024963,0.308339387178421,0.36732959747314453,0.4248766601085663,0.480754554271698,0.5347436666488647,0.5866320133209229,0.6362156271934509,0.6832997798919678,0.7276994585990906,0.7692402601242065,0.8077589869499207...\] with an element-wise tolerance of {"absoluteThreshold":0.0038986,"relativeThreshold":0}.\n\tIndex\tActual\t\t\tExpected\t\tAbsError\t\tRelError\t\tTest threshold\n\t[28696\]\t4.3599933296234016e+28\t9.3139332532882690e-1\t4.3599933296234016e+28\t4.6811515726549934e+28\t3.8985999999999999e-3\n\t[28697\]\t7.0477002859115601e-1\t9.0675884485244751e-1\t2.0198881626129150e-1\t2.2275913536212616e-1\t3.8985999999999999e-3\n\tMax AbsError of 4.3599933296234016e+28 at index of 28696.\n\tMax RelError of 4.6811515726549934e+28 at index of 28696.\n]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[X SNR (-529.35563055275 dB) is not greater than or equal to 65.737. Got -529.35563055275.]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
[018.html]
|
|
||||||
expected: TIMEOUT
|
|
||||||
[origin of the script that invoked the method, javascript:]
|
|
||||||
expected: TIMEOUT
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<body>
|
||||||
|
<canvas id="canvas" width="100" height="100"></canvas>
|
||||||
|
</body>
|
||||||
|
<script>
|
||||||
|
var canvas = document.getElementById('canvas');
|
||||||
|
var ctx = canvas.getContext('2d');
|
||||||
|
var grad = ctx.createLinearGradient(0, 0, 0, 100);
|
||||||
|
grad.addColorStop(0, 'red');
|
||||||
|
grad.addColorStop(1, 'black');
|
||||||
|
ctx.fillStyle = grad;
|
||||||
|
ctx.fillRect(0, 0, 100, 100);
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color">
|
||||||
|
<link rel="match" href="bg-color-with-gradient-ref.html">
|
||||||
|
<div style="width: 100px; height: 100px; background: linear-gradient(red, black); background-color: green;"></div>
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<body>
|
||||||
|
<canvas id="canvas" width="200" height="400"></canvas>
|
||||||
|
</body>
|
||||||
|
<script>
|
||||||
|
var canvas = document.getElementById('canvas');
|
||||||
|
var ctx = canvas.getContext('2d');
|
||||||
|
ctx.fillStyle = 'green';
|
||||||
|
ctx.fillRect(0, 0, 100, 150);
|
||||||
|
ctx.fillStyle = 'red';
|
||||||
|
ctx.fillRect(0, 150, 200, 250);
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color">
|
||||||
|
<link rel="match" href="simple-bg-color-ref.html">
|
||||||
|
<style>
|
||||||
|
.box1 {
|
||||||
|
width: 100px;
|
||||||
|
height: 150px;
|
||||||
|
background-color: green;
|
||||||
|
}
|
||||||
|
.box2 {
|
||||||
|
width: 200px;
|
||||||
|
height: 250px;
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<body>
|
||||||
|
<div class='box1'></div>
|
||||||
|
<div class='box2'></div>
|
||||||
|
</body>
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
|
|
||||||
<meta name="assert" content="The order of three should be blue-red-black" />
|
<meta name="assert" content="The order of three should be blue-red-black" />
|
||||||
|
|
||||||
<link rel="match" href="reference/Flexible-order-ref.html">
|
<link rel="match" href="reference/flexible-order-ref.html">
|
||||||
<link rel="author" title="KeynesQu" href="mailto:keynesqu@sohu.com" />
|
<link rel="author" title="KeynesQu" href="mailto:keynesqu@sohu.com" />
|
||||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#order-property" />
|
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#order-property" />
|
||||||
|
|
||||||
|
|
@ -1,122 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!--
|
|
||||||
Any copyright is dedicated to the Public Domain.
|
|
||||||
http://creativecommons.org/publicdomain/zero/1.0/
|
|
||||||
-->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Reftest Reference</title>
|
|
||||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
|
||||||
<style>
|
|
||||||
.flexbox {
|
|
||||||
border: 1px solid black;
|
|
||||||
margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
|
|
||||||
float: left; /* For testing in "rows" */
|
|
||||||
}
|
|
||||||
br { clear: both; }
|
|
||||||
|
|
||||||
.flexbox > * {
|
|
||||||
/* Disable "min-width:auto"/"min-height:auto" to focus purely on
|
|
||||||
later channels of influence. */
|
|
||||||
min-width: 0;
|
|
||||||
min-height: 0;
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
|
|
||||||
|
|
||||||
<!-- Row 1: no special sizing: -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 30px;
|
|
||||||
height: 30px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 30px;
|
|
||||||
height: 30px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 30px;
|
|
||||||
height: 30px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 3: min main-size OR min cross-size, or both -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 34px;
|
|
||||||
height: 34px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 34px;
|
|
||||||
height: 34px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 34px;
|
|
||||||
height: 34px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 34px;
|
|
||||||
height: 34px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 4: max main-size OR max cross-size, or both -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 10px;
|
|
||||||
height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 10px;
|
|
||||||
height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 6px;
|
|
||||||
height: 6px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 6px;
|
|
||||||
height: 6px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 5: min main-size vs. max cross-size, & vice versa -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 30px;
|
|
||||||
height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 10px;
|
|
||||||
height: 30px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 30px;
|
|
||||||
height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 30px;
|
|
||||||
height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 10px;
|
|
||||||
height: 30px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 10px;
|
|
||||||
height: 30px">
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,125 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!--
|
|
||||||
Any copyright is dedicated to the Public Domain.
|
|
||||||
http://creativecommons.org/publicdomain/zero/1.0/
|
|
||||||
-->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>
|
|
||||||
CSS Test: Testing how explicit main-size & cross-size constraints
|
|
||||||
influence sizing on non-stretched flex item w/ intrinsic ratio.
|
|
||||||
</title>
|
|
||||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
|
||||||
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
|
|
||||||
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
|
|
||||||
<link rel="match" href="flexbox-intrinsic-ratio-001-ref.html">
|
|
||||||
<style>
|
|
||||||
.flexbox {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
border: 1px solid black;
|
|
||||||
margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: flex-start;
|
|
||||||
|
|
||||||
float: left; /* For testing in "rows" */
|
|
||||||
}
|
|
||||||
br { clear: both; }
|
|
||||||
|
|
||||||
.flexbox > * {
|
|
||||||
/* Disable "min-width:auto"/"min-height:auto" to focus purely on
|
|
||||||
later channels of influence. */
|
|
||||||
min-width: 0;
|
|
||||||
min-height: 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
|
|
||||||
|
|
||||||
<!-- Row 1: no special sizing: -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 30px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="height: 30px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="flex: 0 0 30px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 3: min main-size OR min cross-size, or both -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 34px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-height: 34px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 30px;
|
|
||||||
min-height: 34px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 34px;
|
|
||||||
min-height: 30px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 4: max main-size OR max cross-size, or both -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 10px;
|
|
||||||
max-height: 6px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 6px;
|
|
||||||
max-height: 10px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 5: min main-size vs. max cross-size, & vice versa -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 30px;
|
|
||||||
max-height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 10px;
|
|
||||||
min-height: 30px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 30px;
|
|
||||||
height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 30px;
|
|
||||||
max-height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 10px;
|
|
||||||
height: 30px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 10px;
|
|
||||||
min-height: 30px">
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,128 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!--
|
|
||||||
Any copyright is dedicated to the Public Domain.
|
|
||||||
http://creativecommons.org/publicdomain/zero/1.0/
|
|
||||||
-->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>
|
|
||||||
CSS Test: Testing how explicit main-size & cross-size constraints
|
|
||||||
influence sizing on non-stretched flex item w/ intrinsic ratio
|
|
||||||
(with a vertical writing-mode on the flex items).
|
|
||||||
</title>
|
|
||||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
|
||||||
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
|
|
||||||
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
|
|
||||||
<link rel="match" href="flexbox-intrinsic-ratio-001-ref.html">
|
|
||||||
<style>
|
|
||||||
.flexbox {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
border: 1px solid black;
|
|
||||||
margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: flex-start;
|
|
||||||
|
|
||||||
float: left; /* For testing in "rows" */
|
|
||||||
}
|
|
||||||
br { clear: both; }
|
|
||||||
|
|
||||||
.flexbox > * {
|
|
||||||
writing-mode: vertical-lr;
|
|
||||||
|
|
||||||
/* Disable "min-width:auto"/"min-height:auto" to focus purely on
|
|
||||||
later channels of influence. */
|
|
||||||
min-width: 0;
|
|
||||||
min-height: 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
|
|
||||||
|
|
||||||
<!-- Row 1: no special sizing: -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 30px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="height: 30px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="flex: 0 0 30px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 3: min main-size OR min cross-size, or both -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 34px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-height: 34px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 30px;
|
|
||||||
min-height: 34px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 34px;
|
|
||||||
min-height: 30px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 4: max main-size OR max cross-size, or both -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 10px;
|
|
||||||
max-height: 6px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 6px;
|
|
||||||
max-height: 10px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 5: min main-size vs. max cross-size, & vice versa -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 30px;
|
|
||||||
max-height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 10px;
|
|
||||||
min-height: 30px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 30px;
|
|
||||||
height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 30px;
|
|
||||||
max-height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 10px;
|
|
||||||
height: 30px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 10px;
|
|
||||||
min-height: 30px">
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,125 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!--
|
|
||||||
Any copyright is dedicated to the Public Domain.
|
|
||||||
http://creativecommons.org/publicdomain/zero/1.0/
|
|
||||||
-->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>
|
|
||||||
CSS Test: Testing how explicit main-size & cross-size constraints
|
|
||||||
influence sizing on non-stretched flex item w/ intrinsic ratio.
|
|
||||||
</title>
|
|
||||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
|
||||||
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
|
|
||||||
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
|
|
||||||
<link rel="match" href="flexbox-intrinsic-ratio-001-ref.html">
|
|
||||||
<style>
|
|
||||||
.flexbox {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
border: 1px solid black;
|
|
||||||
margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: flex-start;
|
|
||||||
|
|
||||||
float: left; /* For testing in "rows" */
|
|
||||||
}
|
|
||||||
br { clear: both; }
|
|
||||||
|
|
||||||
.flexbox > * {
|
|
||||||
/* Disable "min-width:auto"/"min-height:auto" to focus purely on
|
|
||||||
later channels of influence. */
|
|
||||||
min-width: 0;
|
|
||||||
min-height: 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
|
|
||||||
|
|
||||||
<!-- Row 1: no special sizing: -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 30px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="height: 30px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="flex: 0 0 30px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 3: min main-size OR min cross-size, or both -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 34px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-height: 34px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 30px;
|
|
||||||
min-height: 34px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 34px;
|
|
||||||
min-height: 30px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 4: max main-size OR max cross-size, or both -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 10px;
|
|
||||||
max-height: 6px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 6px;
|
|
||||||
max-height: 10px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 5: min main-size vs. max cross-size, & vice versa -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 30px;
|
|
||||||
max-height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 10px;
|
|
||||||
min-height: 30px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 30px;
|
|
||||||
height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 30px;
|
|
||||||
max-height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 10px;
|
|
||||||
height: 30px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 10px;
|
|
||||||
min-height: 30px">
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,128 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!--
|
|
||||||
Any copyright is dedicated to the Public Domain.
|
|
||||||
http://creativecommons.org/publicdomain/zero/1.0/
|
|
||||||
-->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>
|
|
||||||
CSS Test: Testing how explicit main-size & cross-size constraints
|
|
||||||
influence sizing on non-stretched flex item w/ intrinsic ratio
|
|
||||||
(with a vertical writing-mode on the flex items).
|
|
||||||
</title>
|
|
||||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
|
||||||
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
|
|
||||||
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
|
|
||||||
<link rel="match" href="flexbox-intrinsic-ratio-001-ref.html">
|
|
||||||
<style>
|
|
||||||
.flexbox {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
border: 1px solid black;
|
|
||||||
margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: flex-start;
|
|
||||||
|
|
||||||
float: left; /* For testing in "rows" */
|
|
||||||
}
|
|
||||||
br { clear: both; }
|
|
||||||
|
|
||||||
.flexbox > * {
|
|
||||||
writing-mode: vertical-lr;
|
|
||||||
|
|
||||||
/* Disable "min-width:auto"/"min-height:auto" to focus purely on
|
|
||||||
later channels of influence. */
|
|
||||||
min-width: 0;
|
|
||||||
min-height: 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
|
|
||||||
|
|
||||||
<!-- Row 1: no special sizing: -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 30px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="height: 30px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="flex: 0 0 30px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 3: min main-size OR min cross-size, or both -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 34px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-height: 34px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 30px;
|
|
||||||
min-height: 34px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 34px;
|
|
||||||
min-height: 30px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 4: max main-size OR max cross-size, or both -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 10px;
|
|
||||||
max-height: 6px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 6px;
|
|
||||||
max-height: 10px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 5: min main-size vs. max cross-size, & vice versa -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 30px;
|
|
||||||
max-height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 10px;
|
|
||||||
min-height: 30px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 30px;
|
|
||||||
height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 30px;
|
|
||||||
max-height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 10px;
|
|
||||||
height: 30px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 10px;
|
|
||||||
min-height: 30px">
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,123 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!--
|
|
||||||
Any copyright is dedicated to the Public Domain.
|
|
||||||
http://creativecommons.org/publicdomain/zero/1.0/
|
|
||||||
-->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Reftest Reference</title>
|
|
||||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
|
||||||
<style>
|
|
||||||
.flexbox {
|
|
||||||
border: 1px solid black;
|
|
||||||
margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
|
|
||||||
float: left; /* For testing in "rows" */
|
|
||||||
}
|
|
||||||
br { clear: both; }
|
|
||||||
|
|
||||||
.flexbox > * {
|
|
||||||
/* Disable "min-width:auto"/"min-height:auto" to focus purely on
|
|
||||||
later channels of influence. */
|
|
||||||
min-width: 0;
|
|
||||||
min-height: 0;
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
|
|
||||||
|
|
||||||
<!-- Row 1: no special sizing: -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 16px;
|
|
||||||
height: 40px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 30px;
|
|
||||||
height: 40px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 30px;
|
|
||||||
height: 30px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 30px;
|
|
||||||
height: 40px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 3: min main-size OR min cross-size, or both -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 34px;
|
|
||||||
height: 40px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 34px;
|
|
||||||
height: 40px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 34px;
|
|
||||||
height: 40px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 34px;
|
|
||||||
height: 40px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 4: max main-size OR max cross-size, or both -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 10px;
|
|
||||||
height: 40px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 10px;
|
|
||||||
height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 6px;
|
|
||||||
height: 6px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 6px;
|
|
||||||
height: 10px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 5: min main-size vs. max cross-size, & vice versa -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 30px;
|
|
||||||
height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 10px;
|
|
||||||
height: 40px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 30px;
|
|
||||||
height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 30px;
|
|
||||||
height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 10px;
|
|
||||||
height: 30px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 10px;
|
|
||||||
height: 40px">
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,125 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!--
|
|
||||||
Any copyright is dedicated to the Public Domain.
|
|
||||||
http://creativecommons.org/publicdomain/zero/1.0/
|
|
||||||
-->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>
|
|
||||||
CSS Test: Testing how explicit main-size & cross-size constraints
|
|
||||||
influence sizing on stretched flex item w/ intrinsic ratio.
|
|
||||||
</title>
|
|
||||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
|
||||||
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
|
|
||||||
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
|
|
||||||
<link rel="match" href="flexbox-intrinsic-ratio-003-ref.html">
|
|
||||||
<style>
|
|
||||||
.flexbox {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
border: 1px solid black;
|
|
||||||
margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: stretch;
|
|
||||||
|
|
||||||
float: left; /* For testing in "rows" */
|
|
||||||
}
|
|
||||||
br { clear: both; }
|
|
||||||
|
|
||||||
.flexbox > * {
|
|
||||||
/* Disable "min-width:auto"/"min-height:auto" to focus purely on
|
|
||||||
later channels of influence. */
|
|
||||||
min-width: 0;
|
|
||||||
min-height: 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
|
|
||||||
|
|
||||||
<!-- Row 1: no special sizing: -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 30px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="height: 30px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="flex: 0 0 30px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 3: min main-size OR min cross-size, or both -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 34px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-height: 34px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 30px;
|
|
||||||
min-height: 34px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 34px;
|
|
||||||
min-height: 30px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 4: max main-size OR max cross-size, or both -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 10px;
|
|
||||||
max-height: 6px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 6px;
|
|
||||||
max-height: 10px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 5: min main-size vs. max cross-size, & vice versa -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 30px;
|
|
||||||
max-height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 10px;
|
|
||||||
min-height: 30px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 30px;
|
|
||||||
height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 30px;
|
|
||||||
max-height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 10px;
|
|
||||||
height: 30px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 10px;
|
|
||||||
min-height: 30px">
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,128 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!--
|
|
||||||
Any copyright is dedicated to the Public Domain.
|
|
||||||
http://creativecommons.org/publicdomain/zero/1.0/
|
|
||||||
-->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>
|
|
||||||
CSS Test: Testing how explicit main-size & cross-size constraints
|
|
||||||
influence sizing on stretched flex item w/ intrinsic ratio
|
|
||||||
(with a vertical writing-mode on the flex items).
|
|
||||||
</title>
|
|
||||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
|
||||||
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
|
|
||||||
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
|
|
||||||
<link rel="match" href="flexbox-intrinsic-ratio-003-ref.html">
|
|
||||||
<style>
|
|
||||||
.flexbox {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
border: 1px solid black;
|
|
||||||
margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: stretch;
|
|
||||||
|
|
||||||
float: left; /* For testing in "rows" */
|
|
||||||
}
|
|
||||||
br { clear: both; }
|
|
||||||
|
|
||||||
.flexbox > * {
|
|
||||||
writing-mode: vertical-rl;
|
|
||||||
|
|
||||||
/* Disable "min-width:auto"/"min-height:auto" to focus purely on
|
|
||||||
later channels of influence. */
|
|
||||||
min-width: 0;
|
|
||||||
min-height: 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
|
|
||||||
|
|
||||||
<!-- Row 1: no special sizing: -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 30px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="height: 30px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="flex: 0 0 30px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 3: min main-size OR min cross-size, or both -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 34px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-height: 34px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 30px;
|
|
||||||
min-height: 34px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 34px;
|
|
||||||
min-height: 30px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 4: max main-size OR max cross-size, or both -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 10px;
|
|
||||||
max-height: 6px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 6px;
|
|
||||||
max-height: 10px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 5: min main-size vs. max cross-size, & vice versa -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 30px;
|
|
||||||
max-height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 10px;
|
|
||||||
min-height: 30px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 30px;
|
|
||||||
height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 30px;
|
|
||||||
max-height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 10px;
|
|
||||||
height: 30px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 10px;
|
|
||||||
min-height: 30px">
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,123 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!--
|
|
||||||
Any copyright is dedicated to the Public Domain.
|
|
||||||
http://creativecommons.org/publicdomain/zero/1.0/
|
|
||||||
-->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Reftest Reference</title>
|
|
||||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
|
||||||
<style>
|
|
||||||
.flexbox {
|
|
||||||
border: 1px solid black;
|
|
||||||
margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
|
|
||||||
float: left; /* For testing in "rows" */
|
|
||||||
}
|
|
||||||
br { clear: both; }
|
|
||||||
|
|
||||||
.flexbox > * {
|
|
||||||
/* Disable "min-width:auto"/"min-height:auto" to focus purely on
|
|
||||||
later channels of influence. */
|
|
||||||
min-width: 0;
|
|
||||||
min-height: 0;
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
|
|
||||||
|
|
||||||
<!-- Row 1: no special sizing: -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 40px;
|
|
||||||
height: 16px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 30px;
|
|
||||||
height: 30px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 40px;
|
|
||||||
height: 30px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 40px;
|
|
||||||
height: 30px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 3: min main-size OR min cross-size, or both -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 40px;
|
|
||||||
height: 34px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 40px;
|
|
||||||
height: 34px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 40px;
|
|
||||||
height: 34px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 40px;
|
|
||||||
height: 34px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 4: max main-size OR max cross-size, or both -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 10px;
|
|
||||||
height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 40px;
|
|
||||||
height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 10px;
|
|
||||||
height: 6px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 6px;
|
|
||||||
height: 6px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 5: min main-size vs. max cross-size, & vice versa -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 40px;
|
|
||||||
height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 10px;
|
|
||||||
height: 30px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 40px;
|
|
||||||
height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 30px;
|
|
||||||
height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 10px;
|
|
||||||
height: 30px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 10px;
|
|
||||||
height: 30px">
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,125 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!--
|
|
||||||
Any copyright is dedicated to the Public Domain.
|
|
||||||
http://creativecommons.org/publicdomain/zero/1.0/
|
|
||||||
-->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>
|
|
||||||
CSS Test: Testing how explicit main-size & cross-size constraints
|
|
||||||
influence sizing on stretched flex item w/ intrinsic ratio.
|
|
||||||
</title>
|
|
||||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
|
||||||
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
|
|
||||||
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
|
|
||||||
<link rel="match" href="flexbox-intrinsic-ratio-004-ref.html">
|
|
||||||
<style>
|
|
||||||
.flexbox {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
border: 1px solid black;
|
|
||||||
margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: stretch;
|
|
||||||
|
|
||||||
float: left; /* For testing in "rows" */
|
|
||||||
}
|
|
||||||
br { clear: both; }
|
|
||||||
|
|
||||||
.flexbox > * {
|
|
||||||
/* Disable "min-width:auto"/"min-height:auto" to focus purely on
|
|
||||||
later channels of influence. */
|
|
||||||
min-width: 0;
|
|
||||||
min-height: 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
|
|
||||||
|
|
||||||
<!-- Row 1: no special sizing: -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 30px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="height: 30px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="flex: 0 0 30px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 3: min main-size OR min cross-size, or both -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 34px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-height: 34px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 30px;
|
|
||||||
min-height: 34px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 34px;
|
|
||||||
min-height: 30px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 4: max main-size OR max cross-size, or both -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 10px;
|
|
||||||
max-height: 6px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 6px;
|
|
||||||
max-height: 10px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 5: min main-size vs. max cross-size, & vice versa -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 30px;
|
|
||||||
max-height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 10px;
|
|
||||||
min-height: 30px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 30px;
|
|
||||||
height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 30px;
|
|
||||||
max-height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 10px;
|
|
||||||
height: 30px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 10px;
|
|
||||||
min-height: 30px">
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,128 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!--
|
|
||||||
Any copyright is dedicated to the Public Domain.
|
|
||||||
http://creativecommons.org/publicdomain/zero/1.0/
|
|
||||||
-->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>
|
|
||||||
CSS Test: Testing how explicit main-size & cross-size constraints
|
|
||||||
influence sizing on stretched flex item w/ intrinsic ratio
|
|
||||||
(with a vertical writing-mode on the flex items).
|
|
||||||
</title>
|
|
||||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
|
||||||
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
|
|
||||||
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
|
|
||||||
<link rel="match" href="flexbox-intrinsic-ratio-004-ref.html">
|
|
||||||
<style>
|
|
||||||
.flexbox {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
border: 1px solid black;
|
|
||||||
margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: stretch;
|
|
||||||
|
|
||||||
float: left; /* For testing in "rows" */
|
|
||||||
}
|
|
||||||
br { clear: both; }
|
|
||||||
|
|
||||||
.flexbox > * {
|
|
||||||
writing-mode: vertical-rl;
|
|
||||||
|
|
||||||
/* Disable "min-width:auto"/"min-height:auto" to focus purely on
|
|
||||||
later channels of influence. */
|
|
||||||
min-width: 0;
|
|
||||||
min-height: 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
|
|
||||||
|
|
||||||
<!-- Row 1: no special sizing: -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 30px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="height: 30px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="flex: 0 0 30px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 3: min main-size OR min cross-size, or both -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 34px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-height: 34px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 30px;
|
|
||||||
min-height: 34px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 34px;
|
|
||||||
min-height: 30px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 4: max main-size OR max cross-size, or both -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 10px;
|
|
||||||
max-height: 6px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 6px;
|
|
||||||
max-height: 10px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 5: min main-size vs. max cross-size, & vice versa -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 30px;
|
|
||||||
max-height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 10px;
|
|
||||||
min-height: 30px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 30px;
|
|
||||||
height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 30px;
|
|
||||||
max-height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 10px;
|
|
||||||
height: 30px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 10px;
|
|
||||||
min-height: 30px">
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,123 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!--
|
|
||||||
Any copyright is dedicated to the Public Domain.
|
|
||||||
http://creativecommons.org/publicdomain/zero/1.0/
|
|
||||||
-->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Reftest Reference</title>
|
|
||||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
|
||||||
<style>
|
|
||||||
.flexbox {
|
|
||||||
border: 1px solid black;
|
|
||||||
margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
|
|
||||||
float: left; /* For testing in "rows" */
|
|
||||||
}
|
|
||||||
br { clear: both; }
|
|
||||||
|
|
||||||
.flexbox > * {
|
|
||||||
/* Disable "min-width:auto"/"min-height:auto" to focus purely on
|
|
||||||
later channels of influence. */
|
|
||||||
min-width: 0;
|
|
||||||
min-height: 0;
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
|
|
||||||
|
|
||||||
<!-- Row 1: no special sizing: -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 40px;
|
|
||||||
height: 40px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 40px;
|
|
||||||
height: 40px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 40px;
|
|
||||||
height: 30px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 40px;
|
|
||||||
height: 40px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 3: min main-size OR min cross-size, or both -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 40px;
|
|
||||||
height: 40px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 40px;
|
|
||||||
height: 40px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 40px;
|
|
||||||
height: 40px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 40px;
|
|
||||||
height: 40px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 4: max main-size OR max cross-size, or both -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 10px;
|
|
||||||
height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 40px;
|
|
||||||
height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 10px;
|
|
||||||
height: 6px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 6px;
|
|
||||||
height: 6px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 5: min main-size vs. max cross-size, & vice versa -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 40px;
|
|
||||||
height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 10px;
|
|
||||||
height: 30px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 40px;
|
|
||||||
height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 40px;
|
|
||||||
height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 10px;
|
|
||||||
height: 30px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 40px;
|
|
||||||
height: 40px">
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,127 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!--
|
|
||||||
Any copyright is dedicated to the Public Domain.
|
|
||||||
http://creativecommons.org/publicdomain/zero/1.0/
|
|
||||||
-->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>
|
|
||||||
CSS Test: Testing how explicit main-size & cross-size constraints
|
|
||||||
influence sizing on non-stretched flexible flex item w/ intrinsic ratio.
|
|
||||||
</title>
|
|
||||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
|
||||||
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
|
|
||||||
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
|
|
||||||
<link rel="match" href="flexbox-intrinsic-ratio-005-ref.html">
|
|
||||||
<style>
|
|
||||||
.flexbox {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
border: 1px solid black;
|
|
||||||
margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: flex-start;
|
|
||||||
|
|
||||||
float: left; /* For testing in "rows" */
|
|
||||||
}
|
|
||||||
br { clear: both; }
|
|
||||||
|
|
||||||
.flexbox > * {
|
|
||||||
flex: 1;
|
|
||||||
|
|
||||||
/* Disable "min-width:auto"/"min-height:auto" to focus purely on
|
|
||||||
later channels of influence. */
|
|
||||||
min-width: 0;
|
|
||||||
min-height: 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
|
|
||||||
|
|
||||||
<!-- Row 1: no special sizing: -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 30px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="height: 30px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="flex: 1 1 30px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 3: min main-size OR min cross-size, or both -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 34px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-height: 34px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 30px;
|
|
||||||
min-height: 34px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 34px;
|
|
||||||
min-height: 30px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 4: max main-size OR max cross-size, or both -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 10px;
|
|
||||||
max-height: 6px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 6px;
|
|
||||||
max-height: 10px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 5: min main-size vs. max cross-size, & vice versa -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 30px;
|
|
||||||
max-height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 10px;
|
|
||||||
min-height: 30px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 30px;
|
|
||||||
height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 30px;
|
|
||||||
max-height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 10px;
|
|
||||||
height: 30px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 10px;
|
|
||||||
min-height: 30px">
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,129 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!--
|
|
||||||
Any copyright is dedicated to the Public Domain.
|
|
||||||
http://creativecommons.org/publicdomain/zero/1.0/
|
|
||||||
-->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>
|
|
||||||
CSS Test: Testing how explicit main-size & cross-size constraints
|
|
||||||
influence sizing on non-stretched flexible flex item w/ intrinsic ratio
|
|
||||||
(with a vertical writing-mode on the flex items).
|
|
||||||
</title>
|
|
||||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
|
||||||
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
|
|
||||||
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
|
|
||||||
<link rel="match" href="flexbox-intrinsic-ratio-005-ref.html">
|
|
||||||
<style>
|
|
||||||
.flexbox {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
border: 1px solid black;
|
|
||||||
margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: flex-start;
|
|
||||||
|
|
||||||
float: left; /* For testing in "rows" */
|
|
||||||
}
|
|
||||||
br { clear: both; }
|
|
||||||
|
|
||||||
.flexbox > * {
|
|
||||||
flex: 1;
|
|
||||||
writing-mode: vertical-lr;
|
|
||||||
|
|
||||||
/* Disable "min-width:auto"/"min-height:auto" to focus purely on
|
|
||||||
later channels of influence. */
|
|
||||||
min-width: 0;
|
|
||||||
min-height: 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
|
|
||||||
|
|
||||||
<!-- Row 1: no special sizing: -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 30px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="height: 30px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="flex: 1 1 30px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 3: min main-size OR min cross-size, or both -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 34px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-height: 34px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 30px;
|
|
||||||
min-height: 34px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 34px;
|
|
||||||
min-height: 30px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 4: max main-size OR max cross-size, or both -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 10px;
|
|
||||||
max-height: 6px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 6px;
|
|
||||||
max-height: 10px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 5: min main-size vs. max cross-size, & vice versa -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 30px;
|
|
||||||
max-height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 10px;
|
|
||||||
min-height: 30px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 30px;
|
|
||||||
height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 30px;
|
|
||||||
max-height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 10px;
|
|
||||||
height: 30px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 10px;
|
|
||||||
min-height: 30px">
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,123 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!--
|
|
||||||
Any copyright is dedicated to the Public Domain.
|
|
||||||
http://creativecommons.org/publicdomain/zero/1.0/
|
|
||||||
-->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Reftest Reference</title>
|
|
||||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
|
||||||
<style>
|
|
||||||
.flexbox {
|
|
||||||
border: 1px solid black;
|
|
||||||
margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
|
|
||||||
float: left; /* For testing in "rows" */
|
|
||||||
}
|
|
||||||
br { clear: both; }
|
|
||||||
|
|
||||||
.flexbox > * {
|
|
||||||
/* Disable "min-width:auto"/"min-height:auto" to focus purely on
|
|
||||||
later channels of influence. */
|
|
||||||
min-width: 0;
|
|
||||||
min-height: 0;
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
|
|
||||||
|
|
||||||
<!-- Row 1: no special sizing: -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 40px;
|
|
||||||
height: 40px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 30px;
|
|
||||||
height: 40px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 40px;
|
|
||||||
height: 40px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 40px;
|
|
||||||
height: 40px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 3: min main-size OR min cross-size, or both -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 40px;
|
|
||||||
height: 40px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 40px;
|
|
||||||
height: 40px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 40px;
|
|
||||||
height: 40px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 40px;
|
|
||||||
height: 40px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 4: max main-size OR max cross-size, or both -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 10px;
|
|
||||||
height: 40px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 10px;
|
|
||||||
height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 6px;
|
|
||||||
height: 6px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 6px;
|
|
||||||
height: 10px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 5: min main-size vs. max cross-size, & vice versa -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 30px;
|
|
||||||
height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 10px;
|
|
||||||
height: 40px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 40px;
|
|
||||||
height: 40px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 30px;
|
|
||||||
height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 10px;
|
|
||||||
height: 40px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 10px;
|
|
||||||
height: 40px">
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,127 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!--
|
|
||||||
Any copyright is dedicated to the Public Domain.
|
|
||||||
http://creativecommons.org/publicdomain/zero/1.0/
|
|
||||||
-->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>
|
|
||||||
CSS Test: Testing how explicit main-size & cross-size constraints
|
|
||||||
influence sizing on non-stretched flexible flex item w/ intrinsic ratio.
|
|
||||||
</title>
|
|
||||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
|
||||||
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
|
|
||||||
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
|
|
||||||
<link rel="match" href="flexbox-intrinsic-ratio-006-ref.html">
|
|
||||||
<style>
|
|
||||||
.flexbox {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
border: 1px solid black;
|
|
||||||
margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: flex-start;
|
|
||||||
|
|
||||||
float: left; /* For testing in "rows" */
|
|
||||||
}
|
|
||||||
br { clear: both; }
|
|
||||||
|
|
||||||
.flexbox > * {
|
|
||||||
flex: 1;
|
|
||||||
|
|
||||||
/* Disable "min-width:auto"/"min-height:auto" to focus purely on
|
|
||||||
later channels of influence. */
|
|
||||||
min-width: 0;
|
|
||||||
min-height: 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
|
|
||||||
|
|
||||||
<!-- Row 1: no special sizing: -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 30px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="height: 30px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="flex: 1 1 30px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 3: min main-size OR min cross-size, or both -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 34px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-height: 34px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 30px;
|
|
||||||
min-height: 34px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 34px;
|
|
||||||
min-height: 30px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 4: max main-size OR max cross-size, or both -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 10px;
|
|
||||||
max-height: 6px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 6px;
|
|
||||||
max-height: 10px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 5: min main-size vs. max cross-size, & vice versa -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 30px;
|
|
||||||
max-height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 10px;
|
|
||||||
min-height: 30px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 30px;
|
|
||||||
height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 30px;
|
|
||||||
max-height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 10px;
|
|
||||||
height: 30px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 10px;
|
|
||||||
min-height: 30px">
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,129 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!--
|
|
||||||
Any copyright is dedicated to the Public Domain.
|
|
||||||
http://creativecommons.org/publicdomain/zero/1.0/
|
|
||||||
-->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>
|
|
||||||
CSS Test: Testing how explicit main-size & cross-size constraints
|
|
||||||
influence sizing on non-stretched flexible flex item w/ intrinsic ratio
|
|
||||||
(with a vertical writing-mode on the flex items).
|
|
||||||
</title>
|
|
||||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
|
||||||
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
|
|
||||||
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
|
|
||||||
<link rel="match" href="flexbox-intrinsic-ratio-006-ref.html">
|
|
||||||
<style>
|
|
||||||
.flexbox {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
border: 1px solid black;
|
|
||||||
margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: flex-start;
|
|
||||||
|
|
||||||
float: left; /* For testing in "rows" */
|
|
||||||
}
|
|
||||||
br { clear: both; }
|
|
||||||
|
|
||||||
.flexbox > * {
|
|
||||||
flex: 1;
|
|
||||||
writing-mode: vertical-lr;
|
|
||||||
|
|
||||||
/* Disable "min-width:auto"/"min-height:auto" to focus purely on
|
|
||||||
later channels of influence. */
|
|
||||||
min-width: 0;
|
|
||||||
min-height: 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
|
|
||||||
|
|
||||||
<!-- Row 1: no special sizing: -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 30px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="height: 30px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="flex: 1 1 30px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 3: min main-size OR min cross-size, or both -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 34px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-height: 34px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 30px;
|
|
||||||
min-height: 34px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 34px;
|
|
||||||
min-height: 30px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 4: max main-size OR max cross-size, or both -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 10px;
|
|
||||||
max-height: 6px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 6px;
|
|
||||||
max-height: 10px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 5: min main-size vs. max cross-size, & vice versa -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 30px;
|
|
||||||
max-height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 10px;
|
|
||||||
min-height: 30px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 30px;
|
|
||||||
height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 30px;
|
|
||||||
max-height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 10px;
|
|
||||||
height: 30px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 10px;
|
|
||||||
min-height: 30px">
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,128 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!--
|
|
||||||
Any copyright is dedicated to the Public Domain.
|
|
||||||
http://creativecommons.org/publicdomain/zero/1.0/
|
|
||||||
-->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Reftest Reference</title>
|
|
||||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
|
||||||
<style>
|
|
||||||
.flexbox {
|
|
||||||
border: 1px solid black;
|
|
||||||
margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
|
|
||||||
float: left; /* For testing in "rows" */
|
|
||||||
}
|
|
||||||
img {
|
|
||||||
padding: 1px 2px 3px 4px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
background: pink;
|
|
||||||
}
|
|
||||||
|
|
||||||
br { clear: both; }
|
|
||||||
|
|
||||||
.flexbox > * {
|
|
||||||
/* Disable "min-width:auto"/"min-height:auto" to focus purely on
|
|
||||||
later channels of influence. */
|
|
||||||
min-width: 0;
|
|
||||||
min-height: 0;
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
|
|
||||||
|
|
||||||
<!-- Row 1: no special sizing: -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 30px;
|
|
||||||
height: 28px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 32px;
|
|
||||||
height: 30px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 30px;
|
|
||||||
height: 28px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 3: min main-size OR min cross-size, or both -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 34px;
|
|
||||||
height: 32px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 36px;
|
|
||||||
height: 34px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 36px;
|
|
||||||
height: 34px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 34px;
|
|
||||||
height: 32px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 4: max main-size OR max cross-size, or both -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 16px;
|
|
||||||
height: 14px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 18px;
|
|
||||||
height: 16px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 16px;
|
|
||||||
height: 14px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 14px;
|
|
||||||
height: 12px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 5: min main-size vs. max cross-size, & vice versa -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 30px;
|
|
||||||
height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 10px;
|
|
||||||
height: 30px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 30px;
|
|
||||||
height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 30px;
|
|
||||||
height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 10px;
|
|
||||||
height: 30px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 10px;
|
|
||||||
height: 30px">
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,132 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!--
|
|
||||||
Any copyright is dedicated to the Public Domain.
|
|
||||||
http://creativecommons.org/publicdomain/zero/1.0/
|
|
||||||
-->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>
|
|
||||||
CSS Test: Testing how explicit main-size & cross-size constraints
|
|
||||||
influence sizing on non-stretched flex item w/ intrinsic ratio,
|
|
||||||
some padding, and box-sizing:border-box.
|
|
||||||
</title>
|
|
||||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
|
||||||
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
|
|
||||||
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
|
|
||||||
<link rel="match" href="flexbox-intrinsic-ratio-007-ref.html">
|
|
||||||
<style>
|
|
||||||
.flexbox {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
border: 1px solid black;
|
|
||||||
margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: flex-start;
|
|
||||||
|
|
||||||
float: left; /* For testing in "rows" */
|
|
||||||
}
|
|
||||||
img {
|
|
||||||
padding: 1px 2px 3px 4px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
background: pink;
|
|
||||||
}
|
|
||||||
|
|
||||||
br { clear: both; }
|
|
||||||
|
|
||||||
.flexbox > * {
|
|
||||||
/* Disable "min-width:auto"/"min-height:auto" to focus purely on
|
|
||||||
later channels of influence. */
|
|
||||||
min-width: 0;
|
|
||||||
min-height: 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
|
|
||||||
|
|
||||||
<!-- Row 1: no special sizing: -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 30px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="height: 30px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="flex: 0 0 30px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 3: min main-size OR min cross-size, or both -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 34px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-height: 34px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 30px;
|
|
||||||
min-height: 34px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 34px;
|
|
||||||
min-height: 30px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 4: max main-size OR max cross-size, or both -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 16px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-height: 16px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 20px;
|
|
||||||
max-height: 14px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 14px;
|
|
||||||
max-height: 20px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 5: min main-size vs. max cross-size, & vice versa -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 30px;
|
|
||||||
max-height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 10px;
|
|
||||||
min-height: 30px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 30px;
|
|
||||||
height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 30px;
|
|
||||||
max-height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 10px;
|
|
||||||
height: 30px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 10px;
|
|
||||||
min-height: 30px">
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,134 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!--
|
|
||||||
Any copyright is dedicated to the Public Domain.
|
|
||||||
http://creativecommons.org/publicdomain/zero/1.0/
|
|
||||||
-->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>
|
|
||||||
CSS Test: Testing how explicit main-size & cross-size constraints
|
|
||||||
influence sizing on non-stretched flex item w/ intrinsic ratio,
|
|
||||||
some padding, box-sizing:border-box, and a vertical writing-mode.
|
|
||||||
</title>
|
|
||||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
|
||||||
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
|
|
||||||
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
|
|
||||||
<link rel="match" href="flexbox-intrinsic-ratio-007-ref.html">
|
|
||||||
<style>
|
|
||||||
.flexbox {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
border: 1px solid black;
|
|
||||||
margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: flex-start;
|
|
||||||
|
|
||||||
float: left; /* For testing in "rows" */
|
|
||||||
}
|
|
||||||
img {
|
|
||||||
padding: 1px 2px 3px 4px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
background: pink;
|
|
||||||
}
|
|
||||||
|
|
||||||
br { clear: both; }
|
|
||||||
|
|
||||||
.flexbox > * {
|
|
||||||
writing-mode: vertical-lr;
|
|
||||||
|
|
||||||
/* Disable "min-width:auto"/"min-height:auto" to focus purely on
|
|
||||||
later channels of influence. */
|
|
||||||
min-width: 0;
|
|
||||||
min-height: 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
|
|
||||||
|
|
||||||
<!-- Row 1: no special sizing: -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 30px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="height: 30px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="flex: 0 0 30px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 3: min main-size OR min cross-size, or both -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 34px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-height: 34px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 30px;
|
|
||||||
min-height: 34px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 34px;
|
|
||||||
min-height: 30px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 4: max main-size OR max cross-size, or both -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 16px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-height: 16px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 20px;
|
|
||||||
max-height: 14px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 14px;
|
|
||||||
max-height: 20px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 5: min main-size vs. max cross-size, & vice versa -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 30px;
|
|
||||||
max-height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 10px;
|
|
||||||
min-height: 30px">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="min-width: 30px;
|
|
||||||
height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 30px;
|
|
||||||
max-height: 10px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="max-width: 10px;
|
|
||||||
height: 30px">
|
|
||||||
</div>
|
|
||||||
<div class="flexbox">
|
|
||||||
<img src="support/solidblue.png" style="width: 10px;
|
|
||||||
min-height: 30px">
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
// META: script=/resources/testdriver.js
|
||||||
|
// META: script=/resources/testdriver-vendor.js
|
||||||
|
// META: script=resources/test-expectations.js
|
||||||
|
// META: script=resources/window-tests-chooser.js
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
font_access_test(async t => {
|
||||||
|
await promise_rejects_dom(
|
||||||
|
t, 'NotSupportedError', navigator.fonts.showFontChooser());
|
||||||
|
await promise_rejects_dom(
|
||||||
|
t, 'NotSupportedError', navigator.fonts.showFontChooser({all: false}));
|
||||||
|
});
|
||||||
|
|
@ -1169,6 +1169,78 @@ promise_test(async () => {
|
||||||
checkGetTargetRangesOfInputOnDoNothing();
|
checkGetTargetRangesOfInputOnDoNothing();
|
||||||
}, 'Backspace at "<p>abc</p><table><caption>{}<br></caption><tr><td>cell</td></tr></table>"');
|
}, 'Backspace at "<p>abc</p><table><caption>{}<br></caption><tr><td>cell</td></tr></table>"');
|
||||||
|
|
||||||
|
// If a table cell element is selected, only its content should be deleted.
|
||||||
|
promise_test(async () => {
|
||||||
|
initializeTest("<table><tr><td>cell1</td><td>cell2</td></tr></table>");
|
||||||
|
let cell1 = gEditor.querySelector("td");
|
||||||
|
let tr = cell1.parentNode;
|
||||||
|
gSelection.setBaseAndExtent(tr, 0, tr, 1);
|
||||||
|
await sendBackspaceKey();
|
||||||
|
assert_in_array(gEditor.innerHTML, ["<table><tbody><tr><td></td><td>cell2</td></tr></tbody></table>",
|
||||||
|
"<table><tbody><tr><td><br></td><td>cell2</td></tr></tbody></table>"]);
|
||||||
|
// XXX Perhaps, target range should be selecting only all children of
|
||||||
|
// cell1 instead.
|
||||||
|
checkGetTargetRangesOfBeforeinputOnDeleteSomething({
|
||||||
|
startContainer: tr,
|
||||||
|
startOffset: 0,
|
||||||
|
endContainer: tr,
|
||||||
|
endOffset: 1,
|
||||||
|
});
|
||||||
|
checkGetTargetRangesOfInputOnDeleteSomething();
|
||||||
|
}, 'Backspace at "<table><tr>{<td>cell1</td>}<td>cell2</td></tr></table>"');
|
||||||
|
|
||||||
|
promise_test(async () => {
|
||||||
|
initializeTest("<table><tr><td>cell1</td><td>cell2</td></tr></table>");
|
||||||
|
let cell2 = gEditor.querySelector("td + td");
|
||||||
|
let tr = cell2.parentNode;
|
||||||
|
gSelection.setBaseAndExtent(tr, 1, tr, 2);
|
||||||
|
await sendBackspaceKey();
|
||||||
|
assert_in_array(gEditor.innerHTML, ["<table><tbody><tr><td>cell1</td><td></td></tr></tbody></table>",
|
||||||
|
"<table><tbody><tr><td>cell1</td><td><br></td></tr></tbody></table>"]);
|
||||||
|
// XXX Perhaps, target range should be selecting only all children of
|
||||||
|
// cell1 instead.
|
||||||
|
checkGetTargetRangesOfBeforeinputOnDeleteSomething({
|
||||||
|
startContainer: tr,
|
||||||
|
startOffset: 1,
|
||||||
|
endContainer: tr,
|
||||||
|
endOffset: 2,
|
||||||
|
});
|
||||||
|
checkGetTargetRangesOfInputOnDeleteSomething();
|
||||||
|
}, 'Backspace at "<table><tr><td>cell1</td>{<td>cell2</td>}</tr></table>"');
|
||||||
|
|
||||||
|
// If the last table cell element is selected, what browsers should do?
|
||||||
|
promise_test(async () => {
|
||||||
|
initializeTest("<table><tr><td>cell</td></tr></table>");
|
||||||
|
let cell = gEditor.querySelector("td");
|
||||||
|
let tr = cell.parentNode;
|
||||||
|
let table = gEditor.querySelector("table");
|
||||||
|
gSelection.setBaseAndExtent(tr, 0, tr, 1);
|
||||||
|
await sendBackspaceKey();
|
||||||
|
assert_in_array(gEditor.innerHTML, ["<table><tbody><tr><td></td></tr></tbody></table>",
|
||||||
|
"<table><tbody><tr><td><br></td></tr></tbody></table>",
|
||||||
|
"<br>"]);
|
||||||
|
if (gEditor.querySelector("table")) {
|
||||||
|
// XXX Perhaps, target range should be selecting only all children of
|
||||||
|
// cell1 instead.
|
||||||
|
checkGetTargetRangesOfBeforeinputOnDeleteSomething({
|
||||||
|
startContainer: tr,
|
||||||
|
startOffset: 0,
|
||||||
|
endContainer: tr,
|
||||||
|
endOffset: 1,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
// If it causes deleting entire the table, the `<table>` element should
|
||||||
|
// be in the target range.
|
||||||
|
checkGetTargetRangesOfBeforeinputOnDeleteSomething({
|
||||||
|
startContainer: gEditor,
|
||||||
|
startOffset: 0,
|
||||||
|
endContainer: gEditor,
|
||||||
|
endOffset: 1,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
checkGetTargetRangesOfInputOnDeleteSomething();
|
||||||
|
}, 'Backspace at "<table><tr>{<td>cell</td>}</tr></table>"');
|
||||||
|
|
||||||
// If caret is not adjacent of deleting character, browser may not delete the
|
// If caret is not adjacent of deleting character, browser may not delete the
|
||||||
// character, but update the caret position for next deletion.
|
// character, but update the caret position for next deletion.
|
||||||
promise_test(async () => {
|
promise_test(async () => {
|
||||||
|
|
|
||||||
|
|
@ -1286,6 +1286,78 @@ promise_test(async () => {
|
||||||
checkGetTargetRangesOfInputOnDoNothing();
|
checkGetTargetRangesOfInputOnDoNothing();
|
||||||
}, 'Delete at "<table><caption>{}<br></caption><tr><td>cell</td></tr></table>"');
|
}, 'Delete at "<table><caption>{}<br></caption><tr><td>cell</td></tr></table>"');
|
||||||
|
|
||||||
|
// If a table cell element is selected, only its content should be deleted.
|
||||||
|
promise_test(async () => {
|
||||||
|
initializeTest("<table><tr><td>cell1</td><td>cell2</td></tr></table>");
|
||||||
|
let cell1 = gEditor.querySelector("td");
|
||||||
|
let tr = cell1.parentNode;
|
||||||
|
gSelection.setBaseAndExtent(tr, 0, tr, 1);
|
||||||
|
await sendDeleteKey();
|
||||||
|
assert_in_array(gEditor.innerHTML, ["<table><tbody><tr><td></td><td>cell2</td></tr></tbody></table>",
|
||||||
|
"<table><tbody><tr><td><br></td><td>cell2</td></tr></tbody></table>"]);
|
||||||
|
// XXX Perhaps, target range should be selecting only all children of
|
||||||
|
// cell1 instead.
|
||||||
|
checkGetTargetRangesOfBeforeinputOnDeleteSomething({
|
||||||
|
startContainer: tr,
|
||||||
|
startOffset: 0,
|
||||||
|
endContainer: tr,
|
||||||
|
endOffset: 1,
|
||||||
|
});
|
||||||
|
checkGetTargetRangesOfInputOnDeleteSomething();
|
||||||
|
}, 'Delete at "<table><tr>{<td>cell1</td>}<td>cell2</td></tr></table>"');
|
||||||
|
|
||||||
|
promise_test(async () => {
|
||||||
|
initializeTest("<table><tr><td>cell1</td><td>cell2</td></tr></table>");
|
||||||
|
let cell2 = gEditor.querySelector("td + td");
|
||||||
|
let tr = cell2.parentNode;
|
||||||
|
gSelection.setBaseAndExtent(tr, 1, tr, 2);
|
||||||
|
await sendDeleteKey();
|
||||||
|
assert_in_array(gEditor.innerHTML, ["<table><tbody><tr><td>cell1</td><td></td></tr></tbody></table>",
|
||||||
|
"<table><tbody><tr><td>cell1</td><td><br></td></tr></tbody></table>"]);
|
||||||
|
// XXX Perhaps, target range should be selecting only all children of
|
||||||
|
// cell1 instead.
|
||||||
|
checkGetTargetRangesOfBeforeinputOnDeleteSomething({
|
||||||
|
startContainer: tr,
|
||||||
|
startOffset: 1,
|
||||||
|
endContainer: tr,
|
||||||
|
endOffset: 2,
|
||||||
|
});
|
||||||
|
checkGetTargetRangesOfInputOnDeleteSomething();
|
||||||
|
}, 'Delete at "<table><tr><td>cell1</td>{<td>cell2</td>}</tr></table>"');
|
||||||
|
|
||||||
|
// If the last table cell element is selected, what browsers should do?
|
||||||
|
promise_test(async () => {
|
||||||
|
initializeTest("<table><tr><td>cell</td></tr></table>");
|
||||||
|
let cell = gEditor.querySelector("td");
|
||||||
|
let tr = cell.parentNode;
|
||||||
|
let table = gEditor.querySelector("table");
|
||||||
|
gSelection.setBaseAndExtent(tr, 0, tr, 1);
|
||||||
|
await sendDeleteKey();
|
||||||
|
assert_in_array(gEditor.innerHTML, ["<table><tbody><tr><td></td></tr></tbody></table>",
|
||||||
|
"<table><tbody><tr><td><br></td></tr></tbody></table>",
|
||||||
|
"<br>"]);
|
||||||
|
if (gEditor.querySelector("table")) {
|
||||||
|
// XXX Perhaps, target range should be selecting only all children of
|
||||||
|
// cell1 instead.
|
||||||
|
checkGetTargetRangesOfBeforeinputOnDeleteSomething({
|
||||||
|
startContainer: tr,
|
||||||
|
startOffset: 0,
|
||||||
|
endContainer: tr,
|
||||||
|
endOffset: 1,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
// If it causes deleting entire the table, the `<table>` element should
|
||||||
|
// be in the target range.
|
||||||
|
checkGetTargetRangesOfBeforeinputOnDeleteSomething({
|
||||||
|
startContainer: gEditor,
|
||||||
|
startOffset: 0,
|
||||||
|
endContainer: gEditor,
|
||||||
|
endOffset: 1,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
checkGetTargetRangesOfInputOnDeleteSomething();
|
||||||
|
}, 'Delete at "<table><tr>{<td>cell</td>}</tr></table>"');
|
||||||
|
|
||||||
// If caret is not adjacent of deleting character, browser may not delete the
|
// If caret is not adjacent of deleting character, browser may not delete the
|
||||||
// character, but update the caret position for next deletion.
|
// character, but update the caret position for next deletion.
|
||||||
promise_test(async () => {
|
promise_test(async () => {
|
||||||
|
|
|
||||||
|
|
@ -227,3 +227,6 @@
|
||||||
[WebGL test #40: attachment 3 should be 0,255,0,255\nat (0, 0) expected: 0,255,0,255 was 0,47,0,0]
|
[WebGL test #40: attachment 3 should be 0,255,0,255\nat (0, 0) expected: 0,255,0,255 was 0,47,0,0]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
|
[WebGL test #44: attachment 7 should be 0,255,0,255\nat (0, 0) expected: 0,255,0,255 was 255,255,0,0]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue