mirror of
https://github.com/servo/servo.git
synced 2025-07-23 07:13:52 +01:00
Auto merge of #19070 - jdm:csstests, r=metajack
Enable CSS tests. Do not merge this; I'm looking into what it takes to stop running the test-css jobs. <!-- Reviewable:start --> --- This change is [<img src="https://reviewable.io/review_button.svg" height="34" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/19070) <!-- Reviewable:end -->
This commit is contained in:
bors-servo
GitHub
commit
86b9e7d7d6
125300 changed files with 29391 additions and 7806491 deletions
18
Cargo.lock
generated
18
Cargo.lock
generated
|
|
@ -1053,7 +1053,7 @@ dependencies = [
|
|||
"unicode-script 0.1.1 (registry+https://github.com/rust-lang/crates.io-index)",
|
||||
"webrender_api 0.53.1 (git+https://github.com/servo/webrender)",
|
||||
"xi-unicode 0.1.0 (registry+https://github.com/rust-lang/crates.io-index)",
|
||||
"xml5ever 0.11.0 (registry+https://github.com/rust-lang/crates.io-index)",
|
||||
"xml5ever 0.11.1 (registry+https://github.com/rust-lang/crates.io-index)",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
|
|
@ -1210,7 +1210,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
|
|||
dependencies = [
|
||||
"log 0.3.8 (registry+https://github.com/rust-lang/crates.io-index)",
|
||||
"mac 0.1.1 (registry+https://github.com/rust-lang/crates.io-index)",
|
||||
"markup5ever 0.6.0 (registry+https://github.com/rust-lang/crates.io-index)",
|
||||
"markup5ever 0.6.2 (registry+https://github.com/rust-lang/crates.io-index)",
|
||||
"quote 0.3.15 (registry+https://github.com/rust-lang/crates.io-index)",
|
||||
"syn 0.11.11 (registry+https://github.com/rust-lang/crates.io-index)",
|
||||
]
|
||||
|
|
@ -1687,7 +1687,7 @@ dependencies = [
|
|||
"string_cache 0.6.2 (registry+https://github.com/rust-lang/crates.io-index)",
|
||||
"url 1.6.0 (registry+https://github.com/rust-lang/crates.io-index)",
|
||||
"webrender_api 0.53.1 (git+https://github.com/servo/webrender)",
|
||||
"xml5ever 0.11.0 (registry+https://github.com/rust-lang/crates.io-index)",
|
||||
"xml5ever 0.11.1 (registry+https://github.com/rust-lang/crates.io-index)",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
|
|
@ -1701,7 +1701,7 @@ dependencies = [
|
|||
|
||||
[[package]]
|
||||
name = "markup5ever"
|
||||
version = "0.6.0"
|
||||
version = "0.6.2"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
dependencies = [
|
||||
"phf 0.7.21 (registry+https://github.com/rust-lang/crates.io-index)",
|
||||
|
|
@ -2582,7 +2582,7 @@ dependencies = [
|
|||
"uuid 0.5.0 (registry+https://github.com/rust-lang/crates.io-index)",
|
||||
"webrender_api 0.53.1 (git+https://github.com/servo/webrender)",
|
||||
"webvr_traits 0.0.1",
|
||||
"xml5ever 0.11.0 (registry+https://github.com/rust-lang/crates.io-index)",
|
||||
"xml5ever 0.11.1 (registry+https://github.com/rust-lang/crates.io-index)",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
|
|
@ -3642,12 +3642,12 @@ dependencies = [
|
|||
|
||||
[[package]]
|
||||
name = "xml5ever"
|
||||
version = "0.11.0"
|
||||
version = "0.11.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
dependencies = [
|
||||
"log 0.3.8 (registry+https://github.com/rust-lang/crates.io-index)",
|
||||
"mac 0.1.1 (registry+https://github.com/rust-lang/crates.io-index)",
|
||||
"markup5ever 0.6.0 (registry+https://github.com/rust-lang/crates.io-index)",
|
||||
"markup5ever 0.6.2 (registry+https://github.com/rust-lang/crates.io-index)",
|
||||
"time 0.1.37 (registry+https://github.com/rust-lang/crates.io-index)",
|
||||
]
|
||||
|
||||
|
|
@ -3792,7 +3792,7 @@ dependencies = [
|
|||
"checksum lzw 0.10.0 (registry+https://github.com/rust-lang/crates.io-index)" = "7d947cbb889ed21c2a84be6ffbaebf5b4e0f4340638cba0444907e38b56be084"
|
||||
"checksum mac 0.1.1 (registry+https://github.com/rust-lang/crates.io-index)" = "c41e0c4fef86961ac6d6f8a82609f55f31b05e4fce149ac5710e439df7619ba4"
|
||||
"checksum malloc_buf 0.0.6 (registry+https://github.com/rust-lang/crates.io-index)" = "62bb907fe88d54d8d9ce32a3cceab4218ed2f6b7d35617cafe9adf84e43919cb"
|
||||
"checksum markup5ever 0.6.0 (registry+https://github.com/rust-lang/crates.io-index)" = "42cbeefb74733fcb0ea1997095d3439fd62891c72c30f51aeed29751cfad94b0"
|
||||
"checksum markup5ever 0.6.2 (registry+https://github.com/rust-lang/crates.io-index)" = "2cf89d3e0486c32c9d99521455ddf9a438910a1ce2bd376936086edc15dff5fc"
|
||||
"checksum matches 0.1.4 (registry+https://github.com/rust-lang/crates.io-index)" = "efd7622e3022e1a6eaa602c4cea8912254e5582c9c692e9167714182244801b1"
|
||||
"checksum memchr 1.0.1 (registry+https://github.com/rust-lang/crates.io-index)" = "1dbccc0e46f1ea47b9f17e6d67c5a96bd27030519c519c9c91327e31275a47b4"
|
||||
"checksum metadeps 1.1.1 (registry+https://github.com/rust-lang/crates.io-index)" = "829fffe7ea1d747e23f64be972991bc516b2f1ac2ae4a3b33d8bea150c410151"
|
||||
|
|
@ -3939,4 +3939,4 @@ dependencies = [
|
|||
"checksum xdg 2.1.0 (registry+https://github.com/rust-lang/crates.io-index)" = "a66b7c2281ebde13cf4391d70d4c7e5946c3c25e72a7b859ca8f677dcd0b0c61"
|
||||
"checksum xi-unicode 0.1.0 (registry+https://github.com/rust-lang/crates.io-index)" = "12ea8eda4b1eb72f02d148402e23832d56a33f55d8c1b2d5bcdde91d79d47cb1"
|
||||
"checksum xml-rs 0.3.6 (registry+https://github.com/rust-lang/crates.io-index)" = "7ec6c39eaa68382c8e31e35239402c0a9489d4141a8ceb0c716099a0b515b562"
|
||||
"checksum xml5ever 0.11.0 (registry+https://github.com/rust-lang/crates.io-index)" = "c48ce5543b6396e3cd5f52e25a492857853bba3a93d457c76b9eaaca57a07e03"
|
||||
"checksum xml5ever 0.11.1 (registry+https://github.com/rust-lang/crates.io-index)" = "7ea36cbec2df63ed95e07861d0868a12fb8cb73c88f4c0b0ebf36f2dfc86b6eb"
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ mac-rel-wpt1:
|
|||
- ./mach clean-nightlies --keep 3 --force
|
||||
- env PKG_CONFIG_PATH=/usr/local/opt/zlib/lib/pkgconfig ./mach build --release
|
||||
- ./mach test-wpt-failure
|
||||
- ./mach test-wpt --release --processes 4 --total-chunks 4 --this-chunk 1 --log-raw test-wpt.log --log-errorsummary wpt-errorsummary.log --always-succeed
|
||||
- ./mach test-wpt --release --processes 4 --total-chunks 6 --this-chunk 1 --log-raw test-wpt.log --log-errorsummary wpt-errorsummary.log --always-succeed
|
||||
- ./mach filter-intermittents wpt-errorsummary.log --log-intermittents intermittents.log --log-filteredsummary filtered-wpt-errorsummary.log --use-tracker
|
||||
- ./mach test-wpt --release --binary-arg=--multiprocess --processes 8 --log-raw test-wpt-mp.log --log-errorsummary wpt-mp-errorsummary.log eventsource
|
||||
- bash ./etc/ci/lockfile_changed.sh
|
||||
|
|
@ -11,20 +11,20 @@ mac-rel-wpt1:
|
|||
mac-rel-wpt2:
|
||||
- ./mach clean-nightlies --keep 3 --force
|
||||
- env PKG_CONFIG_PATH=/usr/local/opt/zlib/lib/pkgconfig ./mach build --release
|
||||
- ./mach test-wpt --release --processes 4 --total-chunks 4 --this-chunk 2 --log-raw test-wpt.log --log-errorsummary wpt-errorsummary.log --always-succeed
|
||||
- ./mach test-wpt --release --processes 4 --total-chunks 6 --this-chunk 2 --log-raw test-wpt.log --log-errorsummary wpt-errorsummary.log --always-succeed
|
||||
- ./mach filter-intermittents wpt-errorsummary.log --log-intermittents intermittents.log --log-filteredsummary filtered-wpt-errorsummary.log --use-tracker
|
||||
- env PKG_CONFIG_PATH=/usr/local/opt/zlib/lib/pkgconfig ./mach build-geckolib --release
|
||||
|
||||
mac-rel-wpt3:
|
||||
- ./mach clean-nightlies --keep 3 --force
|
||||
- env PKG_CONFIG_PATH=/usr/local/opt/zlib/lib/pkgconfig ./mach build --release
|
||||
- ./mach test-wpt --release --processes 4 --total-chunks 4 --this-chunk 3 --log-raw test-wpt.log --log-errorsummary wpt-errorsummary.log --always-succeed
|
||||
- ./mach test-wpt --release --processes 4 --total-chunks 6 --this-chunk 3 --log-raw test-wpt.log --log-errorsummary wpt-errorsummary.log --always-succeed
|
||||
- ./mach filter-intermittents wpt-errorsummary.log --log-intermittents intermittents.log --log-filteredsummary filtered-wpt-errorsummary.log --use-tracker
|
||||
|
||||
mac-rel-wpt4:
|
||||
- ./mach clean-nightlies --keep 3 --force
|
||||
- env PKG_CONFIG_PATH=/usr/local/opt/zlib/lib/pkgconfig ./mach build --release
|
||||
- ./mach test-wpt --release --processes 4 --total-chunks 4 --this-chunk 4 --log-raw test-wpt.log --log-errorsummary wpt-errorsummary.log --always-succeed
|
||||
- ./mach test-wpt --release --processes 4 --total-chunks 6 --this-chunk 4 --log-raw test-wpt.log --log-errorsummary wpt-errorsummary.log --always-succeed
|
||||
- ./mach filter-intermittents wpt-errorsummary.log --log-intermittents intermittents.log --log-filteredsummary filtered-wpt-errorsummary.log --use-tracker
|
||||
- ./mach test-wpt --release --pref dom.servoparser.async_html_tokenizer.enabled --processes=8 --log-raw test-async-parsing.log --log-errorsummary async-parsing-errorsummary.log --always-succeed domparsing html/syntax html/dom/documents html/dom/dynamic-markup-insertion
|
||||
- ./mach filter-intermittents async-parsing-errorsummary.log --log-intermittents async-parsing-intermittents.log --log-filteredsummary filtered-async-parsing-errorsummary.log --use-tracker
|
||||
|
|
@ -42,16 +42,16 @@ mac-dev-unit:
|
|||
mac-rel-css1:
|
||||
- ./mach clean-nightlies --keep 3 --force
|
||||
- env PKG_CONFIG_PATH=/usr/local/opt/zlib/lib/pkgconfig ./mach build --release
|
||||
- ./mach test-css --release --processes 4 --total-chunks 2 --this-chunk 1 --log-raw test-css.log --log-errorsummary css-errorsummary.log --always-succeed
|
||||
- ./mach filter-intermittents css-errorsummary.log --log-intermittents intermittents.log --log-filteredsummary filtered-css-errorsummary.log --use-tracker
|
||||
- ./mach test-wpt --release --processes 4 --total-chunks 6 --this-chunk 5 --log-raw test-wpt.log --log-errorsummary wpt-errorsummary.log --always-succeed
|
||||
- ./mach filter-intermittents wpt-errorsummary.log --log-intermittents intermittents.log --log-filteredsummary filtered-wpt-errorsummary.log --use-tracker
|
||||
- bash ./etc/ci/lockfile_changed.sh
|
||||
- bash ./etc/ci/manifest_changed.sh
|
||||
|
||||
mac-rel-css2:
|
||||
- ./mach clean-nightlies --keep 3 --force
|
||||
- env PKG_CONFIG_PATH=/usr/local/opt/zlib/lib/pkgconfig ./mach build --release
|
||||
- ./mach test-css --release --processes 4 --total-chunks 2 --this-chunk 2 --log-raw test-css.log --log-errorsummary css-errorsummary.log --always-succeed
|
||||
- ./mach filter-intermittents css-errorsummary.log --log-intermittents intermittents.log --log-filteredsummary filtered-css-errorsummary.log --use-tracker
|
||||
- ./mach test-wpt --release --processes 4 --total-chunks 6 --this-chunk 6 --log-raw test-wpt.log --log-errorsummary wpt-errorsummary.log --always-succeed
|
||||
- ./mach filter-intermittents wpt-errorsummary.log --log-intermittents intermittents.log --log-filteredsummary filtered-wpt-errorsummary.log --use-tracker
|
||||
|
||||
mac-nightly:
|
||||
- ./mach clean-nightlies --keep 3 --force
|
||||
|
|
@ -94,15 +94,15 @@ linux-rel-wpt:
|
|||
- ./mach clean-nightlies --keep 3 --force
|
||||
- ./mach build --release --with-debug-assertions
|
||||
- ./mach test-wpt-failure
|
||||
- ./mach test-wpt --release --processes 24 --log-raw test-wpt.log --log-errorsummary wpt-errorsummary.log --always-succeed
|
||||
- ./mach test-wpt --release --processes 24 --total-chunks 2 --this-chunk 1 --log-raw test-wpt.log --log-errorsummary wpt-errorsummary.log --always-succeed
|
||||
- ./mach filter-intermittents wpt-errorsummary.log --log-intermittents intermittents.log --log-filteredsummary filtered-wpt-errorsummary.log --use-tracker
|
||||
- ./mach test-wpt --release --binary-arg=--multiprocess --processes 24 --log-raw test-wpt-mp.log --log-errorsummary wpt-mp-errorsummary.log eventsource
|
||||
|
||||
linux-rel-css:
|
||||
- ./mach clean-nightlies --keep 3 --force
|
||||
- ./mach build --release --with-debug-assertions
|
||||
- ./mach test-css --release --processes 16 --log-raw test-css.log --log-errorsummary css-errorsummary.log --always-succeed
|
||||
- ./mach filter-intermittents css-errorsummary.log --log-intermittents intermittents.log --log-filteredsummary filtered-css-errorsummary.log --use-tracker
|
||||
- ./mach test-wpt --release --processes 24 --total-chunks 2 --this-chunk 2 --log-raw test-wpt.log --log-errorsummary wpt-errorsummary.log --always-succeed
|
||||
- ./mach filter-intermittents wpt-errorsummary.log --log-intermittents intermittents.log --log-filteredsummary filtered-wpt-errorsummary.log --use-tracker
|
||||
- ./mach build-geckolib --release
|
||||
- ./mach test-stylo --release
|
||||
- bash ./etc/ci/lockfile_changed.sh
|
||||
|
|
|
|||
|
|
@ -53,9 +53,6 @@ TEST_SUITES = OrderedDict([
|
|||
"paths": [path.abspath(WEB_PLATFORM_TESTS_PATH),
|
||||
path.abspath(SERVO_TESTS_PATH)],
|
||||
"include_arg": "include"}),
|
||||
("css", {"kwargs": {"release": False},
|
||||
"paths": [path.abspath(path.join("tests", "wpt", "css-tests"))],
|
||||
"include_arg": "include"}),
|
||||
("unit", {"kwargs": {},
|
||||
"paths": [path.abspath(path.join("tests", "unit"))],
|
||||
"include_arg": "test_name"}),
|
||||
|
|
@ -116,7 +113,6 @@ class MachCommands(CommandBase):
|
|||
suites["tidy"]["kwargs"] = {"all_files": tidy_all, "no_progress": no_progress, "self_test": self_test,
|
||||
"stylo": False}
|
||||
suites["wpt"]["kwargs"] = {"release": release}
|
||||
suites["css"]["kwargs"] = {"release": release}
|
||||
suites["unit"]["kwargs"] = {}
|
||||
suites["compiletest"]["kwargs"] = {"release": release}
|
||||
|
||||
|
|
@ -610,41 +606,6 @@ class MachCommands(CommandBase):
|
|||
def update_jquery(self, release, dev):
|
||||
return self.jquery_test_runner("update", release, dev)
|
||||
|
||||
@Command('test-css',
|
||||
description='Run the web platform CSS tests',
|
||||
category='testing',
|
||||
parser=create_parser_wpt)
|
||||
def test_css(self, **kwargs):
|
||||
self.ensure_bootstrapped()
|
||||
ret = self.run_test_list_or_dispatch(kwargs["test_list"], "css", self._test_css, **kwargs)
|
||||
if kwargs["always_succeed"]:
|
||||
return 0
|
||||
else:
|
||||
return ret
|
||||
|
||||
def _test_css(self, **kwargs):
|
||||
run_file = path.abspath(path.join("tests", "wpt", "run_css.py"))
|
||||
return self.wptrunner(run_file, **kwargs)
|
||||
|
||||
@Command('update-css',
|
||||
description='Update the web platform CSS tests',
|
||||
category='testing',
|
||||
parser=updatecommandline.create_parser())
|
||||
@CommandArgument('--patch', action='store_true', default=False,
|
||||
help='Create an mq patch or git commit containing the changes')
|
||||
def update_css(self, patch, **kwargs):
|
||||
self.ensure_bootstrapped()
|
||||
run_file = path.abspath(path.join("tests", "wpt", "update_css.py"))
|
||||
kwargs["no_patch"] = not patch
|
||||
|
||||
if kwargs["no_patch"] and kwargs["sync"]:
|
||||
print("Are you sure you don't want a patch?")
|
||||
return 1
|
||||
|
||||
run_globals = {"__file__": run_file}
|
||||
execfile(run_file, run_globals)
|
||||
return run_globals["update_tests"](**kwargs)
|
||||
|
||||
@Command('compare_dromaeo',
|
||||
description='Compare outputs of two runs of ./mach test-dromaeo command',
|
||||
category='testing')
|
||||
|
|
|
|||
|
|
@ -316,7 +316,7 @@ def check_flake8(file_name, contents):
|
|||
|
||||
def check_lock(file_name, contents):
|
||||
def find_reverse_dependencies(name, content):
|
||||
for package in itertools.chain([content["root"]], content["package"]):
|
||||
for package in itertools.chain([content.get("root", [])], content["package"]):
|
||||
for dependency in package.get("dependencies", []):
|
||||
if dependency.startswith("{} ".format(name)):
|
||||
yield package["name"], dependency
|
||||
|
|
|
|||
|
|
@ -51,7 +51,6 @@ files = [
|
|||
"./components/style/gecko/generated/atom_macro.rs",
|
||||
"./resources/hsts_preload.json",
|
||||
"./tests/wpt/metadata/MANIFEST.json",
|
||||
"./tests/wpt/metadata-css/MANIFEST.json",
|
||||
"./components/script/dom/webidls/ForceTouchEvent.webidl",
|
||||
"./support/android/openssl.sh",
|
||||
# Ignore those files since the issues reported are on purpose
|
||||
|
|
@ -65,14 +64,12 @@ files = [
|
|||
directories = [
|
||||
# Upstream
|
||||
"./support/android/apk",
|
||||
"./tests/wpt/css-tests",
|
||||
"./tests/wpt/harness",
|
||||
"./tests/wpt/update",
|
||||
"./tests/wpt/web-platform-tests",
|
||||
"./tests/wpt/mozilla/tests/mozilla/referrer-policy",
|
||||
"./tests/wpt/mozilla/tests/webgl",
|
||||
"./tests/wpt/sync",
|
||||
"./tests/wpt/sync_css",
|
||||
"./python/tidy/servo_tidy_tests",
|
||||
"./components/script/dom/bindings/codegen/parser",
|
||||
"./components/script/dom/bindings/codegen/ply",
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
This folder contains the web platform tests, CSS WG tests, and the
|
||||
This folder contains the web platform tests and the
|
||||
code required to integrate them with Servo.
|
||||
To learn how to write tests, go [here](http://web-platform-tests.org/writing-tests/index.html).
|
||||
|
||||
|
|
@ -9,15 +9,10 @@ In particular, this folder contains:
|
|||
|
||||
* `config.ini`: some configuration for the web-platform-tests.
|
||||
* `include.ini`: the subset of web-platform-tests we currently run.
|
||||
* `config_css.ini`: some configuration for the CSSWG tests.
|
||||
* `include_css.ini`: the subset of the CSSWG tests we currently run.
|
||||
* `run_wpt.py`: glue code to run the web-platform-tests in Servo.
|
||||
* `run_css.py`: glue code to run the CSSWG tests in Servo.
|
||||
* `run.py`: common code used by `run_wpt.py` and `run_css.py`.
|
||||
* `run.py`: common code used by `run_wpt.py`.
|
||||
* `web-platform-tests`: copy of the web-platform-tests.
|
||||
* `metadata`: expected failures for the web-platform-tests we run.
|
||||
* `css-tests`: copy of the built CSSWG tests.
|
||||
* `metadata-css`: expected failures for the CSSWG tests we run.
|
||||
* `mozilla`: web-platform-tests that cannot be upstreamed.
|
||||
|
||||
Running the tests
|
||||
|
|
@ -28,8 +23,6 @@ test-wpt` in the root directory. This will run the subset of
|
|||
JavaScript tests defined in `include.ini` and log the output to
|
||||
stdout.
|
||||
|
||||
Similarly the CSSWG tests can be run using `./mach test-css`.
|
||||
|
||||
A subset of tests may be run by providing positional arguments to the
|
||||
mach command, either as filesystem paths or as test urls e.g.
|
||||
|
||||
|
|
@ -56,10 +49,9 @@ test with `mach test-wpt --release`
|
|||
Running the tests without mach
|
||||
------------------------------
|
||||
|
||||
When avoiding `mach` for some reason, one can run either `run_wpt.py`
|
||||
ir `run_css.py` directly. However, this requires that all the
|
||||
dependencies for `wptrunner` are avaliable in the current python
|
||||
environment.
|
||||
When avoiding `mach` for some reason, one can run `run_wpt.py`
|
||||
directly. However, this requires that all the dependencies for
|
||||
`wptrunner` are avaliable in the current python environment.
|
||||
|
||||
Running the tests manually
|
||||
--------------------------
|
||||
|
|
@ -135,9 +127,6 @@ log is saved, run from the root directory:
|
|||
|
||||
./mach update-wpt /tmp/servo.log
|
||||
|
||||
For CSSWG tests a similar prcedure works, with `./mach test-css` and
|
||||
`./mach update-css`.
|
||||
|
||||
Writing new tests
|
||||
=================
|
||||
|
||||
|
|
@ -167,11 +156,6 @@ web-platform-tests may be edited in-place and the changes committed to
|
|||
the servo tree. These changes will be upstreamed when the tests are
|
||||
next synced.
|
||||
|
||||
For CSS tests this kind of in-place update is not possible because the
|
||||
tests have a build step before they are pulled into the servo
|
||||
repository. Therefore corrections must be submitted directly to the
|
||||
source repository.
|
||||
|
||||
Updating the upstream tests
|
||||
===========================
|
||||
|
||||
|
|
@ -183,8 +167,7 @@ commands. e.g. to update the web-platform-tests:
|
|||
./mach update-wpt update.log
|
||||
|
||||
This should create two commits in your servo repository with the
|
||||
updated tests and updated metadata. The same process works for the
|
||||
CSSWG tests, using the `update-css` and `test-css` mach commands.
|
||||
updated tests and updated metadata.
|
||||
|
||||
Servo-specific tests
|
||||
====================
|
||||
|
|
@ -200,7 +183,7 @@ Analyzing reftest results
|
|||
Reftest results can be analyzed from a raw log file. To generate this run
|
||||
with the `--log-raw` option e.g.
|
||||
|
||||
./mach test-css --log-raw css.log
|
||||
./mach test-wpt --log-raw wpt.log
|
||||
|
||||
This file can then be fed into the
|
||||
[reftest analyzer](http://hoppipolla.co.uk/410/reftest-analyser-structured.xhtml)
|
||||
|
|
|
|||
|
|
@ -1,17 +0,0 @@
|
|||
[products]
|
||||
servo =
|
||||
servodriver =
|
||||
|
||||
[web-platform-tests]
|
||||
name = CSS tests
|
||||
remote_url = https://github.com/jgraham/css-test-built
|
||||
branch = master
|
||||
sync_path = sync_css
|
||||
|
||||
[paths]
|
||||
run-info = .
|
||||
|
||||
[manifest:upstream]
|
||||
tests = css-tests
|
||||
metadata = metadata-css
|
||||
url-base = /
|
||||
6
tests/wpt/css-tests/.gitmodules
vendored
6
tests/wpt/css-tests/.gitmodules
vendored
|
|
@ -1,6 +0,0 @@
|
|||
[submodule "tools"]
|
||||
path = tools
|
||||
url = https://github.com/w3c/wpt-tools.git
|
||||
[submodule "resources"]
|
||||
path = resources
|
||||
url = https://github.com/w3c/testharness.js.git
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
W3C 3-clause BSD License
|
||||
|
||||
Redistribution and use in source and binary forms, with or without
|
||||
modification, are permitted provided that the following conditions are
|
||||
met:
|
||||
|
||||
* Redistributions of works must retain the original copyright notice, this
|
||||
list of conditions and the following disclaimer.
|
||||
|
||||
* Redistributions in binary form must reproduce the original copyright
|
||||
notice, this list of conditions and the following disclaimer in the
|
||||
documentation and/or other materials provided with the distribution.
|
||||
|
||||
* Neither the name of the W3C nor the names of its contributors may be
|
||||
used to endorse or promote products derived from this work without
|
||||
specific prior written permission.
|
||||
|
||||
|
||||
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS
|
||||
IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
|
||||
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
|
||||
ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
|
||||
LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
|
||||
CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
|
||||
SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
|
||||
INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
|
||||
CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
|
||||
ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
|
||||
POSSIBILITY OF SUCH DAMAGE.
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>mix-blend-mode with isolated groups API Test: Blending in a group with filter</title>
|
||||
<link href="mailto:windtale@163.com" rel="author" title="windtale">
|
||||
<link href="http://www.w3.org/TR/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="svg" name="flags">
|
||||
<meta content="Blending in a group with filter" name="assert">
|
||||
<style type="text/css">
|
||||
#redSquare {
|
||||
mix-blend-mode: lighten;
|
||||
}
|
||||
#svgMain {
|
||||
top: 100px;
|
||||
left: 100px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: blue;
|
||||
}
|
||||
#group{
|
||||
filter: alpha(opacity=50,finishopacity=50,style=2);
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<svg id="svgMain">
|
||||
<g id="group">
|
||||
<rect width="100" fill="red" id="redSquare" height="100"></rect>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>mix-blend-mode with isolated groups API Test: Blending in a group with opacity</title>
|
||||
<link href="mailto:windtale@163.com" rel="author" title="windtale">
|
||||
<link href="http://www.w3.org/TR/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="svg" name="flags">
|
||||
<meta content="Blending in a group with opacity" name="assert">
|
||||
<style type="text/css">
|
||||
#greenSquare {
|
||||
mix-blend-mode: darken;
|
||||
}
|
||||
#redSquare {
|
||||
mix-blend-mode: lighten;
|
||||
}
|
||||
#svgMain {
|
||||
top: 100px;
|
||||
left: 100px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<svg id="svgMain">
|
||||
<g opacity="0.59">
|
||||
<rect width="100" fill="red" id="redSquare" height="100"></rect>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>mix-blend-mode with simple SVG graphical elements API Test: Text with SVG background</title>
|
||||
<link href="mailto:windtale@163.com" rel="author" title="windtale">
|
||||
<link href="http://www.w3.org/TR/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="svg" name="flags">
|
||||
<meta content="Text with SVG background" name="assert">
|
||||
<style type="text/css">
|
||||
#lblTxt {
|
||||
mix-blend-mode: darken;
|
||||
}
|
||||
#svgMain {
|
||||
top: 100px;
|
||||
left: 100px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<svg id="svgMain">
|
||||
<text y="55" id="lblTxt">Text with SVG background</text>
|
||||
</svg>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: blending between multiple backgrounds (gradient and image) using background-blend-mode</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan">
|
||||
<link href="mailto:cabanier@adobe.com" rel="reviewer" title="Rik Cabanier">
|
||||
<link href="https://drafts.fxtf.org/compositing-1/#background-blend-mode" rel="help">
|
||||
<meta content="" name="flags">
|
||||
<meta content="Test checks that setting background-blend-mode property for an element with two background layers (a gradient and a png image) results in blending between the two layers." name="assert">
|
||||
<link href="reference/background-blend-mode-gradient-image-ref.htm" rel="match">
|
||||
<style>
|
||||
div {
|
||||
margin: 5px;
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
background: url('support/red.png') no-repeat 0 0 /100% 100%, linear-gradient(to right, lime 50%, blue 51%);
|
||||
/*lime: rgb(0,255,0);
|
||||
blue: rgb(0,0,255);*/
|
||||
display: block;
|
||||
float: left;
|
||||
background-blend-mode: multiply, normal;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is no red square on the screen. <br>
|
||||
You should see a black square.</p>
|
||||
<div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Compositing and Blending: isolation applied to a group containing blending</title>
|
||||
<link href="mailto:cabanier@adobe.com" rel="author" title="cabanier">
|
||||
<link href="http://www.w3.org/TR/compositing-1/#isolation" rel="help">
|
||||
<meta content="Isolation on a group with blending" name="assert">
|
||||
<style>
|
||||
.a {
|
||||
background-color: rgb(0,255,0);
|
||||
}
|
||||
#b {
|
||||
width: 200px;
|
||||
height: 210px;
|
||||
}
|
||||
.c {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
#d {
|
||||
isolation: isolate;
|
||||
}
|
||||
</style>
|
||||
</head><body><p>Test passes if you see a solid green rectangle</p>
|
||||
<div class="a" id="b">
|
||||
<div id="d">
|
||||
<div class="a c"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Introduction - Compositing and Blending Level 1 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>Compositing and Blending Level 1 CR Test Suite</h1>
|
||||
<h2>Introduction (0 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s1">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#introduction">1 Introduction</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,201 +0,0 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Blending - Compositing and Blending Level 1 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>Compositing and Blending Level 1 CR Test Suite</h1>
|
||||
<h2>Blending (0 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s10">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s10">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#blending">10 Blending</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s10.1">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#blendingseparable">10.1 Separable blend modes</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.1.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s10.1.1">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#blendingnormal">10.1.1 normal blend mode</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.1.1.#valdef-blend-mode-normal">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.1.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s10.1.2">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#blendingmultiply">10.1.2 multiply blend mode</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.1.2.#valdef-blend-mode-multiply">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.1.3">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s10.1.3">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#blendingscreen">10.1.3 screen blend mode</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.1.3.#valdef-blend-mode-screen">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.1.4">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s10.1.4">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#blendingoverlay">10.1.4 overlay blend mode</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.1.4.#valdef-blend-mode-overlay">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.1.5">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s10.1.5">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#blendingdarken">10.1.5 darken blend mode</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.1.5.#valdef-blend-mode-darken">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.1.6">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s10.1.6">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#blendinglighten">10.1.6 lighten blend mode</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.1.6.#valdef-blend-mode-lighten">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.1.7">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s10.1.7">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#blendingcolordodge">10.1.7 color-dodge blend mode</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.1.7.#valdef-blend-mode-color-dodge">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.1.8">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s10.1.8">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#blendingcolorburn">10.1.8 color-burn blend mode</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.1.8.#valdef-blend-mode-color-burn">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.1.9">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s10.1.9">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#blendinghardlight">10.1.9 hard-light blend mode</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.1.9.#valdef-blend-mode-hard-light">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.1.10">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s10.1.10">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#blendingsoftlight">10.1.10 soft-light blend mode</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.1.10.#valdef-blend-mode-soft-light">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.1.11">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s10.1.11">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#blendingdifference">10.1.11 difference blend mode</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.1.11.#valdef-blend-mode-difference">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.1.12">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s10.1.12">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#blendingexclusion">10.1.12 exclusion blend mode</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.1.12.#valdef-blend-mode-exclusion">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s10.2">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#blendingnonseparable">10.2 Non-separable blend modes</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.2.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s10.2.1">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#blendinghue">10.2.1 hue blend mode</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.2.1.#valdef-blend-mode-hue">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.2.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s10.2.2">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#blendingsaturation">10.2.2 saturation blend mode</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.2.2.#valdef-blend-mode-saturation">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.2.3">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s10.2.3">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#blendingcolor">10.2.3 color blend mode</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.2.3.#valdef-blend-mode-color">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.2.4">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s10.2.4">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#blendingluminosity">10.2.4 luminosity blend mode</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.2.4.#valdef-blend-mode-luminosity">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.3">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s10.3">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#isolationblending">10.3 Effect of group isolation on blending</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Security issues with compositing and blending - Compositing and Blending Level 1 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>Compositing and Blending Level 1 CR Test Suite</h1>
|
||||
<h2>Security issues with compositing and blending (0 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s11">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s11">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#security">11 Security issues with compositing and blending</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,114 +0,0 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Changes - Compositing and Blending Level 1 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>Compositing and Blending Level 1 CR Test Suite</h1>
|
||||
<h2>Changes (0 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s12">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s12">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#changes">12 Changes</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#abstract">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#conformance">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#contents">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#index">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#property-index">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#references">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#status">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#subtitle">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#title">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sconformance.#conformance-classes">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sconformance.#conventions">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sconformance.#cr-exit-criteria">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sconformance.#experimental">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sconformance.#partial">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sconformance.#testing">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sinformative.#biblio-porterduff">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="snormative.#biblio-2dcontext2">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="snormative.#biblio-css21">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="snormative.#biblio-css3bg">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="snormative.#biblio-css3color">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="snormative.#biblio-rfc2119">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="snormative.#biblio-svg11">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sreferences.#informative">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sreferences.#normative">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sstatus.#w3c_process_revision">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Reading This Document - Compositing and Blending Level 1 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>Compositing and Blending Level 1 CR Test Suite</h1>
|
||||
<h2>Reading This Document (0 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s2">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#reading-this-document">2 Reading This Document</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s2.1">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#module-interactions">2.1 Module interactions</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s2.2">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#values">2.2 Values</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,685 +0,0 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Specifying Blending in CSS - Compositing and Blending Level 1 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>Compositing and Blending Level 1 CR Test Suite</h1>
|
||||
<h2>Specifying Blending in CSS (53 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s3">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s3">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#csscompositingandblending">3 Specifying Blending in CSS</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s3.1">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#compositingandblendingorder">3.1 Order of graphical operations</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s3.2">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#csscompositingrules_CSS">3.2 Behavior specific to HTML</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.3">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s3.3">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#csscompositingrules_SVG">3.3 Behavior specific to SVG</a></th></tr>
|
||||
<!-- 2 tests -->
|
||||
<tr id="mix-blend-mode-in-svg-image-3.3" class="svg">
|
||||
<td>
|
||||
<a href="mix-blend-mode-in-svg-image.htm">mix-blend-mode-in-svg-image</a></td>
|
||||
<td><a href="reference/mix-blend-mode-svg-rectangle-ref.htm">=</a> </td>
|
||||
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
||||
<td>CSS Compositing and Blending: mix-blend-mode in an SVG linked as an image
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-svg-rectangle-3.3" class="primary svg">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-svg-rectangle.htm">mix-blend-mode-svg-rectangle</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-svg-rectangle-ref.htm">=</a> </td>
|
||||
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
||||
<td>mix-blend-mode for a simple SVG element - rectangle
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s3.4">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s3.4">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#csskeywords">3.4 CSS Properties</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.4.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s3.4.1">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#mix-blend-mode">3.4.1 The mix-blend-mode property</a></th></tr>
|
||||
<!-- 51 tests -->
|
||||
<tr id="blending_in_a_group_with_filter-3.4.1" class="svg">
|
||||
<td>
|
||||
<a href="Blending_in_a_group_with_filter.htm">blending_in_a_group_with_filter</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
||||
<td>Blending in a group with filter
|
||||
<ul class="assert">
|
||||
<li>Blending in a group with filter</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="blending_in_a_group_with_opacity-3.4.1" class="svg">
|
||||
<td>
|
||||
<a href="Blending_in_a_group_with_opacity.htm">blending_in_a_group_with_opacity</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
||||
<td>Blending in a group with opacity
|
||||
<ul class="assert">
|
||||
<li>Blending in a group with opacity</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="compositing_simple_div-3.4.1" class="">
|
||||
<td>
|
||||
<a href="compositing_simple_div.htm">compositing_simple_div</a></td>
|
||||
<td><a href="reference/compositing_simple_div-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>[simple<div>] blending
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="line-with-svg-background-3.4.1" class="svg">
|
||||
<td>
|
||||
<a href="line-with-svg-background.htm">line-with-svg-background</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
||||
<td>CSS mix-blend-mode API Test
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-animation-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-animation.htm">mix-blend-mode-animation</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-animation-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>Blended element with animation
|
||||
<ul class="assert">
|
||||
<li>Test checks that an element with mix-blend-mode and animation blends with the parent element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-blended-element-interposed-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-blended-element-interposed.htm">mix-blend-mode-blended-element-interposed</a></strong></td>
|
||||
<td><a href="reference/green-square.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Reftest Reference
|
||||
<ul class="assert">
|
||||
<li>Test checks that an element with mix-blend-mode having a child blends with the parent element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-blended-element-overflow-hidden-and-border-radius-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-blended-element-overflow-hidden-and-border-radius.htm">mix-blend-mode-blended-element-overflow-hidden-and-border-radius</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-blended-element-overflow-hidden-and-border-radius-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>blending between an element and its child having overflow:hidden and border-radius
|
||||
<ul class="assert">
|
||||
<li>Test checks that an element having mix-blend-mode, overflow:hidden and border-radius blends correctly with its parent element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-blended-element-overflow-scroll-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-blended-element-overflow-scroll.htm">mix-blend-mode-blended-element-overflow-scroll</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-blended-element-overflow-scroll-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>blending between an element and its child having overflow:scroll
|
||||
<ul class="assert">
|
||||
<li>Test checks that an element with mix-blend-mode and overflow:scroll blends with its parent element</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-blended-element-with-transparent-pixels-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-blended-element-with-transparent-pixels.htm">mix-blend-mode-blended-element-with-transparent-pixels</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-blended-element-with-transparent-pixels-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>blending between an element with transparent pixels and a child element
|
||||
<ul class="assert">
|
||||
<li>Test checks that blending is performed with a parent that creates a stacking context, but not with any of its underlying content. The element, including its children, must blend with the parent as a whole.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-blended-with-3d-transform-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-blended-with-3D-transform.htm">mix-blend-mode-blended-with-3d-transform</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-blended-with-3D-transform-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>mix-blend-mode between an element and its child with 3D transform
|
||||
<ul class="assert">
|
||||
<li>Test checks that the element with mix-blend-mode and 3D transform blends correctly with its parent</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-blended-with-transform-and-perspective-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-blended-with-transform-and-perspective.htm">mix-blend-mode-blended-with-transform-and-perspective</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-blended-with-transform-and-perspective-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>blending between an element and its child having mix-blend-mode and perspective
|
||||
<ul class="assert">
|
||||
<li>Test checks that an element having mix-blend-mode and perspective blends correctly with its parent</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-blending-with-sibling-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-blending-with-sibling.htm">mix-blend-mode-blending-with-sibling</a></strong></td>
|
||||
<td><a href="reference/green-square.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>mix-blend-mode between an element and its sibling
|
||||
<ul class="assert">
|
||||
<li>Test checks that an element with mix-blend-mode blends with a sibling element</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-border-image-3.4.1" class="primary svg">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-border-image.htm">mix-blend-mode-border-image</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-border-image-ref.htm">=</a> </td>
|
||||
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
||||
<td>Blended element with border image
|
||||
<ul class="assert">
|
||||
<li>Test checks if mix-blend-mode is applied for an element with border-image.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-both-parent-and-blended-with-3d-transform-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-both-parent-and-blended-with-3D-transform.htm">mix-blend-mode-both-parent-and-blended-with-3d-transform</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-both-parent-and-blended-with-3D-transform-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>mix-blend-mode between an element and its child (both with 3D transform)
|
||||
<ul class="assert">
|
||||
<li>Test checks that the element with mix-blend-mode blends with the parent element (both with 3D transform)</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-canvas-parent-3.4.1" class="primary dom">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-canvas-parent.htm">mix-blend-mode-canvas-parent</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-canvas-parent-ref.htm">=</a> </td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
||||
<td>Canvas with mix-blend-mode blends with the parent element.
|
||||
<ul class="assert">
|
||||
<li>Test checks that a canvas element having mix-blend-mode applied blends with the content of the parent element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-canvas-sibling-3.4.1" class="primary dom">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-canvas-sibling.htm">mix-blend-mode-canvas-sibling</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-canvas-sibling-ref.htm">=</a> </td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
||||
<td>Canvas with mix-blend-mode blends with sibling element
|
||||
<ul class="assert">
|
||||
<li>Test checks that a canvas element having mix-blend-mode applied blends with a sibling element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-creates-stacking-context-3.4.1" class="primary dom script">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-creates-stacking-context.htm">mix-blend-mode-creates-stacking-context</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>an element with mix-blend-mode other than normal creates a stacking context
|
||||
<ul class="assert">
|
||||
<li>Test checks that applying a blendmode other than normal to the element must establish a new stacking context.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-filter-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-filter.htm">mix-blend-mode-filter</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-filter-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>Blended element with filter.
|
||||
<ul class="assert">
|
||||
<li>Test checks that an element having a filter effect and mix-blend-mode blends with its parent element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-iframe-parent-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-iframe-parent.htm">mix-blend-mode-iframe-parent</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-iframe-parent-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>an iframe element with mix-blend-mode should blend with its parent element.
|
||||
<ul class="assert">
|
||||
<li>Test checks that an iframe element blends with its parent element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-iframe-sibling-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-iframe-sibling.htm">mix-blend-mode-iframe-sibling</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-iframe-sibling-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>an iframe element with mix-blend-mode should blend with a sibling element.
|
||||
<ul class="assert">
|
||||
<li>Test checks that an iframe element blends with a sibling element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-image-3.4.1" class="primary image">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-image.htm">mix-blend-mode-image</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-image-notref.htm">≠</a> </td>
|
||||
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>Image element with mix-blend-mode.
|
||||
<ul class="assert">
|
||||
<li>Test checks that mix-blend-mode is applied to an img element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-in-svg-image-3.4.1" class="svg">
|
||||
<td>
|
||||
<a href="mix-blend-mode-in-svg-image.htm">mix-blend-mode-in-svg-image</a></td>
|
||||
<td><a href="reference/mix-blend-mode-svg-rectangle-ref.htm">=</a> </td>
|
||||
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
||||
<td>CSS Compositing and Blending: mix-blend-mode in an SVG linked as an image
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-intermediate-element-overflow-hidden-and-border-radius-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-intermediate-element-overflow-hidden-and-border-radius.htm">mix-blend-mode-intermediate-element-overflow-hidden-and-border-radius</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-intermediate-element-overflow-hidden-and-border-radius-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>mix-blend-mode between an element and its child having overflow:hidden and border-radius, when the blending element overlaps a sibling element
|
||||
<ul class="assert">
|
||||
<li>Test checks that the element with mix-blend-mode, overflow:hidden and border-radius blends correctly with its parent, as well as with the sibling element where they overlap.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-mask-3.4.1" class="primary svg">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-mask.htm">mix-blend-mode-mask</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-mask-ref.htm">=</a> </td>
|
||||
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
||||
<td>Blended element with masking.
|
||||
<ul class="assert">
|
||||
<li>Test checks that an element having mask and mix-blend-mode blends with its parent element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-overflowing-child-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-overflowing-child.htm">mix-blend-mode-overflowing-child</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-overflowing-child-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>blended element overflows parent
|
||||
<ul class="assert">
|
||||
<li>Test checks that an overflowing element with mix-blend-mode blends with the parent element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-overflowing-child-of-blended-element-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-overflowing-child-of-blended-element.htm">mix-blend-mode-overflowing-child-of-blended-element</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-blended-element-with-transparent-pixels-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>blend an element having an overflowing child.
|
||||
<ul class="assert">
|
||||
<li>Test checks that a group consisting of an element with mix-blend-mode and an overflowing child blends as a whole with the underlying stacking context.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-paragraph-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-paragraph.htm">mix-blend-mode-paragraph</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-paragraph-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>Paragraph element with mix-blend-mode.
|
||||
<ul class="assert">
|
||||
<li>Test checks that test a paragraph element blends with the parent element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-paragraph-background-image-3.4.1" class="primary svg">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-paragraph-background-image.htm">mix-blend-mode-paragraph-background-image</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-paragraph-background-image-ref.htm">=</a> </td>
|
||||
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
||||
<td>Paragraph element with mix-blend-mode over parent with background image.
|
||||
<ul class="assert">
|
||||
<li>Test checks that test a paragraph element blends with the parent element having background image.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-parent-element-overflow-hidden-and-border-radius-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-parent-element-overflow-hidden-and-border-radius.htm">mix-blend-mode-parent-element-overflow-hidden-and-border-radius</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-parent-element-overflow-hidden-and-border-radius-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>blending between an element having overflow:hidden and border-radius and its child
|
||||
<ul class="assert">
|
||||
<li>Test checks that an element having mix-blend-mode blends with the parent element having overflow:hidden and border-radius</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-parent-element-overflow-scroll-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-parent-element-overflow-scroll.htm">mix-blend-mode-parent-element-overflow-scroll</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-parent-element-overflow-scroll-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>blending between an element with overflow:scroll and its child
|
||||
<ul class="assert">
|
||||
<li>Test checks that an element with mix-blend-mode blends its parent having overflow:scroll</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-parent-element-overflow-scroll-blended-position-fixed-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-parent-element-overflow-scroll-blended-position-fixed.htm">mix-blend-mode-parent-element-overflow-scroll-blended-position-fixed</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-parent-element-overflow-scroll-blended-position-fixed-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>blending between an element having overflow:scroll and its child having position: fixed
|
||||
<ul class="assert">
|
||||
<li>Test checks that an element with mix-blend-mode blends with the parent element with overflow:scroll</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-parent-with-3d-transform-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-parent-with-3D-transform.htm">mix-blend-mode-parent-with-3d-transform</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-parent-with-3D-transform-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>mix-blend-mode between an element with 3D transform and its child
|
||||
<ul class="assert">
|
||||
<li>Test checks that an element with mix-blend-mode blends with its parent having 3D transform</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-parent-with-3d-transform-and-transition-3.4.1" class="primary dom">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-parent-with-3D-transform-and-transition.htm">mix-blend-mode-parent-with-3d-transform-and-transition</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
||||
<td>blending between an element having 3D transitions and its child
|
||||
<ul class="assert">
|
||||
<li>Test checks that an element having mix-blend-mode blends with its parent element having 3D transform and transition</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-parent-with-border-radius-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-parent-with-border-radius.htm">mix-blend-mode-parent-with-border-radius</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-parent-with-border-radius-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>blending with parent having border radius
|
||||
<ul class="assert">
|
||||
<li>Test checks that an element with mix-blend-mode blends with the parent element having border-radius.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-parent-with-text-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-parent-with-text.htm">mix-blend-mode-parent-with-text</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-parent-with-text-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>check that the stacking context created by the parent element isolates blending.
|
||||
<ul class="assert">
|
||||
<li>Test checks that an element with mix-blend-mode only blends with the contents of a parent that creates a stacking context.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-parsing-3.4.1" class="primary dom script">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-parsing.htm">mix-blend-mode-parsing</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>parsing mix-blend-mode property
|
||||
<ul class="assert">
|
||||
<li>Test checks that the value specified for mix-blend-mode property is correctly parsed</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-script-3.4.1" class="primary dom">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-script.htm">mix-blend-mode-script</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-script-ref.htm">=</a> </td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
||||
<td>Set mix-blend-mode from script.
|
||||
<ul class="assert">
|
||||
<li>Test checks that mix-blend-mode is applied when set from script.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-sibling-with-3d-transform-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-sibling-with-3D-transform.htm">mix-blend-mode-sibling-with-3d-transform</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-sibling-with-3D-transform-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>blending between an element and its sibling element having 3D transform
|
||||
<ul class="assert">
|
||||
<li>Test checks that an element with mix-blend-mode blends with both parent element and with sibling element having 3D transform</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-sibling-with-3d-transform-and-transition-3.4.1" class="primary dom">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-sibling-with-3D-transform-and-transition.htm">mix-blend-mode-sibling-with-3d-transform-and-transition</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
||||
<td>blending between an element and its sibling having 3D transform and transition
|
||||
<ul class="assert">
|
||||
<li>Test checks that an element having mix-blend-mode blends with an overlapping sibling element having 3D transform and transition</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-simple-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-simple.htm">mix-blend-mode-simple</a></strong></td>
|
||||
<td><a href="reference/green-square.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>An element with mix-blend-mode blends with its parent element.
|
||||
<ul class="assert">
|
||||
<li>Test checks that an element with mix-blend-mode blends with its parent element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-stacking-context-001-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-stacking-context-001.htm">mix-blend-mode-stacking-context-001</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-stacking-context-001-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>mix-blend-mode between an element and its child
|
||||
<ul class="assert">
|
||||
<li>Test checks that the element with mix-blend-mode and opacity blends with the parent element</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-stacking-context-creates-isolation-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-stacking-context-creates-isolation.htm">mix-blend-mode-stacking-context-creates-isolation</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-stacking-context-creates-isolation-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>stacking context creates isolated group
|
||||
<ul class="assert">
|
||||
<li>Test checks that properties that cause the creation of stacking context cause a group to be isolated</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-svg-3.4.1" class="primary svg">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-svg.htm">mix-blend-mode-svg</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-svg-ref.htm">=</a> </td>
|
||||
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
||||
<td>SVG element is blended.
|
||||
<ul class="assert">
|
||||
<li>Test checks that an SVG element blends with the parent container.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-svg-rectangle-3.4.1" class="svg">
|
||||
<td>
|
||||
<a href="mix-blend-mode-svg-rectangle.htm">mix-blend-mode-svg-rectangle</a></td>
|
||||
<td><a href="reference/mix-blend-mode-svg-rectangle-ref.htm">=</a> </td>
|
||||
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
||||
<td>mix-blend-mode for a simple SVG element - rectangle
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-transition-3.4.1" class="primary dom">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-transition.htm">mix-blend-mode-transition</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-transition-ref.htm">=</a> </td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
||||
<td>Blended element with transition
|
||||
<ul class="assert">
|
||||
<li>Test checks that an element having a transition applied on opacity blends with the parent element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-video-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-video.htm">mix-blend-mode-video</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-video-notref.htm">≠</a> </td>
|
||||
<td></td>
|
||||
<td>Video element with mix-blend-mode.
|
||||
<ul class="assert">
|
||||
<li>Test checks that mix-blend-mode is applied to a video element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-video-sibling-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-video-sibling.htm">mix-blend-mode-video-sibling</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-video-sibling-notref.htm">≠</a> </td>
|
||||
<td></td>
|
||||
<td>mix-blend-mode blending between a video element and an overlapping sibling
|
||||
<ul class="assert">
|
||||
<li>Test checks that a video element blends with an overlapping sibling element with some text inside</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-with-transform-and-preserve-3d-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-with-transform-and-preserve-3D.htm">mix-blend-mode-with-transform-and-preserve-3d</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-with-transform-and-preserve-3D-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>mix-blend-mode between an element and its child having 3D transform and preserve 3D
|
||||
<ul class="assert">
|
||||
<li>Test checks that mix-blend-mode overrides the behavior of transform-style:preserve-3d</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="text-with-svg-background-3.4.1" class="svg">
|
||||
<td>
|
||||
<a href="text-with-svg-background.htm">text-with-svg-background</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
||||
<td>CSS mix-blend-mode API Test
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="text_with_svg_background-3.4.1" class="svg">
|
||||
<td>
|
||||
<a href="Text_with_SVG_background.htm">text_with_svg_background</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
||||
<td>Text with SVG background
|
||||
<ul class="assert">
|
||||
<li>Text with SVG background</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="will-change-stacking-context-mix-blend-mode-1-3.4.1" class="">
|
||||
<td>
|
||||
<a href="will-change-stacking-context-mix-blend-mode-1.htm">will-change-stacking-context-mix-blend-mode-1</a></td>
|
||||
<td><a href="reference/green-square-100-by-100-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS will-change: 'will-change: mix-blend-mode' creates a stacking context
|
||||
<ul class="assert">
|
||||
<li>If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s3.4.1.#ltblendmodegt">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.4.1.#propdef-mix-blend-mode">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.4.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s3.4.2">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#isolation">3.4.2 The isolation property</a></th></tr>
|
||||
<!-- 3 tests -->
|
||||
<tr id="blend-isolation-3.4.2" class="">
|
||||
<td>
|
||||
<a href="blend-isolation.htm">blend-isolation</a></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>CSS Compositing and Blending: isolation applied to a group containing blending
|
||||
<ul class="assert">
|
||||
<li>Isolation on a group with blending</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-in-svg-image-3.4.2" class="primary svg">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-in-svg-image.htm">mix-blend-mode-in-svg-image</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-svg-rectangle-ref.htm">=</a> </td>
|
||||
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
||||
<td>CSS Compositing and Blending: mix-blend-mode in an SVG linked as an image
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="will-change-stacking-context-isolation-1-3.4.2" class="">
|
||||
<td>
|
||||
<a href="will-change-stacking-context-isolation-1.htm">will-change-stacking-context-isolation-1</a></td>
|
||||
<td><a href="reference/green-square-100-by-100-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS will-change: 'will-change: isolation' creates a stacking context
|
||||
<ul class="assert">
|
||||
<li>If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s3.4.2.#img_isolation">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.4.2.#isolated-propid">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.4.2.#propdef-background-blend-mode">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.4.2.#propdef-isolation">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Specifying Compositing and Blending in Canvas 2D - Compositing and Blending Level 1 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>Compositing and Blending Level 1 CR Test Suite</h1>
|
||||
<h2>Specifying Compositing and Blending in Canvas 2D (0 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s4">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s4">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#canvascompositingandblending">4 Specifying Compositing and Blending in Canvas 2D</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.#compositemode">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.#propdef-mix">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Introduction to compositing - Compositing and Blending Level 1 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>Compositing and Blending Level 1 CR Test Suite</h1>
|
||||
<h2>Introduction to compositing (0 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s5">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s5">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#whatiscompositing">5 Introduction to compositing</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s5.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s5.1">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#simplealphacompositing">5.1 Simple alpha compositing</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s5.1.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s5.1.1">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#simplealphacompositingexamples">5.1.1 Examples of simple alpha compositing</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>General Formula for Compositing and Blending - Compositing and Blending Level 1 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>Compositing and Blending Level 1 CR Test Suite</h1>
|
||||
<h2>General Formula for Compositing and Blending (0 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s6">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s6">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#generalformula">6 General Formula for Compositing and Blending</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Backdrop calculation - Compositing and Blending Level 1 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>Compositing and Blending Level 1 CR Test Suite</h1>
|
||||
<h2>Backdrop calculation (0 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s7">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s7">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#backdropCalc">7 Backdrop calculation</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.#backdrop">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s7.1">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#backdropexamples">7.1 Examples of backdrop calculation</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,63 +0,0 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Compositing Groups - Compositing and Blending Level 1 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>Compositing and Blending Level 1 CR Test Suite</h1>
|
||||
<h2>Compositing Groups (0 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s8">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s8">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#groups">8 Compositing Groups</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.#groupbackdrop">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.#initialbackdrop">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s8.1">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#groupinvariance">8.1 Group invariance</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s8.2">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#isolatedgroups">8.2 Isolated Groups</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.3">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s8.3">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#pagebackdrop">8.3 The Page Group</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,129 +0,0 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Advanced compositing features - Compositing and Blending Level 1 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>Compositing and Blending Level 1 CR Test Suite</h1>
|
||||
<h2>Advanced compositing features (0 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s9">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s9">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#advancedcompositing">9 Advanced compositing features</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s9.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s9.1">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators">9.1 The Porter Duff Compositing Operators</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s9.1.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s9.1.1">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_clear">9.1.1 Clear</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s9.1.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s9.1.2">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_src">9.1.2 Copy</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s9.1.3">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s9.1.3">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_dst">9.1.3 Destination</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s9.1.4">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s9.1.4">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_srcover">9.1.4 Source Over</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s9.1.5">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s9.1.5">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_dstover">9.1.5 Destination Over</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s9.1.6">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s9.1.6">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_srcin">9.1.6 Source In</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s9.1.7">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s9.1.7">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_dstin">9.1.7 Destination In</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s9.1.8">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s9.1.8">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_srcout">9.1.8 Source Out</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s9.1.9">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s9.1.9">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_dstout">9.1.9 Destination Out</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s9.1.10">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s9.1.10">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_srcatop">9.1.10 Source Atop</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s9.1.11">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s9.1.11">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_dstatop">9.1.11 Destination Atop</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s9.1.12">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s9.1.12">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_xor">9.1.12 XOR</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s9.1.13">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s9.1.13">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_plus">9.1.13 Lighter</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s9.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s9.2">+</a>
|
||||
<a href="https://www.w3.org/TR/compositing-1/#groupcompositing">9.2 Group compositing behavior with Porter Duff modes</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>[simple<div>] blending</title>
|
||||
|
||||
<link href="mailto:augur521@hotmail.com" rel="author" title="Aili Wang">
|
||||
<link href="http://www.w3.org/TR/compositing-1/#mix-blend-mode" rel="help">
|
||||
<link href="reference/compositing_simple_div-ref.htm" rel="match">
|
||||
|
||||
|
||||
<style>
|
||||
#b{background-color:rgb(255,0,255); mix-blend-mode:difference; width:100px;height:100px
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="b"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS mix-blend-mode API Test</title>
|
||||
<link href="mailto:yangdemo@gmail.com" rel="author" title="dmyang">
|
||||
<link href="mailto:cabanier@adobe.com" rel="reviewer" title="Rik Cabanier"><!-- 11-09-2013 @TestTWF Shenzhen -->
|
||||
<link href="http://www.w3.org/TR/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="svg" name="flags">
|
||||
<style type="text/css">
|
||||
.svg {
|
||||
background-color: #888;
|
||||
width: 500px;
|
||||
display: block;
|
||||
height: 60px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
.svg text {
|
||||
font-size: 25px;
|
||||
line-height: 50px;
|
||||
}
|
||||
.multiply {mix-blend-mode: multiply;}
|
||||
.screen {mix-blend-mode: screen;}
|
||||
.overlay {mix-blend-mode: overlay;}
|
||||
.darken {mix-blend-mode: darken;}
|
||||
.color-dodge {mix-blend-mode: color-dodge;}
|
||||
.color-burn {mix-blend-mode: color-burn;}
|
||||
.hard-light {mix-blend-mode: hard-light;}
|
||||
.soft-light {mix-blend-mode: soft-light;}
|
||||
.difference {mix-blend-mode: difference;}
|
||||
.exclusion {mix-blend-mode: exclusion;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg class="svg">
|
||||
<line x2="300" style="stroke:blue; stroke-width:20;" y2="30" y1="30" x1="10" class="multiply"></line>
|
||||
</svg>
|
||||
<svg class="svg">
|
||||
<line x2="300" style="stroke:blue; stroke-width:20;" y2="30" y1="30" x1="10" class="screen"></line>
|
||||
</svg>
|
||||
<svg class="svg">
|
||||
<line x2="300" style="stroke:blue; stroke-width:20;" y2="30" y1="30" x1="10" class="overlay"></line>
|
||||
</svg>
|
||||
<svg class="svg">
|
||||
<line x2="300" style="stroke:blue; stroke-width:20;" y2="30" y1="30" x1="10" class="darken"></line>
|
||||
</svg>
|
||||
<svg class="svg">
|
||||
<line x2="300" style="stroke:blue; stroke-width:20;" y2="30" y1="30" x1="10" class="lighten"></line>
|
||||
</svg>
|
||||
<svg class="svg">
|
||||
<line x2="300" style="stroke:blue; stroke-width:20;" y2="30" y1="30" x1="10" class="color-dodge"></line>
|
||||
</svg>
|
||||
<svg class="svg">
|
||||
<line x2="300" style="stroke:blue; stroke-width:20;" y2="30" y1="30" x1="10" class="hard-light"></line>
|
||||
</svg>
|
||||
<svg class="svg">
|
||||
<line x2="300" style="stroke:blue; stroke-width:20;" y2="30" y1="30" x1="10" class="soft-light"></line>
|
||||
</svg>
|
||||
<svg class="svg">
|
||||
<line x2="300" style="stroke:blue; stroke-width:20;" y2="30" y1="30" x1="10" class="difference"></line>
|
||||
</svg>
|
||||
<svg class="svg">
|
||||
<line x2="300" style="stroke:blue; stroke-width:20;" y2="30" y1="30" x1="10" class="exclusion"></line>
|
||||
</svg>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Blended element with animation</title>
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="Test checks that an element with mix-blend-mode and animation blends with the parent element." name="assert">
|
||||
<link href="mailto:cabanier@adobe.com" rel="reviewer" title="Rik Cabanier">
|
||||
<link href="mailto:mbudaes@adobe.com" rel="reviewer" title="Mirela Budaes">
|
||||
<link href="reference/mix-blend-mode-animation-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: #FF0;
|
||||
}
|
||||
|
||||
@keyframes changeOpacity
|
||||
{
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0.1; }
|
||||
}
|
||||
|
||||
#blender {
|
||||
background: #F00;
|
||||
mix-blend-mode: difference;
|
||||
animation: changeOpacity 1s;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a fading green box.</p>
|
||||
<div><div id="blender"></div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan">
|
||||
<link href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="Test checks that an element with mix-blend-mode having a child blends with the parent element." name="assert">
|
||||
<meta content="" name="flags">
|
||||
<link href="reference/green-square.htm" rel="match">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.parent {
|
||||
background: #FF0;
|
||||
}
|
||||
.blender {
|
||||
background: #345;
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
.child {
|
||||
background: #F00;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a green square on the screen.</p>
|
||||
<div class="parent">
|
||||
<div class="blender">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: blending between an element and its child having overflow:hidden and border-radius</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:rosca@adobe.com" rel="author" title="Ion Roșca">
|
||||
<link href="mailto:mitica@adobe.com" rel="reviewer" title="Mihai Țică">
|
||||
<link href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="" name="flags">
|
||||
<meta content="Test checks that an element having mix-blend-mode, overflow:hidden and border-radius blends correctly with its parent element." name="assert">
|
||||
<link href="reference/mix-blend-mode-blended-element-overflow-hidden-and-border-radius-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
.parent {
|
||||
background: aqua;/*rgb(0,255,255);*/
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.blended {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
overflow: hidden;
|
||||
border-radius: 2em 2em;
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
.childOfBlended {
|
||||
background: yellow;/*rgb(255,255,0);*/
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if you see a lime rectangle with aqua rounded corners.</p>
|
||||
<div class="parent">
|
||||
<div class="blended">
|
||||
<div class="childOfBlended"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: blending between an element and its child having overflow:scroll</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:rosca@adobe.com" rel="author" title="Ion Roșca">
|
||||
<link href="mailto:mitica@adobe.com" rel="reviewer" title="Mihai Țică">
|
||||
<link href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="" name="flags">
|
||||
<meta content="Test checks that an element with mix-blend-mode and overflow:scroll blends with its parent element" name="assert">
|
||||
<link href="reference/mix-blend-mode-blended-element-overflow-scroll-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
.parent {
|
||||
background: yellow;/*rgb(0,255,255);*/
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
.blended {
|
||||
background: red;/*rgb(255,0,0);*/
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
overflow:scroll;
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
.scrollingContent {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see a lime rectangle.</p>
|
||||
<div class="parent">
|
||||
<div class="blended">
|
||||
<div class="scrollingContent"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: blending between an element with transparent pixels and a child element</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan">
|
||||
<link href="mailto:olaru@adobe.com" rel="reviewer" title="Horia Olaru">
|
||||
<link href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="Test checks that blending is performed with a parent
|
||||
that creates a stacking context, but not with any of its underlying content.
|
||||
The element, including its children, must blend with the parent as a whole." name="assert">
|
||||
<meta content="" name="flags">
|
||||
<link href="reference/mix-blend-mode-blended-element-with-transparent-pixels-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
.parent {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
background: #00F;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 10px;
|
||||
}
|
||||
.blender {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background: transparent;
|
||||
mix-blend-mode: difference;
|
||||
margin: -10px;
|
||||
}
|
||||
.blendedChild {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background: #0FF;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a lime square with aqua borders.<br>
|
||||
If the borders are red, the test fails.</p>
|
||||
<div class="parent">
|
||||
<div class="blender">
|
||||
<div class="blendedChild"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: mix-blend-mode between an element and its child with 3D transform </title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:rosca@adobe.com" rel="author" title="Ion Roșca">
|
||||
<link href="mailto:mitica@adobe.com" rel="reviewer" title="Mihai Țică">
|
||||
<link href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="" name="flags">
|
||||
<meta content="Test checks that the element with mix-blend-mode and 3D transform blends correctly with its parent" name="assert">
|
||||
<link href="reference/mix-blend-mode-blended-with-3D-transform-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
.parent {
|
||||
background: aqua;/*rgb(0,255,255);*/
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
padding-top: 1px;
|
||||
position:relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.blended {
|
||||
background: fuchsia;/*rgb(255,0,255);*/
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
transform:rotateX(20deg);
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see a fuchsia square overlapping an aqua square. <br>
|
||||
The overlapping area should be yellow. </p>
|
||||
<div class="parent">
|
||||
<div class="blended">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: blending between an element and its child having mix-blend-mode and perspective</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:rosca@adobe.com" rel="author" title="Ion Roșca">
|
||||
<link href="mailto:mitica@adobe.com" rel="reviewer" title="Mihai Țică">
|
||||
<link href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="" name="flags">
|
||||
<meta content="Test checks that an element having mix-blend-mode and perspective blends correctly with its parent" name="assert">
|
||||
<link href="reference/mix-blend-mode-blended-with-transform-and-perspective-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
div {
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
}
|
||||
.container {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background-color: lime;/*rgb(0,255,0);*/
|
||||
}
|
||||
.transformed {
|
||||
transform: perspective(600px) translateZ(-200px);
|
||||
background-color: red;/*rgb(255,0,0);*/
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see a yellow square inside a green container.</p>
|
||||
<div class="container">
|
||||
<div class="transformed">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: mix-blend-mode between an element and its sibling</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan">
|
||||
<link href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="Test checks that an element with mix-blend-mode blends with a sibling element" name="assert">
|
||||
<meta content="" name="flags">
|
||||
<link href="reference/green-square.htm" rel="match">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.container {
|
||||
position: fixed;
|
||||
z-index: 0;
|
||||
background: #FFF;
|
||||
}
|
||||
.blender {
|
||||
background: #FF0;
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
.sibling {
|
||||
margin-top: -100px;
|
||||
background: #F00;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a green square on the screen.</p>
|
||||
<div class="container">
|
||||
<div class="blender"></div>
|
||||
<div class="sibling"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Blended element with border image</title>
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="Test checks if mix-blend-mode is applied for an element with border-image." name="assert">
|
||||
<meta content="svg" name="flags">
|
||||
<link href="mailto:cabanier@adobe.com" rel="reviewer" title="Rik Cabanier">
|
||||
<link href="mailto:mbudaes@adobe.com" rel="reviewer" title="Mirela Budaes">
|
||||
<link href="reference/mix-blend-mode-border-image-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
.parent {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background: #FF0;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.child {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: #F00;
|
||||
mix-blend-mode: difference;
|
||||
border-width: 10px;
|
||||
border-image: url('support/red_square.svg') 10 repeat;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a green rectangle. <br>
|
||||
If blending is not performed, the div is displayed with red. </p>
|
||||
<div class="parent"><div class="child"></div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: mix-blend-mode between an element and its child (both with 3D transform) </title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:rosca@adobe.com" rel="author" title="Ion Roșca">
|
||||
<link href="mailto:mitica@adobe.com" rel="reviewer" title="Mihai Țică">
|
||||
<link href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="" name="flags">
|
||||
<meta content="Test checks that the element with mix-blend-mode blends with the parent element (both with 3D transform)" name="assert">
|
||||
<link href="reference/mix-blend-mode-both-parent-and-blended-with-3D-transform-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
.parent {
|
||||
background: aqua;/*rgb(0,255,255);*/
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
padding-top: 1px;
|
||||
transform:rotateX(20deg);
|
||||
}
|
||||
.blended {
|
||||
background: fuchsia;/*rgb(255,0,255);*/
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
transform:rotateX(20deg);
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see a fuchsia square overlapping an aqua square. <br>
|
||||
The overlapping area should be yellow. </p>
|
||||
<div class="parent">
|
||||
<div class="blended">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Canvas with mix-blend-mode blends with the parent element.</title>
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="Test checks that a canvas element having mix-blend-mode applied blends with the content of the parent element." name="assert">
|
||||
<meta content="dom" name="flags">
|
||||
<link href="mailto:cabanier@adobe.com" rel="reviewer" title="Rik Cabanier">
|
||||
<link href="mailto:mbudaes@adobe.com" rel="reviewer" title="Mirela Budaes">
|
||||
<link href="reference/mix-blend-mode-canvas-parent-ref.htm" rel="match">
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a green rectangle. <br>
|
||||
If blending is not performed, the canvas is displayed with red. </p>
|
||||
<div style="width: 100px; height: 100px; background: #FF0;">
|
||||
<canvas width="100" style="mix-blend-mode: difference;" id="cvs" height="100"></canvas>
|
||||
<script type="text/javascript">
|
||||
var cvs = document.getElementById("cvs");
|
||||
var ctx = cvs.getContext("2d");
|
||||
ctx.fillStyle = "#F00";
|
||||
ctx.fillRect(0, 0, 100, 100);
|
||||
</script>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Canvas with mix-blend-mode blends with sibling element</title>
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="Test checks that a canvas element having mix-blend-mode applied blends with a sibling element." name="assert">
|
||||
<meta content="dom" name="flags">
|
||||
<link href="mailto:cabanier@adobe.com" rel="reviewer" title="Rik Cabanier">
|
||||
<link href="mailto:mbudaes@adobe.com" rel="reviewer" title="Mirela Budaes">
|
||||
<link href="reference/mix-blend-mode-canvas-sibling-ref.htm" rel="match">
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a green rectangle. <br>
|
||||
If blending is not performed, the canvas is displayed with red. </p>
|
||||
<div style="width: 100px; height: 100px; background: #FF0;"></div>
|
||||
<canvas width="100" style="mix-blend-mode: difference; position: relative; top: -100px;" id="cvs" height="100"></canvas>
|
||||
<script type="text/javascript">
|
||||
var canvas = document.getElementById("cvs");
|
||||
var context = canvas.getContext("2d");
|
||||
|
||||
context.fillStyle = "#F00";
|
||||
context.fillRect(0, 0, 100, 100);
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: an element with mix-blend-mode other than normal creates a stacking context</title>
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan">
|
||||
<link href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="dom" name="flags">
|
||||
<meta content="Test checks that applying a blendmode other than normal
|
||||
to the element must establish a new stacking context." name="assert">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="blender"></div>
|
||||
<script type="text/javascript">
|
||||
var blendModes = ["multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn",
|
||||
"hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"];
|
||||
|
||||
test(function() {
|
||||
var blender = document.getElementById("blender");
|
||||
for (var i = 0; i < blendModes.length; ++i) {
|
||||
blender.style.mixBlendMode = blendModes[i];
|
||||
var blenderStyle = window.getComputedStyle(blender);
|
||||
assert_true(blenderStyle.zIndex !== "auto");
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Blended element with filter.</title>
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="Test checks that an element having a filter effect and mix-blend-mode blends with its parent element." name="assert">
|
||||
<link href="mailto:cabanier@adobe.com" rel="reviewer" title="Rik Cabanier">
|
||||
<link href="mailto:mbudaes@adobe.com" rel="reviewer" title="Mirela Budaes">
|
||||
<link href="reference/mix-blend-mode-filter-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style></head>
|
||||
|
||||
<body>
|
||||
<p>Test passes if you can see a green blurred square. <br>
|
||||
The test fails if the square is drawn with red. </p>
|
||||
|
||||
<div style="background: #FF0;">
|
||||
<div style="background: #F00; mix-blend-mode: difference; filter: opacity(0.9);"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: an iframe element with mix-blend-mode should blend with its parent element.</title>
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="Test checks that an iframe element blends with its parent element." name="assert">
|
||||
<link href="mailto:cabanier@adobe.com" rel="reviewer" title="Rik Cabanier">
|
||||
<link href="mailto:mbudaes@adobe.com" rel="reviewer" title="Mirela Budaes">
|
||||
<link href="reference/mix-blend-mode-iframe-parent-ref.htm" rel="match">
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a green rectangle. <br>
|
||||
If blending is not performed, the canvas is displayed with red. </p>
|
||||
|
||||
<div style="width: 100px; height: 100px; background: #FF0;">
|
||||
<iframe src="support/red_square.html" style="margin-top: -8px; margin-left: -8px; mix-blend-mode: difference;" frameborder="0"></iframe>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: an iframe element with mix-blend-mode should blend with a sibling element.</title>
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="Test checks that an iframe element blends with a sibling element." name="assert">
|
||||
<link href="mailto:cabanier@adobe.com" rel="reviewer" title="Rik Cabanier">
|
||||
<link href="mailto:mbudaes@adobe.com" rel="reviewer" title="Mirela Budaes">
|
||||
<link href="reference/mix-blend-mode-iframe-sibling-ref.htm" rel="match">
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a green rectangle. <br>
|
||||
If blending is not performed, the canvas is displayed with red. </p>
|
||||
|
||||
<div style="width: 100px; height: 100px; background: #FF0;"></div>
|
||||
<iframe src="support/red_square.html" style="margin-top: -108px; margin-left: -8px; mix-blend-mode: difference;" frameborder="0"></iframe>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Image element with mix-blend-mode.</title>
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="Test checks that mix-blend-mode is applied to an img element." name="assert">
|
||||
<meta content="image" name="flags">
|
||||
<link href="mailto:cabanier@adobe.com" rel="reviewer" title="Rik Cabanier">
|
||||
<link href="mailto:mbudaes@adobe.com" rel="reviewer" title="Mirela Budaes">
|
||||
<link href="reference/mix-blend-mode-image-notref.htm" rel="mismatch">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 75px;
|
||||
background: #FF0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a green rectangle.</p>
|
||||
<div>
|
||||
<img src="support/red.png" style="max-width:100%; max-height:100%; mix-blend-mode: difference;">
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Compositing and Blending: mix-blend-mode in an SVG linked as an image</title>
|
||||
<link U00022="" href="mailto:cabanier@adobe.com" rel="author" title="Rik Cabanier">
|
||||
<link href="https://drafts.fxtf.org/compositing-1/#isolation" rel="help">
|
||||
<link href="mailto:dschulze@adobe.com" rel="reviewer" title="Dirk Schulze">
|
||||
<link href="https://drafts.fxtf.org/compositing-1/#csscompositingrules_SVG" rel="help">
|
||||
<link href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="svg" name="flags">
|
||||
<link href="reference/mix-blend-mode-svg-rectangle-ref.htm" rel="match">
|
||||
</head>
|
||||
<body>
|
||||
<p>There should be a green rectangle on the screen. <br>
|
||||
Test passes if you see a green rectangle.</p>
|
||||
<img src="support/green_square_blending.svg">
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: mix-blend-mode between an element and its child having overflow:hidden and border-radius, when the blending element overlaps a sibling element</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:rosca@adobe.com" rel="author" title="Ion Roșca">
|
||||
<link href="mailto:mitica@adobe.com" rel="reviewer" title="Mihai Țică">
|
||||
<link href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="" name="flags">
|
||||
<meta content="Test checks that the element with mix-blend-mode, overflow:hidden and border-radius blends correctly with its parent, as well as with the sibling element where they overlap." name="assert">
|
||||
<link href="reference/mix-blend-mode-intermediate-element-overflow-hidden-and-border-radius-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
.parent {
|
||||
background: aqua;/*rgb(0,255,255);*/
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.blended {
|
||||
background: fuchsia;
|
||||
width: 150px;
|
||||
height: 75px;
|
||||
margin-top: -75px;
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
.siblingOfBlended {
|
||||
background: yellow;/*rgb(255,255,0);*/
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
overflow: hidden;
|
||||
border-radius: 2em 2em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p> This test passes if you can see a rectangle split in two pieces: the top half is yellow with aqua rounded borders and the bottom half is aqua with yellow borders.</p>
|
||||
<div class="parent">
|
||||
<div class="siblingOfBlended"></div>
|
||||
<div class="blended">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Blended element with masking.</title>
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="Test checks that an element having mask and mix-blend-mode blends with its parent element." name="assert">
|
||||
<meta content="svg" name="flags">
|
||||
<link href="mailto:cabanier@adobe.com" rel="reviewer" title="Rik Cabanier">
|
||||
<link href="mailto:mbudaes@adobe.com" rel="reviewer" title="Mirela Budaes">
|
||||
<link href="reference/mix-blend-mode-mask-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a green circle. <br>
|
||||
The test fails if the circle is drawn with red. </p>
|
||||
|
||||
<div style="background: #FF0">
|
||||
<div style="background: #F00; mix-blend-mode: difference; mask-image: url('support/red_circle.svg');"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: blend an element having an overflowing child.</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan">
|
||||
<link href="mailto:olaru@adobe.com" rel="reviewer" title="Horia Olaru">
|
||||
<link href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="Test checks that a group consisting of an element
|
||||
with mix-blend-mode and an overflowing child blends as a whole with the
|
||||
underlying stacking context." name="assert">
|
||||
<meta content="" name="flags">
|
||||
<link href="reference/mix-blend-mode-blended-element-with-transparent-pixels-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
.parent {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
background: #00F;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 10px;
|
||||
}
|
||||
.blender {
|
||||
background: #777;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
margin: -10px;
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
.child {
|
||||
background: #0FF;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a lime square with aqua borders.<br>
|
||||
If the borders are red, the test fails.</p>
|
||||
<div class="parent">
|
||||
<div class="blender">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: blended element overflows parent</title>
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan">
|
||||
<link href="mailto:olaru@adobe.com" rel="reviewer" title="Horia Olaru">
|
||||
<link href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="Test checks that an overflowing element with mix-blend-mode blends with the parent element." name="assert">
|
||||
<meta content="" name="flags">
|
||||
<link href="reference/mix-blend-mode-overflowing-child-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
body {
|
||||
background: lightgray;
|
||||
}
|
||||
.container {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: #0F0;
|
||||
}
|
||||
.blender {
|
||||
background: #0F0;
|
||||
margin: 50px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see two green squares and a black square as their intersection,<br>
|
||||
drawn over a light gray background.</p>
|
||||
<div class="container">
|
||||
<div class="blender"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Paragraph element with mix-blend-mode over parent with background image.</title>
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="Test checks that test a paragraph element blends with the parent element having background image." name="assert">
|
||||
<meta content="svg" name="flags">
|
||||
<link href="mailto:cabanier@adobe.com" rel="reviewer" title="Rik Cabanier">
|
||||
<link href="mailto:mbudaes@adobe.com" rel="reviewer" title="Mirela Budaes">
|
||||
<link href="reference/mix-blend-mode-paragraph-background-image-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-image: url('support/yellow_square.svg');
|
||||
}
|
||||
|
||||
#blender {
|
||||
mix-blend-mode: difference;
|
||||
color: #F00;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the paragraph text is drawn with green.</p>
|
||||
<div>
|
||||
<p id="blender">This should be drawn with green.</p>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Paragraph element with mix-blend-mode.</title>
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="Test checks that test a paragraph element blends with the parent element." name="assert">
|
||||
<link href="mailto:cabanier@adobe.com" rel="reviewer" title="Rik Cabanier">
|
||||
<link href="mailto:mbudaes@adobe.com" rel="reviewer" title="Mirela Budaes">
|
||||
<link href="reference/mix-blend-mode-paragraph-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: #FF0;
|
||||
}
|
||||
|
||||
#blender {
|
||||
mix-blend-mode: difference;
|
||||
color: #F00;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the paragraph text is drawn with green.</p>
|
||||
<div>
|
||||
<p id="blender">This should be drawn with green.</p>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: blending between an element having overflow:hidden and border-radius and its child</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:rosca@adobe.com" rel="author" title="Ion Roșca">
|
||||
<link href="mailto:mitica@adobe.com" rel="reviewer" title="Mihai Țică">
|
||||
<link href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="" name="flags">
|
||||
<meta content="Test checks that an element having mix-blend-mode blends with the parent element having overflow:hidden and border-radius" name="assert">
|
||||
<link href="reference/mix-blend-mode-parent-element-overflow-hidden-and-border-radius-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
.parent {
|
||||
background: red;
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
border-radius: 1em 5em;
|
||||
}
|
||||
.blended {
|
||||
background: yellow;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p> Test passes if you see a lime square with rounded corners.</p>
|
||||
<div class="parent">
|
||||
<div class="blended"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: blending between an element having overflow:scroll and its child having position: fixed</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:rosca@adobe.com" rel="author" title="Ion Roșca">
|
||||
<link href="mailto:mitica@adobe.com" rel="reviewer" title="Mihai Țică">
|
||||
<link href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="" name="flags">
|
||||
<meta content="Test checks that an element with mix-blend-mode blends with the parent element with overflow:scroll" name="assert">
|
||||
<link href="reference/mix-blend-mode-parent-element-overflow-scroll-blended-position-fixed-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
.parent {
|
||||
background: aqua;/*rgb(0,255,255);*/
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
overflow:scroll;
|
||||
}
|
||||
|
||||
.blended {
|
||||
background: fuchsia;/*rgb(255,0,255);*/
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
mix-blend-mode: multiply;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.scrollableContent {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see a blue square inside an aqua container. <br>
|
||||
The aqua container should have scrollbars on the left and bottom.</p>
|
||||
<div class="parent">
|
||||
<div class="blended"></div>
|
||||
<div class="scrollableContent"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: blending between an element with overflow:scroll and its child</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:rosca@adobe.com" rel="author" title="Ion Roșca">
|
||||
<link href="mailto:mitica@adobe.com" rel="reviewer" title="Mihai Țică">
|
||||
<link href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="" name="flags">
|
||||
<meta content="Test checks that an element with mix-blend-mode blends its parent having overflow:scroll" name="assert">
|
||||
<link href="reference/mix-blend-mode-parent-element-overflow-scroll-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
.parent {
|
||||
background: yellow;
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
overflow:scroll;
|
||||
}
|
||||
.blended {
|
||||
background: red;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see a scrollable lime rectangle.</p>
|
||||
<div class="parent">
|
||||
<div class="blended"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: blending between an element having 3D transitions and its child</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:rosca@adobe.com" rel="author" title="Ion Roșca">
|
||||
<link href="mailto:mitica@adobe.com" rel="reviewer" title="Mihai Țică">
|
||||
<link href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="dom" name="flags">
|
||||
<meta content="Test checks that an element having mix-blend-mode blends with its parent element having 3D transform and transition" name="assert">
|
||||
<style type="text/css">
|
||||
.parent {
|
||||
background: yellow;
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
position:relative;
|
||||
z-index: 1;
|
||||
margin: 10px;
|
||||
float: left;
|
||||
transition: transform 2s;
|
||||
|
||||
}
|
||||
.rotated {
|
||||
transform: rotateX(60deg) rotateZ(10deg) rotateY(180deg);
|
||||
}
|
||||
.blended {
|
||||
background: red;
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
.ref {
|
||||
background: none;
|
||||
}
|
||||
.ref .blended {
|
||||
background: lime;
|
||||
mix-blend-mode: normal;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see two rotating lime rectangles, both identical.</p>
|
||||
<div>
|
||||
<div id="parent" class="parent">
|
||||
<div class="blended"></div>
|
||||
</div>
|
||||
<div id="parentref" class="parent ref">
|
||||
<div class="blended"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
var parent = document.getElementById('parent');
|
||||
var parentref = document.getElementById('parentref');
|
||||
function rotate (el, cl) {
|
||||
if (el.className === cl + ' rotated')
|
||||
el.className = cl;
|
||||
else
|
||||
el.className = cl + ' rotated';
|
||||
}
|
||||
setTimeout(function () { rotate(parent, 'parent'); rotate(parentref, 'parent ref'); }, 0);
|
||||
setInterval(function () { rotate(parent, 'parent'); rotate(parentref, 'parent ref'); }, 2000);
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: mix-blend-mode between an element with 3D transform and its child</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:rosca@adobe.com" rel="author" title="Ion Roșca">
|
||||
<link href="mailto:mitica@adobe.com" rel="reviewer" title="Mihai Țică">
|
||||
<link href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="" name="flags">
|
||||
<meta content="Test checks that an element with mix-blend-mode blends with its parent having 3D transform" name="assert">
|
||||
<link href="reference/mix-blend-mode-parent-with-3D-transform-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
.parent {
|
||||
background: aqua;/*rgb(0,255,255);*/
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
padding-top: 1px;
|
||||
transform:rotateX(20deg);
|
||||
}
|
||||
.blended {
|
||||
background: fuchsia;/*rgb(255,0,255);*/
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see a fuchsia square overlapping an aqua square. <br>
|
||||
The overlapping area should be yellow. </p>
|
||||
<div class="parent">
|
||||
<div class="blended"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: blending with parent having border radius</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan">
|
||||
<link href="mailto:olaru@adobe.com" rel="reviewer" title="Horia Olaru">
|
||||
<link href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="Test checks that an element with mix-blend-mode blends
|
||||
with the parent element having border-radius." name="assert">
|
||||
<meta content="" name="flags">
|
||||
<link href="reference/mix-blend-mode-parent-with-border-radius-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
body {
|
||||
background: lightgray;
|
||||
}
|
||||
.parent {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: #F00;
|
||||
border-radius: 50px;
|
||||
}
|
||||
.blended {
|
||||
background: #FF0;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if a green circle is drawn on top of a yellow square, over a lightgray background.</p>
|
||||
<div class="parent">
|
||||
<div class="blended"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: check that the stacking context created by the parent element isolates blending.</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan">
|
||||
<link href="mailto:olaru@adobe.com" rel="reviewer" title="Horia Olaru">
|
||||
<link href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="Test checks that an element with mix-blend-mode only blends with the contents
|
||||
of a parent that creates a stacking context." name="assert">
|
||||
<meta content="" name="flags">
|
||||
<link href="reference/mix-blend-mode-parent-with-text-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
.parent {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.blender {
|
||||
background: #FF0;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-top: -60px;
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
.text {
|
||||
height: 60px;
|
||||
color: #F00;
|
||||
}
|
||||
body {
|
||||
background: lightgray;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if a yellow square with green text is drawn over a lightgray background.</p>
|
||||
<div class="parent">
|
||||
<div class="text">Red text that becomes green after blending </div>
|
||||
<div class="blender"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: parsing mix-blend-mode property</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan">
|
||||
<link href="mailto:cabanier@adobe.com" rel="reviewer" title="Rik Cabanier">
|
||||
<link href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="dom" name="flags">
|
||||
<meta content="Test checks that the value specified for mix-blend-mode property is correctly parsed" name="assert">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script type="text/javascript">
|
||||
function testParse(declaration) {
|
||||
var div = document.createElement("div");
|
||||
div.setAttribute("style", declaration);
|
||||
return div.style.mixBlendMode;
|
||||
}
|
||||
|
||||
var blendModes = ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn",
|
||||
"hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"];
|
||||
|
||||
for (var i = 0; i < blendModes.length; i++) {
|
||||
test(function() {assert_equals(testParse("mix-blend-mode: " + blendModes[i]), blendModes[i] )}, "Mix-blend-mode " + blendModes[i]);
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Set mix-blend-mode from script.</title>
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="Test checks that mix-blend-mode is applied when set from script." name="assert">
|
||||
<meta content="dom" name="flags">
|
||||
<link href="mailto:cabanier@adobe.com" rel="reviewer" title="Rik Cabanier">
|
||||
<link href="mailto:mbudaes@adobe.com" rel="reviewer" title="Mirela Budaes">
|
||||
<link href="reference/mix-blend-mode-script-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: #FF0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a green box.</p>
|
||||
<div><div style="background: #F00;" id="blender"></div></div>
|
||||
<script type="text/javascript">
|
||||
document.getElementById("blender").style.mixBlendMode = "difference";
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,76 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: blending between an element and its sibling having 3D transform and transition</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:rosca@adobe.com" rel="author" title="Ion Roșca">
|
||||
<link href="mailto:mitica@adobe.com" rel="reviewer" title="Mihai Țică">
|
||||
<link href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="dom" name="flags">
|
||||
<meta content="Test checks that an element having mix-blend-mode blends with an overlapping sibling element having 3D transform and transition" name="assert">
|
||||
<style type="text/css">
|
||||
.parent {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
float: left;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.blended {
|
||||
background: blue;
|
||||
margin-top: -120px;
|
||||
width: 140px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
height: 140px;
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
.siblingOfBlended {
|
||||
background: aqua;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
transition: transform 2s;
|
||||
}
|
||||
.rotated {
|
||||
transform: rotateX(60deg) rotateY(10deg) rotateZ(90deg);
|
||||
}
|
||||
|
||||
.ref .blended {
|
||||
mix-blend-mode: normal;
|
||||
}
|
||||
.ref .siblingOfBlended {
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
background: lime;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see two blue rectangles having inside a lime rotating rectangle each.<br>
|
||||
Lime rectangles should look identical when while rotating.</p>
|
||||
<div>
|
||||
<div class="parent">
|
||||
<div id="sibling" class="siblingOfBlended"></div>
|
||||
<div class="blended"></div>
|
||||
</div>
|
||||
<div class="parent ref">
|
||||
<div id="siblingref" class="siblingOfBlended ref"></div>
|
||||
<div class="blended"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
var sibling = document.getElementById('sibling');
|
||||
var siblingref = document.getElementById('siblingref');
|
||||
function rotate (el, cl) {
|
||||
if (el.className === cl + ' rotated')
|
||||
el.className = cl;
|
||||
else
|
||||
el.className = cl + ' rotated';
|
||||
}
|
||||
setTimeout(function () { rotate(sibling, 'siblingOfBlended'); rotate(siblingref, 'siblingOfBlended ref'); }, 0);
|
||||
setInterval(function () { rotate(sibling, 'siblingOfBlended'); rotate(siblingref, 'siblingOfBlended ref'); }, 2000);
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: blending between an element and its sibling element having 3D transform</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:rosca@adobe.com" rel="author" title="Ion Roșca">
|
||||
<link href="mailto:mitica@adobe.com" rel="reviewer" title="Mihai Țică">
|
||||
<link href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="" name="flags">
|
||||
<meta content="Test checks that an element with mix-blend-mode blends with both parent element and with sibling element having 3D transform" name="assert">
|
||||
<link href="reference/mix-blend-mode-sibling-with-3D-transform-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
.parent {
|
||||
background: aqua;/*rgb(0,255,255);*/
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
padding-top: 1px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.blended {
|
||||
background: fuchsia;/*rgb(255,0,255);*/
|
||||
margin-top: -200px;
|
||||
margin-left: 20px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
.siblingOfBlended {
|
||||
background: red;/*rgb(255,0,0);*/
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
transform: perspective(600px) translateZ(-200px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see three overlapping squares, from back to front, having the following colors: aqua, fuchsia and blue. <br>
|
||||
The intersection area between aqua and fuchsia squares, which is not overlapped by the blue square, should be yellow.</p>
|
||||
<div class="parent">
|
||||
<div class="siblingOfBlended"></div>
|
||||
<div class="blended"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: An element with mix-blend-mode blends with its parent element.</title>
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan">
|
||||
<link href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="Test checks that an element with mix-blend-mode blends with its parent element." name="assert">
|
||||
<meta content="" name="flags">
|
||||
<link href="reference/green-square.htm" rel="match">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.parent {
|
||||
background: #FF0;
|
||||
}
|
||||
.child {
|
||||
background: #F00;
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a green square on the screen.</p>
|
||||
<div class="parent">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: mix-blend-mode between an element and its child</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan">
|
||||
<link href="mailto:cabanier@adobe.com" rel="reviewer" title="Rik Cabanier">
|
||||
<link href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="" name="flags">
|
||||
<meta content="Test checks that the element with mix-blend-mode and opacity blends with the parent element" name="assert">
|
||||
<link href="reference/mix-blend-mode-stacking-context-001-ref.htm" rel="match">
|
||||
<style>
|
||||
.simple{
|
||||
background: aqua;/*rgb(0,255,255);*/
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
display:inline-block;
|
||||
}
|
||||
.mixed {
|
||||
opacity: 0.9;
|
||||
background: red;/*rgb(255,0,0);*/
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see a black rectangle with large aqua borders.
|
||||
You should not see a red rectangle on the page. </p>
|
||||
<div class="simple">
|
||||
<div class="mixed"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: stacking context creates isolated group</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode" rel="help">
|
||||
<link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan">
|
||||
<link href="mailto:cabanier@adobe.com" rel="reviewer" title="Rik Cabanier">
|
||||
<meta content="" name="flags">
|
||||
<meta content="Test checks that properties that cause the creation of stacking context cause a group to be isolated" name="assert">
|
||||
<link href="reference/mix-blend-mode-stacking-context-creates-isolation-ref.htm" rel="match">
|
||||
<style>
|
||||
.container{
|
||||
margin: 30px;
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
float: left;
|
||||
background: yellow;/*rgb(255,255,0);*/
|
||||
}
|
||||
.simple{
|
||||
background: lime;/* rgb(0,255,0);*/
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: fixed;
|
||||
}
|
||||
.mixed {
|
||||
background: red;/*rgb(255,0,0);*/
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is no complete red square on the screen. <br>
|
||||
You should see two overlapping lime and red squares on top of a yellow one. <br>
|
||||
At the intersection of the lime and red squares, a black square will be created. </p>
|
||||
<div class="container">
|
||||
<div class="simple">
|
||||
<div class="mixed"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: mix-blend-mode for a simple SVG element - rectangle</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan">
|
||||
<link href="mailto:cabanier@adobe.com" rel="reviewer" title="Rik Cabanier">
|
||||
<link href="https://drafts.fxtf.org/compositing-1/#csscompositingrules_SVG" rel="help">
|
||||
<link href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="svg" name="flags">
|
||||
<link href="reference/mix-blend-mode-svg-rectangle-ref.htm" rel="match">
|
||||
</head>
|
||||
<body>
|
||||
<p>There should be no red rectangle on the screen. <br>
|
||||
Test passes if you see a black rectangle.</p>
|
||||
<svg height="400px" width="400px" version="1.1" xmlns:xmlns="http://www.w3.org/2000/svg">
|
||||
<rect y="0" width="100" fill="aqua" x="0" height="100"></rect>
|
||||
<rect width="100" style="mix-blend-mode: multiply" y="0" x="0" fill="red" height="100"></rect>
|
||||
</svg>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: SVG element is blended.</title>
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="Test checks that an SVG element blends with the parent container." name="assert">
|
||||
<meta content="svg" name="flags">
|
||||
<link href="mailto:cabanier@adobe.com" rel="reviewer" title="Rik Cabanier">
|
||||
<link href="mailto:mbudaes@adobe.com" rel="reviewer" title="Mirela Budaes">
|
||||
<link href="reference/mix-blend-mode-svg-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: #FF0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a green box.</p>
|
||||
<div>
|
||||
<svg width="100" style="mix-blend-mode: difference;" height="100">
|
||||
<rect width="100" style="fill: #F00;" height="100">
|
||||
</rect></svg>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Blended element with transition</title>
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="Test checks that an element having a transition applied on opacity blends with the parent element." name="assert">
|
||||
<meta content="dom" name="flags">
|
||||
<link href="mailto:cabanier@adobe.com" rel="reviewer" title="Rik Cabanier">
|
||||
<link href="mailto:mbudaes@adobe.com" rel="reviewer" title="Mirela Budaes">
|
||||
<link href="reference/mix-blend-mode-transition-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: #FF0;
|
||||
}
|
||||
|
||||
#blender {
|
||||
background: #F00;
|
||||
mix-blend-mode: difference;
|
||||
transition: opacity 1s ease;
|
||||
}
|
||||
|
||||
.opaqueBox {
|
||||
opacity: 0.4;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a fading green rectangle.</p>
|
||||
<div><div id="blender"></div></div>
|
||||
<script type="text/javascript">
|
||||
setInterval(function(){ document.getElementById('blender').className = 'opaqueBox'; }, 100);
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: mix-blend-mode blending between a video element and an overlapping sibling</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan">
|
||||
<link href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="Test checks that a video element blends with an overlapping sibling element with some text inside" name="assert">
|
||||
<meta content="" name="flags">
|
||||
<link href="reference/mix-blend-mode-video-sibling-notref.htm" rel="mismatch">
|
||||
<style type="text/css">
|
||||
div {
|
||||
mix-blend-mode: difference;
|
||||
margin-top: -361px;
|
||||
background-color: #FF0;
|
||||
width: 300px;
|
||||
height: 350px;
|
||||
color: #F00;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see text and a circle moving from the top to the bottom of the page,<br>
|
||||
both drawn with green, over a blue background.</p>
|
||||
<video autoplay="">
|
||||
<source src="support/red_circle.mp4" type="video/mp4">
|
||||
</video>
|
||||
<div>Some text inside the div.</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Video element with mix-blend-mode.</title>
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="Test checks that mix-blend-mode is applied to a video element." name="assert">
|
||||
<link href="mailto:cabanier@adobe.com" rel="reviewer" title="Rik Cabanier">
|
||||
<link href="mailto:mbudaes@adobe.com" rel="reviewer" title="Mirela Budaes">
|
||||
<link href="reference/mix-blend-mode-video-notref.htm" rel="mismatch">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 480px;
|
||||
height: 352px;
|
||||
background: #FF0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a green circle over a blue background.</p>
|
||||
<div>
|
||||
<video style="mix-blend-mode: difference" autoplay="">
|
||||
<source src="support/red_circle.mp4" type="video/mp4">
|
||||
</video>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: mix-blend-mode between an element and its child having 3D transform and preserve 3D</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:rosca@adobe.com" rel="author" title="Ion Roșca">
|
||||
<link href="mailto:mitica@adobe.com" rel="reviewer" title="Mihai Țică">
|
||||
<link href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="" name="flags">
|
||||
<meta content="Test checks that mix-blend-mode overrides the behavior of transform-style:preserve-3d" name="assert">
|
||||
<link href="reference/mix-blend-mode-with-transform-and-preserve-3D-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
div {
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
}
|
||||
.container {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background-color: lime;/*rgb(0,255,0);*/
|
||||
}
|
||||
.transformed {
|
||||
transform-style: preserve-3d;
|
||||
transform: rotateY(50deg);
|
||||
background-color: aqua;/*rgb(0,255,255);*/
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
.child {
|
||||
transform-origin: top left;
|
||||
transform: rotateX(40deg);
|
||||
background-color: red;/*rgb(255,0,0);*/
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see 2 small rectangles (yellow and blue) drawn inside a lime container.<br>
|
||||
The edges for all the rectangles should be either horizontal, or vertical (not skewed).</p>
|
||||
<div class="container">
|
||||
<div class="transformed">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<style>
|
||||
div {
|
||||
margin: 5px;
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
background: black;/*rgb(0,0,0);*/
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is no red square on the screen. <br>
|
||||
You should see a black square.</p>
|
||||
<div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>[simple<div>] blending reference</title>
|
||||
|
||||
<link href="mailto:augur521@hotmail.com" rel="author" title="Aili Wang">
|
||||
<link href="http://www.w3.org/TR/compositing-1/" rel="help">
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
#b{background-color:rgb(0,255,0); width:100px;height:100px
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="b"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS will-change reference</title>
|
||||
<link href="https://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla">
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; }
|
||||
div { width: 100px; height: 100px; background: green }
|
||||
</style>
|
||||
</head><body>
|
||||
<div></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<style type="text/css">
|
||||
div {
|
||||
background: #0F0;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a green square on the screen.</p>
|
||||
<div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Blended element with animation</title>
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: #FF0;
|
||||
}
|
||||
|
||||
@keyframes changeOpacity
|
||||
{
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0.1; }
|
||||
}
|
||||
|
||||
#blender {
|
||||
background: #0F0;
|
||||
animation: changeOpacity 1s;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a fading green box.</p>
|
||||
<div><div id="blender"></div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:rosca@adobe.com" rel="author" title="Ion Roșca">
|
||||
<link href="mailto:mitica@adobe.com" rel="reviewer" title="Mihai Țică">
|
||||
<style type="text/css">
|
||||
.parent {
|
||||
background: aqua;/*rgb(0,255,255);*/
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.blended {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
overflow: hidden;
|
||||
border-radius: 2em 2em;
|
||||
}
|
||||
.childOfBlended {
|
||||
background: lime;/*rgb(0,255,0);*/
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if you see a lime rectangle with aqua rounded corners.</p>
|
||||
<div class="parent">
|
||||
<div class="blended">
|
||||
<div class="childOfBlended">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:rosca@adobe.com" rel="author" title="Ion Roșca">
|
||||
<link href="mailto:mitica@adobe.com" rel="reviewer" title="Mihai Țică">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: lime;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see a lime rectangle.</p>
|
||||
<div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan">
|
||||
<link href="mailto:olaru@adobe.com" rel="reviewer" title="Horia Olaru">
|
||||
<style type="text/css">
|
||||
.parent {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
background: #0FF;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
.child {
|
||||
background: #0F0;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a lime square with aqua borders.<br>
|
||||
If the borders are red, the test fails.</p>
|
||||
<div class="parent">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:rosca@adobe.com" rel="author" title="Ion Roșca">
|
||||
<link href="mailto:mitica@adobe.com" rel="reviewer" title="Mihai Țică">
|
||||
<style type="text/css">
|
||||
.parent {
|
||||
background: aqua;/*rgb(0,255,255);*/
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
padding-top: 1px;
|
||||
position:relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.blended {
|
||||
background: fuchsia;/*rgb(255,0,255);*/
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
transform:rotateX(20deg);
|
||||
}
|
||||
.childOfBlended {
|
||||
background: yellow;/*rgb(255,255,0);*/
|
||||
width: 120px;
|
||||
height: 122px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see a fuchsia square overlapping an aqua square. <br>
|
||||
The overlapping area should be yellow. </p>
|
||||
<div class="parent">
|
||||
<div class="blended">
|
||||
<div class="childOfBlended"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:rosca@adobe.com" rel="author" title="Ion Roșca">
|
||||
<link href="mailto:mitica@adobe.com" rel="reviewer" title="Mihai Țică">
|
||||
<style type="text/css">
|
||||
div {
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
}
|
||||
.container {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background-color: lime;/*rgb(0,255,0);*/
|
||||
}
|
||||
.transformed {
|
||||
transform: perspective(600px) translateZ(-200px);
|
||||
background-color: yellow;/*rgb(255,255,0);*/
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see a yellow square inside a green container.</p>
|
||||
<div class="container">
|
||||
<div class="transformed">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Blended element with border image</title>
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<style>
|
||||
div {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background: #0F0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a green rectangle. <br>
|
||||
If blending is not performed, the div is displayed with red. </p>
|
||||
<div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:rosca@adobe.com" rel="author" title="Ion Roșca">
|
||||
<link href="mailto:mitica@adobe.com" rel="reviewer" title="Mihai Țică">
|
||||
<style type="text/css">
|
||||
.parent {
|
||||
background: aqua;/*rgb(0,255,255);*/
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
padding-top: 1px;
|
||||
transform:rotateX(20deg);
|
||||
}
|
||||
.blended {
|
||||
background: fuchsia;/*rgb(255,0,255);*/
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
transform:rotateX(20deg);
|
||||
}
|
||||
.childOfBlended {
|
||||
background: yellow;/*rgb(255,255,0);*/
|
||||
width: 120px;
|
||||
height: 122px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see a fuchsia square overlapping an aqua square. <br>
|
||||
The overlapping area should be yellow. </p>
|
||||
<div class="parent">
|
||||
<div class="blended">
|
||||
<div class="childOfBlended"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Canvas with mix-blend-mode blends with the parent element.</title>
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a green rectangle. <br>
|
||||
If blending is not performed, the canvas is displayed with red. </p>
|
||||
<div style="width: 100px; height: 100px; background: #0F0;">
|
||||
|
||||
|
||||
</div></body></html>
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Canvas with mix-blend-mode blends with sibling element</title>
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a green rectangle. <br>
|
||||
If blending is not performed, the canvas is displayed with red. </p>
|
||||
<div style="width: 100px; height: 100px; background: #0F0"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Blended element with filter.</title>
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a green blurred square. <br>
|
||||
The test fails if the square is drawn with red. </p>
|
||||
|
||||
<div style="background: #0F0; filter: opacity(0.9);"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: an iframe element with mix-blend-mode should blend with its parent element.</title>
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a green rectangle. <br>
|
||||
If blending is not performed, the canvas is displayed with red. </p>
|
||||
|
||||
<div style="width: 100px; height: 100px; background: #0F0;"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: an iframe element with mix-blend-mode should blend with a sibling element.</title>
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a green rectangle. <br>
|
||||
If blending is not performed, the canvas is displayed with red. </p>
|
||||
|
||||
<div style="width: 100px; height: 100px; background: #0F0;"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Image element with mix-blend-mode.</title>
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 75px;
|
||||
background: #FF0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a green rectangle.</p>
|
||||
<div>
|
||||
<img src="../support/red.png" style="max-width:100%; max-height:100%;">
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:rosca@adobe.com" rel="author" title="Ion Roșca">
|
||||
<link href="mailto:mitica@adobe.com" rel="reviewer" title="Mihai Țică">
|
||||
<style type="text/css">
|
||||
.parent {
|
||||
background: aqua;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.blended {
|
||||
background: yellow;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border-radius: 2em 2em;
|
||||
}
|
||||
.blended1 {
|
||||
background: yellow;
|
||||
width: 150px;
|
||||
height: 75px;
|
||||
margin-top: -75px;
|
||||
}
|
||||
.child1 {
|
||||
background: aqua;
|
||||
width: 150px;
|
||||
height: 75px;
|
||||
border-radius: 0 0 2em 2em;
|
||||
}
|
||||
.siblingOfBlended {
|
||||
background: yellow;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
overflow: hidden;
|
||||
border-radius: 2em 2em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p> This test passes if you can see a rectangle split in two pieces: the top half is yellow with aqua rounded borders and the bottom half is aqua with yellow borders.</p>
|
||||
<div class="parent">
|
||||
<div class="blended">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
<div class="blended1">
|
||||
<div class="child1"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Blended element with masking.</title>
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style></head>
|
||||
|
||||
<body>
|
||||
<p>Test passes if you can see a green circle. <br>
|
||||
The test fails if the circle is drawn with red. </p>
|
||||
|
||||
<div style="background: #FF0;"><div style="background: #0F0; mask-image: url('../support/red_circle.svg');"></div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan">
|
||||
<link href="mailto:olaru@adobe.com" rel="reviewer" title="Horia Olaru">
|
||||
<style type="text/css">
|
||||
body {
|
||||
background: lightgray;
|
||||
}
|
||||
.container {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: #0F0;
|
||||
}
|
||||
.blender {
|
||||
background: #0F0;
|
||||
margin: 50px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.intersection {
|
||||
background: #000;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-top: -150px;
|
||||
margin-left: 50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see two green squares and a black square as their intersection,<br>
|
||||
drawn over a light gray background.</p>
|
||||
<div class="container">
|
||||
<div class="blender"></div>
|
||||
<div class="intersection"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Paragraph element with mix-blend-mode over parent with background image.</title>
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-image: url('../support/yellow_square.svg');
|
||||
}
|
||||
|
||||
#blender {
|
||||
color: #0F0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the paragraph text is drawn with green.</p>
|
||||
<div>
|
||||
<p id="blender">This should be drawn with green.</p>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Paragraph element with mix-blend-mode.</title>
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<meta content="Test checks that test a paragraph element blends with the parent element." name="assert">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: #FF0;
|
||||
}
|
||||
|
||||
#blender {
|
||||
color: #0F0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the paragraph text is drawn with green.</p>
|
||||
<div>
|
||||
<p id="blender">This should be drawn with green.</p>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:rosca@adobe.com" rel="author" title="Ion Roșca">
|
||||
<link href="mailto:mitica@adobe.com" rel="reviewer" title="Mihai Țică">
|
||||
<style type="text/css">
|
||||
.parent {
|
||||
background: lime;
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
border-radius: 1em 5em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p> Test passes if you see a lime square with rounded corners.</p>
|
||||
<div class="parent">
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:rosca@adobe.com" rel="author" title="Ion Roșca">
|
||||
<link href="mailto:mitica@adobe.com" rel="reviewer" title="Mihai Țică">
|
||||
<style type="text/css">
|
||||
.parent {
|
||||
background: aqua;/*rgb(0,255,255);*/
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
overflow:scroll;
|
||||
}
|
||||
|
||||
.blended {
|
||||
background: blue;/*rgb(0,0,255);*/
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.scrollableContent {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see a blue square inside a bigger aqua container. <br>
|
||||
The aqua container should have scrollbars on the left and bottom.</p>
|
||||
<div class="parent">
|
||||
<div class="blended"></div>
|
||||
<div class="scrollableContent"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:rosca@adobe.com" rel="author" title="Ion Roșca">
|
||||
<link href="mailto:mitica@adobe.com" rel="reviewer" title="Mihai Țică">
|
||||
<style type="text/css">
|
||||
.parent {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
overflow:scroll;
|
||||
}
|
||||
.blended {
|
||||
background: lime;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see a scrollable lime rectangle.</p>
|
||||
<div class="parent">
|
||||
<div class="blended"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:rosca@adobe.com" rel="author" title="Ion Roșca">
|
||||
<link href="mailto:mitica@adobe.com" rel="reviewer" title="Mihai Țică">
|
||||
<style type="text/css">
|
||||
.parent {
|
||||
background: aqua;/*rgb(0,255,255);*/
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
padding-top: 1px;
|
||||
transform:rotateX(20deg);
|
||||
}
|
||||
.blended {
|
||||
background: fuchsia;/*rgb(255,0,255);*/
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
.childOfBlended {
|
||||
background: yellow;/*rgb(255,255,0);*/
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see a fuchsia square overlapping an aqua square. <br>
|
||||
The overlapping area should be yellow. </p>
|
||||
<div class="parent">
|
||||
<div class="blended">
|
||||
<div class="childOfBlended"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan">
|
||||
<link href="mailto:olaru@adobe.com" rel="reviewer" title="Horia Olaru">
|
||||
<style type="text/css">
|
||||
body {
|
||||
background: lightgray;
|
||||
}
|
||||
.parent {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: #FF0;
|
||||
}
|
||||
.blended {
|
||||
background: #0F0;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if a green circle is drawn on top of a yellow square, over a lightgray background.</p>
|
||||
<div class="parent">
|
||||
<div class="blended"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
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