mirror of
https://github.com/servo/servo.git
synced 2025-08-07 22:45:34 +01:00
Update web-platform-tests to revision b'536297144c737f84096d1f448e790de0fb654956' (#32232)
This commit is contained in:
Servo WPT Sync
GitHub
parent
ff3cd1494e
commit
45f2433d76
189 changed files with 4264 additions and 621 deletions
|
|
@ -1,4 +1,4 @@
|
||||||
[linear-timing-functions-output.tentative.html]
|
[linear-timing-functions-output.html]
|
||||||
[linear function easing with output greater than 1]
|
[linear function easing with output greater than 1]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
[position-sticky-margins-003.html]
|
||||||
|
expected: FAIL
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
[webkit-appearance-auto-non-html-namespace-001.html]
|
||||||
|
expected: FAIL
|
||||||
|
|
@ -1,2 +0,0 @@
|
||||||
[backdrop-filter-isolation.html]
|
|
||||||
expected: FAIL
|
|
||||||
|
|
@ -10,6 +10,3 @@
|
||||||
|
|
||||||
[load & pageshow events do not fire on contentWindow of <iframe> element created with src='about:blank']
|
[load & pageshow events do not fire on contentWindow of <iframe> element created with src='about:blank']
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
[load & pageshow events do not fire on contentWindow of <iframe> element created with src='']
|
|
||||||
expected: FAIL
|
|
||||||
|
|
|
||||||
|
|
@ -10,3 +10,6 @@
|
||||||
|
|
||||||
[load event does not fire on window.open('about:blank?foo')]
|
[load event does not fire on window.open('about:blank?foo')]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
|
[load event does not fire on window.open('about:blank')]
|
||||||
|
expected: FAIL
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
[navigation-unload-cross-origin.sub.window.html]
|
||||||
|
[Cross-origin navigation started from unload handler must be ignored]
|
||||||
|
expected: FAIL
|
||||||
|
|
@ -1,5 +1,4 @@
|
||||||
[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,9 +1,8 @@
|
||||||
[Document.currentScript.html]
|
[Document.currentScript.html]
|
||||||
type: testharness
|
type: testharness
|
||||||
expected: TIMEOUT
|
expected: CRASH
|
||||||
[Script script-exec]
|
[Script script-exec]
|
||||||
expected: NOTRUN
|
expected: NOTRUN
|
||||||
|
|
||||||
[Script script-svg]
|
[Script script-svg]
|
||||||
expected: NOTRUN
|
expected: NOTRUN
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,4 +2,4 @@
|
||||||
type: testharness
|
type: testharness
|
||||||
expected: TIMEOUT
|
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: FAIL
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,3 @@
|
||||||
[iframe_sandbox_popups_escaping-2.html]
|
[iframe_sandbox_popups_escaping-2.html]
|
||||||
expected: CRASH
|
|
||||||
[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: FAIL
|
||||||
|
|
|
||||||
|
|
@ -2,4 +2,4 @@
|
||||||
type: testharness
|
type: testharness
|
||||||
expected: TIMEOUT
|
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: FAIL
|
expected: NOTRUN
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,4 @@
|
||||||
[iframe_sandbox_popups_nonescaping-2.html]
|
[iframe_sandbox_popups_nonescaping-2.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
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,3 @@
|
||||||
[iframe_sandbox_popups_nonescaping-3.html]
|
[iframe_sandbox_popups_nonescaping-3.html]
|
||||||
[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: FAIL
|
expected: NOTRUN
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
[select-appearance-writing-mode-vertical-lr.tentative.html]
|
||||||
|
expected: TIMEOUT
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
[select-appearance-writing-mode-vertical-rl.tentative.html]
|
||||||
|
expected: TIMEOUT
|
||||||
|
|
@ -1,4 +1,3 @@
|
||||||
[performance-navigation-timing-same-origin-replace.tentative.window.html]
|
[performance-navigation-timing-same-origin-replace.tentative.window.html]
|
||||||
expected: TIMEOUT
|
|
||||||
[RemoteContextHelper navigation using BFCache]
|
[RemoteContextHelper navigation using BFCache]
|
||||||
expected: TIMEOUT
|
expected: FAIL
|
||||||
|
|
|
||||||
|
|
@ -68,3 +68,6 @@
|
||||||
|
|
||||||
[PerformanceEntry has correct name, initiatorType, startTime, and duration (link)]
|
[PerformanceEntry has correct name, initiatorType, startTime, and duration (link)]
|
||||||
expected: NOTRUN
|
expected: NOTRUN
|
||||||
|
|
||||||
|
[PerformanceEntry has correct name, initiatorType, startTime, and duration (img)]
|
||||||
|
expected: FAIL
|
||||||
|
|
|
||||||
|
|
@ -3917,6 +3917,9 @@
|
||||||
[WebGL2RenderingContext interface: operation drawingBufferStorage(GLenum, unsigned long, unsigned long)]
|
[WebGL2RenderingContext interface: operation drawingBufferStorage(GLenum, unsigned long, unsigned long)]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
|
[WebGLObject interface: attribute label]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
|
||||||
[idlharness.any.worker.html]
|
[idlharness.any.worker.html]
|
||||||
[WebGL2RenderingContext interface: constant ONE_MINUS_SRC_COLOR on interface object]
|
[WebGL2RenderingContext interface: constant ONE_MINUS_SRC_COLOR on interface object]
|
||||||
|
|
@ -10221,3 +10224,6 @@
|
||||||
|
|
||||||
[WebGL2RenderingContext interface: operation drawingBufferStorage(GLenum, unsigned long, unsigned long)]
|
[WebGL2RenderingContext interface: operation drawingBufferStorage(GLenum, unsigned long, unsigned long)]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
|
[WebGLObject interface: attribute label]
|
||||||
|
expected: FAIL
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,4 +1,4 @@
|
||||||
[linear-timing-functions-output.tentative.html]
|
[linear-timing-functions-output.html]
|
||||||
[linear function easing with output greater than 1]
|
[linear function easing with output greater than 1]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
[webkit-appearance-auto-non-html-namespace-001.html]
|
||||||
|
expected: FAIL
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
[MediaQueryList-extends-EventTarget-interop.html]
|
|
||||||
[listener added with addListener and addEventListener is called once]
|
|
||||||
expected: FAIL
|
|
||||||
|
|
@ -1,2 +0,0 @@
|
||||||
[backdrop-filter-isolation.html]
|
|
||||||
expected: FAIL
|
|
||||||
|
|
@ -185,6 +185,3 @@
|
||||||
|
|
||||||
[border-image sec-fetch-site - HTTPS downgrade (header not sent)]
|
[border-image sec-fetch-site - HTTPS downgrade (header not sent)]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
[background-image sec-fetch-site - HTTPS downgrade (header not sent)]
|
|
||||||
expected: TIMEOUT
|
|
||||||
|
|
|
||||||
|
|
@ -13,3 +13,6 @@
|
||||||
|
|
||||||
[load & pageshow events do not fire on contentWindow of <iframe> element created with src='']
|
[load & pageshow events do not fire on contentWindow of <iframe> element created with src='']
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
|
[load & pageshow events do not fire on contentWindow of <iframe> element created with src='about:blank']
|
||||||
|
expected: FAIL
|
||||||
|
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
[traverse_the_history_2.html]
|
|
||||||
[Multiple history traversals, last would be aborted]
|
|
||||||
expected: FAIL
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
[Document.currentScript.html]
|
[Document.currentScript.html]
|
||||||
expected: TIMEOUT
|
expected: CRASH
|
||||||
[Script script-svg]
|
[Script script-svg]
|
||||||
expected: NOTRUN
|
expected: NOTRUN
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
[reparent-form-during-planned-navigation-task.html]
|
||||||
|
expected: TIMEOUT
|
||||||
|
[reparent-form-during-planned-navigation-task]
|
||||||
|
expected: TIMEOUT
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
[select-appearance-writing-mode-vertical-lr.tentative.html]
|
||||||
|
expected: TIMEOUT
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
[select-appearance-writing-mode-vertical-rl.tentative.html]
|
||||||
|
expected: TIMEOUT
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
[performance-navigation-timing-iframes-without-attributes.tentative.window.html]
|
[performance-navigation-timing-iframes-without-attributes.tentative.window.html]
|
||||||
|
expected: TIMEOUT
|
||||||
[RemoteContextHelper navigation using BFCache]
|
[RemoteContextHelper navigation using BFCache]
|
||||||
expected: FAIL
|
expected: TIMEOUT
|
||||||
|
|
|
||||||
|
|
@ -3905,6 +3905,9 @@
|
||||||
[WebGL2RenderingContext interface: operation drawingBufferStorage(GLenum, unsigned long, unsigned long)]
|
[WebGL2RenderingContext interface: operation drawingBufferStorage(GLenum, unsigned long, unsigned long)]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
|
[WebGLObject interface: attribute label]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
|
||||||
[idlharness.any.worker.html]
|
[idlharness.any.worker.html]
|
||||||
[WebGLRenderingContext includes WebGLRenderingContextOverloads: member names are unique]
|
[WebGLRenderingContext includes WebGLRenderingContextOverloads: member names are unique]
|
||||||
|
|
@ -10191,3 +10194,6 @@
|
||||||
|
|
||||||
[WebGL2RenderingContext interface: operation drawingBufferStorage(GLenum, unsigned long, unsigned long)]
|
[WebGL2RenderingContext interface: operation drawingBufferStorage(GLenum, unsigned long, unsigned long)]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
|
[WebGLObject interface: attribute label]
|
||||||
|
expected: FAIL
|
||||||
|
|
|
||||||
4
tests/wpt/meta/webmessaging/with-ports/018.html.ini
Normal file
4
tests/wpt/meta/webmessaging/with-ports/018.html.ini
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
[018.html]
|
||||||
|
expected: TIMEOUT
|
||||||
|
[origin of the script that invoked the method, javascript:]
|
||||||
|
expected: TIMEOUT
|
||||||
|
|
@ -39,7 +39,7 @@ jobs:
|
||||||
steps:
|
steps:
|
||||||
- task: UsePythonVersion@0
|
- task: UsePythonVersion@0
|
||||||
inputs:
|
inputs:
|
||||||
versionSpec: '3.11'
|
versionSpec: '3.12'
|
||||||
- template: tools/ci/azure/affected_tests.yml
|
- template: tools/ci/azure/affected_tests.yml
|
||||||
parameters:
|
parameters:
|
||||||
artifactName: 'safari-preview-affected-tests'
|
artifactName: 'safari-preview-affected-tests'
|
||||||
|
|
@ -56,7 +56,7 @@ jobs:
|
||||||
steps:
|
steps:
|
||||||
- task: UsePythonVersion@0
|
- task: UsePythonVersion@0
|
||||||
inputs:
|
inputs:
|
||||||
versionSpec: '3.11'
|
versionSpec: '3.12'
|
||||||
- template: tools/ci/azure/affected_tests.yml
|
- template: tools/ci/azure/affected_tests.yml
|
||||||
parameters:
|
parameters:
|
||||||
checkoutCommit: 'HEAD^1'
|
checkoutCommit: 'HEAD^1'
|
||||||
|
|
@ -77,7 +77,7 @@ jobs:
|
||||||
steps:
|
steps:
|
||||||
- task: UsePythonVersion@0
|
- task: UsePythonVersion@0
|
||||||
inputs:
|
inputs:
|
||||||
versionSpec: '3.11'
|
versionSpec: '3.12'
|
||||||
- template: tools/ci/azure/checkout.yml
|
- template: tools/ci/azure/checkout.yml
|
||||||
- script: |
|
- script: |
|
||||||
set -eux -o pipefail
|
set -eux -o pipefail
|
||||||
|
|
@ -98,7 +98,7 @@ jobs:
|
||||||
steps:
|
steps:
|
||||||
- task: UsePythonVersion@0
|
- task: UsePythonVersion@0
|
||||||
inputs:
|
inputs:
|
||||||
versionSpec: '3.11'
|
versionSpec: '3.12'
|
||||||
- template: tools/ci/azure/checkout.yml
|
- template: tools/ci/azure/checkout.yml
|
||||||
- template: tools/ci/azure/install_fonts.yml
|
- template: tools/ci/azure/install_fonts.yml
|
||||||
- template: tools/ci/azure/install_certs.yml
|
- template: tools/ci/azure/install_certs.yml
|
||||||
|
|
@ -149,7 +149,7 @@ jobs:
|
||||||
toxenv: py38
|
toxenv: py38
|
||||||
|
|
||||||
- job: tools_unittest_mac_py311
|
- job: tools_unittest_mac_py311
|
||||||
displayName: 'tools/ unittests: macOS + Python 3.11'
|
displayName: 'tools/ unittests: macOS + Python 3.12'
|
||||||
dependsOn: decision
|
dependsOn: decision
|
||||||
condition: dependencies.decision.outputs['test_jobs.tools_unittest']
|
condition: dependencies.decision.outputs['test_jobs.tools_unittest']
|
||||||
pool:
|
pool:
|
||||||
|
|
@ -157,7 +157,7 @@ jobs:
|
||||||
steps:
|
steps:
|
||||||
- task: UsePythonVersion@0
|
- task: UsePythonVersion@0
|
||||||
inputs:
|
inputs:
|
||||||
versionSpec: '3.11'
|
versionSpec: '3.12'
|
||||||
- template: tools/ci/azure/checkout.yml
|
- template: tools/ci/azure/checkout.yml
|
||||||
- template: tools/ci/azure/tox_pytest.yml
|
- template: tools/ci/azure/tox_pytest.yml
|
||||||
parameters:
|
parameters:
|
||||||
|
|
@ -181,7 +181,7 @@ jobs:
|
||||||
toxenv: py38
|
toxenv: py38
|
||||||
|
|
||||||
- job: wptrunner_unittest_mac_py311
|
- job: wptrunner_unittest_mac_py311
|
||||||
displayName: 'tools/wptrunner/ unittests: macOS + Python 3.11'
|
displayName: 'tools/wptrunner/ unittests: macOS + Python 3.12'
|
||||||
dependsOn: decision
|
dependsOn: decision
|
||||||
condition: dependencies.decision.outputs['test_jobs.wptrunner_unittest']
|
condition: dependencies.decision.outputs['test_jobs.wptrunner_unittest']
|
||||||
pool:
|
pool:
|
||||||
|
|
@ -189,7 +189,7 @@ jobs:
|
||||||
steps:
|
steps:
|
||||||
- task: UsePythonVersion@0
|
- task: UsePythonVersion@0
|
||||||
inputs:
|
inputs:
|
||||||
versionSpec: '3.11'
|
versionSpec: '3.12'
|
||||||
- template: tools/ci/azure/checkout.yml
|
- template: tools/ci/azure/checkout.yml
|
||||||
- template: tools/ci/azure/tox_pytest.yml
|
- template: tools/ci/azure/tox_pytest.yml
|
||||||
parameters:
|
parameters:
|
||||||
|
|
@ -217,7 +217,7 @@ jobs:
|
||||||
toxenv: py38
|
toxenv: py38
|
||||||
|
|
||||||
- job: wpt_integration_mac_py311
|
- job: wpt_integration_mac_py311
|
||||||
displayName: 'tools/wpt/ tests: macOS + Python 3.11'
|
displayName: 'tools/wpt/ tests: macOS + Python 3.12'
|
||||||
dependsOn: decision
|
dependsOn: decision
|
||||||
condition: dependencies.decision.outputs['test_jobs.wpt_integration']
|
condition: dependencies.decision.outputs['test_jobs.wpt_integration']
|
||||||
pool:
|
pool:
|
||||||
|
|
@ -226,7 +226,7 @@ jobs:
|
||||||
# full checkout required
|
# full checkout required
|
||||||
- task: UsePythonVersion@0
|
- task: UsePythonVersion@0
|
||||||
inputs:
|
inputs:
|
||||||
versionSpec: '3.11'
|
versionSpec: '3.12'
|
||||||
- template: tools/ci/azure/install_chrome.yml
|
- template: tools/ci/azure/install_chrome.yml
|
||||||
- template: tools/ci/azure/install_firefox.yml
|
- template: tools/ci/azure/install_firefox.yml
|
||||||
- template: tools/ci/azure/update_hosts.yml
|
- template: tools/ci/azure/update_hosts.yml
|
||||||
|
|
@ -256,7 +256,7 @@ jobs:
|
||||||
toxenv: py38
|
toxenv: py38
|
||||||
|
|
||||||
- job: tools_unittest_win_py311
|
- job: tools_unittest_win_py311
|
||||||
displayName: 'tools/ unittests: Windows + Python 3.11'
|
displayName: 'tools/ unittests: Windows + Python 3.12'
|
||||||
dependsOn: decision
|
dependsOn: decision
|
||||||
condition: dependencies.decision.outputs['test_jobs.tools_unittest']
|
condition: dependencies.decision.outputs['test_jobs.tools_unittest']
|
||||||
pool:
|
pool:
|
||||||
|
|
@ -264,7 +264,7 @@ jobs:
|
||||||
steps:
|
steps:
|
||||||
- task: UsePythonVersion@0
|
- task: UsePythonVersion@0
|
||||||
inputs:
|
inputs:
|
||||||
versionSpec: '3.11'
|
versionSpec: '3.12'
|
||||||
addToPath: false
|
addToPath: false
|
||||||
- template: tools/ci/azure/checkout.yml
|
- template: tools/ci/azure/checkout.yml
|
||||||
- template: tools/ci/azure/tox_pytest.yml
|
- template: tools/ci/azure/tox_pytest.yml
|
||||||
|
|
@ -290,7 +290,7 @@ jobs:
|
||||||
toxenv: py38
|
toxenv: py38
|
||||||
|
|
||||||
- job: wptrunner_unittest_win_py311
|
- job: wptrunner_unittest_win_py311
|
||||||
displayName: 'tools/wptrunner/ unittests: Windows + Python 3.11'
|
displayName: 'tools/wptrunner/ unittests: Windows + Python 3.12'
|
||||||
dependsOn: decision
|
dependsOn: decision
|
||||||
condition: dependencies.decision.outputs['test_jobs.wptrunner_unittest']
|
condition: dependencies.decision.outputs['test_jobs.wptrunner_unittest']
|
||||||
pool:
|
pool:
|
||||||
|
|
@ -298,7 +298,7 @@ jobs:
|
||||||
steps:
|
steps:
|
||||||
- task: UsePythonVersion@0
|
- task: UsePythonVersion@0
|
||||||
inputs:
|
inputs:
|
||||||
versionSpec: '3.11'
|
versionSpec: '3.12'
|
||||||
addToPath: false
|
addToPath: false
|
||||||
- template: tools/ci/azure/checkout.yml
|
- template: tools/ci/azure/checkout.yml
|
||||||
- template: tools/ci/azure/tox_pytest.yml
|
- template: tools/ci/azure/tox_pytest.yml
|
||||||
|
|
@ -329,7 +329,7 @@ jobs:
|
||||||
toxenv: py38
|
toxenv: py38
|
||||||
|
|
||||||
- job: wpt_integration_win_py311
|
- job: wpt_integration_win_py311
|
||||||
displayName: 'tools/wpt/ tests: Windows + Python 3.11'
|
displayName: 'tools/wpt/ tests: Windows + Python 3.12'
|
||||||
dependsOn: decision
|
dependsOn: decision
|
||||||
condition: dependencies.decision.outputs['test_jobs.wpt_integration']
|
condition: dependencies.decision.outputs['test_jobs.wpt_integration']
|
||||||
pool:
|
pool:
|
||||||
|
|
@ -338,7 +338,7 @@ jobs:
|
||||||
# full checkout required
|
# full checkout required
|
||||||
- task: UsePythonVersion@0
|
- task: UsePythonVersion@0
|
||||||
inputs:
|
inputs:
|
||||||
versionSpec: '3.11'
|
versionSpec: '3.12'
|
||||||
# currently just using the outdated Chrome/Firefox on the VM rather than
|
# currently just using the outdated Chrome/Firefox on the VM rather than
|
||||||
# figuring out how to install Chrome Dev channel on Windows
|
# figuring out how to install Chrome Dev channel on Windows
|
||||||
# - template: tools/ci/azure/install_chrome.yml
|
# - template: tools/ci/azure/install_chrome.yml
|
||||||
|
|
@ -364,7 +364,7 @@ jobs:
|
||||||
steps:
|
steps:
|
||||||
- task: UsePythonVersion@0
|
- task: UsePythonVersion@0
|
||||||
inputs:
|
inputs:
|
||||||
versionSpec: '3.11'
|
versionSpec: '3.12'
|
||||||
- template: tools/ci/azure/system_info.yml
|
- template: tools/ci/azure/system_info.yml
|
||||||
- template: tools/ci/azure/checkout.yml
|
- template: tools/ci/azure/checkout.yml
|
||||||
- template: tools/ci/azure/install_certs.yml
|
- template: tools/ci/azure/install_certs.yml
|
||||||
|
|
@ -373,7 +373,7 @@ jobs:
|
||||||
channel: stable
|
channel: stable
|
||||||
- template: tools/ci/azure/update_hosts.yml
|
- template: tools/ci/azure/update_hosts.yml
|
||||||
- template: tools/ci/azure/update_manifest.yml
|
- template: tools/ci/azure/update_manifest.yml
|
||||||
- script: python ./wpt run --yes --no-manifest-update --no-restart-on-unexpected --no-fail-on-unexpected --install-fonts --this-chunk $(System.JobPositionInPhase) --total-chunks $(System.TotalJobsInPhase) --chunk-type hash --log-wptreport $(Build.ArtifactStagingDirectory)/wpt_report_$(System.JobPositionInPhase).json --log-wptscreenshot $(Build.ArtifactStagingDirectory)/wpt_screenshot_$(System.JobPositionInPhase).txt --log-mach - --log-mach-level info --channel stable edgechromium
|
- script: python ./wpt run --yes --no-manifest-update --no-restart-on-unexpected --no-fail-on-unexpected --install-fonts --this-chunk $(System.JobPositionInPhase) --total-chunks $(System.TotalJobsInPhase) --chunk-type hash --log-wptreport $(Build.ArtifactStagingDirectory)/wpt_report_$(System.JobPositionInPhase).json --log-wptscreenshot $(Build.ArtifactStagingDirectory)/wpt_screenshot_$(System.JobPositionInPhase).txt --log-mach - --log-mach-level info --channel stable edge
|
||||||
displayName: 'Run tests (Edge Stable)'
|
displayName: 'Run tests (Edge Stable)'
|
||||||
- task: PublishBuildArtifacts@1
|
- task: PublishBuildArtifacts@1
|
||||||
displayName: 'Publish results'
|
displayName: 'Publish results'
|
||||||
|
|
@ -400,7 +400,7 @@ jobs:
|
||||||
steps:
|
steps:
|
||||||
- task: UsePythonVersion@0
|
- task: UsePythonVersion@0
|
||||||
inputs:
|
inputs:
|
||||||
versionSpec: '3.11'
|
versionSpec: '3.12'
|
||||||
- template: tools/ci/azure/system_info.yml
|
- template: tools/ci/azure/system_info.yml
|
||||||
- template: tools/ci/azure/checkout.yml
|
- template: tools/ci/azure/checkout.yml
|
||||||
- template: tools/ci/azure/install_certs.yml
|
- template: tools/ci/azure/install_certs.yml
|
||||||
|
|
@ -409,7 +409,7 @@ jobs:
|
||||||
channel: dev
|
channel: dev
|
||||||
- template: tools/ci/azure/update_hosts.yml
|
- template: tools/ci/azure/update_hosts.yml
|
||||||
- template: tools/ci/azure/update_manifest.yml
|
- template: tools/ci/azure/update_manifest.yml
|
||||||
- script: python ./wpt run --yes --no-manifest-update --no-restart-on-unexpected --no-fail-on-unexpected --install-fonts --this-chunk $(System.JobPositionInPhase) --total-chunks $(System.TotalJobsInPhase) --chunk-type hash --log-wptreport $(Build.ArtifactStagingDirectory)/wpt_report_$(System.JobPositionInPhase).json --log-wptscreenshot $(Build.ArtifactStagingDirectory)/wpt_screenshot_$(System.JobPositionInPhase).txt --log-mach - --log-mach-level info --channel dev edgechromium
|
- script: python ./wpt run --yes --no-manifest-update --no-restart-on-unexpected --no-fail-on-unexpected --install-fonts --this-chunk $(System.JobPositionInPhase) --total-chunks $(System.TotalJobsInPhase) --chunk-type hash --log-wptreport $(Build.ArtifactStagingDirectory)/wpt_report_$(System.JobPositionInPhase).json --log-wptscreenshot $(Build.ArtifactStagingDirectory)/wpt_screenshot_$(System.JobPositionInPhase).txt --log-mach - --log-mach-level info --channel dev edge
|
||||||
displayName: 'Run tests (Edge Dev)'
|
displayName: 'Run tests (Edge Dev)'
|
||||||
- task: PublishBuildArtifacts@1
|
- task: PublishBuildArtifacts@1
|
||||||
displayName: 'Publish results'
|
displayName: 'Publish results'
|
||||||
|
|
@ -436,7 +436,7 @@ jobs:
|
||||||
steps:
|
steps:
|
||||||
- task: UsePythonVersion@0
|
- task: UsePythonVersion@0
|
||||||
inputs:
|
inputs:
|
||||||
versionSpec: '3.11'
|
versionSpec: '3.12'
|
||||||
- template: tools/ci/azure/checkout.yml
|
- template: tools/ci/azure/checkout.yml
|
||||||
- template: tools/ci/azure/install_certs.yml
|
- template: tools/ci/azure/install_certs.yml
|
||||||
- template: tools/ci/azure/install_edge.yml
|
- template: tools/ci/azure/install_edge.yml
|
||||||
|
|
@ -444,7 +444,7 @@ jobs:
|
||||||
channel: canary
|
channel: canary
|
||||||
- template: tools/ci/azure/update_hosts.yml
|
- template: tools/ci/azure/update_hosts.yml
|
||||||
- template: tools/ci/azure/update_manifest.yml
|
- template: tools/ci/azure/update_manifest.yml
|
||||||
- script: python ./wpt run --yes --no-manifest-update --no-restart-on-unexpected --no-fail-on-unexpected --install-fonts --this-chunk $(System.JobPositionInPhase) --total-chunks $(System.TotalJobsInPhase) --chunk-type hash --log-wptreport $(Build.ArtifactStagingDirectory)/wpt_report_$(System.JobPositionInPhase).json --log-wptscreenshot $(Build.ArtifactStagingDirectory)/wpt_screenshot_$(System.JobPositionInPhase).txt --log-mach - --log-mach-level info --channel canary edgechromium
|
- script: python ./wpt run --yes --no-manifest-update --no-restart-on-unexpected --no-fail-on-unexpected --install-fonts --this-chunk $(System.JobPositionInPhase) --total-chunks $(System.TotalJobsInPhase) --chunk-type hash --log-wptreport $(Build.ArtifactStagingDirectory)/wpt_report_$(System.JobPositionInPhase).json --log-wptscreenshot $(Build.ArtifactStagingDirectory)/wpt_screenshot_$(System.JobPositionInPhase).txt --log-mach - --log-mach-level info --channel canary edge
|
||||||
displayName: 'Run tests (Edge Canary)'
|
displayName: 'Run tests (Edge Canary)'
|
||||||
- task: PublishBuildArtifacts@1
|
- task: PublishBuildArtifacts@1
|
||||||
displayName: 'Publish results'
|
displayName: 'Publish results'
|
||||||
|
|
@ -471,7 +471,7 @@ jobs:
|
||||||
steps:
|
steps:
|
||||||
- task: UsePythonVersion@0
|
- task: UsePythonVersion@0
|
||||||
inputs:
|
inputs:
|
||||||
versionSpec: '3.11'
|
versionSpec: '3.12'
|
||||||
- template: tools/ci/azure/checkout.yml
|
- template: tools/ci/azure/checkout.yml
|
||||||
- template: tools/ci/azure/install_certs.yml
|
- template: tools/ci/azure/install_certs.yml
|
||||||
- template: tools/ci/azure/color_profile.yml
|
- template: tools/ci/azure/color_profile.yml
|
||||||
|
|
@ -511,7 +511,7 @@ jobs:
|
||||||
steps:
|
steps:
|
||||||
- task: UsePythonVersion@0
|
- task: UsePythonVersion@0
|
||||||
inputs:
|
inputs:
|
||||||
versionSpec: '3.11'
|
versionSpec: '3.12'
|
||||||
- template: tools/ci/azure/checkout.yml
|
- template: tools/ci/azure/checkout.yml
|
||||||
- template: tools/ci/azure/install_certs.yml
|
- template: tools/ci/azure/install_certs.yml
|
||||||
- template: tools/ci/azure/color_profile.yml
|
- template: tools/ci/azure/color_profile.yml
|
||||||
|
|
@ -548,7 +548,7 @@ jobs:
|
||||||
steps:
|
steps:
|
||||||
- task: UsePythonVersion@0
|
- task: UsePythonVersion@0
|
||||||
inputs:
|
inputs:
|
||||||
versionSpec: '3.11'
|
versionSpec: '3.12'
|
||||||
- template: tools/ci/azure/checkout.yml
|
- template: tools/ci/azure/checkout.yml
|
||||||
- template: tools/ci/azure/install_certs.yml
|
- template: tools/ci/azure/install_certs.yml
|
||||||
- template: tools/ci/azure/color_profile.yml
|
- template: tools/ci/azure/color_profile.yml
|
||||||
|
|
|
||||||
|
|
@ -19,7 +19,7 @@ jobs:
|
||||||
- name: Set up Python
|
- name: Set up Python
|
||||||
uses: actions/setup-python@v5
|
uses: actions/setup-python@v5
|
||||||
with:
|
with:
|
||||||
python-version: '3.11'
|
python-version: '3.12'
|
||||||
- name: Set up Node
|
- name: Set up Node
|
||||||
uses: actions/setup-node@v4
|
uses: actions/setup-node@v4
|
||||||
with:
|
with:
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,7 @@ jobs:
|
||||||
- name: Set up Python
|
- name: Set up Python
|
||||||
uses: actions/setup-python@v5
|
uses: actions/setup-python@v5
|
||||||
with:
|
with:
|
||||||
python-version: '3.11'
|
python-version: '3.12'
|
||||||
- name: Checkout
|
- name: Checkout
|
||||||
uses: actions/checkout@v4
|
uses: actions/checkout@v4
|
||||||
with:
|
with:
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,7 @@ jobs:
|
||||||
- name: Set up Python
|
- name: Set up Python
|
||||||
uses: actions/setup-python@v5
|
uses: actions/setup-python@v5
|
||||||
with:
|
with:
|
||||||
python-version: '3.11'
|
python-version: '3.12'
|
||||||
- name: Checkout
|
- name: Checkout
|
||||||
uses: actions/checkout@v4
|
uses: actions/checkout@v4
|
||||||
- name: Regenerate certs
|
- name: Regenerate certs
|
||||||
|
|
|
||||||
|
|
@ -4,33 +4,74 @@
|
||||||
|
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
|
pressure_test(async (t, mockPressureService) => {
|
||||||
|
const [change, timeOrigin] = await new Promise(resolve => {
|
||||||
|
const observer = new PressureObserver(change => {
|
||||||
|
resolve([change, performance.timeOrigin]);
|
||||||
|
});
|
||||||
|
t.add_cleanup(() => observer.disconnect());
|
||||||
|
observer.observe('cpu');
|
||||||
|
mockPressureService.setPressureUpdate('cpu', 'critical');
|
||||||
|
mockPressureService.startPlatformCollector(/*sampleInterval=*/ 200);
|
||||||
|
});
|
||||||
|
assert_greater_than(change[0].time, timeOrigin);
|
||||||
|
}, 'Timestamp from update should be greater than timeOrigin');
|
||||||
|
|
||||||
pressure_test(async (t, mockPressureService) => {
|
pressure_test(async (t, mockPressureService) => {
|
||||||
const readings = ['nominal', 'fair', 'serious', 'critical'];
|
const readings = ['nominal', 'fair', 'serious', 'critical'];
|
||||||
|
|
||||||
const sampleInterval = 250;
|
const sampleInterval = 250;
|
||||||
const pressureChanges = await new Promise(async resolve => {
|
const pressureChanges = [];
|
||||||
const observerChanges = [];
|
const observer = new PressureObserver(changes => {
|
||||||
const observer = new PressureObserver(changes => {
|
pressureChanges.push(changes);
|
||||||
observerChanges.push(changes);
|
|
||||||
});
|
|
||||||
observer.observe('cpu', {sampleInterval});
|
|
||||||
|
|
||||||
mockPressureService.startPlatformCollector(sampleInterval / 2);
|
|
||||||
let i = 0;
|
|
||||||
// mockPressureService.updatesDelivered() does not necessarily match
|
|
||||||
// pressureChanges.length, as system load and browser optimizations can
|
|
||||||
// cause the actual timer used by mockPressureService to deliver readings
|
|
||||||
// to be a bit slower or faster than requested.
|
|
||||||
while (observerChanges.length < 4) {
|
|
||||||
mockPressureService.setPressureUpdate(
|
|
||||||
'cpu', readings[i++ % readings.length]);
|
|
||||||
await t.step_wait(
|
|
||||||
() => mockPressureService.updatesDelivered() >= i,
|
|
||||||
`At least ${i} readings have been delivered`);
|
|
||||||
}
|
|
||||||
observer.disconnect();
|
|
||||||
resolve(observerChanges);
|
|
||||||
});
|
});
|
||||||
|
observer.observe('cpu', {sampleInterval});
|
||||||
|
|
||||||
|
mockPressureService.startPlatformCollector(sampleInterval / 2);
|
||||||
|
let i = 0;
|
||||||
|
// mockPressureService.updatesDelivered() does not necessarily match
|
||||||
|
// pressureChanges.length, as system load and browser optimizations can
|
||||||
|
// cause the actual timer used by mockPressureService to deliver readings
|
||||||
|
// to be a bit slower or faster than requested.
|
||||||
|
while (pressureChanges.length < 4) {
|
||||||
|
mockPressureService.setPressureUpdate(
|
||||||
|
'cpu', readings[i++ % readings.length]);
|
||||||
|
await t.step_wait(
|
||||||
|
() => mockPressureService.updatesDelivered() >= i,
|
||||||
|
`At least ${i} readings have been delivered`);
|
||||||
|
}
|
||||||
|
observer.disconnect();
|
||||||
|
|
||||||
|
assert_equals(pressureChanges.length, 4);
|
||||||
|
assert_greater_than(pressureChanges[1][0].time, pressureChanges[0][0].time);
|
||||||
|
assert_greater_than(pressureChanges[2][0].time, pressureChanges[1][0].time);
|
||||||
|
assert_greater_than(pressureChanges[3][0].time, pressureChanges[2][0].time);
|
||||||
|
}, 'Timestamp difference between two changes should be continuously increasing');
|
||||||
|
|
||||||
|
pressure_test(async (t, mockPressureService) => {
|
||||||
|
const readings = ['nominal', 'fair', 'serious', 'critical'];
|
||||||
|
|
||||||
|
const sampleInterval = 250;
|
||||||
|
const pressureChanges = [];
|
||||||
|
const observer = new PressureObserver(change => {
|
||||||
|
pressureChanges.push(change);
|
||||||
|
});
|
||||||
|
observer.observe('cpu', {sampleInterval});
|
||||||
|
|
||||||
|
mockPressureService.startPlatformCollector(sampleInterval / 2);
|
||||||
|
let i = 0;
|
||||||
|
// mockPressureService.updatesDelivered() does not necessarily match
|
||||||
|
// pressureChanges.length, as system load and browser optimizations can
|
||||||
|
// cause the actual timer used by mockPressureService to deliver readings
|
||||||
|
// to be a bit slower or faster than requested.
|
||||||
|
while (pressureChanges.length < 4) {
|
||||||
|
mockPressureService.setPressureUpdate(
|
||||||
|
'cpu', readings[i++ % readings.length]);
|
||||||
|
await t.step_wait(
|
||||||
|
() => mockPressureService.updatesDelivered() >= i,
|
||||||
|
`At least ${i} readings have been delivered`);
|
||||||
|
}
|
||||||
|
observer.disconnect();
|
||||||
|
|
||||||
assert_equals(pressureChanges.length, 4);
|
assert_equals(pressureChanges.length, 4);
|
||||||
assert_greater_than_equal(
|
assert_greater_than_equal(
|
||||||
|
|
@ -71,5 +112,6 @@ pressure_test(async (t, mockPressureService) => {
|
||||||
// should be deleted. So the second PressureRecord is not discarded even
|
// should be deleted. So the second PressureRecord is not discarded even
|
||||||
// though the time interval does not meet the requirement.
|
// though the time interval does not meet the requirement.
|
||||||
assert_less_than(
|
assert_less_than(
|
||||||
pressureChanges[1][0].time - pressureChanges[0][0].time, sampleInterval);
|
(pressureChanges[1][0].time - pressureChanges[0][0].time),
|
||||||
|
sampleInterval);
|
||||||
}, 'disconnect() should update [[LastRecordMap]]');
|
}, 'disconnect() should update [[LastRecordMap]]');
|
||||||
|
|
|
||||||
|
|
@ -17,31 +17,6 @@ const host = get_host_info();
|
||||||
const basePath = window.location.pathname.replace(/\/[^\/]*$/, '/');
|
const basePath = window.location.pathname.replace(/\/[^\/]*$/, '/');
|
||||||
const remoteBaseURL = host.HTTPS_REMOTE_ORIGIN + basePath;
|
const remoteBaseURL = host.HTTPS_REMOTE_ORIGIN + basePath;
|
||||||
|
|
||||||
// Builds valid digital identity request for navigator.credentials.get() API.
|
|
||||||
function buildValidNavigatorCredentialsRequest() {
|
|
||||||
return {
|
|
||||||
identity: {
|
|
||||||
providers: [{
|
|
||||||
holder: {
|
|
||||||
selector: {
|
|
||||||
format: ['mdoc'],
|
|
||||||
doctype: 'org.iso.18013.5.1.mDL',
|
|
||||||
fields: [
|
|
||||||
'org.iso.18013.5.1.family_name',
|
|
||||||
'org.iso.18013.5.1.portrait',
|
|
||||||
]
|
|
||||||
},
|
|
||||||
params: {
|
|
||||||
nonce: '1234',
|
|
||||||
readerPublicKey: 'test_reader_public_key',
|
|
||||||
extraParamAsNeededByDigitalCredentials: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
async function createIframeAndWaitForMessage(test, iframeUrl) {
|
async function createIframeAndWaitForMessage(test, iframeUrl) {
|
||||||
const messageWatcher = new EventWatcher(test, window, "message");
|
const messageWatcher = new EventWatcher(test, window, "message");
|
||||||
var iframe = document.createElement("iframe");
|
var iframe = document.createElement("iframe");
|
||||||
|
|
@ -53,39 +28,6 @@ async function createIframeAndWaitForMessage(test, iframeUrl) {
|
||||||
|
|
||||||
// Requires browser to have mode where OS-presented digital-identity-prompt is
|
// Requires browser to have mode where OS-presented digital-identity-prompt is
|
||||||
// bypassed in favour of returning "fake_test_token" directly.
|
// bypassed in favour of returning "fake_test_token" directly.
|
||||||
promise_test(async t => {
|
|
||||||
const {token} = await navigator.credentials.get(buildValidNavigatorCredentialsRequest());
|
|
||||||
assert_equals("fake_test_token", token);
|
|
||||||
}, "navigator.credentials.get() API works in toplevel frame.");
|
|
||||||
|
|
||||||
promise_test(async t => {
|
|
||||||
let request = buildValidNavigatorCredentialsRequest();
|
|
||||||
request.identity.providers = undefined;
|
|
||||||
|
|
||||||
await promise_rejects_js(t, TypeError, navigator.credentials.get(request));
|
|
||||||
}, "navigator.credentials.get() API fails if IdentityCredentialRequestOptions::providers is not specified.");
|
|
||||||
|
|
||||||
promise_test(async t => {
|
|
||||||
let request = buildValidNavigatorCredentialsRequest();
|
|
||||||
request.identity.providers = [];
|
|
||||||
|
|
||||||
await promise_rejects_js(t, TypeError, navigator.credentials.get(request));
|
|
||||||
}, "navigator.credentials.get() API fails if there are no providers.");
|
|
||||||
|
|
||||||
promise_test(async t => {
|
|
||||||
let request = buildValidNavigatorCredentialsRequest();
|
|
||||||
let providerCopy = structuredClone(request.identity.providers[0]);
|
|
||||||
request.identity.providers.push(providerCopy);
|
|
||||||
await promise_rejects_js(t, TypeError, navigator.credentials.get(request));
|
|
||||||
}, "navigator.credentials.get() API fails if there is more than one provider.");
|
|
||||||
|
|
||||||
promise_test(async t => {
|
|
||||||
let request = buildValidNavigatorCredentialsRequest();
|
|
||||||
request.identity.providers[0].holder = undefined;
|
|
||||||
|
|
||||||
await promise_rejects_js(t, TypeError, navigator.credentials.get(request));
|
|
||||||
}, "navigator.credentials.get() API fails if IdentityProviderConfig::holder is not specified.");
|
|
||||||
|
|
||||||
promise_test(async t => {
|
promise_test(async t => {
|
||||||
let request = buildValidNavigatorIdentityRequest();
|
let request = buildValidNavigatorIdentityRequest();
|
||||||
let credential = await navigator.identity.get(request);
|
let credential = await navigator.identity.get(request);
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,37 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font: 20px/1 Ahem;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#placefiller-above-anchor {
|
||||||
|
height: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#placefiller-before-anchor {
|
||||||
|
display: inline-block;
|
||||||
|
width: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#inner-anchored {
|
||||||
|
color: green;
|
||||||
|
position: fixed;
|
||||||
|
left: 70px;
|
||||||
|
top: 180px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#outer-anchored {
|
||||||
|
color: yellow;
|
||||||
|
position: fixed;
|
||||||
|
left: 70px;
|
||||||
|
top: 220px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div id="placefiller-above-anchor"></div>
|
||||||
|
<div id="placefiller-before-anchor"></div>
|
||||||
|
<span id="anchor">anchor</span>
|
||||||
|
<div id="inner-anchored">inner-anchored</div>
|
||||||
|
<div id="outer-anchored">outer-anchored</div>
|
||||||
|
|
@ -0,0 +1,67 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<title>Basic of anchor positioned scrolling: anchored elements should be "pinned" to the anchor when anchor is scrolled in overflow:hidden</title>
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-anchor-1/">
|
||||||
|
<link rel="match" href="anchor-scroll-overflow-hidden-ref.html">
|
||||||
|
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font: 20px/1 Ahem;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#scroll-container {
|
||||||
|
width: 400px;
|
||||||
|
height: 400px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#scroll-contents {
|
||||||
|
width: 1000px;
|
||||||
|
height: 1000px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#placefiller-above-anchor {
|
||||||
|
height: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#placefiller-before-anchor {
|
||||||
|
display: inline-block;
|
||||||
|
width: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#anchor {
|
||||||
|
anchor-name: --anchor;
|
||||||
|
}
|
||||||
|
|
||||||
|
#inner-anchored {
|
||||||
|
color: green;
|
||||||
|
position: absolute;
|
||||||
|
left: anchor(--anchor left);
|
||||||
|
bottom: anchor(--anchor top);
|
||||||
|
position-anchor: --anchor;
|
||||||
|
}
|
||||||
|
|
||||||
|
#outer-anchored {
|
||||||
|
color: yellow;
|
||||||
|
position: absolute;
|
||||||
|
left: anchor(--anchor left);
|
||||||
|
top: anchor(--anchor bottom);
|
||||||
|
position-anchor: --anchor;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div id="scroll-container">
|
||||||
|
<div id="scroll-contents">
|
||||||
|
<div id="placefiller-above-anchor"></div>
|
||||||
|
<div id="placefiller-before-anchor"></div>
|
||||||
|
<span id="anchor">anchor</span>
|
||||||
|
<div id="inner-anchored">inner-anchored</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="outer-anchored">outer-anchored</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const scroller = document.getElementById('scroll-container');
|
||||||
|
scroller.scrollTop = 300;
|
||||||
|
scroller.scrollLeft = 450;
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||||
|
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@page { size: 5in 3in; margin: 0.5in; }
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 0.25in;
|
||||||
|
}
|
||||||
|
.flexbox {
|
||||||
|
display: block;
|
||||||
|
border: 0.25in solid black;
|
||||||
|
}
|
||||||
|
.flexbox > div > div {
|
||||||
|
display: inline-block;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 50%;
|
||||||
|
border: 4px solid purple;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div>Before Flexbox</div>
|
||||||
|
<div class="flexbox">
|
||||||
|
<div>
|
||||||
|
<div>1</div><div>2</div>
|
||||||
|
</div>
|
||||||
|
<div style="break-before: page">
|
||||||
|
<div>3</div><div>4</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>After Flexbox</div>
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Test that in a row flex container, the break-before values on flex items are propagated to the flex line</title>
|
||||||
|
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||||
|
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
|
||||||
|
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1890238">
|
||||||
|
<link rel="match" href="multi-line-row-flex-fragmentation-081-print-ref.html">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@page { size: 5in 3in; margin: 0.5in; }
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 0.25in;
|
||||||
|
}
|
||||||
|
.flexbox {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
border: 0.25in solid black;
|
||||||
|
}
|
||||||
|
.flexbox > div {
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 50%;
|
||||||
|
border: 4px solid purple;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div>Before Flexbox</div>
|
||||||
|
<div class="flexbox">
|
||||||
|
<div>1</div><div>2</div>
|
||||||
|
<div style="break-before: page">3</div><div>4</div>
|
||||||
|
</div>
|
||||||
|
<div>After Flexbox</div>
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Test that in a row flex container, the break-before values on flex items are propagated to the flex line</title>
|
||||||
|
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||||
|
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
|
||||||
|
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1890238">
|
||||||
|
<link rel="match" href="multi-line-row-flex-fragmentation-081-print-ref.html">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@page { size: 5in 3in; margin: 0.5in; }
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 0.25in;
|
||||||
|
}
|
||||||
|
.flexbox {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
border: 0.25in solid black;
|
||||||
|
}
|
||||||
|
.flexbox > div {
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 50%;
|
||||||
|
border: 4px solid purple;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div>Before Flexbox</div>
|
||||||
|
<div class="flexbox">
|
||||||
|
<div>1</div><div>2</div>
|
||||||
|
<div>3</div><div style="break-before: page">4</div>
|
||||||
|
</div>
|
||||||
|
<div>After Flexbox</div>
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Test that in a row flex container, the break-after values on flex items are propagated to the flex line</title>
|
||||||
|
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||||
|
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
|
||||||
|
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1890238">
|
||||||
|
<link rel="match" href="multi-line-row-flex-fragmentation-081-print-ref.html">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@page { size: 5in 3in; margin: 0.5in; }
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 0.25in;
|
||||||
|
}
|
||||||
|
.flexbox {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
border: 0.25in solid black;
|
||||||
|
}
|
||||||
|
.flexbox > div {
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 50%;
|
||||||
|
border: 4px solid purple;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div>Before Flexbox</div>
|
||||||
|
<div class="flexbox">
|
||||||
|
<div style="break-after: page">1</div><div>2</div>
|
||||||
|
<div>3</div><div>4</div>
|
||||||
|
</div>
|
||||||
|
<div>After Flexbox</div>
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Test that in a row flex container, the break-after values on flex items are propagated to the flex line</title>
|
||||||
|
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||||
|
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
|
||||||
|
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1890238">
|
||||||
|
<link rel="match" href="multi-line-row-flex-fragmentation-081-print-ref.html">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@page { size: 5in 3in; margin: 0.5in; }
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 0.25in;
|
||||||
|
}
|
||||||
|
.flexbox {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
border: 0.25in solid black;
|
||||||
|
}
|
||||||
|
.flexbox > div {
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 50%;
|
||||||
|
border: 4px solid purple;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div>Before Flexbox</div>
|
||||||
|
<div class="flexbox">
|
||||||
|
<div>1</div><div style="break-after: page">2</div>
|
||||||
|
<div>3</div><div>4</div>
|
||||||
|
</div>
|
||||||
|
<div>After Flexbox</div>
|
||||||
|
|
@ -0,0 +1,40 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||||
|
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@page { size: 5in 3in; margin: 0.5in; }
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 0.25in;
|
||||||
|
}
|
||||||
|
.flexbox {
|
||||||
|
display: block;
|
||||||
|
border: 0.25in solid black;
|
||||||
|
}
|
||||||
|
.flexbox > div > div {
|
||||||
|
display: inline-block;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 50%;
|
||||||
|
border: 4px solid purple;
|
||||||
|
}
|
||||||
|
.flexbox > .nested {
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
border: 4px solid gold;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div>Before Flexbox</div>
|
||||||
|
<div class="flexbox">
|
||||||
|
<div class="flexbox nested">
|
||||||
|
<div>1</div><div>2</div>
|
||||||
|
<div>3</div><div>4</div>
|
||||||
|
</div>
|
||||||
|
<div class="flexbox nested" style="break-before: page">
|
||||||
|
<div>5</div><div>6</div>
|
||||||
|
<div>7</div><div>8</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>After Flexbox</div>
|
||||||
|
|
@ -0,0 +1,44 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Test that in a row flex container, the break-before values on the flex item in the flex line are propagated to the flex container</title>
|
||||||
|
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||||
|
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
|
||||||
|
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1890238">
|
||||||
|
<link rel="match" href="multi-line-row-flex-fragmentation-082-print-ref.html">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@page { size: 5in 3in; margin: 0.5in; }
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 0.25in;
|
||||||
|
}
|
||||||
|
.flexbox {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
border: 0.25in solid black;
|
||||||
|
}
|
||||||
|
.flexbox > div {
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 50%;
|
||||||
|
border: 4px solid purple;
|
||||||
|
}
|
||||||
|
.flexbox > .nested {
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
border: 4px solid gold;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div>Before Flexbox</div>
|
||||||
|
<div class="flexbox">
|
||||||
|
<div class="flexbox nested">
|
||||||
|
<div>1</div><div>2</div>
|
||||||
|
<div>3</div><div>4</div>
|
||||||
|
</div>
|
||||||
|
<div class="flexbox nested">
|
||||||
|
<div style="break-before: page">5</div><div>6</div>
|
||||||
|
<div>7</div><div>8</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>After Flexbox</div>
|
||||||
|
|
@ -0,0 +1,44 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Test that in a row flex container, the break-before values on the flex item in the flex line are propagated to the flex container</title>
|
||||||
|
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||||
|
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
|
||||||
|
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1890238">
|
||||||
|
<link rel="match" href="multi-line-row-flex-fragmentation-082-print-ref.html">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@page { size: 5in 3in; margin: 0.5in; }
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 0.25in;
|
||||||
|
}
|
||||||
|
.flexbox {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
border: 0.25in solid black;
|
||||||
|
}
|
||||||
|
.flexbox > div {
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 50%;
|
||||||
|
border: 4px solid purple;
|
||||||
|
}
|
||||||
|
.flexbox > .nested {
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
border: 4px solid gold;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div>Before Flexbox</div>
|
||||||
|
<div class="flexbox">
|
||||||
|
<div class="flexbox nested">
|
||||||
|
<div>1</div><div>2</div>
|
||||||
|
<div>3</div><div>4</div>
|
||||||
|
</div>
|
||||||
|
<div class="flexbox nested">
|
||||||
|
<div>5</div><div style="break-before: page">6</div>
|
||||||
|
<div>7</div><div>8</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>After Flexbox</div>
|
||||||
|
|
@ -0,0 +1,44 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Test that in a row flex container, the break-after values on the flex item in the flex line are propagated to the flex container</title>
|
||||||
|
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||||
|
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
|
||||||
|
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1890238">
|
||||||
|
<link rel="match" href="multi-line-row-flex-fragmentation-082-print-ref.html">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@page { size: 5in 3in; margin: 0.5in; }
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 0.25in;
|
||||||
|
}
|
||||||
|
.flexbox {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
border: 0.25in solid black;
|
||||||
|
}
|
||||||
|
.flexbox > div {
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 50%;
|
||||||
|
border: 4px solid purple;
|
||||||
|
}
|
||||||
|
.flexbox > .nested {
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
border: 4px solid gold;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div>Before Flexbox</div>
|
||||||
|
<div class="flexbox">
|
||||||
|
<div class="flexbox nested">
|
||||||
|
<div>1</div><div>2</div>
|
||||||
|
<div style="break-after: page">3</div><div>4</div>
|
||||||
|
</div>
|
||||||
|
<div class="flexbox nested">
|
||||||
|
<div>5</div><div>6</div>
|
||||||
|
<div>7</div><div>8</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>After Flexbox</div>
|
||||||
|
|
@ -0,0 +1,44 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Test that in a row flex container, the break-after values on the flex item in the flex line are propagated to the flex container</title>
|
||||||
|
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||||
|
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
|
||||||
|
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1890238">
|
||||||
|
<link rel="match" href="multi-line-row-flex-fragmentation-082-print-ref.html">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@page { size: 5in 3in; margin: 0.5in; }
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 0.25in;
|
||||||
|
}
|
||||||
|
.flexbox {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
border: 0.25in solid black;
|
||||||
|
}
|
||||||
|
.flexbox > div {
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 50%;
|
||||||
|
border: 4px solid purple;
|
||||||
|
}
|
||||||
|
.flexbox > .nested {
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
border: 4px solid gold;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div>Before Flexbox</div>
|
||||||
|
<div class="flexbox">
|
||||||
|
<div class="flexbox nested">
|
||||||
|
<div>1</div><div>2</div>
|
||||||
|
<div>3</div><div style="break-after: page">4</div>
|
||||||
|
</div>
|
||||||
|
<div class="flexbox nested">
|
||||||
|
<div>5</div><div>6</div>
|
||||||
|
<div>7</div><div>8</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>After Flexbox</div>
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Test that in a row flex container, the break-before values on flex items are propagated to the flex line</title>
|
||||||
|
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||||
|
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
|
||||||
|
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1890238">
|
||||||
|
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.multicol {
|
||||||
|
columns: 2;
|
||||||
|
column-fill: auto;
|
||||||
|
column-gap: 0;
|
||||||
|
width: 100px;
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
.flexbox {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.item {
|
||||||
|
background: green;
|
||||||
|
width: 25px;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<p>Test passes if there is a filled green square.</p>
|
||||||
|
|
||||||
|
<div class="multicol">
|
||||||
|
<div class="flexbox">
|
||||||
|
<div class="flexbox">
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
</div>
|
||||||
|
<div class="flexbox" style="break-before: always; break-before: column">
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Test that in a row flex container, the break-before values on the flex item in the flex line are propagated to the flex container</title>
|
||||||
|
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||||
|
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
|
||||||
|
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1890238">
|
||||||
|
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.multicol {
|
||||||
|
columns: 2;
|
||||||
|
column-fill: auto;
|
||||||
|
column-gap: 0;
|
||||||
|
width: 100px;
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
.flexbox {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.item {
|
||||||
|
background: green;
|
||||||
|
width: 25px;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<p>Test passes if there is a filled green square.</p>
|
||||||
|
|
||||||
|
<div class="multicol">
|
||||||
|
<div class="flexbox">
|
||||||
|
<div class="flexbox">
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
</div>
|
||||||
|
<div class="flexbox">
|
||||||
|
<div class="item" style="break-before: always; break-before: column"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Test that in a row flex container, the break-after values on flex items are propagated to the flex line</title>
|
||||||
|
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||||
|
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
|
||||||
|
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1890238">
|
||||||
|
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.multicol {
|
||||||
|
columns: 2;
|
||||||
|
column-fill: auto;
|
||||||
|
column-gap: 0;
|
||||||
|
width: 100px;
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
.flexbox {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.item {
|
||||||
|
background: green;
|
||||||
|
width: 25px;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<p>Test passes if there is a filled green square.</p>
|
||||||
|
|
||||||
|
<div class="multicol">
|
||||||
|
<div class="flexbox">
|
||||||
|
<div class="flexbox" style="break-after: always; break-after: column">
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
</div>
|
||||||
|
<div class="flexbox">
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Test that in a row flex container, the break-after values on the flex item in the flex line are propagated to the flex container</title>
|
||||||
|
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||||
|
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
|
||||||
|
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1890238">
|
||||||
|
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.multicol {
|
||||||
|
columns: 2;
|
||||||
|
column-fill: auto;
|
||||||
|
column-gap: 0;
|
||||||
|
width: 100px;
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
.flexbox {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.item {
|
||||||
|
background: green;
|
||||||
|
width: 25px;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<p>Test passes if there is a filled green square.</p>
|
||||||
|
|
||||||
|
<div class="multicol">
|
||||||
|
<div class="flexbox">
|
||||||
|
<div class="flexbox">
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item" style="break-after: always; break-after: column"></div>
|
||||||
|
</div>
|
||||||
|
<div class="flexbox">
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||||
|
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@page { size: 5in 3in; margin: 0.5in; }
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 0.25in;
|
||||||
|
}
|
||||||
|
.flexbox {
|
||||||
|
display: block;
|
||||||
|
border: 0.25in solid black;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div>Before Flexbox</div>
|
||||||
|
<div class="flexbox">
|
||||||
|
<div>1</div>
|
||||||
|
<div>2</div>
|
||||||
|
<div style="break-before: page">3</div>
|
||||||
|
<div>4</div>
|
||||||
|
</div>
|
||||||
|
<div>After Flexbox</div>
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Test that in a column flex container, the break-before values on flex items are honored</title>
|
||||||
|
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||||
|
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
|
||||||
|
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1890238">
|
||||||
|
<link rel="match" href="single-line-column-flex-fragmentation-068-print-ref.html">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@page { size: 5in 3in; margin: 0.5in; }
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 0.25in;
|
||||||
|
}
|
||||||
|
.flexbox {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
border: 0.25in solid black;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div>Before Flexbox</div>
|
||||||
|
<div class="flexbox">
|
||||||
|
<div>1</div>
|
||||||
|
<div>2</div>
|
||||||
|
<div style="break-before: page">3</div>
|
||||||
|
<div>4</div>
|
||||||
|
</div>
|
||||||
|
<div>After Flexbox</div>
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Test that in a column flex container, the break-after values on flex items are honored</title>
|
||||||
|
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||||
|
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
|
||||||
|
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1890238">
|
||||||
|
<link rel="match" href="single-line-column-flex-fragmentation-068-print-ref.html">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@page { size: 5in 3in; margin: 0.5in; }
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 0.25in;
|
||||||
|
}
|
||||||
|
.flexbox {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
border: 0.25in solid black;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div>Before Flexbox</div>
|
||||||
|
<div class="flexbox">
|
||||||
|
<div>1</div>
|
||||||
|
<div style="break-after: page">2</div>
|
||||||
|
<div>3</div>
|
||||||
|
<div>4</div>
|
||||||
|
</div>
|
||||||
|
<div>After Flexbox</div>
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Test that in a column-reverse flex container, the break-before values on flex items are honored</title>
|
||||||
|
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||||
|
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
|
||||||
|
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1890238">
|
||||||
|
<link rel="match" href="single-line-column-flex-fragmentation-068-print-ref.html">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@page { size: 5in 3in; margin: 0.5in; }
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 0.25in;
|
||||||
|
}
|
||||||
|
.flexbox {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
border: 0.25in solid black;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div>Before Flexbox</div>
|
||||||
|
<div class="flexbox">
|
||||||
|
<div>4</div>
|
||||||
|
<div style="break-before: page">3</div>
|
||||||
|
<div>2</div>
|
||||||
|
<div>1</div>
|
||||||
|
</div>
|
||||||
|
<div>After Flexbox</div>
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Test that in a column-reverse flex container, the break-after values on flex items are honored</title>
|
||||||
|
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||||
|
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
|
||||||
|
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1890238">
|
||||||
|
<link rel="match" href="single-line-column-flex-fragmentation-068-print-ref.html">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@page { size: 5in 3in; margin: 0.5in; }
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 0.25in;
|
||||||
|
}
|
||||||
|
.flexbox {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
border: 0.25in solid black;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div>Before Flexbox</div>
|
||||||
|
<div class="flexbox">
|
||||||
|
<div>4</div>
|
||||||
|
<div>3</div>
|
||||||
|
<div style="break-after: page">2</div>
|
||||||
|
<div>1</div>
|
||||||
|
</div>
|
||||||
|
<div>After Flexbox</div>
|
||||||
|
|
@ -0,0 +1,35 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||||
|
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@page { size: 5in 3in; margin: 0.5in; }
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 0.25in;
|
||||||
|
}
|
||||||
|
.flexbox {
|
||||||
|
display: block;
|
||||||
|
border: 0.25in solid black;
|
||||||
|
}
|
||||||
|
.flexbox > div {
|
||||||
|
border: 4px solid purple;
|
||||||
|
}
|
||||||
|
.flexbox > .nested {
|
||||||
|
border: 4px solid gold;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div>Before Flexbox</div>
|
||||||
|
<div class="flexbox">
|
||||||
|
<div class="flexbox nested">
|
||||||
|
<div>1</div>
|
||||||
|
<div>2</div>
|
||||||
|
</div>
|
||||||
|
<div class="flexbox nested" style="break-before: page">
|
||||||
|
<div>3</div>
|
||||||
|
<div>4</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>After Flexbox</div>
|
||||||
|
|
@ -0,0 +1,40 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Test that in a column flex container, the break-before values on flex items are honored</title>
|
||||||
|
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||||
|
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
|
||||||
|
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1890238">
|
||||||
|
<link rel="match" href="single-line-column-flex-fragmentation-069-print-ref.html">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@page { size: 5in 3in; margin: 0.5in; }
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 0.25in;
|
||||||
|
}
|
||||||
|
.flexbox {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
border: 0.25in solid black;
|
||||||
|
}
|
||||||
|
.flexbox > div {
|
||||||
|
border: 4px solid purple;
|
||||||
|
}
|
||||||
|
.flexbox > .nested {
|
||||||
|
border: 4px solid gold;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div>Before Flexbox</div>
|
||||||
|
<div class="flexbox">
|
||||||
|
<div class="flexbox nested">
|
||||||
|
<div>1</div>
|
||||||
|
<div>2</div>
|
||||||
|
</div>
|
||||||
|
<div class="flexbox nested" style="break-before: page">
|
||||||
|
<div>3</div>
|
||||||
|
<div>4</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>After Flexbox</div>
|
||||||
|
|
@ -0,0 +1,40 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Test that in a column flex container, the break-before values on the first item are propagated to the flex container</title>
|
||||||
|
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||||
|
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
|
||||||
|
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1890238">
|
||||||
|
<link rel="match" href="single-line-column-flex-fragmentation-069-print-ref.html">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@page { size: 5in 3in; margin: 0.5in; }
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 0.25in;
|
||||||
|
}
|
||||||
|
.flexbox {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
border: 0.25in solid black;
|
||||||
|
}
|
||||||
|
.flexbox > div {
|
||||||
|
border: 4px solid purple;
|
||||||
|
}
|
||||||
|
.flexbox > .nested {
|
||||||
|
border: 4px solid gold;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div>Before Flexbox</div>
|
||||||
|
<div class="flexbox">
|
||||||
|
<div class="flexbox nested">
|
||||||
|
<div>1</div>
|
||||||
|
<div>2</div>
|
||||||
|
</div>
|
||||||
|
<div class="flexbox nested">
|
||||||
|
<div style="break-before: page">3</div>
|
||||||
|
<div>4</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>After Flexbox</div>
|
||||||
|
|
@ -0,0 +1,40 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Test that in a column flex container, the break-after values on flex items are honored</title>
|
||||||
|
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||||
|
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
|
||||||
|
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1890238">
|
||||||
|
<link rel="match" href="single-line-column-flex-fragmentation-069-print-ref.html">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@page { size: 5in 3in; margin: 0.5in; }
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 0.25in;
|
||||||
|
}
|
||||||
|
.flexbox {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
border: 0.25in solid black;
|
||||||
|
}
|
||||||
|
.flexbox > div {
|
||||||
|
border: 4px solid purple;
|
||||||
|
}
|
||||||
|
.flexbox > .nested {
|
||||||
|
border: 4px solid gold;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div>Before Flexbox</div>
|
||||||
|
<div class="flexbox">
|
||||||
|
<div class="flexbox nested" style="break-after: page">
|
||||||
|
<div>1</div>
|
||||||
|
<div>2</div>
|
||||||
|
</div>
|
||||||
|
<div class="flexbox nested">
|
||||||
|
<div>3</div>
|
||||||
|
<div>4</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>After Flexbox</div>
|
||||||
|
|
@ -0,0 +1,40 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Test that in a column flex container, the break-after values on the first item are propagated to the flex container</title>
|
||||||
|
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||||
|
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
|
||||||
|
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1890238">
|
||||||
|
<link rel="match" href="single-line-column-flex-fragmentation-069-print-ref.html">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@page { size: 5in 3in; margin: 0.5in; }
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 0.25in;
|
||||||
|
}
|
||||||
|
.flexbox {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
border: 0.25in solid black;
|
||||||
|
}
|
||||||
|
.flexbox > div {
|
||||||
|
border: 4px solid purple;
|
||||||
|
}
|
||||||
|
.flexbox > .nested {
|
||||||
|
border: 4px solid gold;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div>Before Flexbox</div>
|
||||||
|
<div class="flexbox">
|
||||||
|
<div class="flexbox nested">
|
||||||
|
<div>1</div>
|
||||||
|
<div style="break-after: page">2</div>
|
||||||
|
</div>
|
||||||
|
<div class="flexbox nested">
|
||||||
|
<div>3</div>
|
||||||
|
<div>4</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>After Flexbox</div>
|
||||||
|
|
@ -0,0 +1,41 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Test that in a column flex container, the break-before values on flex items are honored</title>
|
||||||
|
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||||
|
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
|
||||||
|
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1890238">
|
||||||
|
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.multicol {
|
||||||
|
columns: 2;
|
||||||
|
column-fill: auto;
|
||||||
|
column-gap: 0;
|
||||||
|
width: 100px;
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
.flexbox {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.item {
|
||||||
|
background: green;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<p>Test passes if there is a filled green square.</p>
|
||||||
|
|
||||||
|
<div class="multicol">
|
||||||
|
<div class="flexbox">
|
||||||
|
<div class="flexbox">
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
</div>
|
||||||
|
<div class="flexbox" style="break-before: always; break-before: column">
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,41 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Test that in a column flex container, the break-before values on the first item are propagated to the flex container</title>
|
||||||
|
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||||
|
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
|
||||||
|
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1890238">
|
||||||
|
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.multicol {
|
||||||
|
columns: 2;
|
||||||
|
column-fill: auto;
|
||||||
|
column-gap: 0;
|
||||||
|
width: 100px;
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
.flexbox {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.item {
|
||||||
|
background: green;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<p>Test passes if there is a filled green square.</p>
|
||||||
|
|
||||||
|
<div class="multicol">
|
||||||
|
<div class="flexbox">
|
||||||
|
<div class="flexbox">
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
</div>
|
||||||
|
<div class="flexbox">
|
||||||
|
<div class="item" style="break-before: always; break-before: column"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,41 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Test that in a column flex container, the break-after values on flex items are honored</title>
|
||||||
|
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||||
|
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
|
||||||
|
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1890238">
|
||||||
|
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.multicol {
|
||||||
|
columns: 2;
|
||||||
|
column-fill: auto;
|
||||||
|
column-gap: 0;
|
||||||
|
width: 100px;
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
.flexbox {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.item {
|
||||||
|
background: green;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<p>Test passes if there is a filled green square.</p>
|
||||||
|
|
||||||
|
<div class="multicol">
|
||||||
|
<div class="flexbox">
|
||||||
|
<div class="flexbox" style="break-after: always; break-after: column">
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
</div>
|
||||||
|
<div class="flexbox">
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,41 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Test that in a column flex container, the break-after values on the first item are propagated to the flex container</title>
|
||||||
|
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||||
|
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
|
||||||
|
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1890238">
|
||||||
|
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.multicol {
|
||||||
|
columns: 2;
|
||||||
|
column-fill: auto;
|
||||||
|
column-gap: 0;
|
||||||
|
width: 100px;
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
.flexbox {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.item {
|
||||||
|
background: green;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<p>Test passes if there is a filled green square.</p>
|
||||||
|
|
||||||
|
<div class="multicol">
|
||||||
|
<div class="flexbox">
|
||||||
|
<div class="flexbox">
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item" style="break-after: always; break-after: column"></div>
|
||||||
|
</div>
|
||||||
|
<div class="flexbox">
|
||||||
|
<div class="item"></div>
|
||||||
|
<div class="item"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
features:
|
||||||
|
- name: counter-style
|
||||||
|
files: "**"
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
# All of the tests in this directory are for CSSCounterStyleRule, but tests for
|
||||||
|
# other parts of CSS Counter Styles could potentially be added here, so list of
|
||||||
|
# the (current) tests to avoid matching tests from unrelated features added
|
||||||
|
# later.
|
||||||
|
features:
|
||||||
|
- name: counter-style
|
||||||
|
files:
|
||||||
|
- cssom-additive-symbols-setter-invalid.html
|
||||||
|
- cssom-additive-symbols-setter.html
|
||||||
|
- cssom-fallback-setter-invalid.html
|
||||||
|
- cssom-fallback-setter.html
|
||||||
|
- cssom-name-setter-invalid.html
|
||||||
|
- cssom-name-setter.html
|
||||||
|
- cssom-negative-setter-invalid.html
|
||||||
|
- cssom-negative-setter.html
|
||||||
|
- cssom-pad-setter-invalid.html
|
||||||
|
- cssom-pad-setter.html
|
||||||
|
- cssom-prefix-suffix-setter-invalid.html
|
||||||
|
- cssom-prefix-suffix-setter.html
|
||||||
|
- cssom-range-setter-invalid.html
|
||||||
|
- cssom-range-setter.html
|
||||||
|
- cssom-symbols-setter-invalid.html
|
||||||
|
- cssom-symbols-setter.html
|
||||||
|
- cssom-system-setter-1.html
|
||||||
|
- cssom-system-setter-2.html
|
||||||
|
- cssom-system-setter-invalid.html
|
||||||
4
tests/wpt/tests/css/css-easing/WEB_FEATURES.yml
Normal file
4
tests/wpt/tests/css/css-easing/WEB_FEATURES.yml
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
features:
|
||||||
|
- name: linear-easing
|
||||||
|
files:
|
||||||
|
- linear-timing-*
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
<meta charset=utf-8>
|
<meta charset=utf-8>
|
||||||
<meta name="assert" content="This test checks the output of linear timing functions" />
|
<meta name="assert" content="This test checks the output of linear timing functions" />
|
||||||
<title>Tests for the output of linear timing functions</title>
|
<title>Tests for the output of linear timing functions</title>
|
||||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/pull/6533">
|
<link rel="help" href="https://drafts.csswg.org/css-easing-2/#the-linear-easing-function">
|
||||||
<script src="/resources/testharness.js"></script>
|
<script src="/resources/testharness.js"></script>
|
||||||
<script src="/resources/testharnessreport.js"></script>
|
<script src="/resources/testharnessreport.js"></script>
|
||||||
<script src="support/util.js"></script>
|
<script src="support/util.js"></script>
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>CSS Easing: getComputedStyle().animationTimingFunction with linear(...)</title>
|
<title>CSS Easing: getComputedStyle().animationTimingFunction with linear(...)</title>
|
||||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/pull/6533">
|
<link rel="help" href="https://drafts.csswg.org/css-easing-2/#the-linear-easing-function">
|
||||||
<meta name="assert" content="animation-timing-function: linear(...) parsing tests">
|
<meta name="assert" content="animation-timing-function: linear(...) parsing tests">
|
||||||
<script src="/resources/testharness.js"></script>
|
<script src="/resources/testharness.js"></script>
|
||||||
<script src="/resources/testharnessreport.js"></script>
|
<script src="/resources/testharnessreport.js"></script>
|
||||||
4
tests/wpt/tests/css/css-lists/WEB_FEATURES.yml
Normal file
4
tests/wpt/tests/css/css-lists/WEB_FEATURES.yml
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
features:
|
||||||
|
- name: counter-set
|
||||||
|
files:
|
||||||
|
- counter-set-*
|
||||||
17
tests/wpt/tests/css/css-page/page-size-012-print-ref.html
Normal file
17
tests/wpt/tests/css/css-page/page-size-012-print-ref.html
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||||
|
<style>
|
||||||
|
@page {
|
||||||
|
size: 600px 400px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
body { margin: 0; }
|
||||||
|
</style>
|
||||||
|
<div style="margin-left:auto; margin-right:50px; writing-mode:vertical-rl; height:400px; background:yellow;">
|
||||||
|
50px to the left of page box right edge.<br>
|
||||||
|
Page widths larger than heights.<br>
|
||||||
|
</div>
|
||||||
|
<div style="break-before:page;"></div>
|
||||||
|
<div style="margin-left:auto; margin-top:50px; writing-mode:vertical-rl; height:350px; background:yellow;">
|
||||||
|
50px below the page box top edge.<br>
|
||||||
|
</div>
|
||||||
28
tests/wpt/tests/css/css-page/page-size-012-print.html
Normal file
28
tests/wpt/tests/css/css-page/page-size-012-print.html
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<title>Test vertical writing mode with specified page size and logical margins.</title>
|
||||||
|
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||||
|
<link rel="help" href="https://www.w3.org/TR/css-page-3/#at-page-rule">
|
||||||
|
<link rel="help" href="https://www.w3.org/TR/css-page-3/#typedef-page-size-page-size">
|
||||||
|
<link rel="match" href="page-size-012-print-ref.html">
|
||||||
|
<style>
|
||||||
|
@page {
|
||||||
|
size: 600px 400px;
|
||||||
|
margin: 0;
|
||||||
|
margin-inline-start: 50px;
|
||||||
|
}
|
||||||
|
@page :first {
|
||||||
|
margin-inline-start: 0;
|
||||||
|
margin-block-start: 50px;
|
||||||
|
}
|
||||||
|
html {
|
||||||
|
writing-mode: vertical-rl;
|
||||||
|
}
|
||||||
|
body { margin: 0; }
|
||||||
|
</style>
|
||||||
|
<div style="background:yellow;">
|
||||||
|
50px to the left of page box right edge.<br>
|
||||||
|
Page widths larger than heights.<br>
|
||||||
|
</div>
|
||||||
|
<div style="break-before:page; background:yellow;">
|
||||||
|
50px below the page box top edge.<br>
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,38 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>CSS Position Test: Test position:sticky element with auto margin in flex container</title>
|
||||||
|
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||||
|
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-position/#staticpos-rect">
|
||||||
|
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1488080">
|
||||||
|
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
|
||||||
|
<meta name="assert" content="This test verifies that a position:sticky element aligning with 'auto' margin still honors the sticky positioning.">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
#container{
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
overflow: hidden;
|
||||||
|
background: red;
|
||||||
|
}
|
||||||
|
.flex {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 500px;
|
||||||
|
}
|
||||||
|
.child {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
background: green;
|
||||||
|
position: sticky;
|
||||||
|
margin-top: auto;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||||
|
<div id="container">
|
||||||
|
<div class="flex">
|
||||||
|
<div class="child"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>CSS Position Test: Test position:sticky element with auto margin in block container</title>
|
||||||
|
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||||
|
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-position/#staticpos-rect">
|
||||||
|
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1488080">
|
||||||
|
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
|
||||||
|
<meta name="assert" content="This test verifies that a position:sticky element aligning with 'auto' margin still honors the sticky positioning.">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
#container{
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
overflow: hidden;
|
||||||
|
background: red;
|
||||||
|
}
|
||||||
|
.block {
|
||||||
|
width: 500px;
|
||||||
|
}
|
||||||
|
.child {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
background: green;
|
||||||
|
position: sticky;
|
||||||
|
margin-left: auto;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||||
|
<div id="container">
|
||||||
|
<div class="block">
|
||||||
|
<div class="child">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
features:
|
||||||
|
- name: contain-intrinsic-size
|
||||||
|
files: "**"
|
||||||
|
|
@ -47,7 +47,7 @@
|
||||||
assert_equals(rules[0].selectorText, 'div');
|
assert_equals(rules[0].selectorText, 'div');
|
||||||
let div = rules[0];
|
let div = rules[0];
|
||||||
let x = div.style.getPropertyValue('--x');
|
let x = div.style.getPropertyValue('--x');
|
||||||
assert_equals(x, 'hover { }\n .b { }');
|
assert_equals(x.trim(), 'hover { }\n .b { }');
|
||||||
let childRules = div.cssRules;
|
let childRules = div.cssRules;
|
||||||
assert_equals(childRules.length, 1);
|
assert_equals(childRules.length, 1);
|
||||||
assert_equals(childRules[0].selectorText, '& .a');
|
assert_equals(childRules[0].selectorText, '& .a');
|
||||||
|
|
|
||||||
3
tests/wpt/tests/css/css-text/hyphens/WEB_FEATURES.yml
Normal file
3
tests/wpt/tests/css/css-text/hyphens/WEB_FEATURES.yml
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
features:
|
||||||
|
- name: hyphens
|
||||||
|
files: "**"
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
<!-- DO NOT EDIT THIS FILE.
|
||||||
|
Edit the appearance-* file instead and then run:
|
||||||
|
./tools/appearance-build-webkit-reftests.py
|
||||||
|
-->
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<title>CSS Basic User Interface Test: -webkit-appearance: auto on elements in non-HTML namespace</title>
|
||||||
|
<link rel="match" href="nothing-below-ref.html">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-ui-4/#appearance-switching">
|
||||||
|
<meta name="assert" content="-webkit-appearance: auto should have no effect on non-HTML elements.">
|
||||||
|
<style>
|
||||||
|
div * { -webkit-appearance: auto; display: inline-block; width: 1em; height: 1em; }
|
||||||
|
</style>
|
||||||
|
<p>There should be nothing below:</p>
|
||||||
|
<div id=div></div>
|
||||||
|
<script>
|
||||||
|
for (var tagName of ['button', 'input', 'meter', 'progress', 'select', 'textarea']) {
|
||||||
|
div.appendChild(document.createElementNS('not-html', tagName));
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -5,6 +5,10 @@ features:
|
||||||
- name: cap
|
- name: cap
|
||||||
files:
|
files:
|
||||||
- cap-*
|
- cap-*
|
||||||
|
- name: exp-functions
|
||||||
|
files:
|
||||||
|
- exp-log-*
|
||||||
|
- hypot-pow-sqrt-*
|
||||||
- name: ic
|
- name: ic
|
||||||
files:
|
files:
|
||||||
- ic-*
|
- ic-*
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<title>View transitions: iframe and main frame transition at the same time (ref)</title>
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
|
||||||
|
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||||
|
<style>
|
||||||
|
iframe {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 50vw;
|
||||||
|
height: 50vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: lightgreen;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<iframe srcdoc="
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background: lightblue;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
"></iframe>
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,68 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html class=reftest-wait>
|
||||||
|
<title>View transitions: iframe and main frame transition at the same time</title>
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
|
||||||
|
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||||
|
<link rel="match" href="iframe-and-main-frame-transition-new-main-new-iframe-ref.html">
|
||||||
|
<script src="/common/reftest-wait.js"></script>
|
||||||
|
<style>
|
||||||
|
iframe {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 50vw;
|
||||||
|
height: 50vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Keep showing the live state for the main frame so we can assert the state of
|
||||||
|
screenshots in the iframe */
|
||||||
|
::view-transition-group(root) {
|
||||||
|
animation-duration: 300s;
|
||||||
|
}
|
||||||
|
::view-transition-old(root) {
|
||||||
|
animation: unset;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
::view-transition-new(root) {
|
||||||
|
animation: unset;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<iframe srcdoc="
|
||||||
|
<style>
|
||||||
|
/* The iframe is showing new live DOM */
|
||||||
|
::view-transition-group(root) {
|
||||||
|
animation-duration: 300s;
|
||||||
|
}
|
||||||
|
::view-transition-new(root) {
|
||||||
|
animation: unset;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
::view-transition-old(root) {
|
||||||
|
animation: unset;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<body></body>
|
||||||
|
"></iframe>
|
||||||
|
<script>
|
||||||
|
onload = runTest;
|
||||||
|
|
||||||
|
async function startTransition(document, oldColor, newColor) {
|
||||||
|
document.documentElement.style.background = oldColor;
|
||||||
|
await document.startViewTransition(() => {
|
||||||
|
document.documentElement.style.background = newColor;
|
||||||
|
}).ready;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function runTest() {
|
||||||
|
await startTransition(document, "green", "lightgreen");
|
||||||
|
|
||||||
|
const iframeDocument = document.querySelector("iframe").contentDocument;
|
||||||
|
await startTransition(iframeDocument, "blue", "lightblue");
|
||||||
|
|
||||||
|
takeScreenshot();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<title>View transitions: iframe and main frame transition at the same time (ref)</title>
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
|
||||||
|
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||||
|
<style>
|
||||||
|
iframe {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 50vw;
|
||||||
|
height: 50vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: lightgreen;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<iframe srcdoc="
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background: blue;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
"></iframe>
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,68 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html class=reftest-wait>
|
||||||
|
<title>View transitions: iframe and main frame transition at the same time</title>
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
|
||||||
|
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||||
|
<link rel="match" href="iframe-and-main-frame-transition-new-main-old-iframe-ref.html">
|
||||||
|
<script src="/common/reftest-wait.js"></script>
|
||||||
|
<style>
|
||||||
|
iframe {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 50vw;
|
||||||
|
height: 50vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Keep showing the live state for the main frame so we can assert the state of
|
||||||
|
screenshots in the iframe */
|
||||||
|
::view-transition-group(root) {
|
||||||
|
animation-duration: 300s;
|
||||||
|
}
|
||||||
|
::view-transition-old(root) {
|
||||||
|
animation: unset;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
::view-transition-new(root) {
|
||||||
|
animation: unset;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<iframe srcdoc="
|
||||||
|
<style>
|
||||||
|
/* The iframe is showing old screenshots */
|
||||||
|
::view-transition-group(root) {
|
||||||
|
animation-duration: 300s;
|
||||||
|
}
|
||||||
|
::view-transition-old(root) {
|
||||||
|
animation: unset;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
::view-transition-new(root) {
|
||||||
|
animation: unset;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<body></body>
|
||||||
|
"></iframe>
|
||||||
|
<script>
|
||||||
|
onload = runTest;
|
||||||
|
|
||||||
|
async function startTransition(document, oldColor, newColor) {
|
||||||
|
document.documentElement.style.background = oldColor;
|
||||||
|
await document.startViewTransition(() => {
|
||||||
|
document.documentElement.style.background = newColor;
|
||||||
|
}).ready;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function runTest() {
|
||||||
|
await startTransition(document, "green", "lightgreen");
|
||||||
|
|
||||||
|
const iframeDocument = document.querySelector("iframe").contentDocument;
|
||||||
|
await startTransition(iframeDocument, "blue", "lightblue");
|
||||||
|
|
||||||
|
takeScreenshot();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<title>View transitions: iframe and main frame transition at the same time (ref)</title>
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
|
||||||
|
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||||
|
<style>
|
||||||
|
iframe {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 50vw;
|
||||||
|
height: 50vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: green;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<iframe srcdoc="
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background: lightblue;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
"></iframe>
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,67 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html class=reftest-wait>
|
||||||
|
<title>View transitions: iframe and main frame transition at the same time</title>
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
|
||||||
|
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||||
|
<link rel="match" href="iframe-and-main-frame-transition-old-main-new-iframe-ref.html">
|
||||||
|
<script src="/common/reftest-wait.js"></script>
|
||||||
|
<style>
|
||||||
|
iframe {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 50vw;
|
||||||
|
height: 50vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Keep showing the screenshot for the main frame */
|
||||||
|
::view-transition-group(root) {
|
||||||
|
animation-duration: 300s;
|
||||||
|
}
|
||||||
|
::view-transition-old(root) {
|
||||||
|
animation: unset;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
::view-transition-new(root) {
|
||||||
|
animation: unset;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<iframe srcdoc="
|
||||||
|
<style>
|
||||||
|
/* The iframe is showing live DOM */
|
||||||
|
::view-transition-group(root) {
|
||||||
|
animation-duration: 300s;
|
||||||
|
}
|
||||||
|
::view-transition-new(root) {
|
||||||
|
animation: unset;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
::view-transition-old(root) {
|
||||||
|
animation: unset;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<body></body>
|
||||||
|
"></iframe>
|
||||||
|
<script>
|
||||||
|
onload = runTest;
|
||||||
|
|
||||||
|
async function startTransition(document, oldColor, newColor) {
|
||||||
|
document.documentElement.style.background = oldColor;
|
||||||
|
await document.startViewTransition(() => {
|
||||||
|
document.documentElement.style.background = newColor;
|
||||||
|
}).ready;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function runTest() {
|
||||||
|
const iframeDocument = document.querySelector("iframe").contentDocument;
|
||||||
|
await startTransition(iframeDocument, "blue", "lightblue");
|
||||||
|
|
||||||
|
await startTransition(document, "green", "lightgreen");
|
||||||
|
|
||||||
|
takeScreenshot();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<title>View transitions: iframe and main frame transition at the same time (ref)</title>
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
|
||||||
|
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||||
|
<style>
|
||||||
|
iframe {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 50vw;
|
||||||
|
height: 50vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: green;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<iframe srcdoc="
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background: blue;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
"></iframe>
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,67 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html class=reftest-wait>
|
||||||
|
<title>View transitions: iframe and main frame transition at the same time</title>
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
|
||||||
|
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||||
|
<link rel="match" href="iframe-and-main-frame-transition-old-main-old-iframe-ref.html">
|
||||||
|
<script src="/common/reftest-wait.js"></script>
|
||||||
|
<style>
|
||||||
|
iframe {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 50vw;
|
||||||
|
height: 50vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Keep showing the screenshot for the main frame */
|
||||||
|
::view-transition-group(root) {
|
||||||
|
animation-duration: 300s;
|
||||||
|
}
|
||||||
|
::view-transition-old(root) {
|
||||||
|
animation: unset;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
::view-transition-new(root) {
|
||||||
|
animation: unset;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<iframe srcdoc="
|
||||||
|
<style>
|
||||||
|
/* The iframe is showing an old screenshot */
|
||||||
|
::view-transition-group(root) {
|
||||||
|
animation-duration: 300s;
|
||||||
|
}
|
||||||
|
::view-transition-old(root) {
|
||||||
|
animation: unset;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
::view-transition-new(root) {
|
||||||
|
animation: unset;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<body></body>
|
||||||
|
"></iframe>
|
||||||
|
<script>
|
||||||
|
onload = runTest;
|
||||||
|
|
||||||
|
async function startTransition(document, oldColor, newColor) {
|
||||||
|
document.documentElement.style.background = oldColor;
|
||||||
|
await document.startViewTransition(() => {
|
||||||
|
document.documentElement.style.background = newColor;
|
||||||
|
}).ready;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function runTest() {
|
||||||
|
const iframeDocument = document.querySelector("iframe").contentDocument;
|
||||||
|
await startTransition(iframeDocument, "blue", "lightblue");
|
||||||
|
|
||||||
|
await startTransition(document, "green", "lightgreen");
|
||||||
|
|
||||||
|
takeScreenshot();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<title>View transitions: iframe and main frame transition at the same time (ref)</title>
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
|
||||||
|
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||||
|
<style>
|
||||||
|
iframe {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 50vw;
|
||||||
|
height: 50vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: green;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<iframe srcdoc="
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background: orange;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
"></iframe>
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,60 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html class=reftest-wait>
|
||||||
|
<title>View transitions: iframe and main frame transition at the same time</title>
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
|
||||||
|
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||||
|
<link rel="match" href="iframe-and-main-frame-transition-old-main-ref.html">
|
||||||
|
<script src="/common/reftest-wait.js"></script>
|
||||||
|
<style>
|
||||||
|
iframe {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 50vw;
|
||||||
|
height: 50vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* The main frame is showing the old screenshot */
|
||||||
|
::view-transition-group(root) {
|
||||||
|
animation-duration: 300s;
|
||||||
|
}
|
||||||
|
::view-transition-new(root) {
|
||||||
|
animation: unset;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
::view-transition-old(root) {
|
||||||
|
animation: unset;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<iframe srcdoc="
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background: orange;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<body></body>"></iframe>
|
||||||
|
<script>
|
||||||
|
onload = runTest;
|
||||||
|
|
||||||
|
async function startTransition(document, oldColor, newColor) {
|
||||||
|
document.documentElement.style.background = oldColor;
|
||||||
|
await document.startViewTransition(() => {
|
||||||
|
document.documentElement.style.background = newColor;
|
||||||
|
}).ready;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function runTest() {
|
||||||
|
await startTransition(document, "green", "lightgreen");
|
||||||
|
|
||||||
|
// Start an iframe transition while the main frame transition is showing the
|
||||||
|
// old screenshot. This change shouldn't show up visually because the old
|
||||||
|
// screenshot on the main frame still has the iframe's old content.
|
||||||
|
const iframeDocument = document.querySelector("iframe").contentDocument;
|
||||||
|
await startTransition(iframeDocument, "blue", "lightblue");
|
||||||
|
|
||||||
|
takeScreenshot();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
@ -0,0 +1,28 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<title>View transitions: iframe and main frame transition at the same time with name on iframe (ref)</title>
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
|
||||||
|
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||||
|
<style>
|
||||||
|
iframe {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 50vw;
|
||||||
|
height: 50vh;
|
||||||
|
border: 1px solid orange;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: green;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<iframe srcdoc="
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background: blue;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
"></iframe>
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,93 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html class=reftest-wait>
|
||||||
|
<title>View transitions: iframe and main frame transition at the same time with name on iframe</title>
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
|
||||||
|
<link rel="author" href="mailto:khushalsagar@chromium.org">
|
||||||
|
<link rel="match" href="iframe-and-main-frame-transition-with-name-on-iframe-ref.html">
|
||||||
|
<script src="/common/reftest-wait.js"></script>
|
||||||
|
<style>
|
||||||
|
iframe {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 50vw;
|
||||||
|
height: 50vh;
|
||||||
|
view-transition-name: inner;
|
||||||
|
}
|
||||||
|
|
||||||
|
.old {
|
||||||
|
border: 1px solid black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.new {
|
||||||
|
border: 1px solid orange;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* The main frame is showing the old screenshot for the root */
|
||||||
|
::view-transition-group(root) {
|
||||||
|
animation-duration: 300s;
|
||||||
|
}
|
||||||
|
::view-transition-new(root) {
|
||||||
|
animation: unset;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
::view-transition-old(root) {
|
||||||
|
animation: unset;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* The iframe is showing the live screenshot */
|
||||||
|
::view-transition-new(inner) {
|
||||||
|
animation: unset;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
::view-transition-old(inner) {
|
||||||
|
animation: unset;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<iframe id="inner" srcdoc="
|
||||||
|
<style>
|
||||||
|
/* The iframe document itself is showing an old screenshot */
|
||||||
|
::view-transition-group(root) {
|
||||||
|
animation-duration: 300s;
|
||||||
|
}
|
||||||
|
::view-transition-new(root) {
|
||||||
|
animation: unset;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
::view-transition-old(root) {
|
||||||
|
animation: unset;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<body></body>"></iframe>
|
||||||
|
<script>
|
||||||
|
onload = runTest;
|
||||||
|
|
||||||
|
async function startTransition(document, oldColor, newColor, nestedFrame) {
|
||||||
|
document.documentElement.style.background = oldColor;
|
||||||
|
if (nestedFrame != null)
|
||||||
|
nestedFrame.classList.add("old");
|
||||||
|
|
||||||
|
await document.startViewTransition(() => {
|
||||||
|
document.documentElement.style.background = newColor;
|
||||||
|
if (nestedFrame != null) {
|
||||||
|
nestedFrame.classList.remove("old");
|
||||||
|
nestedFrame.classList.add("new");
|
||||||
|
}
|
||||||
|
}).ready;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function runTest() {
|
||||||
|
await startTransition(document, "green", "lightgreen", document.getElementById("inner"));
|
||||||
|
|
||||||
|
const iframeDocument = document.querySelector("iframe").contentDocument;
|
||||||
|
await startTransition(iframeDocument, "blue", "lightblue", null);
|
||||||
|
|
||||||
|
takeScreenshot();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
@ -10,4 +10,4 @@ body {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>backdrop-filter: The backdrop root concept</title>
|
||||||
|
<link rel="author" href="mailto:masonf@chromium.org">
|
||||||
|
<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropRoot">
|
||||||
|
<link rel=stylesheet href="resources/backdrop-filter-backdrop-root.css">
|
||||||
|
<link rel="match" href="backdrop-filter-backdrop-root-ref.html">
|
||||||
|
|
||||||
|
<!-- A Backdrop Root is formed, anywhere in the document, by:
|
||||||
|
- An element with a backdrop-filter value other than "none".
|
||||||
|
- An element with a will-change value specifying any property that would create a Backdrop Root on non-initial value. -->
|
||||||
|
<div class=container>
|
||||||
|
<div class=testcase>
|
||||||
|
<div style="backdrop-filter: invert(0);"><div></div></div>
|
||||||
|
</div>
|
||||||
|
<div class=testcase>
|
||||||
|
<div style="will-change:backdrop-filter;"><div></div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue