Chromium Code Reviews Chromium Code Reviews
Issue 2006633002:
Rewrote :empty tests to avoid list-item bug. (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master| Index: third_party/WebKit/LayoutTests/fast/css/empty-pseudo-class.html |
| diff --git a/third_party/WebKit/LayoutTests/fast/css/empty-pseudo-class.html b/third_party/WebKit/LayoutTests/fast/css/empty-pseudo-class.html |
| index ebb10968ba649ad61ee4614297d7647b6ee115d4..f8180b925b19a9d9f2baccfc29109f3bbae2ad80 100644 |
| --- a/third_party/WebKit/LayoutTests/fast/css/empty-pseudo-class.html |
| +++ b/third_party/WebKit/LayoutTests/fast/css/empty-pseudo-class.html |
| @@ -1,149 +1,27 @@ |
| -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
| - |
| -<html> |
| - <head> |
| - <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> |
| - <title>:empty</title> |
| - |
| - <style type='text/css'> |
| - <!-- |
| - |
| - body { background: #fff; color: 000; font-family: Arial, Helvetica, sans-serif; } |
| - pre { background: #fff; padding: 0.5em; } |
| - li { background: #aaa; padding: 1em; width: 80%; margin: 0 0 3em; } |
| - .test { display: block; padding: 0.75em; } |
| - .base, .defaultgreen { background-color: #090; } |
| - .defaultred { background-color: #900; } |
| - |
| - .defaultred :empty { |
| - background-color: #090; |
| - } |
| - |
| - .defaultgreen :empty { |
| - background-color: #900; |
| - } |
| - |
| - blockquote { |
| - margin: 0; |
| - } |
| - |
| - --> |
| - </style> |
| - </head> |
| - |
| - <body> |
| - <p>This page is part of the <a href="http://www.css3.info">CSS3.info</a> <a href="http://www.css3.info/selectors-test/">CSS selectors test</a>. See more info on <a href="http://www.css3.info/preview/attribute-selectors.html">CSS3 selectors</a>.</p> |
| - |
| - <div class='base'></div> |
| - |
| - <ol> |
| - <li> |
| - |
| - <div class='defaultred'> |
| - <div class='test required'></div> |
| - </div> |
| - |
| - <pre>:empty { |
| -} |
| - |
| -<div></div></pre> |
| - |
| - <p> |
| - The CSS selector should match the div element, because it is empty |
| - </p> |
| - </li> |
| - |
| - <li> |
| - <div class='defaultred'> |
| - <div class='test'><!-- Just a comment --></div> |
| - </div> |
| - |
| - <pre>:empty { |
| -} |
| - |
| -<div><!-- Just a comment --></div></pre> |
| - |
| - <p> |
| - The CSS selector should match the div element, because it is empty |
| - </p> |
| - </li> |
| - |
| - <li> |
| - <div class='defaultgreen'> |
| - <div class='test default'> </div> |
| - </div> |
| - |
| - <pre>:empty { |
| -} |
| - |
| -<div> </div></pre> |
| - |
| - <p> |
| - The CSS selector should not match the div element, because it is not empty |
| - </p> |
| - </li> |
| - |
| - <li> |
| - <div class='defaultgreen'> |
| - <div class='test default'> |
| +<!DOCTYPE html> |
| +<script src="../../resources/js-test.js"></script> |
| +<style> |
| + .empty:empty, .not-empty { color: green } |
|
mstensho (USE GERRIT)
2016/05/24 10:37:54
For the sake of consistency, it would be nice if e
|
| + .not-empty:empty, .empty:not(:empty) { color: red } |
| +</style> |
| +<div id="sandbox"> |
| + <div class="empty"></div> |
| + <div class="empty"><!-- Just a comment --></div> |
| + <div class="not-empty"> </div> |
| + <div class="not-empty"> |
| . |
| </div> |
| - </div> |
| - |
| - <pre>:empty { |
| -} |
| - |
| -<div> |
| - How about regular text... |
| -</div></pre> |
| - |
| - <p> |
| - The CSS selector should not match the div element, because it is not empty |
| - </p> |
| - </li> |
| - |
| - <li> |
| - <div class='defaultgreen'> |
| - <div class='test default required'><blockquote></blockquote></div> |
| - </div> |
| - |
| - <pre>:empty { |
| -} |
| - |
| -<div><blockquote></blockquote></div></pre> |
| - |
| - <p> |
| - The CSS selector should not match the div element, because it is not empty |
| - </p> |
| - </li> |
| - |
| - <li> |
| - <div class='defaultgreen'> |
| - <div id='appendChild' class='test default'></div> |
| - </div> |
| - |
| - <script type="text/javascript"> |
| - <!-- |
| - |
| - var ib = document.getElementById('appendChild'); |
| - ib.appendChild(document.createElement("div")); |
| - |
| - //--> |
| - </script> |
| - |
| - <pre>:empty { |
| -} |
| + <div class="not-empty"><blockquote></blockquote></div> |
| + <div id="appendParent" class="not-empty"></div> |
| +</div> |
| +<script> |
| + description(":empty selector tests"); |
| -<div id='appendChild'></div> |
| + appendParent.appendChild(document.createElement("div")); |
| -var ib = document.getElementById('appendChild'); |
| -ib.appendChild(document.createElement("div"));</pre> |
| + var green = "rgb(0, 128, 0)"; |
| - <p> |
| - The CSS selector should not match the orignal div element, because it will not be empty |
| - anymore after the Javascript code appends a child element to it. |
| - </p> |
| - </li> |
| - </ol> |
| - </body> |
| -</html> |
| + var testDivs = sandbox.querySelectorAll("#sandbox > div"); |
| + for (var i = 0; i < testDivs.length; i++) |
| + shouldBe("getComputedStyle(testDivs["+i+"]).color", "green"); |
| +</script> |
