mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-07 04:26:32 +08:00
Patrick Brosset
6e337aa2fc
While working on refactoring the color and var swatches recently, I had to disable a few web tests in chromium.src. Instead of fixing them and re-enabling them now, I'm taking this opportunity to convert them to the appropriate unit or e2e tests in the frontend (this helps reduce the dependency for frontend-only features on chromium.src). Here is the list of disabled web_tests and what I did for each: 1. third_party/blink/web_tests/http/tests/devtools/elements/styles-1/color-swatch.js Converted to both new unit and e2e test cases for what wasn't already covered. 2. third_party/blink/web_tests/http/tests/devtools/elements/styles/url-color-swatch.js Added new e2e test cases for what wasn't already covered. 3. third_party/blink/web_tests/http/tests/devtools/elements/css-variables/color-swatch.js Also added new e2e test cases to cover this. 3. third_party/blink/web_tests/http/tests/devtools/sources/color-swatch-position.js This one is different as it tests editing CSS code in the Sources panel. Because the current e2e helpers lack support for this, I will fix and re-enable this web_test in chromium.src. It doesn't seem worth it right now to create a bunch of new helpers just for the color swatch. But we should do this too eventually. Backend CL: https://chromium-review.googlesource.com/c/chromium/src/+/2507510/ Bug: 1137438 Change-Id: Ic260e460ba215dd9a317ae2843d927c2d1bace3d Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2506954 Reviewed-by: Jose Leal <joselea@microsoft.com> Reviewed-by: Mathias Bynens <mathias@chromium.org> Reviewed-by: Tim van der Lippe <tvanderlippe@chromium.org> Commit-Queue: Patrick Brosset <patrick.brosset@microsoft.com>
16 lines
310 B
HTML
16 lines
310 B
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<style>
|
|
#inspected {
|
|
color: red;
|
|
--variable: blue;
|
|
background-color: var(--variable);
|
|
animation-name: black;
|
|
margin: 10px;
|
|
background: url("red green blue.jpg");
|
|
--red: invalid;
|
|
border-color: var(--red);
|
|
}
|
|
</style>
|
|
<div id="inspected">Inspected div</div>
|