Oops, something went wrong.
| @@ -0,0 +1,93 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <script src="../../../resources/js-test-pre.js"></script> | ||
| <title>Search Text 1</title> | ||
| </head> | ||
| <body id="body"> | ||
|
|
||
| <p contenteditable="true" id="text">The quick brown fox <span id="target">jumps</span> over the lazy dog. </p> | ||
|
|
||
| <p contenteditable="true" id="text2">TEXT2: The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p> | ||
|
|
||
| <p id="description"></p> | ||
| <div id="console"></div> | ||
|
|
||
| <script> | ||
| description("This tests the ability to search for text given a starting point and a direction for the search."); | ||
|
|
||
| function selectElementText(element) { | ||
| var range = document.createRange(); | ||
| range.selectNodeContents(element); | ||
|
|
||
| var selection = window.getSelection(); | ||
| selection.removeAllRanges(); | ||
| selection.addRange(range); | ||
| } | ||
|
|
||
| if (window.accessibilityController) { | ||
| var text = accessibilityController.accessibleElementById("text"); | ||
| var result = 0; | ||
| var selection = 0; | ||
| var target = document.getElementById("target"); | ||
|
|
||
| // Select target element. | ||
| selectElementText(target); | ||
|
|
||
| // Search for text after selection (single search string). | ||
| result = text.searchTextWithCriteria("lazy", "AXSearchTextStartFromSelection", "AXSearchTextDirectionForward"); | ||
| shouldBe("result.length", "1"); | ||
| shouldBe("text.stringForTextMarkerRange(result[0])", "'lazy'"); | ||
|
|
||
| // Search for text before selection (single search string). | ||
| result = text.searchTextWithCriteria("quick", "AXSearchTextStartFromSelection", "AXSearchTextDirectionBackward"); | ||
| shouldBe("result.length", "1"); | ||
| shouldBe("text.stringForTextMarkerRange(result[0])", "'quick'"); | ||
|
|
||
| // Search for text closest to selection (single search string). | ||
| result = text.searchTextWithCriteria("the", "AXSearchTextStartFromSelection", "AXSearchTextDirectionClosest"); | ||
| shouldBe("result.length", "1"); | ||
| shouldBe("text.stringForTextMarkerRange(result[0])", "'the'"); | ||
|
|
||
| // Search from the beginning (single search string). | ||
| result = text.searchTextWithCriteria("the", "AXSearchTextStartFromBegin", "AXSearchTextDirectionClosest"); | ||
| shouldBe("result.length", "1"); | ||
| shouldBe("text.stringForTextMarkerRange(result[0])", "'The'"); | ||
|
|
||
| // Search for all occurrences from the beginning of document (single search string). | ||
| var body = accessibilityController.rootElement.childAtIndex(0); | ||
| result = body.searchTextWithCriteria("dog", "AXSearchTextStartFromBegin", "AXSearchTextDirectionAll"); | ||
| shouldBe("result.length", "3"); | ||
| for (var i = 0; i < result.length; i++) | ||
| shouldBe("body.stringForTextMarkerRange(result[i])", "'dog'"); | ||
|
|
||
| // Search for all occurrences from the end of document (single search string). | ||
| result = body.searchTextWithCriteria("fox", "AXSearchTextStartFromEnd", "AXSearchTextDirectionAll"); | ||
| shouldBe("result.length", "3"); | ||
| for (var i = 0; i < result.length; i++) | ||
| shouldBe("body.stringForTextMarkerRange(result[i])", "'fox'"); | ||
|
|
||
| // Search for a non-present string (single search string). | ||
| result = body.searchTextWithCriteria("cat", "AXSearchTextStartFromBegin", "AXSearchTextDirectionAll"); | ||
| shouldBe("typeof result", "'undefined'"); | ||
|
|
||
| // Search for multiple strings after selection. | ||
| result = text.searchTextWithCriteria(["lazy", "over"], "AXSearchTextStartFromSelection", "AXSearchTextDirectionForward"); | ||
| shouldBe("result.length", "1"); | ||
| shouldBe("text.stringForTextMarkerRange(result[0])", "'over'"); | ||
|
|
||
| // Search for multiple strings before selection. | ||
| result = text.searchTextWithCriteria(["quick", "fox"], "AXSearchTextStartFromSelection", "AXSearchTextDirectionBackward"); | ||
| shouldBe("result.length", "1"); | ||
| shouldBe("text.stringForTextMarkerRange(result[0])", "'fox'"); | ||
|
|
||
| // Search for multiple strings closest to selection. | ||
| result = text.searchTextWithCriteria(["dog", "fox"], "AXSearchTextStartFromSelection", "AXSearchTextDirectionClosest"); | ||
| shouldBe("result.length", "1"); | ||
| shouldBe("text.stringForTextMarkerRange(result[0])", "'fox'"); | ||
| } | ||
| </script> | ||
|
|
||
| <script src="../../../resources/js-test-post.js"></script> | ||
| </body> | ||
| </html> |
| @@ -1,2 +1,2 @@ | ||
| Got iteration event. | ||
| PASS: saw two or fewer style recalcs during the animation. | ||
| PASS: saw three or fewer style recalcs during the animation. |
| @@ -0,0 +1 @@ | ||
| (display-mode) (display-mode: browser) |
| @@ -0,0 +1,32 @@ | ||
| <!-- webkit-test-runner [ applicationManifest=resources/bad.manifest ] --> | ||
| <script> | ||
| if (window.testRunner) | ||
| testRunner.dumpAsText(); | ||
| </script> | ||
| <style> | ||
| div { display: none; } | ||
| @media (display-mode) { | ||
| .display-mode-null { display: inline; } | ||
| } | ||
| @media (display-mode: browser) { | ||
| .display-mode-browser { display: inline; } | ||
| } | ||
| @media (display-mode: minimal-ui) { | ||
| .display-mode-minimal-ui { display: inline; } | ||
| } | ||
| @media (display-mode: standalone) { | ||
| .display-mode-standalone { display: inline; } | ||
| } | ||
| @media (display-mode: fullscreen) { | ||
| .display-mode-fullscreen { display: inline; } | ||
| } | ||
| @media (display-mode: invalid-value) { | ||
| .display-mode-invalid-value { display: inline; } | ||
| } | ||
| </style> | ||
| <div class="display-mode-null">(display-mode)</div> | ||
| <div class="display-mode-browser">(display-mode: browser)</div> | ||
| <div class="display-mode-minimal-ui">(display-mode: minimal-ui)</div> | ||
| <div class="display-mode-standalone">(display-mode: standalone)</div> | ||
| <div class="display-mode-fullscreen">(display-mode: fullscreen)</div> | ||
| <div class="display-mode-invalid-value">(display-mode: invalid-value)</div> |
| @@ -0,0 +1 @@ | ||
| "\ |
| @@ -0,0 +1,26 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <style> | ||
| .stage { | ||
| margin: 20px; | ||
| width: 300px; height: 250px; | ||
| border: 2px solid black; | ||
| transform-style: preserve-3d; | ||
| } | ||
|
|
||
| .slide { | ||
| width: 100%; | ||
| height: 100%; | ||
| -webkit-backface-visibility: hidden; | ||
| background-color: blue; | ||
| transform: translateX(0px); | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div class="stage"> | ||
| <div id="target" class="slide" onanimationend="animationEnded()"></div> | ||
| </div> | ||
| </body> | ||
| </html> |
| @@ -0,0 +1,51 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <style> | ||
| .stage { | ||
| margin: 20px; | ||
| width: 300px; height: 250px; | ||
| border: 2px solid black; | ||
| transform-style: preserve-3d; | ||
| } | ||
|
|
||
| .slide { | ||
| width: 100%; | ||
| height: 100%; | ||
| animation-duration: 20ms; | ||
| animation-fill-mode: forwards; | ||
| -webkit-backface-visibility: hidden; | ||
| background-color: blue; | ||
| } | ||
|
|
||
| .animating { | ||
| animation-name: slide; | ||
| } | ||
|
|
||
| @keyframes slide { | ||
| 0% { transform-origin: 50% 50%; transform: translateX(400px); } | ||
| 50% { transform-origin: 50% 50%; transform: translateX(0px); } | ||
| 100% { transform-origin: 50% 50%; transform: translateX(0px); } | ||
| } | ||
| </style> | ||
| <script> | ||
| if (window.testRunner) | ||
| testRunner.waitUntilDone(); | ||
|
|
||
| function animationEnded() | ||
| { | ||
| if (window.testRunner) | ||
| testRunner.notifyDone(); | ||
| } | ||
|
|
||
| window.addEventListener('load', () => { | ||
| document.getElementById('target').classList.add('animating'); | ||
| }, false); | ||
| </script> | ||
| </head> | ||
| <body> | ||
| <div class="stage"> | ||
| <div id="target" class="slide" onanimationend="animationEnded()"></div> | ||
| </div> | ||
| </body> | ||
| </html> |
| @@ -0,0 +1,27 @@ | ||
| function makeDots(width, height, spacing = 10) | ||
| { | ||
| for (var row = 0; row < height; ++row) { | ||
| for (var col = 0; col < width; ++col) { | ||
| var dot = document.createElement('div'); | ||
| dot.className = 'dot'; | ||
| dot.style.left = spacing * col + 'px'; | ||
| dot.style.top = spacing * row + 'px'; | ||
| document.body.appendChild(dot); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| function layerTreeWithoutTransforms() | ||
| { | ||
| var layerTreeText = internals.layerTreeAsText(document); | ||
| var filteredLines = layerTreeText.split("\n").filter(line => line.indexOf('transform') == -1); | ||
| return filteredLines.join('\n'); | ||
| } | ||
|
|
||
| function dumpLayers() | ||
| { | ||
| if (window.testRunner) { | ||
| document.getElementById('layers').innerText = layerTreeWithoutTransforms(); | ||
| testRunner.notifyDone(); | ||
| } | ||
| } |
| @@ -0,0 +1,27 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <style> | ||
| .container { | ||
| margin: 50px; | ||
| height: 300px; | ||
| width: 300px; | ||
| border: 1px solid black; | ||
| perspective: 500px; | ||
| } | ||
|
|
||
| .transformed { | ||
| width: 100%; | ||
| height: 100%; | ||
| background-color: blue; | ||
| transform: rotateY(145deg); | ||
| -webkit-backface-visibility: visible; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div class="container"> | ||
| <div class="transformed"></div> | ||
| </div> | ||
| </body> | ||
| </html> |
| @@ -0,0 +1,44 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <style> | ||
| .container { | ||
| margin: 50px; | ||
| height: 300px; | ||
| width: 300px; | ||
| border: 1px solid black; | ||
| perspective: 500px; | ||
| } | ||
|
|
||
| .transformed { | ||
| width: 100%; | ||
| height: 100%; | ||
| background-color: blue; | ||
| transform: rotateY(145deg); | ||
| -webkit-backface-visibility: hidden; | ||
| } | ||
|
|
||
| .transformed.changed { | ||
| -webkit-backface-visibility: visible; | ||
| } | ||
| </style> | ||
| <script> | ||
| if (window.testRunner) | ||
| testRunner.waitUntilDone(); | ||
|
|
||
| window.addEventListener('load', () => { | ||
| setTimeout(() => { | ||
| document.querySelector('.transformed').classList.add('changed'); | ||
| if (window.testRunner) | ||
| testRunner.notifyDone(); | ||
| }, 1000); | ||
|
|
||
| }, false); | ||
| </script> | ||
| </head> | ||
| <body> | ||
| <div class="container"> | ||
| <div class="transformed"></div> | ||
| </div> | ||
| </body> | ||
| </html> |
| @@ -0,0 +1,26 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <style> | ||
| .container { | ||
| margin: 50px; | ||
| height: 300px; | ||
| width: 300px; | ||
| border: 1px solid black; | ||
| } | ||
|
|
||
| .clipped { | ||
| width: 100%; | ||
| height: 100%; | ||
| background-color: blue; | ||
| transform: translateZ(0); | ||
| -webkit-clip-path: circle(50% at center); | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div class="container"> | ||
| <div class="clipped"></div> | ||
| </div> | ||
| </body> | ||
| </html> |
| @@ -0,0 +1,42 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <style> | ||
| .container { | ||
| margin: 50px; | ||
| height: 300px; | ||
| width: 300px; | ||
| border: 1px solid black; | ||
| } | ||
|
|
||
| .clipped { | ||
| width: 100%; | ||
| height: 100%; | ||
| background-color: blue; | ||
| transform: translateZ(0); | ||
| -webkit-clip-path: circle(10% at center); | ||
| } | ||
|
|
||
| .clipped.changed { | ||
| -webkit-clip-path: circle(50% at center); | ||
| } | ||
| </style> | ||
| <script> | ||
| if (window.testRunner) | ||
| testRunner.waitUntilDone(); | ||
|
|
||
| window.addEventListener('load', () => { | ||
| setTimeout(() => { | ||
| document.querySelector('.clipped').classList.add('changed'); | ||
| if (window.testRunner) | ||
| testRunner.notifyDone(); | ||
| }, 0); | ||
| }, false); | ||
| </script> | ||
| </head> | ||
| <body> | ||
| <div class="container"> | ||
| <div class="clipped"></div> | ||
| </div> | ||
| </body> | ||
| </html> |
| @@ -0,0 +1,26 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <style> | ||
| .container { | ||
| margin: 50px; | ||
| height: 300px; | ||
| width: 300px; | ||
| border: 1px solid black; | ||
| perspective: 1500px; | ||
| } | ||
|
|
||
| .transformed { | ||
| width: 100%; | ||
| height: 100%; | ||
| transform: rotateY(45deg); | ||
| background-color: blue; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div class="container"> | ||
| <div class="transformed"></div> | ||
| </div> | ||
| </body> | ||
| </html> |
| @@ -0,0 +1,48 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <style> | ||
| .container { | ||
| margin: 50px; | ||
| height: 300px; | ||
| width: 300px; | ||
| border: 1px solid black; | ||
| perspective: 500px; | ||
| } | ||
|
|
||
| .container.changed { | ||
| perspective: 1500px; | ||
| } | ||
|
|
||
| .transformed { | ||
| width: 100%; | ||
| height: 100%; | ||
| transform: rotateY(45deg); | ||
| background-color: blue; | ||
| } | ||
|
|
||
| .transformed:hover { | ||
| transform-origin: top left; | ||
| background-color: orange; | ||
| } | ||
| </style> | ||
| <script> | ||
| if (window.testRunner) | ||
| testRunner.waitUntilDone(); | ||
|
|
||
| window.addEventListener('load', () => { | ||
| setTimeout(() => { | ||
| document.querySelector('.container').classList.add('changed'); | ||
| if (window.testRunner) | ||
| testRunner.notifyDone(); | ||
| }, 0); | ||
|
|
||
| }, false); | ||
| </script> | ||
| </head> | ||
| <body> | ||
| <div class="container"> | ||
| <div class="transformed"></div> | ||
| </div> | ||
| </body> | ||
| </html> |
| @@ -0,0 +1,27 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <style> | ||
| .container { | ||
| margin: 50px; | ||
| height: 300px; | ||
| width: 300px; | ||
| border: 1px solid black; | ||
| perspective: 500px; | ||
| perspective-origin: top left; | ||
| } | ||
|
|
||
| .transformed { | ||
| width: 100%; | ||
| height: 100%; | ||
| transform: rotateY(45deg); | ||
| background-color: blue; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div class="container"> | ||
| <div class="transformed"></div> | ||
| </div> | ||
| </body> | ||
| </html> |
| @@ -0,0 +1,43 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <style> | ||
| .container { | ||
| margin: 50px; | ||
| height: 300px; | ||
| width: 300px; | ||
| border: 1px solid black; | ||
| perspective: 500px; | ||
| } | ||
|
|
||
| .container.changed { | ||
| perspective-origin: top left; | ||
| } | ||
|
|
||
| .transformed { | ||
| width: 100%; | ||
| height: 100%; | ||
| transform: rotateY(45deg); | ||
| background-color: blue; | ||
| } | ||
| </style> | ||
| <script> | ||
| if (window.testRunner) | ||
| testRunner.waitUntilDone(); | ||
|
|
||
| window.addEventListener('load', () => { | ||
| setTimeout(() => { | ||
| document.querySelector('.container').classList.add('changed'); | ||
| if (window.testRunner) | ||
| testRunner.notifyDone(); | ||
| }, 0); | ||
|
|
||
| }, false); | ||
| </script> | ||
| </head> | ||
| <body> | ||
| <div class="container"> | ||
| <div class="transformed"></div> | ||
| </div> | ||
| </body> | ||
| </html> |
| @@ -0,0 +1,26 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <style> | ||
| .container { | ||
| margin: 50px; | ||
| height: 300px; | ||
| width: 300px; | ||
| border: 1px solid black; | ||
| } | ||
|
|
||
| .transformed { | ||
| width: 100%; | ||
| height: 100%; | ||
| background-color: blue; | ||
| transform: rotateY(45deg); | ||
| transform-origin: top left; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div class="container"> | ||
| <div class="transformed"></div> | ||
| </div> | ||
| </body> | ||
| </html> |
| @@ -0,0 +1,42 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <style> | ||
| .container { | ||
| margin: 50px; | ||
| height: 300px; | ||
| width: 300px; | ||
| border: 1px solid black; | ||
| } | ||
|
|
||
| .transformed { | ||
| width: 100%; | ||
| height: 100%; | ||
| background-color: blue; | ||
| transform: rotateY(45deg); | ||
| } | ||
|
|
||
| .transformed.changed { | ||
| transform-origin: top left; | ||
| } | ||
| </style> | ||
| <script> | ||
| if (window.testRunner) | ||
| testRunner.waitUntilDone(); | ||
|
|
||
| window.addEventListener('load', () => { | ||
| setTimeout(() => { | ||
| document.querySelector('.transformed').classList.add('changed'); | ||
| if (window.testRunner) | ||
| testRunner.notifyDone(); | ||
| }, 0); | ||
|
|
||
| }, false); | ||
| </script> | ||
| </head> | ||
| <body> | ||
| <div class="container"> | ||
| <div class="transformed"></div> | ||
| </div> | ||
| </body> | ||
| </html> |
| @@ -0,0 +1,35 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <style> | ||
| .container { | ||
| margin: 50px; | ||
| height: 300px; | ||
| width: 300px; | ||
| border: 1px solid black; | ||
| perspective: 500px; | ||
| } | ||
|
|
||
| .intermediate { | ||
| width: 100%; | ||
| height: 100%; | ||
| transform: translateX(0); | ||
| transform-style: preserve-3d; | ||
| } | ||
|
|
||
| .transformed { | ||
| width: 100%; | ||
| height: 100%; | ||
| background-color: blue; | ||
| transform: rotateY(45deg); | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div class="container"> | ||
| <div class="intermediate"> | ||
| <div class="transformed"></div> | ||
| </div> | ||
| </div> | ||
| </body> | ||
| </html> |
| @@ -0,0 +1,52 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <style> | ||
| .container { | ||
| margin: 50px; | ||
| height: 300px; | ||
| width: 300px; | ||
| border: 1px solid black; | ||
| perspective: 500px; | ||
| } | ||
|
|
||
| .intermediate { | ||
| width: 100%; | ||
| height: 100%; | ||
| transform: translateX(0); | ||
| transform-style: flat; | ||
| } | ||
|
|
||
| .intermediate.changed { | ||
| transform-style: preserve-3d; | ||
| } | ||
|
|
||
| .transformed { | ||
| width: 100%; | ||
| height: 100%; | ||
| background-color: blue; | ||
| transform: rotateY(45deg); | ||
| } | ||
| </style> | ||
| <script> | ||
| if (window.testRunner) | ||
| testRunner.waitUntilDone(); | ||
|
|
||
| window.addEventListener('load', () => { | ||
| setTimeout(() => { | ||
| document.querySelector('.intermediate').classList.add('changed'); | ||
| if (window.testRunner) | ||
| testRunner.notifyDone(); | ||
| }, 0); | ||
|
|
||
| }, false); | ||
| </script> | ||
| </head> | ||
| <body> | ||
| <div class="container"> | ||
| <div class="intermediate"> | ||
| <div class="transformed"></div> | ||
| </div> | ||
| </div> | ||
| </body> | ||
| </html> |
| @@ -0,0 +1,28 @@ | ||
|
|
||
| PASS Element colors are correct in light color scheme with only light supported color scheme | ||
| PASS Dark color scheme enabled | ||
| PASS Element colors are correct in dark color scheme with only light supported color scheme | ||
| PASS Light color scheme enabled | ||
| PASS Color schemes changed to light and dark | ||
| PASS Element colors are correct in light color scheme with light and dark supported color scheme | ||
| PASS Dark color scheme enabled | ||
| PASS Element colors are correct in dark color scheme with light and dark supported color scheme | ||
| PASS Light color scheme enabled | ||
| PASS Color schemes changed to dark | ||
| PASS Element colors are correct in light color scheme with only dark supported color scheme | ||
| PASS Dark color scheme enabled | ||
| PASS Element colors are correct in dark color scheme with only dark supported color scheme | ||
| PASS Color schemes changed to light and a bogus value | ||
| PASS Element colors are correct in dark color scheme with only light supported color scheme | ||
| PASS Color schemes changed to auto value | ||
| PASS Element colors are correct in dark color scheme with implicit light supported color scheme | ||
| PASS Color schemes changed to light and dark via <meta> element | ||
| PASS Element colors are correct in dark color scheme with light and dark supported color scheme via <meta> element | ||
| PASS Color schemes changed to light value | ||
| PASS Element colors are correct in dark color scheme with explicit light, overriding <meta> element | ||
| PASS Remove test meta element | ||
| PASS Color schemes changed to light and dark | ||
| PASS Element colors are correct in dark color scheme with light and dark supported color scheme | ||
| PASS Color schemes changed to a bogus value and dark | ||
| PASS Element colors are correct in dark color scheme with dark supported color scheme | ||
|
|
| @@ -0,0 +1,128 @@ | ||
| <!DOCTYPE html> | ||
|
|
||
| <!-- webkit-test-runner [ experimental:DarkModeCSSEnabled=true ] --> | ||
|
|
||
| <script src="../resources/testharness.js"></script> | ||
| <script src="../resources/testharnessreport.js"></script> | ||
|
|
||
| <style> | ||
| #testAuto { | ||
| color-scheme: auto; | ||
| } | ||
|
|
||
| #testOnly { | ||
| color-scheme: only; | ||
| } | ||
|
|
||
| #testLight { | ||
| color-scheme: light; | ||
| } | ||
|
|
||
| #testDark { | ||
| color-scheme: dark; | ||
| } | ||
|
|
||
| #testLightDark { | ||
| color-scheme: light dark; | ||
| } | ||
|
|
||
| #testDarkLight { | ||
| color-scheme: dark light; | ||
| } | ||
|
|
||
| #testLightDarkOnly { | ||
| color-scheme: light dark only; | ||
| } | ||
|
|
||
| #testOnlyDark { | ||
| color-scheme: only dark; | ||
| } | ||
|
|
||
| #testLightOnlyDark { | ||
| color-scheme: light only dark; | ||
| } | ||
|
|
||
| #testLightUnknown { | ||
| color-scheme: light foo; | ||
| } | ||
|
|
||
| #testUnknownDarkOnly { | ||
| color-scheme: bar dark only; | ||
| } | ||
|
|
||
| #testLightUnknownOnly { | ||
| color-scheme: light baz only; | ||
| } | ||
|
|
||
| #testInvalidLightAuto { | ||
| color-scheme: light auto; | ||
| } | ||
|
|
||
| #testInvalidAutoDark { | ||
| color-scheme: auto dark; | ||
| } | ||
|
|
||
| #testInvalidLightDarkLight { | ||
| color-scheme: light dark light; | ||
| } | ||
|
|
||
| #testInvalidNumber { | ||
| color-scheme: 42; | ||
| } | ||
|
|
||
| #testInvalidString { | ||
| color-scheme: "foo"; | ||
| } | ||
|
|
||
| #testInvalidLightString { | ||
| color-scheme: light "foo"; | ||
| } | ||
| </style> | ||
|
|
||
| <div id="testAuto"></div> | ||
| <div id="testOnly"></div> | ||
| <div id="testLight"></div> | ||
| <div id="testDark"></div> | ||
| <div id="testLightDark"></div> | ||
| <div id="testDarkLight"></div> | ||
| <div id="testLightDarkOnly"></div> | ||
| <div id="testOnlyDark"></div> | ||
| <div id="testLightOnlyDark"></div> | ||
| <div id="testLightUnknown"></div> | ||
| <div id="testUnknownDarkOnly"></div> | ||
|
|
||
| <div id="testInvalidLightAuto"></div> | ||
| <div id="testInvalidAutoDark"></div> | ||
| <div id="testInvalidLightDarkLight"></div> | ||
| <div id="testInvalidNumber"></div> | ||
| <div id="testInvalidString"></div> | ||
| <div id="testInvalidLightString"></div> | ||
|
|
||
| <script> | ||
| function test_prop(id, property, expected) { | ||
| assert_equals(window.getComputedStyle(document.getElementById(id)).getPropertyValue(property), expected); | ||
| } | ||
|
|
||
| test(function() { | ||
| test_prop("testAuto", "color-scheme", "auto"); | ||
| test_prop("testOnly", "color-scheme", "light only"); | ||
| test_prop("testLight", "color-scheme", "light"); | ||
| test_prop("testDark", "color-scheme", "dark"); | ||
| test_prop("testLightDark", "color-scheme", "light dark"); | ||
| test_prop("testDarkLight", "color-scheme", "light dark"); | ||
| test_prop("testLightDarkOnly", "color-scheme", "light dark only"); | ||
| test_prop("testOnlyDark", "color-scheme", "dark only"); | ||
| test_prop("testLightOnlyDark", "color-scheme", "light dark only"); | ||
| test_prop("testLightUnknown", "color-scheme", "light"); | ||
| test_prop("testUnknownDarkOnly", "color-scheme", "dark only"); | ||
| }, "Test valid values"); | ||
|
|
||
| test(function() { | ||
| test_prop("testInvalidLightAuto", "color-scheme", "auto"); | ||
| test_prop("testInvalidAutoDark", "color-scheme", "auto"); | ||
| test_prop("testInvalidLightDarkLight", "color-scheme", "auto"); | ||
| test_prop("testInvalidNumber", "color-scheme", "auto"); | ||
| test_prop("testInvalidString", "color-scheme", "auto"); | ||
| test_prop("testInvalidLightString", "color-scheme", "auto"); | ||
| }, "Test invalid values"); | ||
| </script> |
| @@ -0,0 +1,160 @@ | ||
| <!DOCTYPE html> | ||
|
|
||
| <!-- webkit-test-runner [ experimental:DarkModeCSSEnabled=true ] --> | ||
|
|
||
| <script src="../resources/testharness.js"></script> | ||
| <script src="../resources/testharnessreport.js"></script> | ||
|
|
||
| <style> | ||
| #test1 { | ||
| color: text; | ||
| } | ||
| </style> | ||
|
|
||
| <div id="test1"></div> | ||
|
|
||
| <script> | ||
| function test_prop(element, prop, expected) { | ||
| assert_equals(window.getComputedStyle(element).getPropertyValue(prop), expected); | ||
| } | ||
|
|
||
| function test_color_is_white(id) { | ||
| test_prop(document.getElementById("test1"), "color", "rgb(255, 255, 255)"); | ||
| } | ||
|
|
||
| function test_color_is_black(id) { | ||
| test_prop(document.getElementById("test1"), "color", "rgb(0, 0, 0)"); | ||
| } | ||
|
|
||
| test(function() { | ||
| // The semantic text color should be black. | ||
| test_color_is_black("test1"); | ||
| }, "Element colors are correct in light color scheme with only light supported color scheme"); | ||
|
|
||
| test(function() { | ||
| if (window.internals) | ||
| internals.settings.setUseDarkAppearance(true); | ||
| }, "Dark color scheme enabled"); | ||
|
|
||
| test(function() { | ||
| // The semantic text color should be black, and not change. | ||
| test_color_is_black("test1"); | ||
| }, "Element colors are correct in dark color scheme with only light supported color scheme"); | ||
|
|
||
| test(function() { | ||
| if (window.internals) | ||
| internals.settings.setUseDarkAppearance(false); | ||
| }, "Light color scheme enabled"); | ||
|
|
||
| test(function() { | ||
| document.body.style.setProperty("color-scheme", "light dark"); | ||
| test_prop(document.body, "color-scheme", "light dark"); | ||
| }, "Color schemes changed to light and dark"); | ||
|
|
||
| test(function() { | ||
| // The semantic text color should be black. | ||
| test_color_is_black("test1"); | ||
| }, "Element colors are correct in light color scheme with light and dark supported color scheme"); | ||
|
|
||
| test(function() { | ||
| if (window.internals) | ||
| internals.settings.setUseDarkAppearance(true); | ||
| }, "Dark color scheme enabled"); | ||
|
|
||
| test(function() { | ||
| // The semantic text color should be white. | ||
| test_color_is_white("test1"); | ||
| }, "Element colors are correct in dark color scheme with light and dark supported color scheme"); | ||
|
|
||
| test(function() { | ||
| if (window.internals) | ||
| internals.settings.setUseDarkAppearance(false); | ||
| }, "Light color scheme enabled"); | ||
|
|
||
| test(function() { | ||
| document.body.style.setProperty("color-scheme", "dark"); | ||
| test_prop(document.body, "color-scheme", "dark"); | ||
| }, "Color schemes changed to dark"); | ||
|
|
||
| test(function() { | ||
| // The semantic text color should be white. | ||
| test_color_is_white("test1"); | ||
| }, "Element colors are correct in light color scheme with only dark supported color scheme"); | ||
|
|
||
| test(function() { | ||
| if (window.internals) | ||
| internals.settings.setUseDarkAppearance(true); | ||
| }, "Dark color scheme enabled"); | ||
|
|
||
| test(function() { | ||
| // The semantic text color should be white still. | ||
| test_color_is_white("test1"); | ||
| }, "Element colors are correct in dark color scheme with only dark supported color scheme"); | ||
|
|
||
| test(function() { | ||
| document.body.style.setProperty("color-scheme", "light foo"); | ||
| test_prop(document.body, "color-scheme", "light"); | ||
| }, "Color schemes changed to light and a bogus value"); | ||
|
|
||
| test(function() { | ||
| // The semantic text color should be black again. | ||
| test_color_is_black("test1"); | ||
| }, "Element colors are correct in dark color scheme with only light supported color scheme"); | ||
|
|
||
| test(function() { | ||
| document.body.style.setProperty("color-scheme", "auto"); | ||
| test_prop(document.body, "color-scheme", "auto"); | ||
| }, "Color schemes changed to auto value"); | ||
|
|
||
| test(function() { | ||
| // The semantic text color should be black still. | ||
| test_color_is_black("test1"); | ||
| }, "Element colors are correct in dark color scheme with implicit light supported color scheme"); | ||
|
|
||
| test(function() { | ||
| let meta = document.createElement("meta"); | ||
| meta.id = "test-meta"; | ||
| meta.name = "color-scheme"; | ||
| meta.content = "light dark"; | ||
| document.head.appendChild(meta); | ||
| }, "Color schemes changed to light and dark via <meta> element"); | ||
|
|
||
| test(function() { | ||
| // The semantic text color should be white now. | ||
| test_color_is_white("test1"); | ||
| }, "Element colors are correct in dark color scheme with light and dark supported color scheme via <meta> element"); | ||
|
|
||
| test(function() { | ||
| document.body.style.setProperty("color-scheme", "light"); | ||
| test_prop(document.body, "color-scheme", "light"); | ||
| }, "Color schemes changed to light value"); | ||
|
|
||
| test(function() { | ||
| // The semantic text color should be black again. | ||
| test_color_is_black("test1"); | ||
| }, "Element colors are correct in dark color scheme with explicit light, overriding <meta> element"); | ||
|
|
||
| test(function() { | ||
| document.getElementById("test-meta").remove(); | ||
| }, "Remove test meta element"); | ||
|
|
||
| test(function() { | ||
| document.body.style.setProperty("color-scheme", "light dark"); | ||
| test_prop(document.body, "color-scheme", "light dark"); | ||
| }, "Color schemes changed to light and dark"); | ||
|
|
||
| test(function() { | ||
| // The semantic text color should be white now. | ||
| test_color_is_white("test1"); | ||
| }, "Element colors are correct in dark color scheme with light and dark supported color scheme"); | ||
|
|
||
| test(function() { | ||
| document.body.style.setProperty("color-scheme", "foo dark"); | ||
| test_prop(document.body, "color-scheme", "dark"); | ||
| }, "Color schemes changed to a bogus value and dark"); | ||
|
|
||
| test(function() { | ||
| // The semantic text color should be white still. | ||
| test_color_is_white("test1"); | ||
| }, "Element colors are correct in dark color scheme with dark supported color scheme"); | ||
| </script> |
| @@ -0,0 +1,25 @@ | ||
|
|
||
| PASS Element colors are correct in light color scheme with only light color scheme | ||
| PASS Dark color scheme enabled | ||
| PASS Element colors are correct in dark color scheme with only light color scheme | ||
| PASS Light color scheme enabled | ||
| PASS Color schemes changed to light and dark | ||
| PASS Element colors are correct in light color scheme with light and dark color scheme | ||
| PASS Dark color scheme enabled | ||
| PASS Element colors are correct in dark color scheme with light and dark color scheme | ||
| PASS Light color scheme enabled | ||
| PASS Color schemes changed to dark | ||
| PASS Element colors are correct in light color scheme with only dark color scheme | ||
| PASS Dark color scheme enabled | ||
| PASS Element colors are correct in dark color scheme with only dark color scheme | ||
| PASS Color schemes changed to light and a bogus value | ||
| PASS Element colors are correct in dark color scheme with only light color scheme | ||
| PASS Color schemes changed to empty value | ||
| PASS Element colors are correct in dark color scheme with implicit light color scheme | ||
| PASS Color schemes changed to light,dark | ||
| PASS Element colors are in light color scheme since comma is not an allowed seperator | ||
| PASS Color schemes changed to foo\vdark | ||
| PASS Element colors are in light color scheme since vertical tab is not an allowed seperator | ||
| PASS Color schemes changed to a bogus value and dark | ||
| PASS Element colors are correct in dark color scheme with dark color scheme | ||
|
|
| @@ -0,0 +1,138 @@ | ||
| <!DOCTYPE html> | ||
|
|
||
| <!-- webkit-test-runner [ experimental:DarkModeCSSEnabled=true ] --> | ||
|
|
||
| <script src="../resources/testharness.js"></script> | ||
| <script src="../resources/testharnessreport.js"></script> | ||
|
|
||
| <style> | ||
| #test1 { | ||
| color: text; | ||
| } | ||
| </style> | ||
|
|
||
| <meta id="meta" name="color-scheme" content="light"> | ||
|
|
||
| <div id="test1"></div> | ||
|
|
||
| <script> | ||
| function test_prop(id, prop, expected) { | ||
| assert_equals(window.getComputedStyle(document.getElementById(id)).getPropertyValue(prop).trim(), expected); | ||
| } | ||
|
|
||
| function test_color_is_white(id) { | ||
| test_prop("test1", "color", "rgb(255, 255, 255)"); | ||
| } | ||
|
|
||
| function test_color_is_black(id) { | ||
| test_prop("test1", "color", "rgb(0, 0, 0)"); | ||
| } | ||
|
|
||
| test(function() { | ||
| // The semantic text color should be black. | ||
| test_color_is_black("test1"); | ||
| }, "Element colors are correct in light color scheme with only light color scheme"); | ||
|
|
||
| test(function() { | ||
| if (window.internals) | ||
| internals.settings.setUseDarkAppearance(true); | ||
| }, "Dark color scheme enabled"); | ||
|
|
||
| test(function() { | ||
| // The semantic text color should be black, and not change. | ||
| test_color_is_black("test1"); | ||
| }, "Element colors are correct in dark color scheme with only light color scheme"); | ||
|
|
||
| test(function() { | ||
| if (window.internals) | ||
| internals.settings.setUseDarkAppearance(false); | ||
| }, "Light color scheme enabled"); | ||
|
|
||
| test(function() { | ||
| document.getElementById("meta").content = "light dark"; | ||
| }, "Color schemes changed to light and dark"); | ||
|
|
||
| test(function() { | ||
| // The semantic text color should be black. | ||
| test_color_is_black("test1"); | ||
| }, "Element colors are correct in light color scheme with light and dark color scheme"); | ||
|
|
||
| test(function() { | ||
| if (window.internals) | ||
| internals.settings.setUseDarkAppearance(true); | ||
| }, "Dark color scheme enabled"); | ||
|
|
||
| test(function() { | ||
| // The semantic text color should be white. | ||
| test_color_is_white("test1"); | ||
| }, "Element colors are correct in dark color scheme with light and dark color scheme"); | ||
|
|
||
| test(function() { | ||
| if (window.internals) | ||
| internals.settings.setUseDarkAppearance(false); | ||
| }, "Light color scheme enabled"); | ||
|
|
||
| test(function() { | ||
| document.getElementById("meta").content = "dark"; | ||
| }, "Color schemes changed to dark"); | ||
|
|
||
| test(function() { | ||
| // The semantic text color should be white. | ||
| test_color_is_white("test1"); | ||
| }, "Element colors are correct in light color scheme with only dark color scheme"); | ||
|
|
||
| test(function() { | ||
| if (window.internals) | ||
| internals.settings.setUseDarkAppearance(true); | ||
| }, "Dark color scheme enabled"); | ||
|
|
||
| test(function() { | ||
| // The semantic text color should be white still. | ||
| test_color_is_white("test1"); | ||
| }, "Element colors are correct in dark color scheme with only dark color scheme"); | ||
|
|
||
| test(function() { | ||
| document.getElementById("meta").content = "\tlight foo "; | ||
| }, "Color schemes changed to light and a bogus value"); | ||
|
|
||
| test(function() { | ||
| // The semantic text color should be black again. | ||
| test_color_is_black("test1"); | ||
| }, "Element colors are correct in dark color scheme with only light color scheme"); | ||
|
|
||
| test(function() { | ||
| document.getElementById("meta").content = ""; | ||
| }, "Color schemes changed to empty value"); | ||
|
|
||
| test(function() { | ||
| // The semantic text color should be black still. | ||
| test_color_is_black("test1"); | ||
| }, "Element colors are correct in dark color scheme with implicit light color scheme"); | ||
|
|
||
| test(function() { | ||
| document.getElementById("meta").content = " light,dark "; | ||
| }, "Color schemes changed to light,dark"); | ||
|
|
||
| test(function() { | ||
| // The semantic text color should be black now. | ||
| test_color_is_black("test1"); | ||
| }, "Element colors are in light color scheme since comma is not an allowed seperator"); | ||
|
|
||
| test(function() { | ||
| document.getElementById("meta").content = "foo\vdark "; | ||
| }, "Color schemes changed to foo\\vdark"); | ||
|
|
||
| test(function() { | ||
| // The semantic text color should be black still. | ||
| test_color_is_black("test1"); | ||
| }, "Element colors are in light color scheme since vertical tab is not an allowed seperator"); | ||
|
|
||
| test(function() { | ||
| document.getElementById("meta").content = " foo\ndark"; | ||
| }, "Color schemes changed to a bogus value and dark"); | ||
|
|
||
| test(function() { | ||
| // The semantic text color should be white still. | ||
| test_color_is_white("test1"); | ||
| }, "Element colors are correct in dark color scheme with dark color scheme"); | ||
| </script> |
| @@ -0,0 +1,5 @@ | ||
|
|
||
| PASS Element colors are correct in light color scheme with light and dark color scheme | ||
| PASS Dark color scheme enabled | ||
| PASS Element colors are correct in dark color scheme with light and dark color scheme | ||
|
|
| @@ -0,0 +1,44 @@ | ||
| <!DOCTYPE html> | ||
|
|
||
| <!-- webkit-test-runner [ experimental:DarkModeCSSEnabled=true ] --> | ||
|
|
||
| <script src="../resources/testharness.js"></script> | ||
| <script src="../resources/testharnessreport.js"></script> | ||
|
|
||
| <style> | ||
| #test1 { | ||
| color-scheme: light dark; | ||
| color: text; | ||
| } | ||
| </style> | ||
|
|
||
| <div id="test1"></div> | ||
|
|
||
| <script> | ||
| function test_prop(id, prop, expected) { | ||
| assert_equals(window.getComputedStyle(document.getElementById(id)).getPropertyValue(prop), expected); | ||
| } | ||
|
|
||
| function test_color_is_white(id) { | ||
| test_prop("test1", "color", "rgb(255, 255, 255)"); | ||
| } | ||
|
|
||
| function test_color_is_black(id) { | ||
| test_prop("test1", "color", "rgb(0, 0, 0)"); | ||
| } | ||
|
|
||
| test(function() { | ||
| // The semantic text color should be black. | ||
| test_color_is_black("test1"); | ||
| }, "Element colors are correct in light color scheme with light and dark color scheme"); | ||
|
|
||
| test(function() { | ||
| if (window.internals) | ||
| internals.settings.setUseDarkAppearance(true); | ||
| }, "Dark color scheme enabled"); | ||
|
|
||
| test(function() { | ||
| // The semantic text color should be white. | ||
| test_color_is_white("test1"); | ||
| }, "Element colors are correct in dark color scheme with light and dark color scheme"); | ||
| </script> |
| @@ -0,0 +1,17 @@ | ||
|
|
||
| PASS Set dark appearance | ||
| PASS Set view to transparent | ||
| PASS Body Element color scheme is light and dark | ||
| PASS Document Element color scheme is auto | ||
| PASS Document scrollbar overlay style is light | ||
| PASS Document scrollbar is using dark appearance | ||
| PASS Element scrollbar overlay style is default | ||
| PASS Element scrollbar is using dark appearance | ||
| PASS Set color scheme to light on the document element | ||
| PASS Body Element color scheme is light and dark | ||
| PASS Document Element color scheme is light | ||
| PASS Document scrollbar overlay style is default | ||
| PASS Document scrollbar is using light appearance | ||
| PASS Element scrollbar overlay style is default | ||
| PASS Element scrollbar is using dark appearance | ||
|
|
| @@ -0,0 +1,114 @@ | ||
| <!DOCTYPE html> | ||
|
|
||
| <!-- webkit-test-runner [ experimental:DarkModeCSSEnabled=true ] --> | ||
|
|
||
| <script src="../resources/testharness.js"></script> | ||
| <script src="../resources/testharnessreport.js"></script> | ||
|
|
||
| <style> | ||
| body { | ||
| color-scheme: light dark; | ||
| } | ||
|
|
||
| #test { | ||
| overflow-x: hidden; | ||
| overflow-y: scroll; | ||
| width: 100px; | ||
| height: 50px; | ||
| } | ||
|
|
||
| #test-content { | ||
| width: 100px; | ||
| height: 100px; | ||
| } | ||
| </style> | ||
|
|
||
| <body><div id="test"><div id="test-content"></div></div></body> | ||
|
|
||
| <script> | ||
| function test_prop(element, prop, expected) { | ||
| assert_equals(window.getComputedStyle(element).getPropertyValue(prop), expected); | ||
| } | ||
|
|
||
| test(function() { | ||
| if (!window.internals) | ||
| return; | ||
| internals.settings.setUseDarkAppearance(true); | ||
| }, "Set dark appearance"); | ||
|
|
||
| test(function() { | ||
| if (!window.internals) | ||
| return; | ||
| internals.setViewIsTransparent(true); | ||
| }, "Set view to transparent"); | ||
|
|
||
| test(function() { | ||
| test_prop(document.body, "color-scheme", "light dark"); | ||
| }, "Body Element color scheme is light and dark"); | ||
|
|
||
| test(function() { | ||
| test_prop(document.documentElement, "color-scheme", "auto"); | ||
| }, "Document Element color scheme is auto"); | ||
|
|
||
| test(function() { | ||
| if (!window.internals) | ||
| return; | ||
| assert_equals(internals.scrollbarOverlayStyle(), "light"); | ||
| }, "Document scrollbar overlay style is light"); | ||
|
|
||
| test(function() { | ||
| if (!window.internals) | ||
| return; | ||
| assert_equals(internals.scrollbarUsingDarkAppearance(), true); | ||
| }, "Document scrollbar is using dark appearance"); | ||
|
|
||
| test(function() { | ||
| if (!window.internals) | ||
| return; | ||
| assert_equals(internals.scrollbarOverlayStyle(document.getElementById("test")), "default"); | ||
| }, "Element scrollbar overlay style is default"); | ||
|
|
||
| test(function() { | ||
| if (!window.internals) | ||
| return; | ||
| assert_equals(internals.scrollbarUsingDarkAppearance(document.getElementById("test")), true); | ||
| }, "Element scrollbar is using dark appearance"); | ||
|
|
||
| test(function() { | ||
| let styleElement = document.createElement("style"); | ||
| styleElement.textContent = ":root { color-scheme: light }"; | ||
| document.head.appendChild(styleElement); | ||
| }, "Set color scheme to light on the document element"); | ||
|
|
||
| test(function() { | ||
| test_prop(document.body, "color-scheme", "light dark"); | ||
| }, "Body Element color scheme is light and dark"); | ||
|
|
||
| test(function() { | ||
| test_prop(document.documentElement, "color-scheme", "light"); | ||
| }, "Document Element color scheme is light"); | ||
|
|
||
| test(function() { | ||
| if (!window.internals) | ||
| return; | ||
| assert_equals(internals.scrollbarOverlayStyle(), "default"); | ||
| }, "Document scrollbar overlay style is default"); | ||
|
|
||
| test(function() { | ||
| if (!window.internals) | ||
| return; | ||
| assert_equals(internals.scrollbarUsingDarkAppearance(), false); | ||
| }, "Document scrollbar is using light appearance"); | ||
|
|
||
| test(function() { | ||
| if (!window.internals) | ||
| return; | ||
| assert_equals(internals.scrollbarOverlayStyle(document.getElementById("test")), "default"); | ||
| }, "Element scrollbar overlay style is default"); | ||
|
|
||
| test(function() { | ||
| if (!window.internals) | ||
| return; | ||
| assert_equals(internals.scrollbarUsingDarkAppearance(document.getElementById("test")), true); | ||
| }, "Element scrollbar is using dark appearance"); | ||
| </script> |
| @@ -0,0 +1,167 @@ | ||
| <!DOCTYPE html> | ||
|
|
||
| <!-- webkit-test-runner [ experimental:DarkModeCSSEnabled=true ] --> | ||
|
|
||
| <script src="../../resources/testharness.js"></script> | ||
| <script src="../../resources/testharnessreport.js"></script> | ||
|
|
||
| <style> | ||
| #test1 { | ||
| color: text; | ||
| } | ||
| </style> | ||
|
|
||
| <div id="test1"></div> | ||
|
|
||
| <script> | ||
| function test_prop(element, prop, expected) { | ||
| assert_equals(window.getComputedStyle(element).getPropertyValue(prop), expected); | ||
| } | ||
|
|
||
| function test_color_is_white(id) { | ||
| test_prop(document.getElementById("test1"), "color", "rgb(255, 255, 255)"); | ||
| } | ||
|
|
||
| function test_color_is_black(id) { | ||
| test_prop(document.getElementById("test1"), "color", "rgb(0, 0, 0)"); | ||
| } | ||
|
|
||
| test(function() { | ||
| // The semantic text color should be black. | ||
| test_color_is_black("test1"); | ||
| }, "Element colors are correct in light color scheme with only light supported color scheme"); | ||
|
|
||
| test(function() { | ||
| if (window.internals) | ||
| internals.settings.setUseDarkAppearance(true); | ||
| }, "Dark color scheme enabled"); | ||
|
|
||
| test(function() { | ||
| // The semantic text color should be black, and not change. | ||
| test_color_is_black("test1"); | ||
| }, "Element colors are correct in dark color scheme with only light supported color scheme"); | ||
|
|
||
| test(function() { | ||
| if (window.internals) | ||
| internals.settings.setUseDarkAppearance(false); | ||
| }, "Light color scheme enabled"); | ||
|
|
||
| test(function() { | ||
| document.body.style.setProperty("supported-color-schemes", "light dark"); | ||
| test_prop(document.body, "supported-color-schemes", "light dark"); | ||
| test_prop(document.body, "color-scheme", "light dark"); | ||
| }, "Supported color schemes changed to light and dark"); | ||
|
|
||
| test(function() { | ||
| // The semantic text color should be black. | ||
| test_color_is_black("test1"); | ||
| }, "Element colors are correct in light color scheme with light and dark supported color scheme"); | ||
|
|
||
| test(function() { | ||
| if (window.internals) | ||
| internals.settings.setUseDarkAppearance(true); | ||
| }, "Dark color scheme enabled"); | ||
|
|
||
| test(function() { | ||
| // The semantic text color should be white. | ||
| test_color_is_white("test1"); | ||
| }, "Element colors are correct in dark color scheme with light and dark supported color scheme"); | ||
|
|
||
| test(function() { | ||
| if (window.internals) | ||
| internals.settings.setUseDarkAppearance(false); | ||
| }, "Light color scheme enabled"); | ||
|
|
||
| test(function() { | ||
| document.body.style.setProperty("supported-color-schemes", "dark"); | ||
| test_prop(document.body, "supported-color-schemes", "dark"); | ||
| test_prop(document.body, "color-scheme", "dark"); | ||
| }, "Supported color schemes changed to dark"); | ||
|
|
||
| test(function() { | ||
| // The semantic text color should be white. | ||
| test_color_is_white("test1"); | ||
| }, "Element colors are correct in light color scheme with only dark supported color scheme"); | ||
|
|
||
| test(function() { | ||
| if (window.internals) | ||
| internals.settings.setUseDarkAppearance(true); | ||
| }, "Dark color scheme enabled"); | ||
|
|
||
| test(function() { | ||
| // The semantic text color should be white still. | ||
| test_color_is_white("test1"); | ||
| }, "Element colors are correct in dark color scheme with only dark supported color scheme"); | ||
|
|
||
| test(function() { | ||
| document.body.style.setProperty("supported-color-schemes", "light foo"); | ||
| test_prop(document.body, "supported-color-schemes", "light"); | ||
| test_prop(document.body, "color-scheme", "light"); | ||
| }, "Supported color schemes changed to light and a bogus value"); | ||
|
|
||
| test(function() { | ||
| // The semantic text color should be black again. | ||
| test_color_is_black("test1"); | ||
| }, "Element colors are correct in dark color scheme with only light supported color scheme"); | ||
|
|
||
| test(function() { | ||
| document.body.style.setProperty("supported-color-schemes", "auto"); | ||
| test_prop(document.body, "supported-color-schemes", "auto"); | ||
| test_prop(document.body, "color-scheme", "auto"); | ||
| }, "Supported color schemes changed to auto value"); | ||
|
|
||
| test(function() { | ||
| // The semantic text color should be black still. | ||
| test_color_is_black("test1"); | ||
| }, "Element colors are correct in dark color scheme with implicit light supported color scheme"); | ||
|
|
||
| test(function() { | ||
| let meta = document.createElement("meta"); | ||
| meta.id = "test-meta"; | ||
| meta.name = "supported-color-schemes"; | ||
| meta.content = "light dark"; | ||
| document.head.appendChild(meta); | ||
| }, "Supported color schemes changed to light and dark via <meta> element"); | ||
|
|
||
| test(function() { | ||
| // The semantic text color should be white now. | ||
| test_color_is_white("test1"); | ||
| }, "Element colors are correct in dark color scheme with light and dark supported color scheme via <meta> element"); | ||
|
|
||
| test(function() { | ||
| document.body.style.setProperty("supported-color-schemes", "light"); | ||
| test_prop(document.body, "supported-color-schemes", "light"); | ||
| test_prop(document.body, "color-scheme", "light"); | ||
| }, "Supported color schemes changed to light value"); | ||
|
|
||
| test(function() { | ||
| // The semantic text color should be black again. | ||
| test_color_is_black("test1"); | ||
| }, "Element colors are correct in dark color scheme with explicit light, overriding <meta> element"); | ||
|
|
||
| test(function() { | ||
| document.getElementById("test-meta").remove(); | ||
| }, "Remove test meta element"); | ||
|
|
||
| test(function() { | ||
| document.body.style.setProperty("supported-color-schemes", "light dark"); | ||
| test_prop(document.body, "supported-color-schemes", "light dark"); | ||
| test_prop(document.body, "color-scheme", "light dark"); | ||
| }, "Supported color schemes changed to light and dark"); | ||
|
|
||
| test(function() { | ||
| // The semantic text color should be white now. | ||
| test_color_is_white("test1"); | ||
| }, "Element colors are correct in dark color scheme with light and dark supported color scheme"); | ||
|
|
||
| test(function() { | ||
| document.body.style.setProperty("supported-color-schemes", "foo dark"); | ||
| test_prop(document.body, "supported-color-schemes", "dark"); | ||
| test_prop(document.body, "color-scheme", "dark"); | ||
| }, "Supported color schemes changed to a bogus value and dark"); | ||
|
|
||
| test(function() { | ||
| // The semantic text color should be white still. | ||
| test_color_is_white("test1"); | ||
| }, "Element colors are correct in dark color scheme with dark supported color scheme"); | ||
| </script> |
| @@ -0,0 +1,23 @@ | ||
|
|
||
| PASS Element colors are correct in light color scheme with only light color scheme | ||
| PASS Dark color scheme enabled | ||
| PASS Element colors are correct in dark color scheme with only light color scheme | ||
| PASS Light color scheme enabled | ||
| PASS Supported color schemes changed to light and dark | ||
| PASS Element colors are correct in light color scheme with light and dark color scheme | ||
| PASS Dark color scheme enabled | ||
| PASS Element colors are correct in dark color scheme with light and dark color scheme | ||
| PASS Light color scheme enabled | ||
| PASS Supported color schemes changed to dark | ||
| PASS Element colors are correct in light color scheme with only dark color scheme | ||
| PASS Dark color scheme enabled | ||
| PASS Element colors are correct in dark color scheme with only dark color scheme | ||
| PASS Supported color schemes changed to light and a bogus value | ||
| PASS Element colors are correct in dark color scheme with only light color scheme | ||
| PASS Supported color schemes changed to empty value | ||
| PASS Element colors are correct in dark color scheme with implicit light color scheme | ||
| PASS Supported color schemes changed to light,dark | ||
| PASS Element colors are in light color scheme since comma is not an allowed seperator | ||
| PASS Supported color schemes changed to a bogus value and dark | ||
| PASS Element colors are correct in dark color scheme with dark color scheme | ||
|
|
| @@ -0,0 +1,129 @@ | ||
| <!DOCTYPE html> | ||
|
|
||
| <!-- webkit-test-runner [ experimental:DarkModeCSSEnabled=true ] --> | ||
|
|
||
| <script src="../../resources/testharness.js"></script> | ||
| <script src="../../resources/testharnessreport.js"></script> | ||
|
|
||
| <style> | ||
| #test1 { | ||
| color: text; | ||
| } | ||
| </style> | ||
|
|
||
| <meta id="meta" name="supported-color-schemes" content="light"> | ||
|
|
||
| <div id="test1"></div> | ||
|
|
||
| <script> | ||
| function test_prop(id, prop, expected) { | ||
| assert_equals(window.getComputedStyle(document.getElementById(id)).getPropertyValue(prop).trim(), expected); | ||
| } | ||
|
|
||
| function test_color_is_white(id) { | ||
| test_prop("test1", "color", "rgb(255, 255, 255)"); | ||
| } | ||
|
|
||
| function test_color_is_black(id) { | ||
| test_prop("test1", "color", "rgb(0, 0, 0)"); | ||
| } | ||
|
|
||
| test(function() { | ||
| // The semantic text color should be black. | ||
| test_color_is_black("test1"); | ||
| }, "Element colors are correct in light color scheme with only light color scheme"); | ||
|
|
||
| test(function() { | ||
| if (window.internals) | ||
| internals.settings.setUseDarkAppearance(true); | ||
| }, "Dark color scheme enabled"); | ||
|
|
||
| test(function() { | ||
| // The semantic text color should be black, and not change. | ||
| test_color_is_black("test1"); | ||
| }, "Element colors are correct in dark color scheme with only light color scheme"); | ||
|
|
||
| test(function() { | ||
| if (window.internals) | ||
| internals.settings.setUseDarkAppearance(false); | ||
| }, "Light color scheme enabled"); | ||
|
|
||
| test(function() { | ||
| document.getElementById("meta").content = "light dark"; | ||
| }, "Supported color schemes changed to light and dark"); | ||
|
|
||
| test(function() { | ||
| // The semantic text color should be black. | ||
| test_color_is_black("test1"); | ||
| }, "Element colors are correct in light color scheme with light and dark color scheme"); | ||
|
|
||
| test(function() { | ||
| if (window.internals) | ||
| internals.settings.setUseDarkAppearance(true); | ||
| }, "Dark color scheme enabled"); | ||
|
|
||
| test(function() { | ||
| // The semantic text color should be white. | ||
| test_color_is_white("test1"); | ||
| }, "Element colors are correct in dark color scheme with light and dark color scheme"); | ||
|
|
||
| test(function() { | ||
| if (window.internals) | ||
| internals.settings.setUseDarkAppearance(false); | ||
| }, "Light color scheme enabled"); | ||
|
|
||
| test(function() { | ||
| document.getElementById("meta").content = "dark"; | ||
| }, "Supported color schemes changed to dark"); | ||
|
|
||
| test(function() { | ||
| // The semantic text color should be white. | ||
| test_color_is_white("test1"); | ||
| }, "Element colors are correct in light color scheme with only dark color scheme"); | ||
|
|
||
| test(function() { | ||
| if (window.internals) | ||
| internals.settings.setUseDarkAppearance(true); | ||
| }, "Dark color scheme enabled"); | ||
|
|
||
| test(function() { | ||
| // The semantic text color should be white still. | ||
| test_color_is_white("test1"); | ||
| }, "Element colors are correct in dark color scheme with only dark color scheme"); | ||
|
|
||
| test(function() { | ||
| document.getElementById("meta").content = "light ,foo "; | ||
| }, "Supported color schemes changed to light and a bogus value"); | ||
|
|
||
| test(function() { | ||
| // The semantic text color should be black again. | ||
| test_color_is_black("test1"); | ||
| }, "Element colors are correct in dark color scheme with only light color scheme"); | ||
|
|
||
| test(function() { | ||
| document.getElementById("meta").content = ""; | ||
| }, "Supported color schemes changed to empty value"); | ||
|
|
||
| test(function() { | ||
| // The semantic text color should be black still. | ||
| test_color_is_black("test1"); | ||
| }, "Element colors are correct in dark color scheme with implicit light color scheme"); | ||
|
|
||
| test(function() { | ||
| document.getElementById("meta").content = " light,dark "; | ||
| }, "Supported color schemes changed to light,dark"); | ||
|
|
||
| test(function() { | ||
| // The semantic text color should be black now. | ||
| test_color_is_black("test1"); | ||
| }, "Element colors are in light color scheme since comma is not an allowed seperator"); | ||
|
|
||
| test(function() { | ||
| document.getElementById("meta").content = " foo dark"; | ||
| }, "Supported color schemes changed to a bogus value and dark"); | ||
|
|
||
| test(function() { | ||
| // The semantic text color should be white still. | ||
| test_color_is_white("test1"); | ||
| }, "Element colors are correct in dark color scheme with dark color scheme"); | ||
| </script> |
| @@ -0,0 +1,20 @@ | ||
|
|
||
| PASS Element colors are correct in light color scheme with only light supported color scheme | ||
| PASS Color schemes changed to light and dark | ||
| PASS Element colors are correct in light color scheme with light and dark supported color scheme | ||
| PASS Color schemes changed to dark | ||
| PASS Element colors are correct in light color scheme with only dark supported color scheme | ||
| PASS Color schemes changed to light and a bogus value | ||
| PASS Element colors are correct in light color scheme with only light supported color scheme | ||
| PASS Color schemes changed to auto value | ||
| PASS Element colors are correct in light color scheme with implicit light supported color scheme | ||
| PASS Color schemes changed to light and dark via <meta> element | ||
| PASS Element colors are correct in light color scheme with light and dark supported color scheme via <meta> element | ||
| PASS Color schemes changed to light value | ||
| PASS Element colors are correct in light color scheme with explicit light, overriding <meta> element | ||
| PASS Remove test meta element | ||
| PASS Color schemes changed to light and dark | ||
| PASS Element colors are correct in light color scheme with light and dark supported color scheme | ||
| PASS Color schemes changed to a bogus value and dark | ||
| PASS Element colors are correct in light color scheme with dark supported color scheme | ||
|
|
| @@ -0,0 +1,105 @@ | ||
| <!DOCTYPE html> | ||
|
|
||
| <!-- webkit-test-runner [ experimental:DarkModeCSSEnabled=true ] --> | ||
|
|
||
| <script src="../../resources/testharness.js"></script> | ||
| <script src="../../resources/testharnessreport.js"></script> | ||
|
|
||
| <style> | ||
| #test1 { | ||
| color: text; | ||
| } | ||
| </style> | ||
|
|
||
| <div id="test1"></div> | ||
|
|
||
| <script> | ||
| function test_prop(id, prop, expected) { | ||
| assert_equals(window.getComputedStyle(document.getElementById(id)).getPropertyValue(prop), expected); | ||
| } | ||
|
|
||
| function test_color_is_black(id) { | ||
| test_prop("test1", "color", "rgb(0, 0, 0)"); | ||
| } | ||
|
|
||
| test(function() { | ||
| // The semantic text color should be black. | ||
| test_color_is_black("test1"); | ||
| }, "Element colors are correct in light color scheme with only light supported color scheme"); | ||
|
|
||
| test(function() { | ||
| document.body.style.setProperty("color-scheme", "light dark"); | ||
| }, "Color schemes changed to light and dark"); | ||
|
|
||
| test(function() { | ||
| // The semantic text color should be black. | ||
| test_color_is_black("test1"); | ||
| }, "Element colors are correct in light color scheme with light and dark supported color scheme"); | ||
|
|
||
| test(function() { | ||
| document.body.style.setProperty("color-scheme", "dark"); | ||
| }, "Color schemes changed to dark"); | ||
|
|
||
| test(function() { | ||
| test_color_is_black("test1"); | ||
| }, "Element colors are correct in light color scheme with only dark supported color scheme"); | ||
|
|
||
| test(function() { | ||
| document.body.style.setProperty("color-scheme", "light foo"); | ||
| }, "Color schemes changed to light and a bogus value"); | ||
|
|
||
| test(function() { | ||
| // The semantic text color should be black again. | ||
| test_color_is_black("test1"); | ||
| }, "Element colors are correct in light color scheme with only light supported color scheme"); | ||
|
|
||
| test(function() { | ||
| document.body.style.setProperty("color-scheme", "auto"); | ||
| }, "Color schemes changed to auto value"); | ||
|
|
||
| test(function() { | ||
| // The semantic text color should be black still. | ||
| test_color_is_black("test1"); | ||
| }, "Element colors are correct in light color scheme with implicit light supported color scheme"); | ||
|
|
||
| test(function() { | ||
| let meta = document.createElement("meta"); | ||
| meta.id = "test-meta"; | ||
| meta.name = "color-scheme"; | ||
| meta.content = "light dark"; | ||
| document.head.appendChild(meta); | ||
| }, "Color schemes changed to light and dark via <meta> element"); | ||
|
|
||
| test(function() { | ||
| test_color_is_black("test1"); | ||
| }, "Element colors are correct in light color scheme with light and dark supported color scheme via <meta> element"); | ||
|
|
||
| test(function() { | ||
| document.body.style.setProperty("color-scheme", "light"); | ||
| }, "Color schemes changed to light value"); | ||
|
|
||
| test(function() { | ||
| // The semantic text color should be black again. | ||
| test_color_is_black("test1"); | ||
| }, "Element colors are correct in light color scheme with explicit light, overriding <meta> element"); | ||
|
|
||
| test(function() { | ||
| document.getElementById("test-meta").remove(); | ||
| }, "Remove test meta element"); | ||
|
|
||
| test(function() { | ||
| document.body.style.setProperty("color-scheme", "light dark"); | ||
| }, "Color schemes changed to light and dark"); | ||
|
|
||
| test(function() { | ||
| test_color_is_black("test1"); | ||
| }, "Element colors are correct in light color scheme with light and dark supported color scheme"); | ||
|
|
||
| test(function() { | ||
| document.body.style.setProperty("color-scheme", "foo dark"); | ||
| }, "Color schemes changed to a bogus value and dark"); | ||
|
|
||
| test(function() { | ||
| test_color_is_black("test1"); | ||
| }, "Element colors are correct in light color scheme with dark supported color scheme"); | ||
| </script> |
| @@ -0,0 +1,15 @@ | ||
|
|
||
| PASS Element colors are correct in light color scheme with only light color scheme | ||
| PASS Color schemes changed to light and dark | ||
| PASS Element colors are correct in light color scheme with light and dark color scheme | ||
| PASS Color schemes changed to dark | ||
| PASS Element colors are correct in light color scheme with only dark color scheme | ||
| PASS Color schemes changed to light and a bogus value | ||
| PASS Element colors are correct in light color scheme with only light color scheme | ||
| PASS Color schemes changed to empty value | ||
| PASS Element colors are correct in light color scheme with implicit light color scheme | ||
| PASS Color schemes changed to light and dark | ||
| PASS Element colors are correct in light color scheme with light and dark color scheme | ||
| PASS Color schemes changed to a bogus value and dark | ||
| PASS Element colors are correct in light color scheme with dark color scheme | ||
|
|
| @@ -0,0 +1,78 @@ | ||
| <!DOCTYPE html> | ||
|
|
||
| <!-- webkit-test-runner [ experimental:DarkModeCSSEnabled=true ] --> | ||
|
|
||
| <script src="../../resources/testharness.js"></script> | ||
| <script src="../../resources/testharnessreport.js"></script> | ||
|
|
||
| <style> | ||
| #test1 { | ||
| color: text; | ||
| } | ||
| </style> | ||
|
|
||
| <meta id="meta" name="color-scheme" content="light"> | ||
|
|
||
| <div id="test1"></div> | ||
|
|
||
| <script> | ||
| function test_prop(id, prop, expected) { | ||
| assert_equals(window.getComputedStyle(document.getElementById(id)).getPropertyValue(prop).trim(), expected); | ||
| } | ||
|
|
||
| function test_color_is_black(id) { | ||
| test_prop("test1", "color", "rgb(0, 0, 0)"); | ||
| } | ||
|
|
||
| test(function() { | ||
| test_color_is_black("test1"); | ||
| }, "Element colors are correct in light color scheme with only light color scheme"); | ||
|
|
||
| test(function() { | ||
| document.getElementById("meta").content = "light dark"; | ||
| }, "Color schemes changed to light and dark"); | ||
|
|
||
| test(function() { | ||
| test_color_is_black("test1"); | ||
| }, "Element colors are correct in light color scheme with light and dark color scheme"); | ||
|
|
||
| test(function() { | ||
| document.getElementById("meta").content = "dark"; | ||
| }, "Color schemes changed to dark"); | ||
|
|
||
| test(function() { | ||
| test_color_is_black("test1"); | ||
| }, "Element colors are correct in light color scheme with only dark color scheme"); | ||
|
|
||
| test(function() { | ||
| document.getElementById("meta").content = "light ,foo "; | ||
| }, "Color schemes changed to light and a bogus value"); | ||
|
|
||
| test(function() { | ||
| test_color_is_black("test1"); | ||
| }, "Element colors are correct in light color scheme with only light color scheme"); | ||
|
|
||
| test(function() { | ||
| document.getElementById("meta").content = ""; | ||
| }, "Color schemes changed to empty value"); | ||
|
|
||
| test(function() { | ||
| test_color_is_black("test1"); | ||
| }, "Element colors are correct in light color scheme with implicit light color scheme"); | ||
|
|
||
| test(function() { | ||
| document.getElementById("meta").content = " light, dark "; | ||
| }, "Color schemes changed to light and dark"); | ||
|
|
||
| test(function() { | ||
| test_color_is_black("test1"); | ||
| }, "Element colors are correct in light color scheme with light and dark color scheme"); | ||
|
|
||
| test(function() { | ||
| document.getElementById("meta").content = ", foo dark"; | ||
| }, "Color schemes changed to a bogus value and dark"); | ||
|
|
||
| test(function() { | ||
| test_color_is_black("test1"); | ||
| }, "Element colors are correct in light color scheme with dark color scheme"); | ||
| </script> |