Merge pull request 4GeeksAcademy#101 from josemoracard/jose2-04.1-combined-rules

changes in exercise 04.1-combined-rules

Author: tommygonzaleza

exercises/04.1-Combined-Rules/README.es.md

@@ -21,11 +21,17 @@ border: black 1px solid;
 
 1. Combina las 4 reglas de padding en una sola utilizando la regla `padding`.
 
-2. Combina todas las reglas de background, menos el `background-size`, en una sola línea usando la regla `background:`.
+2. Combina todas las reglas de background en una sola línea usando la regla `background`.
 
-*El `background-size` no se puede combinar, los navegadores aún no lo admiten.*
+*Las propiedades `background-position` y `background-size` pueden usar el mismo tipo de datos por lo que entrarán en conflicto, así que en vez de separar estas propiedades con un **espacio**, debes separarlas con una barra `/` de esta forma:*
+
+```css
+background: 50px / cover
+```
+
+Donde el valor de la izquierda de la barra `/` es la propiedad `background-position` y la derecha es el `background-size`.
 
 ## 💡 Pista:
 
-- Cómo usar el background-size: http://lmgtfy.com/?q=css+background
-- Cómo usar el padding: http://lmgtfy.com/?q=css+padding
+- Cómo usar el background: https://www.w3schools.com/cssref/css3_pr_background.php
+- Cómo usar el padding: https://www.w3schools.com/css/css_padding.asp

exercises/04.1-Combined-Rules/README.md

@@ -1,7 +1,3 @@
----
-tutorial: "https://youtu.be/watch?v=uQS5QeEE-B4"
----
-
 # `04.1` Combined Rules
 
 CSS files take up space on your server and also take time to download (like everything); it is yet another text document that the browser has to download before rendering the page, which is why it's important to keep the CSS document as small as possible.
@@ -22,14 +18,20 @@ border: black 1px solid;
 
 ## 📝 Instructions:
 
-1. Combine the 4 padding rules into just one using the `padding` rule.
+1. Combine the 4 padding rules into only one using the `padding` rule.
+
+2. Combine all background rules into only one using the `background` rule.
+
+*The `background-position` and the `background-size` properties will conflict because they can handle the same type of values, so instead of separating these properties with a `space` you must separate them with a forward slash `/` as follows:*
 
-2. Combine all background rules, but the `background-size`, into just one line using the `background:` rule.
+```css
+background: 50px / cover
+```
 
-*The `background-size` cannot be combined, the browsers don't support it yet.*
+Where the left side value of the forward slash `/` is the `background-position` rule and the right value is the `background-size` rule.
 
 ## 💡 Hint:
 
-- How to use the background-size: http://lmgtfy.com/?q=css+background
+- How to use the background: https://www.w3schools.com/cssref/css3_pr_background.php
 
-- How to use the padding: http://lmgtfy.com/?q=css+padding
+- How to use the padding: https://www.w3schools.com/css/css_padding.asp

exercises/04.1-Combined-Rules/solution.hide.css

@@ -3,6 +3,7 @@
 	height: 50px;
 	padding: 10px 190px 50px 30px;
 
-    background: rgb(189, 189, 189) url(https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/3a2d1dd03f58167a5a4894155af2d3aa4d41d647/.learn/assets/baby.jpg?raw=true) no-repeat 100px;
-	background-size: contain;
-}
+	background: rgb(189, 189, 189)
+		url(https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/3a2d1dd03f58167a5a4894155af2d3aa4d41d647/.learn/assets/baby.jpg?raw=true)
+		no-repeat 100px / contain;
+}

exercises/04.1-Combined-Rules/tests.js

@@ -55,23 +55,6 @@ describe("All the styles should be applied", ()=> {
     expect(orangeHoverSelector).toBe('50px');
   });
 
-  test("The background-size should be 'contain'", ()=> {
-    document.querySelector(
-      "head"
-    ).innerHTML = `<style>${css.toString()}</style>`;
-
-    let cssArray = document.styleSheets[0].cssRules;
-    let orangeHoverSelector = "";
-
-    for (let i = 0; i < cssArray.length; i++) {
-      if (cssArray[i].selectorText === ".myBox") {
-        orangeHoverSelector = cssArray[i].style['background-size'];
-      }
-    }
-
-    expect(orangeHoverSelector).toBe('contain');
-  });
-
   test("The background should include the shorthand property", ()=> {
     document.querySelector(
       "head"