| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <meta charset="utf-8"> | 4 <meta charset="utf-8"> |
| 5 <script src="../js/resources/js-test-pre.js"></script> | 5 <script src="../js/resources/js-test-pre.js"></script> |
| 6 <script src="resources/helper.js"></script> | 6 <script src="resources/helper.js"></script> |
| 7 <style> | 7 <style> |
| 8 #article { | 8 #article { |
| 9 -webkit-flow-into: article; | 9 -webkit-flow-into: article; |
| 10 border: 2px solid black; | 10 border: 2px solid black; |
| 11 } | 11 } |
| 12 #region_1, #region_2{ | 12 #region_1, #region_2{ |
| 13 -webkit-flow-from: no_article; | 13 -webkit-flow-from: no_article; |
| 14 overflow:hidden; | 14 overflow: hidden; |
| 15 display:inline-block; | 15 display: inline-block; |
| 16 vertical-align:top; | 16 vertical-align: top; |
| 17 margin:10px; | 17 margin: 10px; |
| 18 } | 18 } |
| 19 .block { | 19 .block { |
| 20 display:block; | 20 display: block; |
| 21 } | 21 } |
| 22 #region_1, #region_2 { height:110px; width:200px} | 22 #region_1, #region_2 { height:110px; width:200px; border: 1px solid red;} |
| 23 </style> | 23 </style> |
| 24 </head> | 24 </head> |
| 25 <body> | 25 <body> |
| 26 <div id="article"> | 26 <div id="article"> |
| 27 <div> | 27 <div> |
| 28 <div id="content" style="height: 200px; background-color: green;"></div> | 28 <div id="content" style="height: 200px; background-color: green;"></div> |
| 29 </div> | 29 </div> |
| 30 </div> | 30 </div> |
| 31 | 31 |
| 32 <div id="region_1"></div> | 32 <div id="region_1"></div> |
| (...skipping 35 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 68 el.style.webkitFlowFrom = "article"; | 68 el.style.webkitFlowFrom = "article"; |
| 69 el = document.getElementById("region_2"); | 69 el = document.getElementById("region_2"); |
| 70 el.style.webkitFlowFrom = "article"; | 70 el.style.webkitFlowFrom = "article"; |
| 71 el = document.getElementById("article"); | 71 el = document.getElementById("article"); |
| 72 el.style.webkitFlowInto = "article"; | 72 el.style.webkitFlowInto = "article"; |
| 73 | 73 |
| 74 recreated = true; | 74 recreated = true; |
| 75 } | 75 } |
| 76 | 76 |
| 77 var updatedCount = 0; | 77 var updatedCount = 0; |
| 78 function finishTest() { |
| 79 shouldBe("updatedCount", "2"); |
| 80 finishJSTest(); |
| 81 } |
| 82 |
| 78 function flowThreadUpdated(event) { | 83 function flowThreadUpdated(event) { |
| 79 ++updatedCount; | 84 ++updatedCount; |
| 80 shouldBeEqualToString("event.target.name", "article"); | 85 shouldBeEqualToString("event.target.name", "article"); |
| 81 | 86 |
| 82 shouldBeGreaterThanOrEqual("2", "updatedCount"); | |
| 83 | |
| 84 if (updatedCount == 2) { | 87 if (updatedCount == 2) { |
| 85 shouldBeTrue("recreated"); | 88 shouldBeTrue("recreated"); |
| 86 » event.target.removeEventListener("webkitregionlayoutupdate", flowThreadU
pdated); | 89 event.target.removeEventListener("webkitregionoversetchange", flowThread
Updated); |
| 87 makeFlowNull(); | 90 makeFlowNull(); |
| 88 » finishJSTest(); | 91 setTimeout("finishTest()", 200); |
| 89 return; | 92 return; |
| 90 } | 93 } |
| 91 | 94 |
| 92 makeFlowNull(); | 95 makeFlowNull(); |
| 93 shouldBeFalse("recreated"); | 96 shouldBeFalse("recreated"); |
| 94 | 97 |
| 95 // Set a timeout so the event reference to the target is discarded | 98 // Set a timeout so the event reference to the target is discarded |
| 96 setTimeout(makeFlowCreated, 10); | 99 setTimeout(makeFlowCreated, 10); |
| 97 } | 100 } |
| 98 | 101 |
| 99 function startTest() { | 102 function startTest() { |
| 100 var flowThread = getFlowByName("article"); | 103 var flowThread = getFlowByName("article"); |
| 101 flowThread.addEventListener("webkitregionlayoutupdate", flowThreadUpdated); | 104 flowThread.addEventListener("webkitregionoversetchange", flowThreadUpdated); |
| 102 | 105 |
| 103 debug("Flow content"); | 106 debug("Flow content"); |
| 104 flowContent("article"); | 107 flowContent("article"); |
| 105 } | 108 } |
| 106 | 109 |
| 107 window.addEventListener("load", startTest); | 110 window.addEventListener("load", startTest); |
| 108 </script> | 111 </script> |
| 109 <script src="../js/resources/js-test-post.js"></script> | 112 <script src="../js/resources/js-test-post.js"></script> |
| 110 </body> | 113 </body> |
| 111 </html> | 114 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 17176018:
[CSS Regions] Add new regionOversetChange event (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master