| OLD | NEW |
|---|
| (Empty) | |
| 1 <!doctype html> |
| 2 <meta charset="utf-8"> |
| 3 <title>Dynamic changes between display: contents and display: none are handled c
orrectly</title> |
| 4 <link rel="help" href="https://drafts.csswg.org/css-display/#box-generation"> |
| 5 <link rel="author" href="mailto:ecobos@igalia.com" title="Emilio Cobos Álvarez"> |
| 6 <style> |
| 7 html, body { |
| 8 padding: 0; |
| 9 margin: 0; |
| 10 } |
| 11 iframe { |
| 12 border: 0; |
| 13 width: 100%; |
| 14 } |
| 15 </style> |
| 16 <iframe seamless src="resources/display-contents-acid.html"></iframe> |
| 17 <script> |
| 18 var getRandomDisplayValue = function() { |
| 19 var DISPLAY_VALUES = [ |
| 20 "none", |
| 21 "block", |
| 22 "inline", |
| 23 "inline-block", |
| 24 "flex", |
| 25 "inline-flex", |
| 26 "table", |
| 27 "table-column-group", |
| 28 "grid", |
| 29 "inline-grid", |
| 30 "contents", |
| 31 ]; |
| 32 |
| 33 return DISPLAY_VALUES[Math.floor(Math.random() * DISPLAY_VALUES.length)]; |
| 34 } |
| 35 |
| 36 document.querySelector('iframe').addEventListener('load', function() { |
| 37 var document = this.contentDocument; |
| 38 var window = this.contentWindow; |
| 39 var elements = []; |
| 40 |
| 41 document.body.offsetHeight; |
| 42 |
| 43 // NOTE: Doing qsa('*') and getComputedStyle is just for the test's |
| 44 // shake, since it's easier to mess it up when getComputedStyle is involved. |
| 45 var all = document.querySelectorAll('*'); |
| 46 for (var i = 0; i < all.length; ++i) { |
| 47 if (window.getComputedStyle(all[i]).display === "contents") { |
| 48 all[i].style.display = getRandomDisplayValue(); |
| 49 elements.push(all[i]); |
| 50 } |
| 51 } |
| 52 |
| 53 document.body.offsetHeight; |
| 54 |
| 55 for (var i = 0; i < elements.length; ++i) |
| 56 elements[i].style.display = 'contents'; |
| 57 }); |
| 58 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2450093005:
Support display: contents for elements, first-line and first-letter pseudos. (Closed)
