LayoutTests/fast/html/imports/import-style-basic.html - Issue 143463011: [import] support document.stylesheets in imported documents.

Side by Side Diff: LayoutTests/fast/html/imports/import-style-basic.html

Issue 143463011: [import] support document.stylesheets in imported documents. (Closed) Base URL: svn://svn.chromium.org/blink/trunk

Patch Set: Landing Created 6 years, 11 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch | Annotate | Revision Log

OLD	NEW
1 <!DOCTYPE html>	1 <!DOCTYPE html>

2 <html>	2 <html>

3 <script src="../../../resources/js-test.js"></script>	3 <script src="../../../resources/js-test.js"></script>

4 <head>	4 <head>

5 <link id="importLink" rel="import" href="resources/style-basic-child.html">	5 <link id="importLink" rel="import" href="resources/style-basic-child.html">

6 <style>	6 <style>

7 .red-from-import {	7 .red-from-import {

8 color: white; // Overriding with white.	8 color: white; // Overriding with white.

9 };	9 };

10 </style>	10 </style>

11 </head>	11 </head>

12 <body>	12 <body>

13 <h1>These elements should be styled appropriately:</h1>	13 <h1>These elements should be styled appropriately:</h1>

14 <div id="testContainer">	14 <div id="testContainer">

15 <div id="shouldBeBlue" class="blue-from-import">Should be blue.</div>	15 <div id="shouldBeBlue" class="blue-from-import">Should be blue.</div>

16 <div id="shouldBeWhite" class="red-from-import">Should be white.</div>	16 <div id="shouldBeWhite" class="red-from-import">Should be white.</div>

17 <div id="shouldBeYellow" class="yellow-from-import">Should be yellow.</div>	17 <div id="shouldBeYellow" class="yellow-from-import">Should be yellow.</div>

18 <div id="shouldBeTeal" class="gray-from-subimport">Should be teal.</div>	18 <div id="shouldBeTeal" class="gray-from-subimport">Should be teal.</div>

19 <div id="shouldBeGreen" class="green-from-import">Should become green.</div>	19 <div id="shouldBeGreen" class="green-from-import">Should become green.</div>

20 <div id="shouldBeAqua" class="aqua-from-import">Should become aqua.</div>	20 <div id="shouldBeAqua" class="aqua-from-import">Should become aqua.</div>

21 </div>	21 </div>

22	22

23 <script>	23 <script>

24 window.jsTestIsAsync = true;	24 window.jsTestIsAsync = true;

25	25

26 // CSSOM contains master's sheets only.	26 // Master's CSSOM contains master's sheets only.

27 shouldBe("document.styleSheets.length", "2"); // Extra one comes from js-test.js	27 shouldBe("document.styleSheets.length", "2"); // Extra one comes from js-test.js

	28 // Import's CSS should have its own

	29 shouldBe("importLink.import.styleSheets.length", "1");

	30

28 // a trivial case	31 // a trivial case

29 shouldBeEqualToString("window.getComputedStyle(shouldBeBlue).color", "rgb(0, 0, 255)");	32 shouldBeEqualToString("window.getComputedStyle(shouldBeBlue).color", "rgb(0, 0, 255)");

30 // Nested case	33 // Nested case

31 shouldBeEqualToString("window.getComputedStyle(shouldBeYellow).color", "rgb(255, 255, 0)");	34 shouldBeEqualToString("window.getComputedStyle(shouldBeYellow).color", "rgb(255, 255, 0)");

32 // Overriding import from the master	35 // Overriding import from the master

33 shouldBeEqualToString("window.getComputedStyle(shouldBeWhite).color", "rgb(255, 255, 255)");	36 shouldBeEqualToString("window.getComputedStyle(shouldBeWhite).color", "rgb(255, 255, 255)");

34 // Overriding subimport from parent import	37 // Overriding subimport from parent import

35 shouldBeEqualToString("window.getComputedStyle(shouldBeTeal).color", "rgb(0, 128 , 128)");	38 shouldBeEqualToString("window.getComputedStyle(shouldBeTeal).color", "rgb(0, 128 , 128)");

36	39

37 // Dynamically adding	40 // Dynamically adding

38 shouldBeEqualToString("window.getComputedStyle(shouldBeGreen).color", "rgb(0, 0, 0)");	41 shouldBeEqualToString("window.getComputedStyle(shouldBeGreen).color", "rgb(0, 0, 0)");

39 var styleWithGreen = importLink.import.createElement("style");	42 var styleWithGreen = importLink.import.createElement("style");

40 styleWithGreen.innerHTML = ".green-from-import { color: green; }";	43 styleWithGreen.innerHTML = ".green-from-import { color: green; }";

41 importLink.import.head.appendChild(styleWithGreen);	44 importLink.import.head.appendChild(styleWithGreen);

42 shouldBeEqualToString("window.getComputedStyle(shouldBeGreen).color", "rgb(0, 12 8, 0)");	45 shouldBeEqualToString("window.getComputedStyle(shouldBeGreen).color", "rgb(0, 12 8, 0)");

	46 shouldBe("importLink.import.styleSheets.length", "2");

43	47

44 // Dyanically removing	48 // Dyanically removing

45 Array.prototype.forEach.call(importLink.import.querySelectorAll("style"), functi on(e) { e.remove(); });	49 Array.prototype.forEach.call(importLink.import.querySelectorAll("style"), functi on(e) { e.remove(); });

46 shouldBeEqualToString("window.getComputedStyle(shouldBeBlue).color", "rgb(0, 0, 0)");	50 shouldBeEqualToString("window.getComputedStyle(shouldBeBlue).color", "rgb(0, 0, 0)");

47 shouldBeEqualToString("window.getComputedStyle(shouldBeGreen).color", "rgb(0, 0, 0)");	51 shouldBeEqualToString("window.getComputedStyle(shouldBeGreen).color", "rgb(0, 0, 0)");

	52 shouldBe("importLink.import.styleSheets.length", "0");

48	53

49 // Dymically adding an import	54 // Dymically adding an import

50 var dynamicLink = document.createElement("link");	55 var dynamicLink = document.createElement("link");

51 dynamicLink.setAttribute("rel", "import");	56 dynamicLink.setAttribute("rel", "import");

	57 dynamicLink.id = "importLinkDynamic";

52 dynamicLink.setAttribute("href", "resources/style-basic-child-dynamic.html");	58 dynamicLink.setAttribute("href", "resources/style-basic-child-dynamic.html");

53 dynamicLink.onload = function() {	59 dynamicLink.onload = function() {

54 shouldBeEqualToString("window.getComputedStyle(shouldBeAqua).color", "rgb(0, 255, 255)");	60 shouldBeEqualToString("window.getComputedStyle(shouldBeAqua).color", "rgb(0, 255, 255)");

	61 shouldBe("importLinkDynamic.import.styleSheets.length", "1");

55 finishJSTest();	62 finishJSTest();

56 };	63 };

57	64

58 document.head.appendChild(dynamicLink);	65 document.head.appendChild(dynamicLink);

59	66

60 </script>	67 </script>

61 </body>	68 </body>

62 </html>	69 </html>

OLD	NEW

« no previous file with comments | « no previous file | LayoutTests/fast/html/imports/import-style-basic-expected.txt » ('j') | no next file with comments »